Merge branch 'dev' into demoDev

refactor: clean up layout components and improve footer styling
improved error logging for the api route to return or take loans
2026-02-20 16:33:54 +01:00 · 2026-02-20 16:30:20 +01:00 · 2026-02-20 16:22:13 +01:00 · 2026-02-20 12:14:56 +01:00 · 2026-02-20 12:02:33 +01:00 · 2026-02-14 19:01:59 +01:00
18 changed files with 374 additions and 502 deletions
--- a/FrontendV2/src/App.tsx
+++ b/FrontendV2/src/App.tsx
@@ -12,7 +12,7 @@ import { triggerLogoutAtom } from "@/states/Atoms";
 import { MyLoansPage } from "./pages/MyLoansPage";
 import Landingpage from "./pages/Landingpage";
 import { changeLanguage } from "i18next";
-import { Box, Flex } from "@chakra-ui/react";
+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";
@@ -72,8 +72,8 @@ function App() {

  return (
    <QueryClientProvider client={queryClient}>
-      <Flex direction="column" minH="100vh">
-        <Box as="main" flex="1">
+      <Flex direction="column" minH="100dvh">
+        <Flex as="main" flex="1" direction="column">
          <UserContext.Provider value={user}>
            <BrowserRouter>
              <Routes>
@@ -88,7 +88,7 @@ function App() {
              </Routes>
            </BrowserRouter>
          </UserContext.Provider>
-        </Box>
+        </Flex>
        <Footer />
      </Flex>
    </QueryClientProvider>
--- a/FrontendV2/src/components/Changelog.json
+++ b/FrontendV2/src/components/Changelog.json
@@ -1,50 +0,0 @@
-{
-    "title": "Changelog",
-    "items": [
-        {
-            "version": "v2.1.0",
-            "date": "2025-10-24",
-            "changes": [
-                {
-                    "type": "Hinzugefügt",
-                    "text": [
-                        "Neue Changelog-Komponente mit zentriertem Layout.",
-                        "Unterstützung für mehrsprachige Einträge (Englisch und Deutsch)."
-                    ]
-                },
-                {
-                    "type": "Verbessert",
-                    "text": [
-                        "Performance-Optimierungen beim Laden der Listenansichten.",
-                        "Verbesserte Barrierefreiheit durch ARIA-Attribute."
-                    ]
-                },
-                {
-                    "type": "Behoben",
-                    "text": [
-                        "Fehler bei der Datumsauswahl im Safari-Browser.",
-                        "Anzeigeprobleme bei hohen DPI-Einstellungen."
-                    ]
-                }
-            ]
-        },
-        {
-            "version": "v2.0.3",
-            "date": "2025-10-10",
-            "changes": [
-                {
-                    "type": "Geändert",
-                    "text": [
-                        "Standard-Timeout für API-Requests auf 10s erhöht."
-                    ]
-                },
-                {
-                    "type": "Sicherheit",
-                    "text": [
-                        "Abhängigkeiten aktualisiert (kritische CVEs behoben)."
-                    ]
-                }
-            ]
-        }
-    ]
-}
--- a/FrontendV2/src/components/Changelog.tsx
+++ b/FrontendV2/src/components/Changelog.tsx
@@ -1,263 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-
-const STORAGE_KEY = "changelog";
-
-type ChangeType =
-  | "Hinzugefügt"
-  | "Geändert"
-  | "Behoben"
-  | "Entfernt"
-  | "Verbessert"
-  | "Sicherheit"
-  | "Veraltet"
-  | string;
-
-type ChangeEntry = {
-  type: ChangeType;
-  text: string | string[]; // aus localStorage kann es eine Liste sein
-};
-
-type ChangelogItem = {
-  version?: string;
-  date: string;
-  changes: ChangeEntry[];
-};
-
-type StoredChangelog = {
-  title: string;
-  items: ChangelogItem[];
-};
-
-const typeStyles: Record<string, string> = {
-  Hinzugefügt:
-    "bg-emerald-500/15 text-emerald-300 ring-1 ring-inset ring-emerald-500/30",
-  Geändert: "bg-blue-500/15 text-blue-300 ring-1 ring-inset ring-blue-500/30",
-  Behoben: "bg-amber-500/15 text-amber-300 ring-1 ring-inset ring-amber-500/30",
-  Entfernt: "bg-rose-500/15 text-rose-300 ring-1 ring-inset ring-rose-500/30",
-  Verbessert:
-    "bg-indigo-500/15 text-indigo-300 ring-1 ring-inset ring-indigo-500/30",
-  Sicherheit: "bg-red-500/15 text-red-300 ring-1 ring-inset ring-red-500/30",
-  Veraltet: "bg-zinc-700/30 text-zinc-300 ring-1 ring-inset ring-zinc-600/40",
-};
-
-export default function Changelog() {
-  const [open, setOpen] = useState(true);
-  const [mounted, setMounted] = useState(false);
-  const [data, setData] = useState<StoredChangelog | null>(null);
-  const [error, setError] = useState<string | null>(null);
-  const cardRef = useRef<HTMLDivElement | null>(null);
-
-  useEffect(() => setMounted(true), []);
-
-  const loadFromStorage = () => {
-    try {
-      setError(null);
-      const raw =
-        typeof window !== "undefined"
-          ? localStorage.getItem(STORAGE_KEY)
-          : null;
-      if (!raw) {
-        setData(null);
-        return;
-      }
-      const parsed = JSON.parse(raw) as StoredChangelog;
-      if (!parsed || !Array.isArray(parsed.items)) {
-        throw new Error("Ungültiges Format");
-      }
-      setData(parsed);
-    } catch (e) {
-      setError("Changelog konnte nicht aus localStorage geladen werden.");
-      setData(null);
-    }
-  };
-
-  useEffect(() => {
-    loadFromStorage();
-  }, []);
-
-  useEffect(() => {
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape") setOpen(false);
-    };
-    const onClickOutside = (e: MouseEvent) => {
-      if (cardRef.current && !cardRef.current.contains(e.target as Node)) {
-        setOpen(false);
-      }
-    };
-    const onStorage = (e: StorageEvent) => {
-      if (e.key === STORAGE_KEY) loadFromStorage();
-    };
-    window.addEventListener("keydown", onKey);
-    document.addEventListener("mousedown", onClickOutside);
-    window.addEventListener("storage", onStorage);
-    return () => {
-      window.removeEventListener("keydown", onKey);
-      document.removeEventListener("mousedown", onClickOutside);
-      window.removeEventListener("storage", onStorage);
-    };
-  }, []);
-
-  if (!open) return null;
-
-  const title = data?.title ?? "Changelog";
-  const items = data?.items ?? [];
-
-  return (
-    <div className="min-h-screen bg-zinc-950 bg-[radial-gradient(60%_60%_at_50%_0%,rgba(99,102,241,0.12),rgba(24,24,27,0))] flex items-center justify-center p-6">
-      <div
-        ref={cardRef}
-        className={[
-          "relative w-full max-w-6xl transition-all duration-300 ease-out",
-          mounted
-            ? "opacity-100 translate-y-0 scale-100"
-            : "opacity-0 translate-y-1 scale-[0.99]",
-        ].join(" ")}
-        aria-live="polite"
-      >
-        {/* Gradient border wrapper */}
-        <div className="rounded-2xl p-[1px] bg-gradient-to-b from-zinc-700/60 via-zinc-700/20 to-zinc-800/60 shadow-2xl">
-          {/* Card */}
-          <div className="relative rounded-[calc(theme(borderRadius.2xl)-1px)] border border-zinc-800/70 bg-zinc-900/70 supports-[backdrop-filter]:bg-zinc-900/60 backdrop-blur-xl ring-1 ring-white/10">
-            {/* Accent top line */}
-            <div className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-indigo-500/40 to-transparent" />
-
-            {/* Close button */}
-            <button
-              aria-label="Changelog schließen"
-              onClick={() => setOpen(false)}
-              className="absolute right-3 top-3 inline-flex h-9 w-9 items-center justify-center rounded-md text-zinc-400 hover:text-zinc-100 hover:bg-zinc-800/60 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/70 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-900 transition"
-            >
-              <svg
-                viewBox="0 0 24 24"
-                className="h-5 w-5"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth={1.8}
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              >
-                <path d="M6 6l12 12M18 6L6 18" />
-              </svg>
-            </button>
-
-            {/* Header */}
-            <header className="px-10 pt-8 pb-6 border-b border-zinc-800/70">
-              <div className="flex items-center gap-3">
-                <div className="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-indigo-500/15 text-indigo-300 ring-1 ring-inset ring-indigo-500/30">
-                  <svg
-                    viewBox="0 0 24 24"
-                    className="h-5 w-5"
-                    fill="none"
-                    stroke="currentColor"
-                    strokeWidth={1.6}
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  >
-                    <path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1" />
-                  </svg>
-                </div>
-                <div>
-                  <h1 className="text-[30px] leading-8 font-semibold text-zinc-100 tracking-[-0.01em]">
-                    {title}
-                  </h1>
-                  <p className="text-sm text-zinc-400">
-                    Aktuelle Änderungen und Updates
-                  </p>
-                </div>
-              </div>
-            </header>
-
-            {/* Body */}
-            <div className="relative max-h-[78vh] overflow-y-auto">
-              <div className="absolute pointer-events-none inset-x-0 top-0 h-8 bg-gradient-to-b from-zinc-900/70 to-transparent" />
-              <div className="absolute pointer-events-none inset-x-0 bottom-0 h-10 bg-gradient-to-t from-zinc-900/80 to-transparent" />
-
-              {error && (
-                <div className="px-10 py-8">
-                  <div className="rounded-lg border border-red-900/40 bg-red-900/10 px-4 py-3 text-sm text-red-300">
-                    {error}
-                  </div>
-                </div>
-              )}
-
-              {!error && items.length === 0 && (
-                <div className="px-10 py-16 text-center">
-                  <p className="text-zinc-400">
-                    Kein Changelog im localStorage gefunden (Key: {STORAGE_KEY}
-                    ).
-                  </p>
-                </div>
-              )}
-
-              <ul className="divide-y divide-zinc-800/70">
-                {items.map((entry, idx) => (
-                  <li
-                    key={`${entry.version ?? entry.date}-${idx}`}
-                    className="px-10 py-8"
-                  >
-                    {/* Kopfzeile je Release */}
-                    <div className="flex flex-wrap items-baseline gap-x-4 gap-y-2">
-                      {entry.version && (
-                        <span className="inline-flex items-center rounded-md bg-gradient-to-b from-zinc-100 to-zinc-300 text-zinc-900 px-3 py-0.5 text-sm font-semibold shadow-sm">
-                          {entry.version}
-                        </span>
-                      )}
-                      <time
-                        className="text-sm text-zinc-400"
-                        dateTime={entry.date}
-                      >
-                        {new Date(entry.date).toLocaleDateString("de-DE", {
-                          year: "numeric",
-                          month: "long",
-                          day: "2-digit",
-                        })}
-                      </time>
-                    </div>
-
-                    {/* Zweispaltiges Layout: Typ links, Text rechts (mit schöner Leselänge) */}
-                    <dl
-                      role="list"
-                      className="mt-6 grid grid-cols-1 gap-x-8 gap-y-3 md:grid-cols-[max-content_1fr]"
-                    >
-                      {entry.changes.map((c, i) => (
-                        <div key={i} className="contents">
-                          <dt className="md:w-44 md:justify-end md:text-right">
-                            <span
-                              className={`inline-flex items-center rounded-md px-2 py-0.5 text-[11px] font-medium ${
-                                typeStyles[c.type] ??
-                                "bg-zinc-700/30 text-zinc-300 ring-1 ring-inset ring-zinc-600/40"
-                              }`}
-                            >
-                              {c.type}
-                            </span>
-                          </dt>
-
-                          <dd className="max-w-[74ch] text-[15px] leading-7 text-zinc-200 tracking-[0.005em]">
-                            {Array.isArray(c.text) ? (
-                              <ul className="ml-4 list-disc marker:text-zinc-500/70 space-y-1.5">
-                                {c.text.map((t, k) => (
-                                  <li key={k} className="break-words">
-                                    {t}
-                                  </li>
-                                ))}
-                              </ul>
-                            ) : (
-                              <p className="break-words">{c.text}</p>
-                            )}
-                          </dd>
-                        </div>
-                      ))}
-                    </dl>
-                  </li>
-                ))}
-              </ul>
-            </div>
-
-            {/* soft bottom glow */}
-            <div className="pointer-events-none absolute inset-x-12 -bottom-4 h-8 blur-2xl bg-indigo-600/20 rounded-full" />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
--- a/FrontendV2/src/components/footer/Footer.tsx
+++ b/FrontendV2/src/components/footer/Footer.tsx
@@ -9,10 +9,9 @@ export const Footer = () => {
      as="footer"
      py={4}
      textAlign="center"
-      position="fixed"
-      bottom="0"
-      left="0"
-      right="0"
+      width="100%"
+      flexShrink={0}
+      fontSize="sm"
    >
      Made with ❤️ by Theis Gaedigk - Class of 2019 at MCS-Bochum
      <br />
--- a/FrontendV2/src/pages/LoginPage.tsx
+++ b/FrontendV2/src/pages/LoginPage.tsx
@@ -7,7 +7,6 @@ import Cookies from "js-cookie";
 import { Navigate, useNavigate, useLocation } from "react-router-dom";
 import { PasswordInput } from "@/components/ui/password-input";
 import { useTranslation } from "react-i18next";
-import { Footer } from "@/components/footer/Footer";
 import { API_BASE } from "@/config/api.config";

 export const LoginPage = () => {
@@ -71,7 +70,7 @@ export const LoginPage = () => {
  }

  return (
-    <div className="min-h-screen flex items-center justify-center p-4">
+    <div className="flex flex-1 items-center justify-center p-4">
      <form onSubmit={(e) => e.preventDefault()}>
        <Card.Root maxW="sm">
          <Card.Header>
@@ -115,7 +114,6 @@ export const LoginPage = () => {
          </Card.Footer>
        </Card.Root>
      </form>
-      <Footer />
    </div>
  );
 };
--- a/FrontendV2/src/utils/Fetcher.ts
+++ b/FrontendV2/src/utils/Fetcher.ts
@@ -3,7 +3,7 @@ import { API_BASE } from "@/config/api.config";

 export const getBorrowableItems = async (
  startDate: string,
-  endDate: string
+  endDate: string,
 ) => {
  try {
    const response = await fetch(`${API_BASE}/api/loans/borrowable-items`, {
@@ -22,7 +22,7 @@ export const getBorrowableItems = async (
        status: "error",
        title: "Server error",
        description:
-          "Ein Fehler ist auf dem Server aufgetreten. Manchmal hilft es, die Seite neu zu laden.",
+          "An error occurred on the server. Sometimes reloading the page helps. Otherwise, please contact the administrator.",
      };
    }

@@ -48,7 +48,7 @@ export const createLoan = async (
  itemIds: number[],
  startDate: string,
  endDate: string,
-  note: string | null
+  note: string | null,
 ) => {
  const response = await fetch(`${API_BASE}/api/loans/createLoan`, {
    method: "POST",
--- a/FrontendV2/src/utils/i18n/locales/de/de.json
+++ b/FrontendV2/src/utils/i18n/locales/de/de.json
@@ -84,6 +84,7 @@
    "contact": "Kontakt",
    "take": "Abholen",
    "return": "Zurückgeben",
+    "serverError": "Serverfehler. Bitte versuchen Sie es später erneut, oder laden Sie die Seite neu.",
    "take-loan-success": "Ausleihe erfolgreich abgeholt",
    "return-loan-success": "Ausleihe erfolgreich zurückgegeben",
    "network-error": "Netzwerkfehler. Kontaktieren Sie den Administrator.",
--- a/FrontendV2/src/utils/i18n/locales/en/en.json
+++ b/FrontendV2/src/utils/i18n/locales/en/en.json
@@ -82,6 +82,7 @@
    "contactPage_messagePlaceholder": "Enter your message here...",
    "contactPage_messageErrorText": "This field cannot be empty.",
    "contact": "Contact",
+    "serverError": "Server error. Please try again later, or refresh the page.",
    "take": "Take",
    "return": "Return",
    "take-loan-success": "Loan taken successfully",
--- a/admin/src/Layout/Login.tsx
+++ b/admin/src/Layout/Login.tsx
@@ -3,6 +3,7 @@ import { useState } from "react";
 import { loginFunc } from "@/utils/loginUser";
 import MyAlert from "../components/myChakra/MyAlert";
 import { Button, Card, Field, Input, Stack } from "@chakra-ui/react";
+import { PasswordInput } from "@/components/ui/password-input";

 const Login: React.FC<{ onSuccess: () => void }> = ({ onSuccess }) => {
  const [username, setUsername] = useState("");
@@ -43,8 +44,7 @@ const Login: React.FC<{ onSuccess: () => void }> = ({ onSuccess }) => {
              </Field.Root>
              <Field.Root>
                <Field.Label>password</Field.Label>
-                <Input
-                  type="password"
+                <PasswordInput
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                />
--- a/admin/src/components/ui/password-input.tsx
+++ b/admin/src/components/ui/password-input.tsx
@@ -0,0 +1,159 @@
+"use client"
+
+import type {
+  ButtonProps,
+  GroupProps,
+  InputProps,
+  StackProps,
+} from "@chakra-ui/react"
+import {
+  Box,
+  HStack,
+  IconButton,
+  Input,
+  InputGroup,
+  Stack,
+  mergeRefs,
+  useControllableState,
+} from "@chakra-ui/react"
+import * as React from "react"
+import { LuEye, LuEyeOff } from "react-icons/lu"
+
+export interface PasswordVisibilityProps {
+  /**
+   * The default visibility state of the password input.
+   */
+  defaultVisible?: boolean
+  /**
+   * The controlled visibility state of the password input.
+   */
+  visible?: boolean
+  /**
+   * Callback invoked when the visibility state changes.
+   */
+  onVisibleChange?: (visible: boolean) => void
+  /**
+   * Custom icons for the visibility toggle button.
+   */
+  visibilityIcon?: { on: React.ReactNode; off: React.ReactNode }
+}
+
+export interface PasswordInputProps
+  extends InputProps,
+    PasswordVisibilityProps {
+  rootProps?: GroupProps
+}
+
+export const PasswordInput = React.forwardRef<
+  HTMLInputElement,
+  PasswordInputProps
+>(function PasswordInput(props, ref) {
+  const {
+    rootProps,
+    defaultVisible,
+    visible: visibleProp,
+    onVisibleChange,
+    visibilityIcon = { on: <LuEye />, off: <LuEyeOff /> },
+    ...rest
+  } = props
+
+  const [visible, setVisible] = useControllableState({
+    value: visibleProp,
+    defaultValue: defaultVisible || false,
+    onChange: onVisibleChange,
+  })
+
+  const inputRef = React.useRef<HTMLInputElement>(null)
+
+  return (
+    <InputGroup
+      endElement={
+        <VisibilityTrigger
+          disabled={rest.disabled}
+          onPointerDown={(e) => {
+            if (rest.disabled) return
+            if (e.button !== 0) return
+            e.preventDefault()
+            setVisible(!visible)
+          }}
+        >
+          {visible ? visibilityIcon.off : visibilityIcon.on}
+        </VisibilityTrigger>
+      }
+      {...rootProps}
+    >
+      <Input
+        {...rest}
+        ref={mergeRefs(ref, inputRef)}
+        type={visible ? "text" : "password"}
+      />
+    </InputGroup>
+  )
+})
+
+const VisibilityTrigger = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  function VisibilityTrigger(props, ref) {
+    return (
+      <IconButton
+        tabIndex={-1}
+        ref={ref}
+        me="-2"
+        aspectRatio="square"
+        size="sm"
+        variant="ghost"
+        height="calc(100% - {spacing.2})"
+        aria-label="Toggle password visibility"
+        {...props}
+      />
+    )
+  },
+)
+
+interface PasswordStrengthMeterProps extends StackProps {
+  max?: number
+  value: number
+}
+
+export const PasswordStrengthMeter = React.forwardRef<
+  HTMLDivElement,
+  PasswordStrengthMeterProps
+>(function PasswordStrengthMeter(props, ref) {
+  const { max = 4, value, ...rest } = props
+
+  const percent = (value / max) * 100
+  const { label, colorPalette } = getColorPalette(percent)
+
+  return (
+    <Stack align="flex-end" gap="1" ref={ref} {...rest}>
+      <HStack width="full" {...rest}>
+        {Array.from({ length: max }).map((_, index) => (
+          <Box
+            key={index}
+            height="1"
+            flex="1"
+            rounded="sm"
+            data-selected={index < value ? "" : undefined}
+            layerStyle="fill.subtle"
+            colorPalette="gray"
+            _selected={{
+              colorPalette,
+              layerStyle: "fill.solid",
+            }}
+          />
+        ))}
+      </HStack>
+      {label && <HStack textStyle="xs">{label}</HStack>}
+    </Stack>
+  )
+})
+
+function getColorPalette(percent: number) {
+  switch (true) {
+    case percent < 33:
+      return { label: "Low", colorPalette: "red" }
+    case percent < 66:
+      return { label: "Medium", colorPalette: "orange" }
+    default:
+      return { label: "High", colorPalette: "green" }
+  }
+}
--- a/admin/tsconfig.app.json
+++ b/admin/tsconfig.app.json
@@ -1,10 +1,11 @@
 {
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "target": "ESNext",
+    "target": "ES2022",
    "useDefineForClassFields": true,
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "module": "ESNext",
+    "types": ["vite/client"],
    "skipLibCheck": true,

    /* Bundler mode */
@@ -23,13 +24,10 @@
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true,

-    /* Chakra / Pfad Aliases */
-    "baseUrl": ".",
+    /* Path aliases */
    "paths": {
      "@/*": ["./src/*"]
-    },
-
-    "forceConsistentCasingInFileNames": true
+    }
  },
  "include": ["src"]
 }
--- a/backendV2/info.json
+++ b/backendV2/info.json
@@ -1,11 +1,11 @@
 {
    "backend-info": {
-        "version": "v2.1 (dev)"
+        "version": "v2.1 (demo)"
    },
    "frontend-info": {
-        "version": "v2.1 (dev)"
+        "version": "v2.1 (demo)"
    },
    "admin-panel-info": {
-        "version": "v1.3.2 (dev)"
+        "version": "v1.3.2 (demo)"
    }
 }
--- a/backendV2/routes/api/api.database.js
+++ b/backendV2/routes/api/api.database.js
@@ -22,7 +22,7 @@ export const getItemsFromDatabaseV2 = async () => {
 export const getLoanByCodeV2 = async (loan_code) => {
  const [result] = await pool.query(
    "SELECT username, returned_date, take_date, lockers FROM loans WHERE loan_code = ?;",
-    [loan_code]
+    [loan_code],
  );
  if (result.length > 0) {
    return { success: true, data: result[0] };
@@ -33,7 +33,7 @@ export const getLoanByCodeV2 = async (loan_code) => {
 export const changeInSafeStateV2 = async (itemId) => {
  const [result] = await pool.query(
    "UPDATE items SET in_safe = NOT in_safe WHERE id = ?",
-    [itemId]
+    [itemId],
  );
  if (result.affectedRows > 0) {
    return { success: true };
@@ -42,50 +42,62 @@ export const changeInSafeStateV2 = async (itemId) => {
 };

 export const setReturnDateV2 = async (loanCode) => {
+  try {
    const [items] = await pool.query(
-    "SELECT loaned_items_id FROM loans WHERE loan_code = ?",
-    [loanCode]
+      "SELECT loaned_items_id, username FROM loans WHERE loan_code = ?",
+      [loanCode],
    );

-  const [owner] = await pool.query(
-    "SELECT username FROM loans WHERE loan_code = ?",
-    [loanCode]
-  );
-
-  if (items.length === 0) return { success: false };
+    if (items.length === 0)
+      return { success: false, message: "No items found for loan" };

    const itemIds = Array.isArray(items[0].loaned_items_id)
      ? items[0].loaned_items_id
      : JSON.parse(items[0].loaned_items_id || "[]");

-  const [setItemStates] = await pool.query(
-    "UPDATE items SET in_safe = 1, currently_borrowing = NULL, last_borrowed_person = (?) WHERE id IN (?)",
-    [owner[0].username, itemIds]
-  );
-
    const [result] = await pool.query(
-    "UPDATE loans SET returned_date = NOW() WHERE loan_code = ?",
-    [loanCode]
+      "UPDATE loans SET returned_date = NOW() WHERE loan_code = ? AND returned_date IS NULL",
+      [loanCode],
    );

-  if (result.affectedRows > 0 && setItemStates.affectedRows > 0) {
-    return { success: true };
+    if (result.affectedRows === 0) return { success: false };
+
+    if (itemIds.length > 0) {
+      await pool.query(
+        "UPDATE items SET in_safe = 1, currently_borrowing = NULL, last_borrowed_person = ? WHERE id IN (?)",
+        [items[0].username, itemIds],
+      );
+    }
+
+    return { success: true, data: { returned: true } };
+  } catch (error) {
+    console.error("setReturnDateV2 error:", error);
+    return { success: false, message: "Failed to set return date" };
  }
-  return { success: false };
 };

 export const setTakeDateV2 = async (loanCode) => {
+  const [isTaken] = await pool.query(
+    "SELECT take_date FROM loans WHERE loan_code = ?",
+    [loanCode],
+  );
+
+  if (isTaken.length === 0 || isTaken[0].take_date !== null) {
+    return { success: false, message: "Loan not found or already taken" };
+  }
+
  const [items] = await pool.query(
    "SELECT loaned_items_id FROM loans WHERE loan_code = ?",
-    [loanCode]
+    [loanCode],
  );

  const [owner] = await pool.query(
    "SELECT username FROM loans WHERE loan_code = ?",
-    [loanCode]
+    [loanCode],
  );

-  if (items.length === 0) return { success: false };
+  if (items.length === 0)
+    return { success: false, message: "No items found for loan" };

  const itemIds = Array.isArray(items[0].loaned_items_id)
    ? items[0].loaned_items_id
@@ -93,18 +105,18 @@ export const setTakeDateV2 = async (loanCode) => {

  const [setItemStates] = await pool.query(
    "UPDATE items SET in_safe = 0, currently_borrowing = (?) WHERE id IN (?)",
-    [owner[0].username, itemIds]
+    [owner[0].username, itemIds],
  );

  const [result] = await pool.query(
-    "UPDATE loans SET take_date = NOW() WHERE loan_code = ?",
-    [loanCode]
+    "UPDATE loans SET take_date = NOW() WHERE loan_code = ? AND take_date IS NULL",
+    [loanCode],
  );

  if (result.affectedRows > 0 && setItemStates.affectedRows > 0) {
    return { success: true };
  }
-  return { success: false };
+  return { message: "Failed to set take date", success: false };
 };

 export const getAllLoansV2 = async () => {
@@ -118,12 +130,12 @@ export const getAllLoansV2 = async () => {
 export const openDoor = async (doorKey) => {
  const [result] = await pool.query(
    "SELECT safe_nr, id FROM items WHERE door_key = ?;",
-    [doorKey]
+    [doorKey],
  );
  if (result.length > 0) {
    const [changeItemSate] = await pool.query(
      "UPDATE items SET in_safe = NOT in_safe WHERE id = ?",
-      [result[0].id]
+      [result[0].id],
    );
    if (changeItemSate.affectedRows > 0) {
      return { success: true, data: result[0] };
--- a/backendV2/routes/api/api.route.js
+++ b/backendV2/routes/api/api.route.js
@@ -47,7 +47,7 @@ router.get(
    } else {
      res.status(404).json({ message: "Loan not found" });
    }
-  }
+  },
 );

 // Route for API to set the return date by the loan code
@@ -58,11 +58,11 @@ router.post(
    const loanCode = req.params.loan_code;
    const result = await setReturnDateV2(loanCode);
    if (result.success) {
-      res.status(200).json({ data: result.data });
+      res.status(200).json({});
    } else {
      res.status(500).json({ message: "Failed to set return date" });
    }
-  }
+  },
 );

 // Route for API to set the take away date by the loan code
@@ -73,11 +73,11 @@ router.post(
    const loanCode = req.params.loan_code;
    const result = await setTakeDateV2(loanCode);
    if (result.success) {
-      res.status(200).json({ data: result.data });
+      res.status(200).json({});
    } else {
-      res.status(500).json({ message: "Failed to set take date" });
-    }
+      res.status(500).json({ message: result.message });
    }
+  },
 );

 // Route for API to open a door
--- a/backendV2/routes/app/loanMgmt.route.js
+++ b/backendV2/routes/app/loanMgmt.route.js
@@ -62,6 +62,7 @@ router.post("/createLoan", authenticate, async (req, res) => {
        mailInfo.data.start_date,
        mailInfo.data.end_date,
        mailInfo.data.created_at,
+        mailInfo.data.note,
      );
      return res.status(201).json({
        message: "Loan created successfully",
--- a/backendV2/routes/app/services/mailer.js
+++ b/backendV2/routes/app/services/mailer.js
@@ -34,7 +34,14 @@ const formatDateTime = (value) => {
  return "N/A";
 };

-function buildLoanEmail({ user, items, startDate, endDate, createdDate }) {
+function buildLoanEmail({
+  user,
+  items,
+  startDate,
+  endDate,
+  createdDate,
+  note,
+}) {
  const brand = process.env.MAIL_BRAND_COLOR || "#0ea5e9";
  const itemsList =
    Array.isArray(items) && items.length
@@ -116,6 +123,12 @@ function buildLoanEmail({ user, items, startDate, endDate, createdDate }) {
                  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;">
@@ -134,7 +147,14 @@ function buildLoanEmail({ user, items, startDate, endDate, createdDate }) {
 </html>`;
 }

-function buildLoanEmailText({ user, items, startDate, endDate, createdDate }) {
+function buildLoanEmailText({
+  user,
+  items,
+  startDate,
+  endDate,
+  createdDate,
+  note,
+}) {
  const itemsText =
    Array.isArray(items) && items.length ? items.join(", ") : "N/A";
  return [
@@ -145,10 +165,18 @@ function buildLoanEmailText({ user, items, startDate, endDate, createdDate }) {
    `Start: ${formatDateTime(startDate)}`,
    `Ende: ${formatDateTime(endDate)}`,
    `Erstellt am: ${formatDateTime(createdDate)}`,
+    `Notiz: ${note || "Keine Notiz"}`,
  ].join("\n");
 }

-export function sendMailLoan(user, items, startDate, endDate, createdDate) {
+export function sendMailLoan(
+  user,
+  items,
+  startDate,
+  endDate,
+  createdDate,
+  note,
+) {
  const transporter = nodemailer.createTransport({
    host: process.env.MAIL_HOST,
    port: process.env.MAIL_PORT,
@@ -170,8 +198,16 @@ export function sendMailLoan(user, items, startDate, endDate, createdDate) {
        startDate,
        endDate,
        createdDate,
+        note,
+      }),
+      html: buildLoanEmail({
+        user,
+        items,
+        startDate,
+        endDate,
+        createdDate,
+        note,
      }),
-      html: buildLoanEmail({ user, items, startDate, endDate, createdDate }),
    });

    console.log("Loan message sent:", info.messageId);
--- a/backendV2/schemeV2.mock.sql
+++ b/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');
--- a/backendV2/schemeV2.mock_data.sql
+++ b/backendV2/schemeV2.mock_data.sql
@@ -1,120 +0,0 @@
-USE borrow_system_new;
-
-- Reset tables (no FKs defined, so order is safe)
-SET FOREIGN_KEY_CHECKS = 0;
-TRUNCATE TABLE loans;
-TRUNCATE TABLE apiKeys;
-TRUNCATE TABLE items;
-TRUNCATE TABLE users;
-SET FOREIGN_KEY_CHECKS = 1;
-
-- Users (roles 1–6, plain-text passwords; is_admin is BOOL)
-INSERT INTO users (username, password, email, first_name, last_name, role, is_admin) VALUES
-('admin',  'adminpass', 'admin@example.com',  'System', 'Admin',   6, TRUE),
-('alice',  'alice123',  'alice@example.com',  'Alice',  'Andersen',1, FALSE),
-('bob',    'bob12345',  'bob@example.com',    'Bob',    'Berg',    2, FALSE),
-('carol',  'carol123',  'carol@example.com',  'Carol',  'Christensen', 3, FALSE),
-('dave',   'dave123',   'dave@example.com',   'Dave',   'Dahl',    4, FALSE),
-('erin',   'erin123',   'erin@example.com',   'Erin',   'Enevoldsen', 5, FALSE),
-('frank',  'frank123',  'frank@example.com',  'Frank',  'Fisher',  2, FALSE),
-('grace',  'grace123',  'grace@example.com',  'Grace',  'Gundersen',1, FALSE),
-('heidi',  'heidi123',  'heidi@example.com',  'Heidi',  'Hansen',  4, FALSE),
-('tech',   'techpass',  'tech@example.com',   'Tech',   'User',    5, TRUE);
-
-- Items (safe_nr is two digits or NULL; matches CHECK and UNIQUE constraint)
-INSERT INTO items (item_name, can_borrow_role, in_safe, safe_nr, last_borrowed_person, currently_borrowing) VALUES
-('Laptop A',           2, FALSE, NULL, 'grace',  'bob'),
-('Laptop B',           2, TRUE,  '01', NULL,     NULL),
-('Camera Canon',       3, TRUE,  '02', 'erin',   NULL),
-('Microphone Rode',    1, TRUE,  '03', 'grace',  NULL),
-('Tripod Manfrotto',   1, TRUE,  '04', 'frank',  NULL),
-('Oscilloscope Tek',   4, TRUE,  '05', NULL,     NULL),
-('VR Headset',         3, FALSE, NULL, 'heidi',  'carol'),
-('Keycard Programmer', 6, TRUE,  '06', 'admin',  NULL);
-
-- Loans (JSON strings, 6-digit numeric loan_code per CHECK)
-- Assumes the items above have ids 1..8 in insert order
-INSERT INTO loans (
-  username,
-  lockers,
-  loan_code,
-  start_date,
-  end_date,
-  take_date,
-  returned_date,
-  loaned_items_id,
-  loaned_items_name,
-  deleted,
-  note
-) VALUES
-- Active loan: bob has Laptop A (item id 1, locker "01")
-('bob',
-  '["01"]',
-  '123456',
-  '2025-11-15 09:00:00',
-  '2025-11-22 17:00:00',
-  '2025-11-15 09:15:00',
-  NULL,
-  '[1]',
-  '["Laptop A"]',
-  FALSE,
-  'Active loan - Laptop A'
-),
-- Returned loan: frank had Tripod Manfrotto (item id 5, locker "04")
-('frank',
-  '["04"]',
-  '234567',
-  '2025-10-01 10:00:00',
-  '2025-10-07 16:00:00',
-  '2025-10-01 10:05:00',
-  '2025-10-05 15:30:00',
-  '[5]',
-  '["Tripod Manfrotto"]',
-  FALSE,
-  'Completed loan'
-),
-- Future reservation: dave will take Oscilloscope Tek (item id 6, locker "05")
-('dave',
-  '["05"]',
-  '345678',
-  '2025-12-10 09:00:00',
-  '2025-12-12 17:00:00',
-  NULL,
-  NULL,
-  '[6]',
-  '["Oscilloscope Tek"]',
-  FALSE,
-  'Reserved'
-),
-- Active loan: carol has VR Headset (item id 7, locker "02")
-('carol',
-  '["02"]',
-  '456789',
-  '2025-11-10 13:00:00',
-  '2025-11-20 12:00:00',
-  '2025-11-10 13:10:00',
-  NULL,
-  '[7]',
-  '["VR Headset"]',
-  FALSE,
-  'Active loan - VR Headset'
-),
-- Soft-deleted historic loan: grace had Microphone + Tripod (item ids 4,5; lockers "03","04")
-('grace',
-  '["03","04"]',
-  '567890',
-  '2025-09-01 09:00:00',
-  '2025-09-03 17:00:00',
-  '2025-09-01 09:10:00',
-  '2025-09-03 16:45:00',
-  '[4,5]',
-  '["Microphone Rode","Tripod Manfrotto"]',
-  TRUE,
-  'Canceled/soft-deleted record'
-);
-
-- API keys (8-digit numeric keys per CHECK)
-INSERT INTO apiKeys (api_key, entry_name, last_used_at) VALUES
-('12345678', 'CI token',     '2025-11-15 08:00:00'),
-('87654321', 'Local dev',    NULL),
-('00000001', 'Monitoring',   '2025-11-10 12:30:00');
Author	SHA1	Message	Date
Theis Gaedigk	8d04465705	Merge branch 'dev' into demoDev	2026-02-20 16:33:54 +01:00
Theis Gaedigk	1fa8b4a9a7	refactor: clean up layout components and improve footer styling	2026-02-20 16:30:20 +01:00
Theis Gaedigk	3ba3c1c0cb	improved error logging for the api route to return or take loans	2026-02-20 16:22:13 +01:00
Theis Gaedigk	ee54d51f8b	enhanced loan management: added note field to loan creation and email templates	2026-02-20 12:14:56 +01:00
Theis Gaedigk	a8dab549af	fixed bug: cannot return loan	2026-02-20 12:02:33 +01:00
Theis Gaedigk	06976f7972	added pasword input to admin panel	2026-02-14 19:01:59 +01:00
Theis Gaedigk	8589971dc8	added scheme to demo branch	2026-02-09 15:55:27 +01:00
Theis Gaedigk	6ec8e19737	Merge branch 'dev' into demoDev	2026-02-09 15:51:25 +01:00
Theis Gaedigk	977a6c1b16	deltedt mock data because its too old	2026-02-09 15:51:00 +01:00
Theis Gaedigk	38c647c62f	Fixed bug/issue: #13	2026-02-09 15:49:51 +01:00
Theis Gaedigk	757b316b49	fixed translation bug	2026-02-09 13:42:19 +01:00
Theis Gaedigk	d05e9ab3ee	deleted unused changelog	2026-02-09 13:42:06 +01:00
Theis Gaedigk	9f44a4796d	Merge branch 'dev' into demoDev	2026-02-07 17:50:34 +01:00
Theis Gaedigk	dc0a68f7f1	fixed version info	2026-02-07 17:42:21 +01:00
Theis Gaedigk	fe3a06e5ce	Merge branch 'dev' into demoDev	2026-02-07 17:41:57 +01:00
Theis Gaedigk	179f5686d1	Merge branch 'dev' into demoDev	2026-02-04 13:47:33 +01:00
Theis Gaedigk	28373e0231	changed version info	2026-02-01 15:47:51 +01:00