added animations to borrow-system

Also removed irrelavant console.logs

.gitignore

@@ -113,3 +113,12 @@ secrets/
 keys/
 
 ToDo.txt
+
+
+# only in development branch
+next-env.d.ts
+
+# psd files from footage
+footage/*.psd
+
+icon/

Docs/backend_API_docs/README.md

@@ -1,345 +1,177 @@
-# Backend API (V2) Documentation
+# Borrow System API Documentation
 
-This document describes the current backend API routes and their real response shapes, based on the code in `backendV2`.
+## Overview
 
----
+The Borrow System API provides endpoints for managing items, loans, and door access for a borrowing/locker system. All endpoints require authentication via an 8-digit API key passed as a URL parameter.
-
-## Base URLs
-
-- Frontend: `https://insta.the1s.de`
-- Backend: `https://backend.insta.the1s.de`
-- Base path: `https://backend.insta.the1s.de/api`
-
-Service status: `https://status.the1s.de`
-
----
 
 ## Authentication
 
-All **protected** endpoints require an API key as a path parameter `:key`.
+All requests must include a valid API key in the URL path as the `:key` parameter. API keys are 8-digit numeric strings.
 
-Rules for `:key`:
+## Endpoints
 
-- Exactly 8 characters
+The Base URL for all endpoints is: `https://insta.the1s.de/backend/api`
-- Digits only (`^[0-9]{8}$`)
 
-Example:
+### Get All Items
 
-```http
+`GET /items/:key`
-GET /api/items/12345678
-```
 
-On missing / invalid key:
+Returns all items in the system.
 
-- Status: `401 Unauthorized`
+**Response 200:**
-- Body (exact message depends on `authenticate` in `backendV2/services/authentication.js`)
-
-Auth-related modules:
-
-- `backendV2/services/authentication.js`
-- `backendV2/services/database.js`
-
-Route handlers:
-
-- `backendV2/routes/api/api.route.js`
-- `backendV2/routes/api/api.database.js`
-
----
-
-## Endpoints (Overview)
-
-1. **Public**
-
-   - `GET /api/all-items` – List all items (no auth; from original docs)
-
-2. **Items (authenticated)**
-
-   - `GET /api/items/:key` – List all items
-   - `POST /api/change-state/:key/:itemId/:state` – Toggle item safe state
-
-3. **Loans (authenticated)**
-   - `GET /api/get-loan-by-code/:key/:loan_code` – Get loan by code
-   - `POST /api/set-take-date/:key/:loan_code` – Set “take” date and mark items as out
-   - `POST /api/set-return-date/:key/:loan_code` – Set “return” date and mark items as returned
-
----
-
-## 1) Items
-
-### 1.1 Get all items
-
-**GET** `/api/items/:key`
-
-Returns all items wrapped in a `data` property.
-
-- Handler: `getItemsFromDatabaseV2` in `api.database.js`
-- SQL: `SELECT * FROM items;`
-
-#### Example request
-
-```http
-GET https://backend.insta.the1s.de/api/items/12345678
-```
-
-#### Successful response
 
 ```json
 {
   "data": [
     {
       "id": 1,
-      "item_name": "DJI 1er Mikro",
+      "item_name": "Laptop",
-      "can_borrow_role": 4,
+      "can_borrow_role": 1,
-      "in_safe": 1,
+      "in_safe": true,
-      "safe_nr": "01",
+      "safe_nr": 3,
-      "entry_created_at": "2025-08-19T22:02:16.000Z",
+      "door_key": 101,
-      "entry_updated_at": "2025-08-19T22:02:16.000Z",
+      "last_borrowed_person": "jdoe",
-      "last_borrowed_person": "alice",
       "currently_borrowing": null
     }
   ]
 }
 ```
 
-#### Error response
+**Response 500:**
 
 ```json
 { "message": "Failed to fetch items" }
 ```
 
-#### Status codes
-
-- `200 OK` – success, `data` is an array (possibly empty)
-- `401 Unauthorized` – invalid / missing key
-- `500 Internal Server Error` – database error or `success: false` from DB layer
-
 ---
 
-### 2.2 Toggle item safe state
+### Change Item Safe State
 
-**POST** `/api/change-state/:key/:itemId`
+`POST /change-state/:key/:itemId`
 
-> You do not need this endpoint to set the states of the items when the items are taken out or returned. When you take or return a loan, the item states are set automatically by the loan endpoints. This endpoint is only for manually toggling the `inSafe` state of an item.
+Toggles the `in_safe` boolean state of an item.
 
-Path parameters:
+**URL Parameters:**
 
-- `:key` – API key (8 digits)
+- **key** - API key
-- `:itemId` – numeric `id` of the item
+- **itemId** - The item's ID
 
-Handler in `api.route.js` calls `changeInSafeStateV2(itemId)`, which executes:
+**Response 200:** Returns on successful toggle.
 
-```sql
+**Response 500:**
-UPDATE items SET in_safe = NOT in_safe WHERE id = ?
-```
-
-#### Example request
-
-```http
-POST https://backend.insta.the1s.de/api/change-state/12345678/42
-```
-
-(Will toggle `in_safe` for item `42`.)
-
-#### Successful response (current implementation)
-
-```json
-{
-  "data": null
-}
-```
-
-#### Error responses
-
-Invalid `state` (anything other than `"0"` or `"1"`):
-
-```json
-{ "message": "Invalid state value" }
-```
-
-Failed update:
 
 ```json
 { "message": "Failed to update item state" }
 ```
 
-#### Status codes
-
-- `200 OK` – item state toggled
-- `400 Bad Request` – invalid `state` parameter
-- `401 Unauthorized` – invalid / missing key
-- `500 Internal Server Error` – database/update failure or `success: false` from DB layer
-
 ---
 
-## 3) Loans
+### Get Loan by Code
 
-### 3.1 Get loan by code
+`GET /get-loan-by-code/:key/:loan_code`
 
-**GET** `/api/get-loan-by-code/:key/:loan_code`
+Retrieves loan details by its 6-digit loan code.
 
-Path parameters:
+**URL Parameters:**
 
-- `:key` – API key
+- **key** - API key
-- `:loan_code` – 6-digit loan code (`^[0-9]{6}$` per DB constraint)
+- **loan_code** - A 6-digit numeric loan code
 
-Database layer (`getLoanByCodeV2`) currently selects:
+**Response 200:**
-
-```sql
-SELECT first_name, returned_date, take_date, lockers
-FROM loans
-WHERE loan_code = ?;
-```
-
-#### Example request
-
-```http
-GET https://backend.insta.the1s.de/api/get-loan-by-code/12345678/646473
-```
-
-#### Successful response
 
 ```json
 {
   "data": {
-    "first_name": "Theis",
+    "username": "jdoe",
     "returned_date": null,
-    "take_date": "2025-08-25T13:23:00.000Z",
+    "take_date": "2024-01-15T10:30:00.000Z",
-    "lockers": ["01", "03"]
+    "lockers": [1, 3]
   }
 }
 ```
 
-#### Error response
+**Response 404:**
 
 ```json
 { "message": "Loan not found" }
 ```
 
-#### Status codes
+---
 
-- `200 OK` – loan found
+### Set Take Date
-- `401 Unauthorized` – invalid / missing key
+
-- `404 Not Found` – no matching loan for this `loan_code`
+`POST /set-take-date/:key/:loan_code`
+
+Records when items are physically taken by setting `take_date` to the current timestamp. Updates associated items to `in_safe = false` and sets `currently_borrowing` to the loan's username.
+
+**URL Parameters:**
+
+- **key** - API key
+- **loan_code** - A 6-digit numeric loan code
+
+**Response 200:** Empty JSON object on success.
+
+**Response 500:**
+
+```json
+{ "message": "Loan not found or already taken" }
+```
+
+> **Note:** This endpoint will fail if the loan has already been taken or does not exist.
 
 ---
 
-### 3.2 Set take date
+### Set Return Date
 
-**POST** `/api/set-take-date/:key/:loan_code`
+`POST /set-return-date/:key/:loan_code`
 
-Path parameters:
+Marks a loan as returned by setting `returned_date` to the current timestamp. Also updates all associated items to `in_safe = true`, clears `currently_borrowing`, and sets `last_borrowed_person`. Therefore, keep in mind that you must not call other endpoints that will change the safe state of an item after or before calling this endpoint, otherwise the state of the items will be inconsistent.
 
-- `:key` – API key
+**URL Parameters:**
-- `:loan_code` – loan code
 
-#### Example request
+- **key** - API key
+- **loan_code** - A 6-digit numeric loan code
 
-```http
+**Response 200:** Empty JSON object on success.
-POST https://backend.insta.the1s.de/api/set-take-date/12345678/646473
-```
 
-#### Successful response
+**Response 500:**
-
-```json
-{
-  "data": null
-}
-```
-
-#### Error response
-
-```json
-{ "message": "Failed to set take date" }
-```
-
-#### Status codes
-
-- `200 OK` – take date set and items marked as out
-- `401 Unauthorized` – invalid / missing key
-- `500 Internal Server Error` – invalid loan, missing items, or DB error / `success: false`
-
----
-
-### 3.3 Set return date
-
-**POST** `/api/set-return-date/:key/:loan_code`
-
-Path parameters:
-
-- `:key` – API key
-- `:loan_code` – loan code
-
-#### Example request
-
-```http
-POST https://backend.insta.the1s.de/api/set-return-date/12345678/646473
-```
-
-#### Successful response (current implementation)
-
-```json
-{
-  "data": null
-}
-```
-
-#### Error response
 
 ```json
 { "message": "Failed to set return date" }
 ```
 
-#### Status codes
+> **Note:** This endpoint will fail if the loan has already been returned (i.e., `returned_date` is not `NULL`).
-
-- `200 OK` – return date set and items marked as returned
-- `401 Unauthorized` – invalid / missing key
-- `500 Internal Server Error` – invalid loan, missing items, or DB error / `success: false`
 
 ---
 
-## Common Response Shapes
+### Open Door
 
-**Success – list (authenticated items):**
+`GET /open-door/:key/:doorKey`
 
-```json
+Toggles the safe state of an item identified by its door key and returns the associated safe number.
-{
-  "data": [
-    /* array of rows */
-  ]
-}
-```
 
-**Success – single loan:**
+**URL Parameters:**
+
+- **key** - API key
+- **doorKey** - The door key identifier assigned to an item
+
+**Response 200:**
 
 ```json
 {
   "data": {
-    /* selected loan fields */
+    "safe_nr": 3,
+    "id": 1
   }
 }
 ```
 
-**Success – mutations (current code):**
+**Response 500:**
 
 ```json
-{ "data": null }
+{ "message": "Failed to open door" }
 ```
 
-**Errors:**
+## Error Handling
 
-```json
+All endpoints return a `500` status code for server-side failures and a JSON body with a `message` field, except for **Get Loan by Code** which returns `404` when no matching loan is found.
-{ "message": "Failed to fetch items" }
-{ "message": "Failed to update item state" }
-{ "message": "Invalid state value" }
-{ "message": "Loan not found" }
-{ "message": "Failed to set return date" }
-{ "message": "Failed to set take date" }
-```
-
-**HTTP Status Codes:**
-
-- `200 OK` – operation succeeded
-- `400 Bad Request` – invalid `state` parameter
-- `401 Unauthorized` – invalid/missing API key
-- `404 Not Found` – loan not found
-- `500 Internal Server Error` – database / server failure or `success: false` from DB layer

FrontendV2/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:18 as builder
+FROM node:22-alpine AS builder
 
 WORKDIR /app
 

FrontendV2/index.html

@@ -2,9 +2,13 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link
+      rel="icon"
+      type="image/png"
+      href="/icon_borrow-system-frontend_dark.png"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>frontendv2</title>
+    <title>Ausleihsystem</title>
   </head>
   <body>
     <div id="root"></div>

FrontendV2/nginx.conf

@@ -9,6 +9,14 @@ server {
     try_files $uri $uri/ /index.html;
   }
 
+  location = /backend {
+    return 301 /backend/;
+  }
+
+  location /backend/ {
+    proxy_pass http://borrow_system-backend_v2:8004/;
+  }
+
   location ~* \.(?:js|mjs|css|png|jpg|jpeg|gif|ico|svg|woff2?)$ {
     expires 1y;
     access_log off;

FrontendV2/package.json

@@ -1,7 +1,7 @@
 {
   "name": "admin",
   "private": true,
-  "version": "0.0.0",
+  "version": "v2.1.2 (dev)",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -12,6 +12,7 @@
   "dependencies": {
     "@chakra-ui/react": "^3.28.0",
     "@emotion/react": "^11.14.0",
+    "@lottiefiles/dotlottie-react": "^0.19.0",
     "@tailwindcss/vite": "^4.1.11",
     "@tanstack/react-query": "^5.90.5",
     "i18next": "^25.6.0",

FrontendV2/public/vite.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shapes-icon lucide-shapes"><path d="M8.3 10a.7.7 0 0 1-.626-1.079L11.4 3a.7.7 0 0 1 1.198-.043L16.3 8.9a.7.7 0 0 1-.572 1.1Z"/><rect x="3" y="14" width="7" height="7" rx="1"/><circle cx="17.5" cy="17.5" r="3.5"/></svg>

FrontendV2/src/App.tsx

@@ -12,10 +12,11 @@ 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";
+import { ContactPage } from "./pages/ContactPage";
 
 const queryClient = new QueryClient();
 
@@ -71,8 +72,8 @@ function App() {
 
   return (
     <QueryClientProvider client={queryClient}>
-      <Flex direction="column" minH="100vh">
+      <Flex direction="column" minH="100dvh">
-        <Box as="main" flex="1">
+        <Flex as="main" flex="1" direction="column">
           <UserContext.Provider value={user}>
             <BrowserRouter>
               <Routes>
@@ -80,13 +81,14 @@ 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 />} />
               </Routes>
             </BrowserRouter>
           </UserContext.Provider>
-        </Box>
+        </Flex>
         <Footer />
       </Flex>
     </QueryClientProvider>

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)."
-                    ]
-                }
-            ]
-        }
-    ]
-}

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

FrontendV2/src/components/Header.tsx

@@ -4,98 +4,41 @@ import {
   Heading,
   Stack,
   Text,
-  CloseButton,
-  Dialog,
-  Portal,
   HStack,
   IconButton,
   Menu,
   Box,
   Avatar,
-  Card,
-  Grid,
 } from "@chakra-ui/react";
-import { PasswordInput } from "@/components/ui/password-input";
 import Cookies from "js-cookie";
 import { useAtom } from "jotai";
 import { setIsLoggedInAtom, triggerLogoutAtom } from "@/states/Atoms";
 import { useNavigate } from "react-router-dom";
 import {
   CircleUserRound,
-  RotateCcwKey,
-  Code,
   LifeBuoy,
   LogOut,
   CalendarPlus,
   MoreVertical,
   Languages,
   Table,
+  ContactRound,
 } from "lucide-react";
 import { useUserContext } from "@/states/Context";
 import { useState } from "react";
-import MyAlert from "./myChakra/MyAlert";
 import { useTranslation } from "react-i18next";
-import { API_BASE } from "@/config/api.config";
+import { UserDialogue } from "./UserDialogue";
 
 export const Header = () => {
   const navigate = useNavigate();
   const userData = useUserContext();
-  console.log(userData);
   const { t } = useTranslation();
 
-  // Error handling states
-  const [isMsg, setIsMsg] = useState(false);
-  const [msgStatus, setMsgStatus] = useState<"error" | "success">("error");
-  const [msgTitle, setMsgTitle] = useState("");
-  const [msgDescription, setMsgDescription] = useState("");
-
-  const [oldPassword, setOldPassword] = useState("");
-  const [newPassword, setNewPassword] = useState("");
-  const [confirmPassword, setConfirmPassword] = useState("");
-
   const [, setTriggerLogout] = useAtom(triggerLogoutAtom);
   const [, setIsLoggedIn] = useAtom(setIsLoggedInAtom);
 
-  // Dialog control
-  const [isPwOpen, setPwOpen] = useState(false);
   const [userDialog, setUserDialog] = useState(false);
 
-  const changePassword = async () => {
-    if (newPassword !== confirmPassword) {
-      setMsgTitle(t("err_pw_change"));
-      setMsgDescription(t("pw_mismatch"));
-      setMsgStatus("error");
-      setIsMsg(true);
-      return;
-    }
-
-    const response = await fetch(`${API_BASE}/api/users/change-password`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${Cookies.get("token")}`,
-      },
-      body: JSON.stringify({ oldPassword, newPassword }),
-    });
-
-    if (!response.ok) {
-      setMsgTitle(t("err_pw_change"));
-      setMsgDescription(t("pw_mismatch"));
-      setMsgStatus("error");
-      setIsMsg(true);
-      return;
-    }
-
-    setMsgTitle(t("pw_success"));
-    setMsgDescription(t("pw_success_desc"));
-    setMsgStatus("success");
-    setIsMsg(true);
-
-    setOldPassword("");
-    setNewPassword("");
-    setConfirmPassword("");
-  };
-
   const username = userData.first_name ? userData.first_name : "N/A";
   const fullname = userData.first_name + " " + userData.last_name;
   const randomColor = [
@@ -199,9 +142,9 @@ export const Header = () => {
                 value="help"
                 onSelect={() =>
                   window.open(
-                    "https://git.the1s.de/Matthias-Claudius-Schule/borrow-system/wiki",
+                    "https://git.the1s.de/Matthias-Claudius-Schule/borrow-system/wiki/?action=_pages",
                     "_blank",
-                    "noopener,noreferrer"
+                    "noopener,noreferrer",
                   )
                 }
                 children={
@@ -212,18 +155,12 @@ export const Header = () => {
                 }
               />
               <Menu.Item
-                value="source-code"
+                value="contact"
-                onSelect={() =>
+                onSelect={() => navigate("/contact", { replace: true })}
-                  window.open(
-                    "https://git.the1s.de/Matthias-Claudius-Schule/borrow-system",
-                    "_blank",
-                    "noopener,noreferrer"
-                  )
-                }
                 children={
                   <HStack gap={3}>
-                    <Code size={16} />
+                    <ContactRound size={16} />
-                    <Text as="span">{t("source-code")}</Text>
+                    <Text as="span">{t("contact")}</Text>
                   </HStack>
                 }
               />
@@ -342,7 +279,7 @@ export const Header = () => {
           </Button>
 
           <a
-            href="https://git.the1s.de/Matthias-Claudius-Schule/borrow-system/wiki"
+            href="https://git.the1s.de/Matthias-Claudius-Schule/borrow-system/wiki/?action=_pages"
             target="_blank"
           >
             <Button variant="ghost">
@@ -353,17 +290,15 @@ export const Header = () => {
             </Button>
           </a>
 
-          <a
+          <Button
-            href="https://git.the1s.de/Matthias-Claudius-Schule/borrow-system"
+            variant={"outline"}
-            target="_blank"
+            onClick={() => navigate("/contact", { replace: true })}
           >
-            <Button variant="ghost">
             <HStack gap={2}>
-                <Code size={18} />
+              <ContactRound size={18} />
-                <Text as="span">{t("source-code")}</Text>
+              <Text as="span">{t("contact")}</Text>
             </HStack>
           </Button>
-          </a>
 
           <Button onClick={logout} variant="outline" colorScheme="red">
             <HStack gap={2}>
@@ -376,145 +311,12 @@ export const Header = () => {
 
       {/* User Info Dialoge */}
       {userDialog && (
-        <Flex
+        <UserDialogue
-          position="fixed"
+          setUserDialog={setUserDialog}
-          inset={0}
+          fullname={fullname}
-          zIndex={1000}
+          randomColor={randomColor}
-          align="center"
-          justify="center"
-          bg="blackAlpha.400"
-          backdropFilter="blur(6px)"
-        >
-          <Card.Root maxW="sm" w="full" mx={4}>
-            <Card.Header>
-              <Card.Title>
-                <Flex justify="center" align="center" w="100%">
-                  <Avatar.Root
-                    size={"2xl"}
-                    colorPalette={randomColor[Math.floor(Math.random() * 10)]}
-                  >
-                    <Avatar.Fallback name={fullname} />
-                  </Avatar.Root>
-                </Flex>
-              </Card.Title>
-              <Card.Description>{t("user-info-desc")}</Card.Description>
-            </Card.Header>
-            <Card.Body>
-              <Stack gap="4" w="full">
-                <Box as="dl">
-                  <Grid
-                    templateColumns="auto 1fr"
-                    rowGap={2}
-                    columnGap={4}
-                    alignItems="start"
-                  >
-                    <Text as="dt" fontWeight="bold" textAlign="left">
-                      {t("first-name")}:
-                    </Text>
-                    <Text as="dd">{userData.first_name}</Text>
-
-                    <Text as="dt" fontWeight="bold" textAlign="left">
-                      {t("last-name")}:
-                    </Text>
-                    <Text as="dd">{userData.last_name}</Text>
-
-                    <Text as="dt" fontWeight="bold" textAlign="left">
-                      {t("username")}:
-                    </Text>
-                    <Text as="dd">{userData.username}</Text>
-
-                    <Text as="dt" fontWeight="bold" textAlign="left">
-                      {t("role")}:
-                    </Text>
-                    <Text as="dd">{userData.role}</Text>
-
-                    <Text as="dt" fontWeight="bold" textAlign="left">
-                      {t("admin-status")}:
-                    </Text>
-                    <Text as="dd">
-                      {userData.is_admin ? t("yes") : t("no")}
-                    </Text>
-                  </Grid>
-                </Box>
-
-                <Button variant="solid" onClick={() => setPwOpen(true)}>
-                  <HStack gap={2}>
-                    <RotateCcwKey size={18} />
-                    <Text as="span">{t("change-password")}</Text>
-                  </HStack>
-                </Button>
-              </Stack>
-            </Card.Body>
-            <Card.Footer justifyContent="flex-end">
-              <Button variant="outline" onClick={() => setUserDialog(false)}>
-                {t("cancel")}
-              </Button>
-            </Card.Footer>
-          </Card.Root>
-        </Flex>
-      )}
-
-      {/* Passwort-Dialog (kontrolliert) */}
-      <Dialog.Root open={isPwOpen} onOpenChange={(e: any) => setPwOpen(e.open)}>
-        <Portal>
-          <Dialog.Backdrop />
-          <Dialog.Positioner>
-            <Dialog.Content maxW="md">
-              <Dialog.Header>
-                <Dialog.Title>{t("change-password")}</Dialog.Title>
-              </Dialog.Header>
-              <form
-                onSubmit={(e) => {
-                  e.preventDefault();
-                  changePassword();
-                }}
-              >
-                <Dialog.Body>
-                  <Stack gap={3}>
-                    <PasswordInput
-                      value={oldPassword}
-                      onChange={(e) => setOldPassword(e.target.value)}
-                      placeholder={t("old-password")}
-                    />
-                    <PasswordInput
-                      value={newPassword}
-                      onChange={(e) => setNewPassword(e.target.value)}
-                      placeholder={t("new-password")}
-                    />
-                    <PasswordInput
-                      value={confirmPassword}
-                      onChange={(e) => setConfirmPassword(e.target.value)}
-                      placeholder={t("confirm-password")}
-                    />
-                  </Stack>
-                </Dialog.Body>
-                <Dialog.Footer>
-                  <Stack w="100%" gap={3}>
-                    {isMsg && (
-                      <MyAlert
-                        status={msgStatus}
-                        title={msgTitle}
-                        description={msgDescription}
         />
       )}
-                    <HStack justify="flex-end" gap={2}>
-                      <Dialog.ActionTrigger asChild>
-                        <Button variant="outline">{t("cancel")}</Button>
-                      </Dialog.ActionTrigger>
-                      <Button type="submit" colorScheme="teal">
-                        {t("save")}
-                      </Button>
-                    </HStack>
-                  </Stack>
-                </Dialog.Footer>
-              </form>
-              <Dialog.CloseTrigger asChild>
-                <CloseButton size="sm" />
-              </Dialog.CloseTrigger>
-            </Dialog.Content>
-          </Dialog.Positioner>
-        </Portal>
-      </Dialog.Root>
     </Stack>
   );
 };

FrontendV2/src/components/UserDialogue.tsx

@@ -0,0 +1,220 @@
+import {
+  Button,
+  Flex,
+  Stack,
+  Text,
+  CloseButton,
+  Dialog,
+  Portal,
+  HStack,
+  Box,
+  Avatar,
+  Card,
+  Grid,
+} from "@chakra-ui/react";
+import { PasswordInput } from "@/components/ui/password-input";
+import { RotateCcwKey } from "lucide-react";
+import MyAlert from "./myChakra/MyAlert";
+import { API_BASE } from "@/config/api.config";
+import { useUserContext } from "@/states/Context";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import Cookies from "js-cookie";
+
+type UserDialogueProps = {
+  setUserDialog: (value: boolean) => void;
+  fullname: string;
+  randomColor: string[];
+};
+
+export const UserDialogue = (props: UserDialogueProps) => {
+  const userData = useUserContext();
+  const { t } = useTranslation();
+  // Error handling states
+  const [isMsg, setIsMsg] = useState(false);
+  const [msgStatus, setMsgStatus] = useState<"error" | "success">("error");
+  const [msgTitle, setMsgTitle] = useState("");
+  const [msgDescription, setMsgDescription] = useState("");
+
+  const [oldPassword, setOldPassword] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+
+  // Dialog control
+  const [isPwOpen, setPwOpen] = useState(false);
+
+  const changePassword = async () => {
+    if (newPassword !== confirmPassword) {
+      setMsgTitle(t("err_pw_change"));
+      setMsgDescription(t("pw_mismatch"));
+      setMsgStatus("error");
+      setIsMsg(true);
+      return;
+    }
+
+    const response = await fetch(`${API_BASE}/api/users/change-password`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${Cookies.get("token")}`,
+      },
+      body: JSON.stringify({ oldPassword, newPassword }),
+    });
+
+    if (!response.ok) {
+      setMsgTitle(t("err_pw_change"));
+      setMsgDescription(t("pw_mismatch"));
+      setMsgStatus("error");
+      setIsMsg(true);
+      return;
+    }
+
+    setMsgTitle(t("pw_success"));
+    setMsgDescription(t("pw_success_desc"));
+    setMsgStatus("success");
+    setIsMsg(true);
+
+    setOldPassword("");
+    setNewPassword("");
+    setConfirmPassword("");
+  };
+
+  return (
+    <Flex
+      position="fixed"
+      inset={0}
+      zIndex={1000}
+      align="center"
+      justify="center"
+      bg="blackAlpha.400"
+      backdropFilter="blur(6px)"
+    >
+      <Card.Root maxW="sm" w="full" mx={4}>
+        <Card.Header>
+          <Card.Title>
+            <Flex justify="center" align="center" w="100%">
+              <Avatar.Root
+                size={"2xl"}
+                colorPalette={props.randomColor[Math.floor(Math.random() * 10)]}
+              >
+                <Avatar.Fallback name={props.fullname} />
+              </Avatar.Root>
+            </Flex>
+          </Card.Title>
+          <Card.Description>{t("user-info-desc")}</Card.Description>
+        </Card.Header>
+        <Card.Body>
+          <Stack gap="4" w="full">
+            <Box as="dl">
+              <Grid
+                templateColumns="auto 1fr"
+                rowGap={2}
+                columnGap={4}
+                alignItems="start"
+              >
+                <Text as="dt" fontWeight="bold" textAlign="left">
+                  {t("first-name")}:
+                </Text>
+                <Text as="dd">{userData.first_name}</Text>
+
+                <Text as="dt" fontWeight="bold" textAlign="left">
+                  {t("last-name")}:
+                </Text>
+                <Text as="dd">{userData.last_name}</Text>
+
+                <Text as="dt" fontWeight="bold" textAlign="left">
+                  {t("username")}:
+                </Text>
+                <Text as="dd">{userData.username}</Text>
+
+                <Text as="dt" fontWeight="bold" textAlign="left">
+                  {t("role")}:
+                </Text>
+                <Text as="dd">{userData.role}</Text>
+
+                <Text as="dt" fontWeight="bold" textAlign="left">
+                  {t("admin-status")}:
+                </Text>
+                <Text as="dd">{userData.is_admin ? t("yes") : t("no")}</Text>
+              </Grid>
+            </Box>
+
+            <Button variant="solid" onClick={() => setPwOpen(true)}>
+              <HStack gap={2}>
+                <RotateCcwKey size={18} />
+                <Text as="span">{t("change-password")}</Text>
+              </HStack>
+            </Button>
+          </Stack>
+        </Card.Body>
+        <Card.Footer justifyContent="flex-end">
+          <Button variant="outline" onClick={() => props.setUserDialog(false)}>
+            {t("cancel")}
+          </Button>
+        </Card.Footer>
+      </Card.Root>
+
+      {/* Passwort-Dialog (kontrolliert) */}
+      <Dialog.Root open={isPwOpen} onOpenChange={(e: any) => setPwOpen(e.open)}>
+        <Portal>
+          <Dialog.Backdrop />
+          <Dialog.Positioner>
+            <Dialog.Content maxW="md">
+              <Dialog.Header>
+                <Dialog.Title>{t("change-password")}</Dialog.Title>
+              </Dialog.Header>
+              <form
+                onSubmit={(e) => {
+                  e.preventDefault();
+                  changePassword();
+                }}
+              >
+                <Dialog.Body>
+                  <Stack gap={3}>
+                    <PasswordInput
+                      value={oldPassword}
+                      onChange={(e) => setOldPassword(e.target.value)}
+                      placeholder={t("old-password")}
+                    />
+                    <PasswordInput
+                      value={newPassword}
+                      onChange={(e) => setNewPassword(e.target.value)}
+                      placeholder={t("new-password")}
+                    />
+                    <PasswordInput
+                      value={confirmPassword}
+                      onChange={(e) => setConfirmPassword(e.target.value)}
+                      placeholder={t("confirm-password")}
+                    />
+                  </Stack>
+                </Dialog.Body>
+                <Dialog.Footer>
+                  <Stack w="100%" gap={3}>
+                    {isMsg && (
+                      <MyAlert
+                        status={msgStatus}
+                        title={msgTitle}
+                        description={msgDescription}
+                      />
+                    )}
+                    <HStack justify="flex-end" gap={2}>
+                      <Dialog.ActionTrigger asChild>
+                        <Button variant="outline">{t("cancel")}</Button>
+                      </Dialog.ActionTrigger>
+                      <Button type="submit" colorScheme="teal">
+                        {t("save")}
+                      </Button>
+                    </HStack>
+                  </Stack>
+                </Dialog.Footer>
+              </form>
+              <Dialog.CloseTrigger asChild>
+                <CloseButton size="sm" />
+              </Dialog.CloseTrigger>
+            </Dialog.Content>
+          </Dialog.Positioner>
+        </Portal>
+      </Dialog.Root>
+    </Flex>
+  );
+};

FrontendV2/src/components/dotLottie.tsx

@@ -0,0 +1,28 @@
+import { DotLottieReact } from "@lottiefiles/dotlottie-react";
+
+export const unlockAnimation = () => {
+  return (
+    <DotLottieReact
+      src="https://lottie.host/f839baa1-9c64-44c4-9386-f0e4c87ab208/2Iw1m4k86d.lottie"
+      autoplay
+    />
+  );
+};
+
+export const approvalAnimation = () => {
+  return (
+    <DotLottieReact
+      src="https://lottie.host/b7257009-9e3f-43e2-8112-a176f4696e4c/iQxxqAVOGX.lottie"
+      autoplay
+    />
+  );
+};
+
+export const logoutAnimation = () => {
+  return (
+    <DotLottieReact
+      src="https://lottie.host/4975758c-de38-4d15-9f74-927709751d32/v8FtKpnD1y.lottie"
+      autoplay
+    />
+  );
+};

FrontendV2/src/components/footer/Footer.tsx

@@ -9,12 +9,11 @@ export const Footer = () => {
       as="footer"
       py={4}
       textAlign="center"
-      position="fixed"
+      width="100%"
-      bottom="0"
+      flexShrink={0}
-      left="0"
+      fontSize="sm"
-      right="0"
     >
-      Made with ❤️ by Theis Gaedigk - Year 2019 at MCS-Bochum
+      Made with ❤️ by Theis Gaedigk - Class of 2019 at MCS-Bochum
       <br />
       Frontend-Version: {info ? info["frontend-info"].version : "N/A"} |
       Backend-Version: {info ? info["backend-info"].version : "N/A"}

FrontendV2/src/pages/ContactPage.tsx

@@ -0,0 +1,84 @@
+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 {
+      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

@@ -18,6 +18,7 @@ import { borrowAbleItemsAtom } from "@/states/Atoms";
 import { createLoan } from "@/utils/Fetcher";
 import { Header } from "@/components/Header";
 import { useTranslation } from "react-i18next";
+import { approvalAnimation } from "@/components/dotLottie";
 
 export interface User {
   username: string;
@@ -27,6 +28,8 @@ export interface User {
 export const HomePage = () => {
   const { t } = useTranslation();
 
+  const [showAnimation, setShowAnimation] = useState(false);
+
   const [borrowableItems, setBorrowableItems] = useAtom(borrowAbleItemsAtom);
   const [startDate, setStartDate] = useState("");
   const [endDate, setEndDate] = useState("");
@@ -46,11 +49,26 @@ export const HomePage = () => {
     setSelectedItems((prevSelected) =>
       prevSelected.includes(itemId)
         ? prevSelected.filter((id) => id !== itemId)
-        : [...prevSelected, itemId]
+        : [...prevSelected, itemId],
     );
   };
 
+  const showApprovalAnimation = (seconds: number) => {
+    const milliseconds = seconds * 1000;
+
+    setShowAnimation(true);
+    window.setTimeout(() => {
+      setShowAnimation(false);
+    }, milliseconds);
+  };
+
   return (
+    <>
+      {showAnimation && (
+        <div className="fixed inset-0 z-9999 flex items-center justify-center pointer-events-none">
+          <div>{approvalAnimation()}</div>
+        </div>
+      )}
       <Container className="px-6 sm:px-8 pt-10">
         <Header />
         {isMsg && (
@@ -108,7 +126,6 @@ export const HomePage = () => {
                 }
                 setBorrowableItems(response.data);
                 setIsMsg(false);
-              console.log(borrowableItems);
               });
             }}
           >
@@ -159,7 +176,7 @@ export const HomePage = () => {
                           maxLength={MAX_CHARACTERS}
                           onChange={(e) => {
                             setNote(
-                            e.currentTarget.value.slice(0, MAX_CHARACTERS)
+                              e.currentTarget.value.slice(0, MAX_CHARACTERS),
                             );
                           }}
                         />
@@ -179,16 +196,17 @@ export const HomePage = () => {
                       setMsgStatus("error");
                       setMsgTitle(response.title || t("error"));
                       setMsgDescription(
-                      response.description || t("unknown-error")
+                        response.description || t("unknown-error"),
                       );
                       setIsMsg(true);
                       return;
                     }
+                    showApprovalAnimation(3);
                     setMsgStatus("success");
                     setMsgTitle(t("success"));
                     setMsgDescription(t("loan-success"));
                     setIsMsg(true);
-                }
+                  },
                 )
               }
             >
@@ -197,5 +215,6 @@ export const HomePage = () => {
           )}
         </Stack>
       </Container>
+    </>
   );
 };

FrontendV2/src/pages/Landingpage.tsx

@@ -9,12 +9,13 @@ import {
   Card,
   SimpleGrid,
   Button,
+  Container,
 } from "@chakra-ui/react";
 import MyAlert from "@/components/myChakra/MyAlert";
 import { useTranslation } from "react-i18next";
 import { API_BASE } from "@/config/api.config";
 import Cookies from "js-cookie";
-import { useNavigate } from "react-router-dom";
+import { Header } from "@/components/Header";
 
 export const formatDateTime = (value: string | null | undefined) => {
   if (!value) return "N/A";
@@ -32,6 +33,7 @@ type Loan = {
   returned_date: string | null;
   take_date: string | null;
   loaned_items_name: string[] | string;
+  note: string | null;
 };
 
 type Device = {
@@ -46,7 +48,6 @@ type Device = {
 
 const Landingpage: React.FC = () => {
   const { t } = useTranslation();
-  const navigate = useNavigate();
 
   const [isLoading, setIsLoading] = useState(false);
   const [loans, setLoans] = useState<Loan[]>([]);
@@ -59,7 +60,7 @@ const Landingpage: React.FC = () => {
   const setError = (
     status: "error" | "success",
     message: string,
-    description: string
+    description: string,
   ) => {
     setIsError(false);
     setErrorStatus(status);
@@ -85,7 +86,7 @@ const Landingpage: React.FC = () => {
           setError(
             "error",
             t("error-by-loading"),
-            t("unexpected-date-format_loan")
+            t("unexpected-date-format_loan"),
           );
         }
 
@@ -102,7 +103,7 @@ const Landingpage: React.FC = () => {
           setError(
             "error",
             t("error-by-loading"),
-            t("unexpected-date-format_device")
+            t("unexpected-date-format_device"),
           );
         }
       } catch (e) {
@@ -115,14 +116,8 @@ const Landingpage: React.FC = () => {
   }, []);
 
   return (
-    <>
+    <Container className="px-6 sm:px-8 pt-10">
-      <Heading as="h1" size="lg" mb={2}>
+      <Header />
-        Matthias-Claudius-Schule Technik
-      </Heading>
-
-      <Button onClick={() => navigate("/", { replace: true })}>
-        {t("back")}
-      </Button>
 
       <Heading as="h2" size="md" mb={4}>
         {t("all-loans")}
@@ -168,6 +163,9 @@ const Landingpage: React.FC = () => {
               <Table.ColumnHeader>
                 <strong>{t("return-date")}</strong>
               </Table.ColumnHeader>
+              <Table.ColumnHeader>
+                <strong>{t("note")}</strong>
+              </Table.ColumnHeader>
             </Table.Row>
           </Table.Header>
           <Table.Body>
@@ -184,6 +182,7 @@ const Landingpage: React.FC = () => {
                 </Table.Cell>
                 <Table.Cell>{formatDateTime(loan.take_date)}</Table.Cell>
                 <Table.Cell>{formatDateTime(loan.returned_date)}</Table.Cell>
+                <Table.Cell>{loan.note}</Table.Cell>
               </Table.Row>
             ))}
           </Table.Body>
@@ -260,7 +259,7 @@ const Landingpage: React.FC = () => {
           </HStack>
         </Button>
       </HStack>
-    </>
+    </Container>
   );
 };
 

FrontendV2/src/pages/LoginPage.tsx

@@ -4,25 +4,47 @@ import { Button, Card, Field, Input, Stack } from "@chakra-ui/react";
 import { setIsLoggedInAtom, triggerLogoutAtom } from "@/states/Atoms";
 import { useAtom } from "jotai";
 import Cookies from "js-cookie";
-import { Navigate, useNavigate } from "react-router-dom";
+import { 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";
+import { unlockAnimation } from "@/components/dotLottie";
+import { logoutAnimation } from "@/components/dotLottie";
 
 export const LoginPage = () => {
   const { t } = useTranslation();
 
   const [isLoggedIn, setIsLoggedIn] = useAtom(setIsLoggedInAtom);
   const [triggerLogout, setTriggerLogout] = useAtom(triggerLogoutAtom);
+  const [showAnimation, setShowAnimation] = useState(false);
+  const [showLogout, setShowLogout] = useState(false);
   const navigate = useNavigate();
+  const location = useLocation();
+  const from = location.state?.from?.pathname || "/";
 
   useEffect(() => {
-    if (isLoggedIn) {
+    if (triggerLogout) {
-      navigate("/", { replace: true });
+      setShowLogout(true);
-      window.location.reload(); // Wenn entfernt: Seite bleibt schwarz und muss manuell neu geladen werden
+      window.setTimeout(() => {
+        setShowLogout(false);
+      }, 4500);
     }
-  }, [isLoggedIn, navigate]);
+
+    if (!isLoggedIn) return;
+
+    // Existing sessions should redirect immediately, fresh logins wait for animation.
+    if (!showAnimation) {
+      navigate(from, { replace: true });
+      return;
+    }
+
+    const timeoutId = window.setTimeout(() => {
+      navigate(from, { replace: true });
+      window.location.reload(); // keeps user context in sync after login
+    }, 3000);
+
+    return () => window.clearTimeout(timeoutId);
+  }, [isLoggedIn, showAnimation, navigate, from]);
 
   const loginFnc = async (username: string, password: string) => {
     const response = await fetch(`${API_BASE}/api/users/login`, {
@@ -41,6 +63,8 @@ export const LoginPage = () => {
       };
     }
 
+    setShowAnimation(true);
+
     Cookies.set("token", data.token);
     setIsLoggedIn(true);
     return { success: true };
@@ -61,15 +85,23 @@ export const LoginPage = () => {
       return;
     }
     setTriggerLogout(false);
-    navigate("/", { replace: true });
   };
 
-  if (isLoggedIn) {
-    return <Navigate to="/" replace />;
-  }
-
   return (
-    <div className="min-h-screen flex items-center justify-center p-4">
+    <>
+      {showAnimation && (
+        <div className="fixed inset-0 z-9999 flex items-center justify-center pointer-events-none">
+          <div>{unlockAnimation()}</div>
+        </div>
+      )}
+
+      {showLogout && (
+        <div className="fixed inset-0 z-9999 flex items-center justify-center pointer-events-none">
+          <div>{logoutAnimation()}</div>
+        </div>
+      )}
+
+      <div className="flex flex-1 items-center justify-center p-4">
         <form onSubmit={(e) => e.preventDefault()}>
           <Card.Root maxW="sm">
             <Card.Header>
@@ -96,9 +128,17 @@ export const LoginPage = () => {
             </Card.Body>
             <Card.Footer justifyContent="flex-end">
               {isError && (
-              <MyAlert status="error" title={errorMsg} description={errorDsc} />
+                <MyAlert
+                  status="error"
+                  title={errorMsg}
+                  description={errorDsc}
+                />
               )}
-            <Button type="submit" onClick={() => handleLogin()} variant="solid">
+              <Button
+                type="submit"
+                onClick={() => handleLogin()}
+                variant="solid"
+              >
                 Login
               </Button>
             </Card.Footer>
@@ -113,7 +153,7 @@ export const LoginPage = () => {
             </Card.Footer>
           </Card.Root>
         </form>
-      <Footer />
       </div>
+    </>
   );
 };

FrontendV2/src/pages/MyLoansPage.tsx

@@ -112,6 +112,86 @@ export const MyLoansPage = () => {
     return `${d}.${M}.${y} ${h}:${min}`;
   };
 
+  const handleTakeAction = async (loanCode: string) => {
+    try {
+      const res = await fetch(
+        `${API_BASE}/api/loans/set-take-date/${loanCode}`,
+        {
+          method: "POST",
+          headers: {
+            Authorization: `Bearer ${Cookies.get("token")}`,
+          },
+        },
+      );
+
+      if (!res.ok) {
+        setMsgStatus("error");
+        setMsgTitle(t("error"));
+        setMsgDescription(t("error-take-loan"));
+        setIsMsg(true);
+        return;
+      }
+
+      // Update the loan in state
+      setLoans((prev) =>
+        prev.map((loan) =>
+          loan.loan_code === loanCode
+            ? { ...loan, take_date: new Date().toISOString() }
+            : loan,
+        ),
+      );
+      setMsgStatus("success");
+      setMsgTitle(t("success"));
+      setMsgDescription(t("take-loan-success"));
+      setIsMsg(true);
+    } catch (e) {
+      setMsgStatus("error");
+      setMsgTitle(t("error"));
+      setMsgDescription(t("network-error"));
+      setIsMsg(true);
+    }
+  };
+
+  const handleReturnAction = async (loanCode: string) => {
+    try {
+      const res = await fetch(
+        `${API_BASE}/api/loans/set-return-date/${loanCode}`,
+        {
+          method: "POST",
+          headers: {
+            Authorization: `Bearer ${Cookies.get("token")}`,
+          },
+        },
+      );
+
+      if (!res.ok) {
+        setMsgStatus("error");
+        setMsgTitle(t("error"));
+        setMsgDescription(t("error-return-loan"));
+        setIsMsg(true);
+        return;
+      }
+
+      // Update the loan in state
+      setLoans((prev) =>
+        prev.map((loan) =>
+          loan.loan_code === loanCode
+            ? { ...loan, returned_date: new Date().toISOString() }
+            : loan,
+        ),
+      );
+      setMsgStatus("success");
+      setMsgTitle(t("success"));
+      setMsgDescription(t("return-loan-success"));
+      setIsMsg(true);
+    } catch (e) {
+      setMsgStatus("error");
+      setMsgTitle(t("error"));
+      setMsgDescription(t("network-error"));
+      setIsMsg(true);
+    }
+  };
+
   return (
     <>
       <Container className="px-6 sm:px-8 pt-10">
@@ -190,8 +270,33 @@ export const MyLoansPage = () => {
                           : "-"}
                       </Text>
                     </Table.Cell>
-                    <Table.Cell>{formatDate(loan.take_date)}</Table.Cell>
+                    <Table.Cell>
-                    <Table.Cell>{formatDate(loan.returned_date)}</Table.Cell>
+                      {loan.take_date ? (
+                        formatDate(loan.take_date)
+                      ) : (
+                        <Button
+                          size="xs"
+                          colorPalette="teal"
+                          onClick={() => handleTakeAction(loan.loan_code)}
+                        >
+                          {t("take")}
+                        </Button>
+                      )}
+                    </Table.Cell>
+                    <Table.Cell>
+                      {loan.returned_date ? (
+                        formatDate(loan.returned_date)
+                      ) : (
+                        <Button
+                          size="xs"
+                          colorPalette="blue"
+                          onClick={() => handleReturnAction(loan.loan_code)}
+                          disabled={!loan.take_date}
+                        >
+                          {t("return")}
+                        </Button>
+                      )}
+                    </Table.Cell>
                     <Table.Cell>{loan.note}</Table.Cell>
                     <Table.Cell>
                       <Dialog.Root role="alertdialog">

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",

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

@@ -63,7 +63,7 @@
     "timezone-info": "Die angezeigten Daten und Uhrzeiten werden in deutscher Zeitzone dargestellt und müssen auch so eingegeben werden.",
     "optional-note": "Optionale Notiz",
     "note": "Notiz",
-    "user-info-desc": "Hier können Sie Ihre persönlichen Informationen einsehen und ändern.",
+    "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.",
     "role": "Rolle",
     "admin-status": "Admin-Status",
     "first-name": "Vorname",
@@ -72,5 +72,21 @@
     "last-borrowed-person": "Zuletzt ausgeliehen von",
     "currently-borrowed-by": "Derzeit ausgeliehen von",
     "back": "Zurückgehen",
-    "landingpage": "Übersichtsseite"
+    "landingpage": "Übersichtsseite",
+    "contactPage_successHeadline": "Nachricht erfolgreich gesendet",
+    "contactPage_successText": "Vielen Dank, dass Sie uns kontaktiert haben. Wir werden uns so schnell wie möglich bei Ihnen melden.",
+    "contactPage_errorHeadline": "Fehler beim Senden der Nachricht",
+    "contactPage_errorText": "Beim Senden Ihrer Nachricht ist ein Fehler aufgetreten. Bitte versuchen Sie es später erneut.",
+    "contactPage_sendButton": "Nachricht senden",
+    "contactPage_messageLabel": "Nachricht",
+    "contactPage_messagePlaceholder": "Geben Sie hier Ihre Nachricht ein...",
+    "contactPage_messageErrorText": "Dieses Feld darf nicht leer sein.",
+    "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.",
+    "contactPage_messageDescription": "Bitte geben Sie hier Ihre Nachricht ein. Der Systemadministrator (Theis Gaedigk) wird sich so schnell wie möglich bei Ihnen melden."
 }

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

@@ -63,7 +63,7 @@
     "timezone-info": "The displayed dates and times are shown in Berlin timezone and must also be entered as such.",
     "optional-note": "Optional note",
     "note": "Note",
-    "user-info-desc": "Here you can view and edit your personal information.",
+    "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.",
     "role": "Role",
     "admin-status": "Admin status",
     "first-name": "First name",
@@ -72,5 +72,21 @@
     "last-borrowed-person": "Last borrowed by",
     "currently-borrowed-by": "Currently borrowed by",
     "back": "Go back",
-    "landingpage": "Overview page"
+    "landingpage": "Overview page",
+    "contactPage_successHeadline": "Message sent successfully",
+    "contactPage_successText": "Thank you for contacting us. We will get back to you as soon as possible.",
+    "contactPage_errorHeadline": "Error sending message",
+    "contactPage_errorText": "An error occurred while sending your message. Please try again later.",
+    "contactPage_sendButton": "Send message",
+    "contactPage_messageLabel": "Message",
+    "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",
+    "return-loan-success": "Loan returned successfully",
+    "network-error": "Network error. Please contact the administrator.",
+    "contactPage_messageDescription": "Please enter your message here. The system administrator (Theis Gaedigk) will get back to you as soon as possible."
 }

LICENSE

@@ -0,0 +1,6 @@
+Copyright (c) 2026 Theis Gaedigk
+
+All rights reserved.
+
+This source code is not to be copied, modified, or distributed in any form
+without explicit written permission from the author.

admin/index.html

@@ -1,10 +1,10 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/user-star.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Admin panel</title>
+    <title>Adminpanel</title>
   </head>
   <body>
     <div id="root"></div>

admin/nginx.conf

@@ -9,6 +9,14 @@ server {
     try_files $uri $uri/ /index.html;
   }
 
+  location = /backend {
+    return 301 /backend/;
+  }
+
+  location /backend/ {
+    proxy_pass http://borrow_system-backend_v2:8004/;
+  }
+
   location ~* \.(?:js|mjs|css|png|jpg|jpeg|gif|ico|svg|woff2?)$ {
     expires 1y;
     access_log off;

admin/package-lock.json

@@ -3675,12 +3675,16 @@
       "license": "MIT"
     },
     "node_modules/cookie": {
-      "version": "1.0.2",
+      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
-      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+      "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
       "license": "MIT",
       "engines": {
         "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
       }
     },
     "node_modules/cosmiconfig": {
@@ -4466,9 +4470,9 @@
       "license": "MIT"
     },
     "node_modules/js-yaml": {
-      "version": "4.1.0",
+      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
-      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
       "license": "MIT",
       "dependencies": {
         "argparse": "^2.0.1"
@@ -4904,9 +4908,9 @@
       }
     },
     "node_modules/minizlib": {
-      "version": "3.0.2",
+      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-3.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-3.1.0.tgz",
-      "integrity": "sha512-oG62iEk+CYt5Xj2YqI5Xi9xWUeZhDI8jjQmC5oThVH5JGCTgIjr7ciJDzC7MBzYd//WvR1OTmP5Q38Q8ShQtVA==",
+      "integrity": "sha512-KZxYo1BUkWD2TVFLr0MQoM8vUUigWD3LlD83a/75BqC+4qE0Hb1Vo5v1FgcfaNXvfXzr+5EhQ6ing/CaBijTlw==",
       "license": "MIT",
       "dependencies": {
         "minipass": "^7.1.2"
@@ -4915,21 +4919,6 @@
         "node": ">= 18"
       }
     },
-    "node_modules/mkdirp": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-3.0.1.tgz",
-      "integrity": "sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==",
-      "license": "MIT",
-      "bin": {
-        "mkdirp": "dist/cjs/src/bin.js"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -5307,9 +5296,9 @@
       }
     },
     "node_modules/react-router": {
-      "version": "7.8.2",
+      "version": "7.13.0",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.8.2.tgz",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.13.0.tgz",
-      "integrity": "sha512-7M2fR1JbIZ/jFWqelpvSZx+7vd7UlBTfdZqf6OSdF9g6+sfdqJDAWcak6ervbHph200ePlu+7G8LdoiC3ReyAQ==",
+      "integrity": "sha512-PZgus8ETambRT17BUm/LL8lX3Of+oiLaPuVTRH3l1eLvSPpKO3AvhAEb5N7ihAFZQrYDqkvvWfFh9p0z9VsjLw==",
       "license": "MIT",
       "dependencies": {
         "cookie": "^1.0.1",
@@ -5329,12 +5318,12 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "7.8.2",
+      "version": "7.13.0",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.8.2.tgz",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.13.0.tgz",
-      "integrity": "sha512-Z4VM5mKDipal2jQ385H6UBhiiEDlnJPx6jyWsTYoZQdl5TrjxEV2a9yl3Fi60NBJxYzOTGTTHXPi0pdizvTwow==",
+      "integrity": "sha512-5CO/l5Yahi2SKC6rGZ+HDEjpjkGaG/ncEP7eWFTvFxbHP8yeeI0PxTDjimtpXYlR3b3i9/WIL4VJttPrESIf2g==",
       "license": "MIT",
       "dependencies": {
-        "react-router": "7.8.2"
+        "react-router": "7.13.0"
       },
       "engines": {
         "node": ">=20.0.0"
@@ -5492,9 +5481,9 @@
       }
     },
     "node_modules/set-cookie-parser": {
-      "version": "2.7.1",
+      "version": "2.7.2",
-      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
-      "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
+      "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
       "license": "MIT"
     },
     "node_modules/shebang-command": {
@@ -5649,16 +5638,15 @@
       }
     },
     "node_modules/tar": {
-      "version": "7.4.3",
+      "version": "7.5.7",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-7.4.3.tgz",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-7.5.7.tgz",
-      "integrity": "sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==",
+      "integrity": "sha512-fov56fJiRuThVFXD6o6/Q354S7pnWMJIVlDBYijsTNx6jKSE4pvrDTs6lUnmGvNyfJwFQQwWy3owKz1ucIhveQ==",
-      "license": "ISC",
+      "license": "BlueOak-1.0.0",
       "dependencies": {
         "@isaacs/fs-minipass": "^4.0.0",
         "chownr": "^3.0.0",
         "minipass": "^7.1.2",
-        "minizlib": "^3.0.1",
+        "minizlib": "^3.1.0",
-        "mkdirp": "^3.0.1",
         "yallist": "^5.0.0"
       },
       "engines": {

admin/package.json

@@ -1,7 +1,7 @@
 {
   "name": "admin",
   "private": true,
-  "version": "0.0.0",
+  "version": "v1.3.2 (dev)",
   "type": "module",
   "scripts": {
     "dev": "vite",

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
+                <PasswordInput
-                  type="password"
                   value={password}
                   onChange={(e) => setPassword(e.target.value)}
                 />

admin/src/components/APIKeyTable.tsx

@@ -63,7 +63,6 @@ const APIKeyTable: React.FC = () => {
           }
         );
         const data = await response.json();
-        console.log(data);
         return data;
       } catch (error) {
         setError("error", "Failed to fetch items", "There is an error");

admin/src/components/AddItemForm.tsx

@@ -29,8 +29,8 @@ const AddItemForm: React.FC<AddItemFormProps> = ({ onClose, alert }) => {
               <Input id="item_name" placeholder="z.B. Laptop" />
             </Field.Root>
             <Field.Root>
-              <Field.Label>Schließfachnummer (immer zwei Zahlen)</Field.Label>
+              <Field.Label>Schließfachnummer</Field.Label>
-              <Input id="lockerNumber" placeholder="Nummer 01 - 06" />
+              <Input id="safe_nr" placeholder="Nummer 1 - 6" />
             </Field.Root>
             <Field.Root>
               <Field.Label>Ausleih-Berechtigung (Rolle)</Field.Label>
@@ -57,17 +57,15 @@ const AddItemForm: React.FC<AddItemFormProps> = ({ onClose, alert }) => {
                 (document.getElementById("can_borrow_role") as HTMLInputElement)
                   ?.value
               );
-              const lockerValue = (
+              const safeNrValue = (
-                document.getElementById("lockerNumber") as HTMLInputElement
+                document.getElementById("safe_nr") as HTMLInputElement
               )?.value.trim();
 
-              const lockerNumber =
+              const safeNr = safeNrValue === "" ? null : safeNrValue;
-                lockerValue === "" ? null : Number(lockerValue);
 
               if (!name || Number.isNaN(role)) return;
-              if (lockerNumber !== null && Number.isNaN(lockerNumber)) return;
 
-              const res = await createItem(name, role, lockerNumber);
+              const res = await createItem(name, role, safeNr);
               if (res.success) {
                 alert(
                   "success",

admin/src/components/ItemTable.tsx

@@ -38,6 +38,7 @@ type Items = {
   can_borrow_role: string;
   in_safe: boolean;
   safe_nr: string;
+  door_key: string;
   entry_created_at: string;
   entry_updated_at: string;
   last_borrowed_person: string | null;
@@ -68,7 +69,13 @@ const ItemTable: React.FC = () => {
 
   const handleLockerNumberChange = (id: number, value: string) => {
     setItems((prev) =>
-      prev.map((it) => (it.id === id ? { ...it, lockerNumber: 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))
     );
   };
 
@@ -186,7 +193,12 @@ const ItemTable: React.FC = () => {
 
       {/* make table fill available width, like UserTable */}
       {!isLoading && (
-        <Table.Root size="sm" striped w="100%" style={{ tableLayout: "auto" }}>
+        <Table.Root
+          size="sm"
+          striped
+          w="100%"
+          style={{ tableLayout: "auto" }} // Spalten nach Content
+        >
           <Table.Header>
             <Table.Row>
               <Table.ColumnHeader>
@@ -201,9 +213,12 @@ const ItemTable: React.FC = () => {
               <Table.ColumnHeader>
                 <strong>Im Schließfach</strong>
               </Table.ColumnHeader>
-              <Table.ColumnHeader>
+              <Table.ColumnHeader width="1%" whiteSpace="nowrap">
                 <strong>Schließfachnummer</strong>
               </Table.ColumnHeader>
+              <Table.ColumnHeader width="1%" whiteSpace="nowrap">
+                <strong>Schlüssel</strong>
+              </Table.ColumnHeader>
               <Table.ColumnHeader>
                 <strong>Eintrag erstellt am</strong>
               </Table.ColumnHeader>
@@ -216,7 +231,7 @@ const ItemTable: React.FC = () => {
               <Table.ColumnHeader>
                 <strong>Dav **</strong>
               </Table.ColumnHeader>
-              <Table.ColumnHeader>
+              <Table.ColumnHeader width="1%" whiteSpace="nowrap">
                 <strong>Aktionen</strong>
               </Table.ColumnHeader>
             </Table.Row>
@@ -290,17 +305,28 @@ const ItemTable: React.FC = () => {
                     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>
+                <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) {

admin/src/components/UserTable.tsx

@@ -85,7 +85,6 @@ const UserTable: React.FC = () => {
       setIsLoading(true);
       try {
         const data = await fetchUserData();
-        console.log(data);
         if (Array.isArray(data)) {
           setUsers(data);
         } else {

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" }
+  }
+}

admin/src/utils/userActions.ts

@@ -165,9 +165,8 @@ export const deleteItem = async (itemId: number) => {
 export const createItem = async (
   item_name: string,
   can_borrow_role: number,
-  lockerNumber: number | null
+  lockerNumber: string | null
 ) => {
-  console.log(JSON.stringify({ item_name, can_borrow_role, lockerNumber }));
   try {
     const response = await fetch(
       `${API_BASE}/api/admin/item-data/create-item`,
@@ -184,7 +183,7 @@ export const createItem = async (
       return {
         success: false,
         message:
-          "Fehler beim Erstellen des Gegenstands. Der Name des Gegenstandes darf nicht mehrmals vergeben werden.",
+          "Fehler beim Erstellen des Gegenstands. Der Name des Gegenstandes und die Schließfachnummer dürfen nicht mehrmals vergeben werden.",
       };
     }
     return { success: true };
@@ -198,9 +197,9 @@ export const handleEditItems = async (
   itemId: number,
   item_name: string,
   safe_nr: string | null,
+  door_key: string | null,
   can_borrow_role: string
 ) => {
-  const newSafeNr = Number(safe_nr || 0);
   try {
     const response = await fetch(
       `${API_BASE}/api/admin/item-data/edit-item/${itemId}`,
@@ -210,7 +209,7 @@ export const handleEditItems = async (
           "Content-Type": "application/json",
           Authorization: `Bearer ${Cookies.get("token")}`,
         },
-        body: JSON.stringify({ item_name, newSafeNr, can_borrow_role }),
+        body: JSON.stringify({ item_name, safe_nr, door_key, can_borrow_role }),
       }
     );
     if (!response.ok) {

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,14 +24,10 @@
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true,
 
-    /* Chakra / Pfad Aliases */
+    /* Path aliases */
-    "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]
-    },
+    }
-
-    "forceConsistentCasingInFileNames": true,
-    "ignoreDeprecations": "5.0"
   },
   "include": ["src"]
 }

backend/Dockerfile

@@ -1,12 +0,0 @@
-FROM node:20-alpine
-
-ENV NODE_ENV=production
-WORKDIR /backend
-
-COPY package*.json ./
-RUN npm ci --omit=dev
-
-COPY . .
-
-EXPOSE 8002
-CMD ["npm", "start"]

backend/info.json

@@ -1,8 +0,0 @@
-{
-    "backend-info": {
-        "version": "v2.0 (dev)"
-    },
-    "frontend-info": {
-        "version": "v2.0 (dev)"
-    }
-}

backend/package.json

@@ -1,22 +0,0 @@
-{
-  "name": "backend",
-  "version": "1.0.0",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "node server.js"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "description": "",
-  "dependencies": {
-    "cors": "^2.8.5",
-    "dotenv": "^17.2.1",
-    "ejs": "^3.1.10",
-    "express": "^5.1.0",
-    "jose": "^6.0.12",
-    "mysql2": "^3.14.3",
-    "nodemailer": "^7.0.6"
-  }
-}

backend/routes/api.js

@@ -1,599 +0,0 @@
-import express from "express";
-import {
-  loginFunc,
-  getItemsFromDatabase,
-  getLoansFromDatabase,
-  getUserLoansFromDatabase,
-  deleteLoanFromDatabase,
-  getBorrowableItemsFromDatabase,
-  createLoanInDatabase,
-  onTake,
-  loginAdmin,
-  onReturn,
-  getAllUsers,
-  deleteUserID,
-  handleEdit,
-  createUser,
-  getAllLoans,
-  getAllItems,
-  deleteItemID,
-  createItem,
-  changeUserPassword,
-  changeUserPasswordFRONTEND,
-  changeInSafeStateV2,
-  updateItemByID,
-  getAllApiKeys,
-  createAPIentry,
-  deleteAPKey,
-  getLoanInfoWithID,
-  SETdeleteLoanFromDatabase,
-} from "../services/database.js";
-import { authenticate, generateToken } from "../services/tokenService.js";
-const router = express.Router();
-import nodemailer from "nodemailer";
-import dotenv from "dotenv";
-dotenv.config();
-
-// Nice HTML + text templates for the loan email
-function buildLoanEmail({ user, items, startDate, endDate, createdDate }) {
-  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>
-            </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 }) {
-  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)}`,
-  ].join("\n");
-}
-
-function sendMailLoan(user, items, startDate, endDate, createdDate) {
-  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,
-      }),
-      html: buildLoanEmail({ user, items, startDate, endDate, createdDate }),
-    });
-
-    console.log("Message sent:", info.messageId);
-  })();
-  console.log("sendMailLoan called");
-}
-
-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";
-};
-
-router.post("/login", async (req, res) => {
-  const result = await loginFunc(req.body.username, req.body.password);
-  if (result.success) {
-    const token = await generateToken({
-      username: result.data.username,
-      role: result.data.role,
-    });
-    res.status(200).json({ message: "Login successful", token });
-  } else {
-    res.status(401).json({ message: "Invalid credentials" });
-  }
-});
-
-router.get("/items", authenticate, async (req, res) => {
-  const result = await getItemsFromDatabase(req.user.role);
-  if (result.success) {
-    res.status(200).json(result.data);
-  } else {
-    res.status(500).json({ message: "Failed to fetch items" });
-  }
-});
-
-router.get("/loans", authenticate, async (req, res) => {
-  const result = await getLoansFromDatabase();
-  if (result.success) {
-    res.status(200).json(result.data);
-  } else {
-    res.status(500).json({ message: "Failed to fetch loans" });
-  }
-});
-
-router.get("/userLoans", authenticate, async (req, res) => {
-  const result = await getUserLoansFromDatabase(req.user.username);
-  if (result.success) {
-    res.status(200).json(result.data);
-  } else {
-    res.status(500).json({ message: "Failed to fetch user loans" });
-  }
-});
-
-router.delete("/deleteLoan/:id", authenticate, async (req, res) => {
-  const loanId = req.params.id;
-  const result = await deleteLoanFromDatabase(loanId);
-  if (result.success) {
-    res.status(200).json({ message: "Loan deleted successfully" });
-  } else {
-    res.status(500).json({ message: "Failed to delete loan" });
-  }
-});
-
-router.delete("/SETdeleteLoan/:id", authenticate, async (req, res) => {
-  const loanId = req.params.id;
-  const result = await SETdeleteLoanFromDatabase(loanId);
-  if (result.success) {
-    res.status(200).json({ message: "Loan deleted successfully" });
-  } else {
-    res.status(500).json({ message: "Failed to delete loan" });
-  }
-});
-
-router.post("/borrowableItems", authenticate, async (req, res) => {
-  const { startDate, endDate } = req.body || {};
-  if (!startDate || !endDate) {
-    return res
-      .status(400)
-      .json({ message: "startDate and endDate are required" });
-  }
-
-  const result = await getBorrowableItemsFromDatabase(
-    startDate,
-    endDate,
-    req.user.role
-  );
-  if (result.success) {
-    // return the array directly for consistency with /items
-    return res.status(200).json(result.data);
-  } else {
-    return res
-      .status(500)
-      .json({ message: "Failed to fetch borrowable items" });
-  }
-});
-
-router.post("/takeLoan/:id", authenticate, async (req, res) => {
-  const loanId = req.params.id;
-  const result = await onTake(loanId);
-  if (result.success) {
-    res.status(200).json({ message: "Loan taken successfully" });
-  } else {
-    res.status(500).json({ message: "Failed to take loan" });
-  }
-});
-
-router.post("/returnLoan/:id", authenticate, async (req, res) => {
-  const loanId = req.params.id;
-  const result = await onReturn(loanId);
-  if (result.success) {
-    res.status(200).json({ message: "Loan returned successfully" });
-  } else {
-    res.status(500).json({ message: "Failed to return loan" });
-  }
-});
-
-router.post("/createLoan", authenticate, async (req, res) => {
-  try {
-    const { items, startDate, endDate } = req.body || {};
-
-    if (!Array.isArray(items) || items.length === 0) {
-      return res.status(400).json({ message: "Items array is required" });
-    }
-
-    // If dates are not provided, default to now .. +7 days
-    const start =
-      startDate ?? new Date().toISOString().slice(0, 19).replace("T", " ");
-    const end =
-      endDate ??
-      new Date(Date.now() + 7 * 24 * 60 * 60 * 1000)
-        .toISOString()
-        .slice(0, 19)
-        .replace("T", " ");
-
-    // Coerce item IDs to numbers and filter invalids
-    const itemIds = items
-      .map((v) => Number(v))
-      .filter((n) => Number.isFinite(n));
-
-    if (itemIds.length === 0) {
-      return res.status(400).json({ message: "No valid item IDs provided" });
-    }
-
-    const result = await createLoanInDatabase(
-      req.user.username,
-      start,
-      end,
-      itemIds
-    );
-
-    if (result.success) {
-      const mailInfo = await getLoanInfoWithID(result.data.id);
-      console.log(mailInfo);
-      sendMailLoan(
-        mailInfo.data.username,
-        mailInfo.data.loaned_items_name,
-        mailInfo.data.start_date,
-        mailInfo.data.end_date,
-        mailInfo.data.created_at
-      );
-      return res.status(201).json({
-        message: "Loan created successfully",
-        loanId: result.data.id,
-        loanCode: result.data.loan_code,
-      });
-    }
-
-    if (result.code === "CONFLICT") {
-      return res
-        .status(409)
-        .json({ message: "Items not available in the selected period" });
-    }
-
-    if (result.code === "BAD_REQUEST") {
-      return res.status(400).json({ message: result.message });
-    }
-
-    return res.status(500).json({ message: "Failed to create loan" });
-  } catch (err) {
-    console.error("createLoan error:", err);
-    return res.status(500).json({ message: "Failed to create loan" });
-  }
-});
-
-router.post("/changePassword", authenticate, async (req, res) => {
-  const { oldPassword, newPassword } = req.body || {};
-  const username = req.user.username;
-  const result = await changeUserPasswordFRONTEND(
-    username,
-    oldPassword,
-    newPassword
-  );
-  if (result.success) {
-    res.status(200).json({ message: "Password changed successfully" });
-  } else {
-    res.status(500).json({ message: "Failed to change password" });
-  }
-});
-
-// Admin panel functions
-
-router.post("/loginAdmin", async (req, res) => {
-  const { username, password } = req.body || {};
-  if (!username || !password) {
-    return res
-      .status(400)
-      .json({ message: "Username and password are required" });
-  }
-
-  const result = await loginAdmin(username, password);
-  if (result.success) {
-    const token = await generateToken({
-      username: result.data.username,
-      role: result.data.role,
-    });
-
-    return res.status(200).json({
-      message: "Login successful",
-      first_name: result.data.first_name,
-      token,
-    });
-  }
-
-  return res.status(401).json({ message: "Invalid credentials" });
-});
-
-router.get("/allUsers", authenticate, async (req, res) => {
-  const result = await getAllUsers();
-  if (result.success) {
-    return res.status(200).json(result.data);
-  }
-  return res.status(500).json({ message: "Failed to fetch users" });
-});
-
-router.delete("/deleteUser/:id", authenticate, async (req, res) => {
-  const userId = req.params.id;
-  const result = await deleteUserID(userId);
-  if (result.success) {
-    return res.status(200).json({ message: "User deleted successfully" });
-  }
-  return res.status(500).json({ message: "Failed to delete user" });
-});
-
-router.get("/verifyToken", authenticate, async (req, res) => {
-  res.status(200).json({ message: "Token is valid", user: req.user });
-});
-
-router.post("/editUser/:id", authenticate, async (req, res) => {
-  const userId = req.params.id;
-  const { username, role } = req.body || {};
-  const result = await handleEdit(userId, username, role);
-  if (result.success) {
-    return res.status(200).json({ message: "User edited successfully" });
-  }
-  return res.status(500).json({ message: "Failed to edit user" });
-});
-
-router.post("/createUser", authenticate, async (req, res) => {
-  const { username, role, password } = req.body || {};
-  const result = await createUser(username, role, password);
-  if (result.success) {
-    return res.status(201).json({ message: "User created successfully" });
-  }
-  return res.status(500).json({ message: "Failed to create user" });
-});
-
-router.get("/allLoans", authenticate, async (req, res) => {
-  const result = await getAllLoans();
-  if (result.success) {
-    return res.status(200).json(result.data);
-  }
-  return res.status(500).json({ message: "Failed to fetch loans" });
-});
-
-router.get("/allItems", authenticate, async (req, res) => {
-  const result = await getAllItems();
-  if (result.success) {
-    return res.status(200).json(result.data);
-  }
-  return res.status(500).json({ message: "Failed to fetch items" });
-});
-
-router.delete("/deleteItem/:id", authenticate, async (req, res) => {
-  const itemId = req.params.id;
-  const result = await deleteItemID(itemId);
-  if (result.success) {
-    return res.status(200).json({ message: "Item deleted successfully" });
-  }
-  return res.status(500).json({ message: "Failed to delete item" });
-});
-
-router.post("/createItem", authenticate, async (req, res) => {
-  const { item_name, can_borrow_role } = req.body || {};
-  const result = await createItem(item_name, can_borrow_role);
-  if (result.success) {
-    return res.status(201).json({ message: "Item created successfully" });
-  }
-  return res.status(500).json({ message: "Failed to create item" });
-});
-
-router.post("/changePWadmin", authenticate, async (req, res) => {
-  const newPassword = req.body.newPassword;
-  if (!newPassword) {
-    return res.status(400).json({ message: "New password is required" });
-  }
-
-  const result = await changeUserPassword(req.body.username, newPassword);
-  if (result.success) {
-    return res.status(200).json({ message: "Password changed successfully" });
-  }
-  return res.status(500).json({ message: "Failed to change password" });
-});
-
-router.post("/updateItemByID", authenticate, async (req, res) => {
-  const role = req.body.can_borrow_role;
-  const itemId = req.body.itemId;
-  const item_name = req.body.item_name;
-  const result = await updateItemByID(itemId, item_name, role);
-  if (result.success) {
-    return res.status(200).json({ message: "Item updated successfully" });
-  }
-  return res.status(500).json({ message: "Failed to update item" });
-});
-
-router.put("/changeSafeState/:itemId", authenticate, async (req, res) => {
-  const itemId = req.params.itemId;
-  const result = await changeInSafeStateV2(itemId);
-  if (result.success) {
-    return res
-      .status(200)
-      .json({ message: "Item safe state updated successfully" });
-  }
-  return res.status(500).json({ message: "Failed to update item safe state" });
-});
-
-router.get("/apiKeys", authenticate, async (req, res) => {
-  const result = await getAllApiKeys();
-  if (result.success) {
-    return res.status(200).json(result.data);
-  }
-  return res.status(500).json({ message: "Failed to fetch API keys" });
-});
-
-router.delete("/deleteAPKey/:id", authenticate, async (req, res) => {
-  const apiKeyId = req.params.id;
-  const result = await deleteAPKey(apiKeyId);
-  if (result.success) {
-    return res.status(200).json({ message: "API key deleted successfully" });
-  }
-  return res.status(500).json({ message: "Failed to delete API key" });
-});
-
-router.post("/createAPIentry", authenticate, async (req, res) => {
-  const apiKey = req.body.apiKey;
-  const user = req.body.user;
-  if (!apiKey || !user) {
-    return res.status(400).json({ message: "API key and user are required" });
-  }
-
-  // Ensure apiKey is a number
-  const apiKeyNum = Number(apiKey);
-  if (!Number.isFinite(apiKeyNum)) {
-    return res.status(400).json({ message: "API key must be a number" });
-  }
-
-  const result = await createAPIentry(apiKeyNum, user);
-  if (result.success) {
-    return res.status(201).json({ message: "API key created successfully" });
-  }
-  if (result.code === "DUPLICATE") {
-    return res.status(409).json({ message: "API key already exists" });
-  }
-  return res.status(500).json({ message: "Failed to create API key" });
-});
-
-router.get("/apiKeys/validate/:key", async (req, res) => {
-  try {
-    const rawKey = req.params.key;
-    const result = await getAllApiKeys();
-    if (!result.success || !Array.isArray(result.data)) {
-      return res.status(500).json({ valid: false });
-    }
-
-    const isValid = result.data.some((entry) => {
-      const val = String(
-        entry?.key ?? entry?.apiKey ?? entry?.api_key ?? entry
-      );
-      return val === String(rawKey);
-    });
-
-    return res.status(200).json({ valid: isValid });
-  } catch (err) {
-    console.error("validate api key error:", err);
-    return res.status(500).json({ valid: false });
-  }
-});
-
-export default router;

backend/routes/apiV2.js

@@ -1,133 +0,0 @@
-import express from "express";
-import dotenv from "dotenv";
-import {
-  getItemsFromDatabaseV2,
-  changeInSafeStateV2,
-  setTakeDateV2,
-  setReturnDateV2,
-  getLoanByCodeV2,
-  getAllLoansV2,
-  getAPIkey,
-} from "../services/database.js";
-
-dotenv.config();
-const router = express.Router();
-
-async function validateAPIKey(apiKey) {
-  try {
-    if (!apiKey) return false;
-    const result = await getAPIkey();
-    if (!result?.success || !Array.isArray(result.data)) return false;
-    return result.data.some((row) => String(row.apiKey) === String(apiKey));
-  } catch (err) {
-    console.error("validateAPIKey error:", err);
-    return false;
-  }
-}
-
-// Add a guard that returns Access Denied instead of hanging
-const apiKeyGuard = async (req, res, next) => {
-  try {
-    const key = req.params.key;
-    if (!key) {
-      return res
-        .status(401)
-        .json({ message: "Access denied: missing API key" });
-    }
-    const ok = await validateAPIKey(key);
-    if (!ok) {
-      return res
-        .status(401)
-        .json({ message: "Access denied: invalid API key" });
-    }
-    next();
-  } catch (e) {
-    console.error("apiKeyGuard error:", e);
-    res.status(500).json({ message: "Internal server error" });
-  }
-};
-
-// Route for API to get ALL items from the database
-router.get("/items/:key", apiKeyGuard, async (req, res) => {
-  const result = await getItemsFromDatabaseV2();
-  if (result.success) {
-    res.status(200).json({ data: result.data });
-  } else {
-    res.status(500).json({ message: "Failed to fetch items" });
-  }
-});
-
-// Route for API to control the position of an item
-router.post(
-  "/controlInSafe/:key/:itemId/:state",
-  apiKeyGuard,
-  async (req, res) => {
-    const itemId = req.params.itemId;
-    const state = req.params.state;
-
-    if (state === "1" || state === "0") {
-      const result = await changeInSafeStateV2(itemId, state);
-      if (result.success) {
-        res.status(200).json({ data: result.data });
-      } else {
-        res.status(500).json({ message: "Failed to update item state" });
-      }
-    } else {
-      res.status(400).json({ message: "Invalid state value" });
-    }
-  }
-);
-
-// Route for API to get a loan by its code
-router.get("/getLoanByCode/:key/:loan_code", apiKeyGuard, async (req, res) => {
-  const loan_code = req.params.loan_code;
-  const result = await getLoanByCodeV2(loan_code);
-  if (result.success) {
-    res.status(200).json({ data: result.data });
-  } else {
-    res.status(404).json({ message: "Loan not found" });
-  }
-});
-
-// Route for API to set the return date by the loan code
-router.post("/setReturnDate/:key/:loan_code", apiKeyGuard, async (req, res) => {
-  const loanCode = req.params.loan_code;
-  const result = await setReturnDateV2(loanCode);
-  if (result.success) {
-    res.status(200).json({ data: result.data });
-  } else {
-    res.status(500).json({ message: "Failed to set return date" });
-  }
-});
-
-// Route for API to set the take away date by the loan code
-router.post("/setTakeDate/:key/:loan_code", apiKeyGuard, async (req, res) => {
-  const loanCode = req.params.loan_code;
-  const result = await setTakeDateV2(loanCode);
-  if (result.success) {
-    res.status(200).json({ data: result.data });
-  } else {
-    res.status(500).json({ message: "Failed to set take date" });
-  }
-});
-
-// Route for API to get ALL loans from the database without sensitive info (only for landingpage)
-router.get("/allLoans", async (req, res) => {
-  const result = await getAllLoansV2();
-  if (result.success) {
-    return res.status(200).json(result.data);
-  }
-  return res.status(500).json({ message: "Failed to fetch loans" });
-});
-
-// Route for API to get ALL items from the database (only for landingpage)
-router.get("/allItems", async (req, res) => {
-  const result = await getItemsFromDatabaseV2();
-  if (result.success) {
-    res.status(200).json(result.data);
-  } else {
-    res.status(500).json({ message: "Failed to fetch items" });
-  }
-});
-
-export default router;

backend/server.js

@@ -1,37 +0,0 @@
-import express from "express";
-import cors from "cors";
-import env from "dotenv";
-import apiRouter from "./routes/api.js";
-import apiRouterV2 from "./routes/apiV2.js";
-env.config();
-const app = express();
-const port = 8002;
-import serverInfo from "./info.json" assert { type: "json" }
-
-app.use(cors());
-// Increase body size limits to support large CSV JSON payloads
-app.use(express.urlencoded({ extended: true, limit: "10mb" }));
-app.set("view engine", "ejs");
-app.use(express.json({ limit: "10mb" }));
-
-app.use("/api", apiRouter);
-app.use("/apiV2", apiRouterV2);
-
-app.get("/", (req, res) => {
-  res.render("index.ejs");
-});
-
-app.get("/server-info", async (req, res) => {
-  res.status(200).json(serverInfo);
-});
-
-app.listen(port, () => {
-  console.log(`Server is running on port: ${port}`);
-});
-
-// error handling code
-app.use((err, req, res, next) => {
-  // Log the error stack and send a generic error response
-  console.error(err.stack);
-  res.status(500).send("Something broke!");
-});

backend/services/database.js

@@ -1,551 +0,0 @@
-import mysql from "mysql2";
-import dotenv from "dotenv";
-dotenv.config();
-
-const pool = mysql
-  .createPool({
-    host: process.env.DB_HOST,
-    user: process.env.DB_USER,
-    password: process.env.DB_PASSWORD,
-    database: process.env.DB_NAME,
-  })
-  .promise();
-
-export const loginFunc = async (username, password) => {
-  const [result] = await pool.query(
-    "SELECT * FROM users WHERE username = ? AND password = ?",
-    [username, password]
-  );
-  if (result.length > 0) return { success: true, data: result[0] };
-  return { success: false };
-};
-
-export const getItemsFromDatabaseV2 = async () => {
-  const [rows] = await pool.query("SELECT * FROM items;");
-  if (rows.length > 0) {
-    return { success: true, data: rows };
-  }
-  return { success: false };
-};
-
-export const getLoanByCodeV2 = async (loan_code) => {
-  const [result] = await pool.query(
-    "SELECT * FROM loans WHERE loan_code = ?;",
-    [loan_code]
-  );
-  if (result.length > 0) {
-    return { success: true, data: result[0] };
-  }
-  return { success: false };
-};
-
-export const changeInSafeStateV2 = async (itemId) => {
-  const [result] = await pool.query(
-    "UPDATE items SET in = NOT inSafe WHERE id = ?",
-    [itemId]
-  );
-  if (result.affectedRows > 0) {
-    return { success: true };
-  }
-  return { success: false };
-};
-
-export const setReturnDateV2 = async (loanCode) => {
-  const [items] = await pool.query(
-    "SELECT loaned_items_id FROM loans WHERE loan_code = ?",
-    [loanCode]
-  );
-
-  if (items.length === 0) return { success: false };
-
-  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 inSafe = 1 WHERE id IN (?)",
-    [itemIds]
-  );
-
-  const [result] = await pool.query(
-    "UPDATE loans SET returned_date = NOW() WHERE loan_code = ?",
-    [loanCode]
-  );
-
-  if (result.affectedRows > 0 && setItemStates.affectedRows > 0) {
-    return { success: true };
-  }
-  return { success: false };
-};
-
-export const setTakeDateV2 = async (loanCode) => {
-  const [items] = await pool.query(
-    "SELECT loaned_items_id FROM loans WHERE loan_code = ?",
-    [loanCode]
-  );
-
-  if (items.length === 0) return { success: false };
-
-  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 inSafe = 0 WHERE id IN (?)",
-    [itemIds]
-  );
-
-  const [result] = await pool.query(
-    "UPDATE loans SET take_date = NOW() WHERE loan_code = ?",
-    [loanCode]
-  );
-
-  if (result.affectedRows > 0 && setItemStates.affectedRows > 0) {
-    return { success: true };
-  }
-  return { success: false };
-};
-
-export const getItemsFromDatabase = async (role) => {
-  const sql =
-    role == 0
-      ? "SELECT * FROM items;"
-      : "SELECT * FROM items WHERE can_borrow_role >= ?";
-  const params = role == 0 ? [] : [role];
-
-  const [rows] = await pool.query(sql, params);
-  if (rows.length > 0) {
-    return { success: true, data: rows };
-  }
-  return { success: false };
-};
-
-export const getLoansFromDatabase = async () => {
-  const [rows] = await pool.query("SELECT * FROM loans;");
-  return { success: true, data: rows.length > 0 ? rows : null };
-};
-
-export const getUserLoansFromDatabase = async (username) => {
-  const [result] = await pool.query(
-    "SELECT * FROM loans WHERE username = ? AND deleted = 0;",
-    [username]
-  );
-  if (result.length > 0) {
-    return { success: true, data: result };
-  } else if (result.length == 0) {
-    return { success: true, data: "No loans found for this user" };
-  } else {
-    return { success: false };
-  }
-};
-
-export const deleteLoanFromDatabase = async (loanId) => {
-  const [result] = await pool.query("DELETE FROM loans WHERE id = ?;", [
-    loanId,
-  ]);
-  if (result.affectedRows > 0) {
-    return { success: true };
-  } else {
-    return { success: false };
-  }
-};
-
-export const SETdeleteLoanFromDatabase = async (loanId) => {
-  const [result] = await pool.query(
-    "UPDATE loans SET deleted = 1 WHERE id = ?;",
-    [loanId]
-  );
-  if (result.affectedRows > 0) {
-    return { success: true };
-  } else {
-    return { success: false };
-  }
-};
-
-export const getBorrowableItemsFromDatabase = async (
-  startDate,
-  endDate,
-  role = 0
-) => {
-  // Overlap if: loan.start < end AND effective_end > start
-  // effective_end is returned_date if set, otherwise end_date
-  const hasRoleFilter = Number(role) > 0;
-
-  const sql = `
-    SELECT i.*
-    FROM items i
-    WHERE ${hasRoleFilter ? "i.can_borrow_role >= ? AND " : ""}NOT EXISTS (
-      SELECT 1
-      FROM loans l
-      JOIN JSON_TABLE(l.loaned_items_id, '$[*]' COLUMNS (item_id INT PATH '$')) jt
-      WHERE jt.item_id = i.id
-        AND l.deleted = 0
-        AND l.start_date < ?
-        AND COALESCE(l.returned_date, l.end_date) > ?
-    );
-  `;
-
-  const params = hasRoleFilter
-    ? [role, endDate, startDate]
-    : [endDate, startDate];
-
-  const [rows] = await pool.query(sql, params);
-  if (rows.length > 0) {
-    return { success: true, data: rows };
-  }
-  return { success: false };
-};
-
-export const getLoanInfoWithID = async (loanId) => {
-  const [rows] = await pool.query("SELECT * FROM loans WHERE id = ?;", [
-    loanId,
-  ]);
-  if (rows.length > 0) {
-    return { success: true, data: rows[0] };
-  }
-  return { success: false };
-};
-
-export const createLoanInDatabase = async (
-  username,
-  startDate,
-  endDate,
-  itemIds
-) => {
-  if (!username)
-    return { success: false, code: "BAD_REQUEST", message: "Missing username" };
-  if (!Array.isArray(itemIds) || itemIds.length === 0)
-    return {
-      success: false,
-      code: "BAD_REQUEST",
-      message: "No items provided",
-    };
-  if (!startDate || !endDate)
-    return { success: false, code: "BAD_REQUEST", message: "Missing dates" };
-
-  const start = new Date(startDate);
-  const end = new Date(endDate);
-  if (
-    !(start instanceof Date) ||
-    isNaN(start.getTime()) ||
-    !(end instanceof Date) ||
-    isNaN(end.getTime()) ||
-    start >= end
-  ) {
-    return {
-      success: false,
-      code: "BAD_REQUEST",
-      message: "Invalid date range",
-    };
-  }
-
-  const conn = await pool.getConnection();
-  try {
-    await conn.beginTransaction();
-
-    // Ensure all items exist and collect names
-    const [itemsRows] = await conn.query(
-      "SELECT id, item_name FROM items WHERE id IN (?)",
-      [itemIds]
-    );
-    if (!itemsRows || itemsRows.length !== itemIds.length) {
-      await conn.rollback();
-      return {
-        success: false,
-        code: "BAD_REQUEST",
-        message: "One or more items not found",
-      };
-    }
-    const itemNames = itemIds
-      .map(
-        (id) => itemsRows.find((r) => Number(r.id) === Number(id))?.item_name
-      )
-      .filter(Boolean);
-
-    // Check availability (no overlap with existing loans)
-    const [confRows] = await conn.query(
-      `
-      SELECT COUNT(*) AS conflicts
-      FROM loans l
-      JOIN JSON_TABLE(l.loaned_items_id, '$[*]' COLUMNS (item_id INT PATH '$')) jt
-        ON TRUE
-      WHERE jt.item_id IN (?)
-        AND l.deleted = 0
-        AND l.start_date < ?
-        AND COALESCE(l.returned_date, l.end_date) > ?
-      `,
-      [itemIds, end, start]
-    );
-    if (confRows?.[0]?.conflicts > 0) {
-      await conn.rollback();
-      return {
-        success: false,
-        code: "CONFLICT",
-        message: "One or more items are not available in the selected period",
-      };
-    }
-
-    // Generate unique loan_code (retry a few times)
-    let loanCode = null;
-    for (let i = 0; i < 6; i++) {
-      const candidate = Math.floor(100000 + Math.random() * 899999); // 6 digits
-      const [exists] = await conn.query(
-        "SELECT 1 FROM loans WHERE loan_code = ? LIMIT 1",
-        [candidate]
-      );
-      if (exists.length === 0) {
-        loanCode = candidate;
-        break;
-      }
-    }
-    if (!loanCode) {
-      await conn.rollback();
-      return {
-        success: false,
-        code: "SERVER_ERROR",
-        message: "Failed to generate unique loan code",
-      };
-    }
-
-    // Insert loan
-    const [insertRes] = await conn.query(
-      `
-      INSERT INTO loans (username, loan_code, start_date, end_date, loaned_items_id, loaned_items_name)
-      VALUES (?, ?, ?, ?, CAST(? AS JSON), CAST(? AS JSON))
-      `,
-      [
-        username,
-        loanCode,
-        // Use DATETIME/TIMESTAMP friendly format
-        new Date(start).toISOString().slice(0, 19).replace("T", " "),
-        new Date(end).toISOString().slice(0, 19).replace("T", " "),
-        JSON.stringify(itemIds.map((n) => Number(n))),
-        JSON.stringify(itemNames),
-      ]
-    );
-
-    await conn.commit();
-    return {
-      success: true,
-      data: {
-        id: insertRes.insertId,
-        loan_code: loanCode,
-        username,
-        start_date: start,
-        end_date: end,
-        items: itemIds,
-        item_names: itemNames,
-      },
-    };
-  } catch (err) {
-    await conn.rollback();
-    console.error("createLoanInDatabase error:", err);
-    return {
-      success: false,
-      code: "SERVER_ERROR",
-      message: "Failed to create loan",
-    };
-  } finally {
-    conn.release();
-  }
-};
-
-// These functions are only temporary, and will be deleted when the full bin is set up.
-export const onTake = async (loanId) => {
-  const [items] = await pool.query(
-    "SELECT loaned_items_id FROM loans WHERE id = ?",
-    [loanId]
-  );
-
-  if (items.length === 0) return { success: false };
-
-  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 inSafe = 0 WHERE id IN (?)",
-    [itemIds]
-  );
-
-  const [result] = await pool.query(
-    "UPDATE loans SET take_date = NOW() WHERE id = ?",
-    [loanId]
-  );
-
-  if (result.affectedRows > 0 && setItemStates.affectedRows > 0) {
-    return { success: true };
-  }
-  return { success: false };
-};
-
-export const onReturn = async (loanId) => {
-  const [items] = await pool.query(
-    "SELECT loaned_items_id FROM loans WHERE id = ?",
-    [loanId]
-  );
-
-  if (items.length === 0) return { success: false };
-
-  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 inSafe = 1 WHERE id IN (?)",
-    [itemIds]
-  );
-
-  const [result] = await pool.query(
-    "UPDATE loans SET returned_date = NOW() WHERE id = ?",
-    [loanId]
-  );
-
-  if (result.affectedRows > 0 && setItemStates.affectedRows > 0) {
-    return { success: true };
-  }
-  return { success: false };
-};
-// Temporary functions end here.
-
-export const loginAdmin = async (username, password) => {
-  const [result] = await pool.query(
-    "SELECT * FROM admins WHERE username = ? AND password = ?",
-    [username, password]
-  );
-  if (result.length > 0) return { success: true, data: result[0] };
-  return { success: false };
-};
-
-export const getAllUsers = async () => {
-  const [result] = await pool.query(
-    "SELECT id, username, role, entry_created_at FROM users"
-  );
-  if (result.length > 0) return { success: true, data: result };
-  return { success: false };
-};
-
-export const deleteUserID = async (userId) => {
-  const [result] = await pool.query("DELETE FROM users WHERE id = ?", [userId]);
-  if (result.affectedRows > 0) return { success: true };
-  return { success: false };
-};
-
-export const handleEdit = async (userId, username, role) => {
-  const [result] = await pool.query(
-    "UPDATE users SET username = ?, role = ? WHERE id = ?",
-    [username, role, userId]
-  );
-  if (result.affectedRows > 0) return { success: true };
-  return { success: false };
-};
-
-export const createUser = async (username, role, password) => {
-  const [result] = await pool.query(
-    "INSERT INTO users (username, role, password) VALUES (?, ?, ?)",
-    [username, role, password]
-  );
-  if (result.affectedRows > 0) return { success: true };
-  return { success: false };
-};
-
-export const getAllLoans = async () => {
-  const [result] = await pool.query("SELECT * FROM loans");
-  if (result.length > 0) return { success: true, data: result };
-  return { success: false };
-};
-
-export const getAllItems = async () => {
-  const [result] = await pool.query("SELECT * FROM items");
-  if (result.length > 0) return { success: true, data: result };
-  return { success: false };
-};
-
-export const deleteItemID = async (itemId) => {
-  const [result] = await pool.query("DELETE FROM items WHERE id = ?", [itemId]);
-  if (result.affectedRows > 0) return { success: true };
-  return { success: false };
-};
-
-export const createItem = async (item_name, can_borrow_role) => {
-  const [result] = await pool.query(
-    "INSERT INTO items (item_name, can_borrow_role) VALUES (?, ?)",
-    [item_name, can_borrow_role]
-  );
-  if (result.affectedRows > 0) return { success: true };
-  return { success: false };
-};
-
-export const changeUserPassword = async (username, newPassword) => {
-  const [result] = await pool.query(
-    "UPDATE users SET password = ? WHERE username = ?",
-    [newPassword, username]
-  );
-  if (result.affectedRows > 0) return { success: true };
-  return { success: false };
-};
-
-export const changeUserPasswordFRONTEND = async (
-  username,
-  oldPassword,
-  newPassword
-) => {
-  const [result] = await pool.query(
-    "UPDATE users SET password = ? WHERE username = ? AND password = ?",
-    [newPassword, username, oldPassword]
-  );
-  if (result.affectedRows > 0) return { success: true };
-  return { success: false };
-};
-
-export const updateItemByID = async (itemId, item_name, can_borrow_role) => {
-  const [result] = await pool.query(
-    "UPDATE items SET item_name = ?, can_borrow_role = ? WHERE id = ?",
-    [item_name, can_borrow_role, itemId]
-  );
-  if (result.affectedRows > 0) return { success: true };
-  return { success: false };
-};
-
-export const getAllLoansV2 = async () => {
-  const [rows] = await pool.query(
-    "SELECT id, username, start_date, end_date, loaned_items_name, returned_date, take_date FROM loans"
-  );
-  if (rows.length > 0) {
-    return { success: true, data: rows };
-  }
-  return { success: false };
-};
-
-export const getAllApiKeys = async () => {
-  const [rows] = await pool.query("SELECT * FROM apiKeys");
-  if (rows.length > 0) {
-    return { success: true, data: rows };
-  }
-  return { success: false };
-};
-
-export const createAPIentry = async (apiKey, user) => {
-  const [result] = await pool.query(
-    "INSERT INTO apiKeys (apiKey, user) VALUES (?, ?)",
-    [apiKey, user]
-  );
-  if (result.affectedRows > 0) return { success: true };
-  return { success: false };
-};
-
-export const deleteAPKey = async (apiKeyId) => {
-  const [result] = await pool.query("DELETE FROM apiKeys WHERE id = ?", [
-    apiKeyId,
-  ]);
-  if (result.affectedRows > 0) return { success: true };
-  return { success: false };
-};
-
-export const getAPIkey = async () => {
-  const [rows] = await pool.query("SELECT apiKey FROM apiKeys");
-  if (rows.length > 0) {
-    return { success: true, data: rows };
-  }
-  return { success: false };
-};

backend/services/tokenService.js

@@ -1,25 +0,0 @@
-import { SignJWT, jwtVerify } from "jose";
-import env from "dotenv";
-env.config();
-const secret = new TextEncoder().encode(process.env.SECRET_KEY);
-
-export async function generateToken(payload) {
-  const newToken = await new SignJWT(payload)
-    .setProtectedHeader({ alg: "HS256" })
-    .setIssuedAt()
-    .setExpirationTime("2h") // Token valid for 2 hours
-    .sign(secret);
-  return newToken;
-}
-
-export async function authenticate(req, res, next) {
-  const authHeader = req.headers["authorization"];
-  const token = authHeader && authHeader.split(" ")[1]; // Bearer <token>
-
-  if (token == null) return res.sendStatus(401); // No token present
-
-  const { payload } = await jwtVerify(token, secret);
-  req.user = payload;
-
-  next();
-}

backend/views/index.ejs

@@ -1,11 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>backend</title>
-</head>
-<body>
-    backend
-</body>
-</html>

backendV2/info.json

@@ -1,11 +1,11 @@
 {
     "backend-info": {
-        "version": "v2.0 (dev)"
+        "version": "v2.1.1 (dev)"
     },
     "frontend-info": {
-        "version": "v2.0 (dev)"
+        "version": "v2.1.2 (dev)"
     },
     "admin-panel-info": {
-        "version": "v1.2 (dev)"
+        "version": "v1.3.2 (dev)"
     }
 }

backendV2/package.json

@@ -1,6 +1,6 @@
 {
   "name": "backendv2",
-  "version": "1.0.0",
+  "version": "v2.1.1 (dev)",
   "main": "server.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

backendV2/routes/admin/database/itemDataMgmt.database.js

@@ -32,10 +32,22 @@ export const createItem = async (item_name, can_borrow_role, lockerNumber) => {
   return { success: false };
 };
 
-export const editItemById = async (itemId, item_name, can_borrow_role) => {
+export const editItemById = async (
+  itemId,
+  item_name,
+  can_borrow_role,
+  safe_nr,
+  door_key
+) => {
+  let newSafeNr;
+  if (safe_nr === null || safe_nr === "") {
+    newSafeNr = null;
+  } else {
+    newSafeNr = safe_nr;
+  }
   const [result] = await pool.query(
-    "UPDATE items SET item_name = ?, can_borrow_role = ?, entry_updated_at = NOW() WHERE id = ?",
+    "UPDATE items SET item_name = ?, can_borrow_role = ?, safe_nr = ?, door_key = ?, entry_updated_at = NOW() WHERE id = ?",
-    [item_name, can_borrow_role, itemId]
+    [item_name, can_borrow_role, newSafeNr, door_key, itemId]
   );
   if (result.affectedRows > 0) return { success: true };
   return { success: false };

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

@@ -18,11 +18,11 @@ export const createUser = async (
   isAdmin,
   email,
   first_name,
-  last_name
+  last_name,
 ) => {
   const [result] = await pool.query(
     "INSERT INTO users (username, role, password, is_admin, email, first_name, last_name) VALUES (?, ?, ?, ?, ?, ?, ?)",
-    [username, role, password, isAdmin, email, first_name, last_name]
+    [username, role, password, isAdmin, email, first_name, last_name],
   );
   if (result.affectedRows > 0) return { success: true };
   return { success: false };
@@ -34,10 +34,10 @@ export const deleteUserById = async (userId) => {
   return { success: false };
 };
 
-export const changePassword = async (userId, newPassword) => {
+export const changePassword = async (username, newPassword) => {
   const [result] = await pool.query(
-    "UPDATE users SET password = ?, entry_updated_at = NOW() WHERE id = ?",
+    "UPDATE users SET password = ?, entry_updated_at = NOW() WHERE username = ?",
-    [newPassword, userId]
+    [newPassword, username],
   );
   if (result.affectedRows > 0) return { success: true };
   return { success: false };
@@ -49,11 +49,11 @@ export const editUserById = async (
   last_name,
   role,
   email,
-  is_admin
+  is_admin,
 ) => {
   const [result] = await pool.query(
     "UPDATE users SET  first_name = ?, last_name = ?, role = ?, email = ?, is_admin = ?, entry_updated_at = NOW() WHERE id = ?",
-    [first_name, last_name, role, email, is_admin, userId]
+    [first_name, last_name, role, email, is_admin, userId],
   );
   if (result.affectedRows > 0) return { success: true };
   return { success: false };
@@ -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",
   );
   if (result.length > 0) return { success: true, data: result };
   return { success: false };
@@ -70,7 +70,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 = ?",
-    [userId]
+    [userId],
   );
   if (rows.length === 0) {
     return { success: false };

backendV2/routes/admin/itemDataMgmt.route.js

@@ -41,11 +41,14 @@ router.post("/create-item", authenticateAdmin, async (req, res) => {
 
 router.post("/edit-item/:id", authenticateAdmin, async (req, res) => {
   const itemId = req.params.id;
-  const { item_name, can_borrow_role } = req.body;
+  const { item_name, can_borrow_role, safe_nr, door_key } = req.body;
+
   const result = await editItemById(
     itemId,
     item_name,
-    can_borrow_role
+    can_borrow_role,
+    safe_nr,
+    door_key
   );
   if (result.success) {
     return res.status(200).json({ message: "Item edited successfully" });

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 = ?",
+      "SELECT loaned_items_id, username FROM loans WHERE loan_code = ?",
-    [loanCode]
+      [loanCode],
     );
 
-  const [owner] = await pool.query(
+    if (items.length === 0)
-    "SELECT username FROM loans WHERE loan_code = ?",
+      return { success: false, message: "No items found for loan" };
-    [loanCode]
-  );
-
-  if (items.length === 0) return { success: false };
 
     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 = ?",
+      "UPDATE loans SET returned_date = NOW() WHERE loan_code = ? AND returned_date IS NULL",
-    [loanCode]
+      [loanCode],
     );
 
-  if (result.affectedRows > 0 && setItemStates.affectedRows > 0) {
+    if (result.affectedRows === 0) return { success: false };
-    return { success: true };
+
+    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 = ?",
+    "UPDATE loans SET take_date = NOW() WHERE loan_code = ? AND take_date IS NULL",
-    [loanCode]
+    [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 () => {
@@ -114,3 +126,22 @@ export const getAllLoansV2 = async () => {
   }
   return { success: false };
 };
+
+export const openDoor = async (doorKey) => {
+  const [result] = await pool.query(
+    "SELECT safe_nr, id FROM items WHERE door_key = ?;",
+    [doorKey],
+  );
+  if (result.length > 0) {
+    const [changeItemSate] = await pool.query(
+      "UPDATE items SET in_safe = NOT in_safe WHERE id = ?",
+      [result[0].id],
+    );
+    if (changeItemSate.affectedRows > 0) {
+      return { success: true, data: result[0] };
+    } else {
+      return { success: false };
+    }
+  }
+  return { success: false };
+};

backendV2/routes/api/api.route.js

@@ -10,6 +10,7 @@ import {
   setTakeDateV2,
   setReturnDateV2,
   getLoanByCodeV2,
+  openDoor,
 } from "./api.database.js";
 
 // Route for API to get all items from the database
@@ -46,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
@@ -57,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
@@ -72,11 +73,23 @@ 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
+router.get("/open-door/:key/:doorKey", authenticate, async (req, res) => {
+  const doorKey = req.params.doorKey;
+
+  const result = await openDoor(doorKey);
+  if (result.success) {
+    res.status(200).json({ data: result.data });
+  } else {
+    res.status(500).json({ message: "Failed to open door" });
+  }
+});
+
 export default router;

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

@@ -16,7 +16,7 @@ export const createLoanInDatabase = async (
   startDate,
   endDate,
   note,
-  itemIds
+  itemIds,
 ) => {
   if (!username)
     return { success: false, code: "BAD_REQUEST", message: "Missing username" };
@@ -52,7 +52,7 @@ export const createLoanInDatabase = async (
     // Ensure all items exist and collect names + lockers
     const [itemsRows] = await conn.query(
       "SELECT id, item_name, safe_nr FROM items WHERE id IN (?)",
-      [itemIds]
+      [itemIds],
     );
     if (!itemsRows || itemsRows.length !== itemIds.length) {
       await conn.rollback();
@@ -65,16 +65,24 @@ export const createLoanInDatabase = async (
 
     const itemNames = itemIds
       .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 strings)
+    // Build lockers array (unique, only 2-digit numbers from safe_nr)
     const lockers = [
       ...new Set(
         itemsRows
           .map((r) => r.safe_nr)
-          .filter((sn) => typeof sn === "string" && /^\d{2}$/.test(sn))
+          .filter(
+            (sn) =>
+              sn !== null &&
+              sn !== undefined &&
+              Number.isInteger(Number(sn)) &&
+              Number(sn) >= 0 &&
+              Number(sn) <= 99,
+          )
+          .map((sn) => Number(sn)),
       ),
     ];
 
@@ -90,7 +98,7 @@ export const createLoanInDatabase = async (
           AND l.start_date < ?
           AND COALESCE(l.returned_date, l.end_date) > ?
         `,
-      [itemIds, end, start]
+      [itemIds, end, start],
     );
     if (confRows?.[0]?.conflicts > 0) {
       await conn.rollback();
@@ -107,7 +115,7 @@ export const createLoanInDatabase = async (
       const candidate = Math.floor(100000 + Math.random() * 899999); // 6 digits
       const [exists] = await conn.query(
         "SELECT 1 FROM loans WHERE loan_code = ? LIMIT 1",
-        [candidate]
+        [candidate],
       );
       if (exists.length === 0) {
         loanCode = candidate;
@@ -138,7 +146,7 @@ export const createLoanInDatabase = async (
         JSON.stringify(itemIds.map((n) => Number(n))),
         JSON.stringify(itemNames),
         note,
-      ]
+      ],
     );
 
     await conn.commit();
@@ -181,7 +189,7 @@ export const getLoanInfoWithID = async (loanId) => {
 export const getLoansFromDatabase = async (username) => {
   const [result] = await pool.query(
     "SELECT * FROM loans WHERE username = ? AND deleted = 0;",
-    [username]
+    [username],
   );
   if (result.length > 0) {
     return { success: true, status: true, data: result };
@@ -194,7 +202,7 @@ export const getLoansFromDatabase = async (username) => {
 export const getBorrowableItemsFromDatabase = async (
   startDate,
   endDate,
-  role = 0
+  role = 0,
 ) => {
   // Overlap if: loan.start < end AND effective_end > start
   // effective_end is returned_date if set, otherwise end_date
@@ -228,7 +236,7 @@ export const getBorrowableItemsFromDatabase = async (
 export const SETdeleteLoanFromDatabase = async (loanId) => {
   const [result] = await pool.query(
     "UPDATE loans SET deleted = 1 WHERE id = ?;",
-    [loanId]
+    [loanId],
   );
   if (result.affectedRows > 0) {
     return { success: true };
@@ -252,3 +260,69 @@ export const getItems = async () => {
   }
   return { success: false };
 };
+
+export const setReturnDate = async (loanCode) => {
+  const [items] = await pool.query(
+    "SELECT loaned_items_id 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 };
+
+  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],
+  );
+
+  if (result.affectedRows > 0 && setItemStates.affectedRows > 0) {
+    return { success: true };
+  }
+  return { success: false };
+};
+
+export const setTakeDate = async (loanCode) => {
+  const [items] = await pool.query(
+    "SELECT loaned_items_id 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 };
+
+  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 = 0, currently_borrowing = (?) WHERE id IN (?)",
+    [owner[0].username, itemIds],
+  );
+
+  const [result] = await pool.query(
+    "UPDATE loans SET take_date = NOW() WHERE loan_code = ?",
+    [loanCode],
+  );
+
+  if (result.affectedRows > 0 && setItemStates.affectedRows > 0) {
+    return { success: true };
+  }
+  return { success: false };
+};

backendV2/routes/app/loanMgmt.route.js

@@ -13,6 +13,8 @@ import {
   getALLLoans,
   getItems,
   SETdeleteLoanFromDatabase,
+  setReturnDate,
+  setTakeDate,
 } from "./database/loansMgmt.database.js";
 import { sendMailLoan } from "./services/mailer.js";
 
@@ -48,7 +50,7 @@ router.post("/createLoan", authenticate, async (req, res) => {
       start,
       end,
       note,
-      itemIds
+      itemIds,
     );
 
     if (result.success) {
@@ -59,7 +61,8 @@ router.post("/createLoan", authenticate, async (req, res) => {
         mailInfo.data.loaned_items_name,
         mailInfo.data.start_date,
         mailInfo.data.end_date,
-        mailInfo.data.created_at
+        mailInfo.data.created_at,
+        mailInfo.data.note,
       );
       return res.status(201).json({
         message: "Loan created successfully",
@@ -96,6 +99,26 @@ router.get("/loans", authenticate, async (req, res) => {
   }
 });
 
+router.post("/set-return-date/:loan_code", authenticate, async (req, res) => {
+  const loanCode = req.params.loan_code;
+  const result = await setReturnDate(loanCode);
+  if (result.success) {
+    res.status(200).json({ data: result.data });
+  } else {
+    res.status(500).json({ message: "Failed to set return date" });
+  }
+});
+
+router.post("/set-take-date/:loan_code", authenticate, async (req, res) => {
+  const loanCode = req.params.loan_code;
+  const result = await setTakeDate(loanCode);
+  if (result.success) {
+    res.status(200).json({ data: result.data });
+  } else {
+    res.status(500).json({ message: "Failed to set take date" });
+  }
+});
+
 router.get("/all-items", authenticate, async (req, res) => {
   const result = await getItems();
   if (result.success) {
@@ -135,7 +158,7 @@ router.post("/borrowable-items", authenticate, async (req, res) => {
   const result = await getBorrowableItemsFromDatabase(
     startDate,
     endDate,
-    req.user.role
+    req.user.role,
   );
   if (result.success) {
     // return the array directly for consistency with /items

backendV2/routes/app/services/mailer.js

@@ -2,14 +2,53 @@ import nodemailer from "nodemailer";
 import dotenv from "dotenv";
 dotenv.config();
 
-function buildLoanEmail({ user, items, startDate, endDate, createdDate }) {
+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>`
+              `<li style="margin:2px 0; color:#111827; line-height:1.3;">${i}</li>`,
           )
           .join("")}</ul>`
       : "<span style='color:#111827;'>N/A</span>";
@@ -69,21 +108,27 @@ function buildLoanEmail({ user, items, startDate, endDate, createdDate }) {
               <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
+                  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
+                  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
+                  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;">
@@ -102,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 [
@@ -113,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,
@@ -138,11 +198,18 @@ 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("Message sent:", info.messageId);
+    console.log("Loan message sent:", info.messageId);
   })();
-  console.log("sendMailLoan called");
 }

backendV2/routes/app/services/mailer_v2.js

@@ -0,0 +1,43 @@
+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

@@ -6,6 +6,7 @@ dotenv.config();
 
 // database funcs import
 import { loginFunc, changePassword } from "./database/userMgmt.database.js";
+import { sendMail } from "./services/mailer_v2.js";
 
 router.post("/login", async (req, res) => {
   const result = await loginFunc(req.body.username, req.body.password);
@@ -35,4 +36,13 @@ router.post("/change-password", authenticate, async (req, res) => {
   }
 });
 
+router.post("/contact", authenticate, async (req, res) => {
+  const message = req.body.message;
+  const username = req.user.username;
+
+  sendMail(username, message);
+
+  res.status(200).json({ message: "Contact message sent successfully" });
+});
+
 export default router;

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');

backendV2/schemeV2.sql

@@ -37,13 +37,13 @@ CREATE TABLE items (
   item_name varchar(255) NOT NULL UNIQUE,
   can_borrow_role INT NOT NULL,
   in_safe bool NOT NULL DEFAULT true,
-  safe_nr CHAR(2) DEFAULT NULL UNIQUE,
+  safe_nr INT DEFAULT NULL UNIQUE,
+  door_key INT DEFAULT NULL UNIQUE,
   entry_created_at timestamp NULL DEFAULT CURRENT_TIMESTAMP,
   entry_updated_at timestamp NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
   last_borrowed_person varchar(255) DEFAULT NULL,
   currently_borrowing varchar(255) DEFAULT NULL,
-  PRIMARY KEY (id),
+  PRIMARY KEY (id)
-  CHECK (safe_nr REGEXP '^[0-9]{2}$' OR safe_nr IS NULL)
 ) ENGINE=InnoDB;
 
 CREATE TABLE apiKeys (

docker-compose.yml

@@ -13,26 +13,6 @@ services:
   #      - "8003:80"
   #    restart: unless-stopped
 
-  #backend:
-  #  container_name: borrow_system-backend
-  #  build: ./backend
-  #  ports:
-  #    - "8002:8002"
-  #  environment:
-  #    NODE_ENV: production
-  #    DB_HOST: mysql
-  #    DB_USER: root
-  #    DB_PASSWORD: ${DB_PASSWORD}
-  #    DB_NAME: borrow_system
-  #  depends_on:
-  #    - mysql
-  #  restart: unless-stopped
-  #  healthcheck:
-  #    test: ["CMD", "wget", "-qO-", "http://localhost:8002/server-info"]
-  #    interval: 30s
-  #    timeout: 5s
-  #    retries: 3
-
   backend_v2:
     container_name: borrow_system-backend_v2
     build: ./backendV2
@@ -48,20 +28,6 @@ services:
       - mysql_v2
     restart: unless-stopped
 
-  # mysql:
-  #   container_name: borrow_system-mysql
-  #   image: mysql:8.0
-  #   restart: unless-stopped
-  #   environment:
-  #     MYSQL_ROOT_PASSWORD: ${DB_PASSWORD}
-  #     MYSQL_DATABASE: borrow_system
-  #     TZ: Europe/Berlin
-  #   volumes:
-  #     - mysql-data:/var/lib/mysql
-  #     - ./mysql-timezone.cnf:/etc/mysql/conf.d/timezone.cnf:ro
-  #   ports:
-  #     - "3309:3306"
-
   mysql_v2:
     container_name: borrow_system-mysql-v2
     image: mysql:8.0