fixed bug again

Docs/backend_API_docs/README.md

@@ -1,177 +1,366 @@
 # Borrow System API Documentation
 
-## Overview
+**Frontend:** https://insta.the1s.de  
+**Backend base URL:** `https://insta.the1s.de/backend/api`
 
-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.
+---
 
 ## Authentication
 
-All requests must include a valid API key in the URL path as the `:key` parameter. API keys are 8-digit numeric strings.
+All API endpoints require **either**:
+
+### 1. Bearer Token (JWT)
+
+Send an `Authorization` header:
+
+```http
+Authorization: Bearer <JWT_TOKEN>
+```
+
+- Used for user-based access.
+- Token must be valid and not expired.
+
+### 2. API Key (for devices / machine-to-machine)
+
+Include an API key in the route as `:key` parameter:
+
+```text
+/api/.../:key/...
+```
+
+Example:
+
+```http
+GET /api/items/12345678
+```
+
+Where `12345678` is your API key.  
+The API key is validated server-side.
+
+---
+
+## Common Response Codes
+
+- `200 OK` – Request was successful.
+- `401 Unauthorized` – Missing or malformed credentials.
+- `403 Forbidden` – Credentials invalid or not allowed to access this resource.
+- `404 Not Found` – Resource (e.g., loan) not found.
+- `500 Internal Server Error` – Unexpected server error.
+
+---
 
 ## Endpoints
 
-The Base URL for all endpoints is: `https://insta.the1s.de/backend/api`
+### 1. Get All Items
 
-### Get All Items
+**GET** `/api/items/:key`
 
-`GET /items/:key`
+Returns a list of all items.
 
-Returns all items in the system.
+#### Path Parameters
 
-**Response 200:**
+- `:key` – API key (8-digit number)
+
+#### Authentication
+
+- Either:
+  - Valid `Authorization: Bearer <token>`
+  - Or valid `:key` path parameter
+
+#### Request Example
+
+```http
+GET /api/items/12345678 HTTP/1.1
+Host: backend.insta.the1s.de
+Authorization: Bearer <JWT_TOKEN>
+```
+
+#### Successful Response (200)
 
 ```json
 {
   "data": [
     {
       "id": 1,
-      "item_name": "Laptop",
-      "can_borrow_role": 1,
-      "in_safe": true,
+      "item_name": "DJI 1er Mikro",
+      "can_borrow_role": 4,
+      "inSafe": 1,
       "safe_nr": 3,
-      "door_key": 101,
-      "last_borrowed_person": "jdoe",
+      "door_key": "123",
+      "entry_created_at": "2025-08-19T22:02:16.000Z",
+      "entry_updated_at": "2025-08-19T22:02:16.000Z",
+      "last_borrowed_person": "alice",
       "currently_borrowing": null
     }
   ]
 }
 ```
 
-**Response 500:**
+#### Error Response (500)
 
 ```json
-{ "message": "Failed to fetch items" }
+{
+  "message": "Failed to fetch items"
+}
 ```
 
 ---
 
-### Change Item Safe State
+### 2. Toggle Item Safe State
 
-`POST /change-state/:key/:itemId`
+Toggles `in_safe` between `0` and `1` for a given item.
 
-Toggles the `in_safe` boolean state of an item.
+**Keep in mind that when you return a loan by code, the item states are automatically updated.**
 
-**URL Parameters:**
+**POST** `/api/change-state/:key/:itemId`
 
-- **key** - API key
-- **itemId** - The item's ID
+#### Path Parameters
 
-**Response 200:** Returns on successful toggle.
+- `:key` – API key (8-digit number)
+- `:itemId` – Item ID (integer)
 
-**Response 500:**
+#### Authentication
+
+- Either Bearer token or `:key` API key.
+
+#### Request Example
+
+```http
+POST /api/change-state/12345678/42 HTTP/1.1
+Host: backend.insta.the1s.de
+```
+
+#### Successful Response (200)
 
 ```json
-{ "message": "Failed to update item state" }
+{
+  "data": {}
+}
+```
+
+_(Implementation currently only returns `{ success: true }`, so `data` may be empty.)_
+
+#### Error Response (500)
+
+```json
+{
+  "message": "Failed to update item state"
+}
 ```
 
 ---
 
-### Get Loan by Code
+### 3. Get Loan by Code
 
-`GET /get-loan-by-code/:key/:loan_code`
+Fetch loan information by `loan_code`.
 
-Retrieves loan details by its 6-digit loan code.
+**GET** `/api/get-loan-by-code/:key/:loan_code`
 
-**URL Parameters:**
+#### Path Parameters
 
-- **key** - API key
-- **loan_code** - A 6-digit numeric loan code
+- `:key` – API key (8-digit number)
+- `:loan_code` – Loan code (string)
 
-**Response 200:**
+#### Authentication
+
+- Either Bearer token or `:key` API key.
+
+#### Request Example
+
+```http
+GET /api/get-loan-by-code/12345678/12345 HTTP/1.1
+Host: backend.insta.the1s.de
+```
+
+#### Successful Response (200)
 
 ```json
 {
   "data": {
-    "username": "jdoe",
+    "username": "john",
     "returned_date": null,
-    "take_date": "2024-01-15T10:30:00.000Z",
-    "lockers": [1, 3]
+    "take_date": "2025-01-01T10:00:00.000Z",
+    "lockers": "[1, 2, 3]"
   }
 }
 ```
 
-**Response 404:**
+#### Error Response (404)
 
 ```json
-{ "message": "Loan not found" }
+{
+  "message": "Loan not found"
+}
 ```
 
 ---
 
-### Set Take Date
+### 4. Set Loan Return Date
 
-`POST /set-take-date/:key/:loan_code`
+Sets `returned_date = NOW()` on a loan and updates related items:
 
-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.
+- `in_safe = 1`
+- `currently_borrowing = NULL`
+- `last_borrowed_person = username`
 
-**URL Parameters:**
+**POST** `/api/set-return-date/:key/:loan_code`
 
-- **key** - API key
-- **loan_code** - A 6-digit numeric loan code
+#### Path Parameters
 
-**Response 200:** Empty JSON object on success.
+- `:key` – API key (8-digit number)
+- `:loan_code` – Loan code (string)
 
-**Response 500:**
+#### Authentication
 
-```json
-{ "message": "Loan not found or already taken" }
+- Either Bearer token or `:key` API key.
+
+#### Request Example
+
+```http
+POST /api/set-return-date/12345678/12345 HTTP/1.1
+Host: backend.insta.the1s.de
 ```
 
-> **Note:** This endpoint will fail if the loan has already been taken or does not exist.
+#### Successful Response (200)
+
+```json
+{
+  "data": {}
+}
+```
+
+#### Error Response (500)
+
+```json
+{
+  "message": "Failed to set return date"
+}
+```
 
 ---
 
-### Set Return Date
+### 5. Set Loan Take Date
 
-`POST /set-return-date/:key/:loan_code`
+Sets `take_date = NOW()` on a loan and updates related items:
 
-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.
+- `in_safe = 0`
+- `currently_borrowing = username`
 
-**URL Parameters:**
+**POST** `/api/set-take-date/:key/:loan_code`
 
-- **key** - API key
-- **loan_code** - A 6-digit numeric loan code
+#### Path Parameters
 
-**Response 200:** Empty JSON object on success.
+- `:key` – API key (8-digit number)
+- `:loan_code` – Loan code (string)
 
-**Response 500:**
+#### Authentication
 
-```json
-{ "message": "Failed to set return date" }
+- Either Bearer token or `:key` API key.
+
+#### Request Example
+
+```http
+POST /api/set-take-date/12345678/LOAN-12345 HTTP/1.1
+Host: backend.insta.the1s.de
 ```
 
-> **Note:** This endpoint will fail if the loan has already been returned (i.e., `returned_date` is not `NULL`).
+#### Successful Response (200)
+
+```json
+{
+  "data": {}
+}
+```
+
+#### Error Response (500)
+
+```json
+{
+  "message": "Failed to set take date"
+}
+```
 
 ---
 
-### Open Door
+### 6. Open Door by Door Key
 
-`GET /open-door/:key/:doorKey`
+Looks up an item by its `door_key`, toggles `in_safe`, and returns safe information.
 
-Toggles the safe state of an item identified by its door key and returns the associated safe number.
+**GET** `/api/open-door/:key/:doorKey`
 
-**URL Parameters:**
+#### Path Parameters
 
-- **key** - API key
-- **doorKey** - The door key identifier assigned to an item
+- `:key` – API key (8-digit number)
+- `:doorKey` – Door key/token (string) used by hardware to identify the locker.
 
-**Response 200:**
+#### Authentication
+
+- Either Bearer token or `:key` API key.
+
+#### Request Example
+
+```http
+GET /api/open-door/12345678/123 HTTP/1.1
+Host: backend.insta.the1s.de
+```
+
+#### Successful Response (200)
 
 ```json
 {
   "data": {
-    "safe_nr": 3,
-    "id": 1
+    "safe_nr": 5,
+    "id": 42
   }
 }
 ```
 
-**Response 500:**
+#### Error Response (500)
 
 ```json
-{ "message": "Failed to open door" }
+{
+  "message": "Failed to open door"
+}
 ```
 
-## Error Handling
+---
 
-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.
+## Authentication Error Messages
+
+### Missing credentials
+
+Status: `401`
+
+```json
+{
+  "message": "Unauthorized"
+}
+```
+
+### Invalid JWT
+
+Status: `403`
+
+```json
+{
+  "message": "Present token invalid"
+}
+```
+
+### Invalid API Key
+
+Status: `403`
+
+```json
+{
+  "message": "API Key invalid"
+}
+```
+
+---
+
+## Notes
+
+- All responses are JSON.
+- Time fields like `take_date` and `returned_date` are in the format returned by MySQL (usually ISO-like strings).
+- `loaned_items_id` in the database is stored as a JSON array string (e.g. `"[1,2,3]"`) and is parsed internally; clients do not interact with this field directly via current endpoints.

FrontendV2/nginx.conf

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

FrontendV2/src/App.tsx

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

FrontendV2/src/components/Changelog.json

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

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

@@ -22,7 +22,6 @@ import {
   MoreVertical,
   Languages,
   Table,
-  ContactRound,
 } from "lucide-react";
 import { useUserContext } from "@/states/Context";
 import { useState } from "react";
@@ -142,7 +141,7 @@ export const Header = () => {
                 value="help"
                 onSelect={() =>
                   window.open(
-                    "https://git.the1s.de/Matthias-Claudius-Schule/borrow-system/wiki/?action=_pages",
+                    "https://git.the1s.de/Matthias-Claudius-Schule/borrow-system/wiki",
                     "_blank",
                     "noopener,noreferrer",
                   )
@@ -154,16 +153,6 @@ export const Header = () => {
                   </HStack>
                 }
               />
-              <Menu.Item
-                value="contact"
-                onSelect={() => navigate("/contact", { replace: true })}
-                children={
-                  <HStack gap={3}>
-                    <ContactRound size={16} />
-                    <Text as="span">{t("contact")}</Text>
-                  </HStack>
-                }
-              />
               <Menu.Separator />
               <Menu.Item
                 value="logout"
@@ -279,7 +268,7 @@ export const Header = () => {
           </Button>
 
           <a
-            href="https://git.the1s.de/Matthias-Claudius-Schule/borrow-system/wiki/?action=_pages"
+            href="https://git.the1s.de/Matthias-Claudius-Schule/borrow-system/wiki"
             target="_blank"
           >
             <Button variant="ghost">
@@ -289,17 +278,6 @@ export const Header = () => {
               </HStack>
             </Button>
           </a>
-
-          <Button
-            variant={"outline"}
-            onClick={() => navigate("/contact", { replace: true })}
-          >
-            <HStack gap={2}>
-              <ContactRound size={18} />
-              <Text as="span">{t("contact")}</Text>
-            </HStack>
-          </Button>
-
           <Button onClick={logout} variant="outline" colorScheme="red">
             <HStack gap={2}>
               <LogOut size={18} />

FrontendV2/src/components/footer/Footer.tsx

@@ -9,9 +9,10 @@ export const Footer = () => {
       as="footer"
       py={4}
       textAlign="center"
-      width="100%"
-      flexShrink={0}
-      fontSize="sm"
+      position="fixed"
+      bottom="0"
+      left="0"
+      right="0"
     >
       Made with ❤️ by Theis Gaedigk - Class of 2019 at MCS-Bochum
       <br />

FrontendV2/src/components/ui/provider.tsx

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

FrontendV2/src/pages/ContactPage.tsx

@@ -1,84 +0,0 @@
-import {
-  Field,
-  Textarea,
-  Button,
-  Alert,
-  Container,
-  Text,
-} from "@chakra-ui/react";
-import { useTranslation } from "react-i18next";
-import { useState } from "react";
-import { API_BASE } from "@/config/api.config";
-import Cookies from "js-cookie";
-import { Header } from "@/components/Header";
-
-interface Alert {
-  type: "info" | "warning" | "success" | "error" | "neutral";
-  headline: string;
-  text: string;
-}
-
-export const ContactPage = () => {
-  const { t } = useTranslation();
-  const [message, setMessage] = useState("");
-  const [alert, setAlert] = useState<Alert | null>(null);
-
-  const sendMessage = async () => {
-    // Logic to send the message
-    const result = await fetch(`${API_BASE}/api/users/contact`, {
-      method: "POST",
-      headers: {
-        Authorization: `Bearer ${Cookies.get("token") || ""}`,
-        "Content-Type": "application/json",
-        Accept: "application/json",
-      },
-      body: JSON.stringify({ message }),
-    });
-
-    if (result.ok) {
-      setAlert({
-        type: "success",
-        headline: t("contactPage_successHeadline"),
-        text: t("contactPage_successText"),
-      });
-      setMessage("");
-    } else {
-      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/Landingpage.tsx

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

FrontendV2/src/pages/LoginPage.tsx

@@ -7,6 +7,7 @@ import Cookies from "js-cookie";
 import { Navigate, useNavigate, useLocation } from "react-router-dom";
 import { PasswordInput } from "@/components/ui/password-input";
 import { useTranslation } from "react-i18next";
+import { Footer } from "@/components/footer/Footer";
 import { API_BASE } from "@/config/api.config";
 
 export const LoginPage = () => {
@@ -70,7 +71,7 @@ export const LoginPage = () => {
   }
 
   return (
-    <div className="flex flex-1 items-center justify-center p-4">
+    <div className="min-h-screen flex items-center justify-center p-4">
       <form onSubmit={(e) => e.preventDefault()}>
         <Card.Root maxW="sm">
           <Card.Header>
@@ -114,6 +115,7 @@ export const LoginPage = () => {
           </Card.Footer>
         </Card.Root>
       </form>
+      <Footer />
     </div>
   );
 };

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:
-          "An error occurred on the server. Sometimes reloading the page helps. Otherwise, please contact the administrator.",
+          "Ein Fehler ist auf dem Server aufgetreten. Manchmal hilft es, die Seite neu zu laden.",
       };
     }
 
@@ -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

@@ -68,7 +68,7 @@
     "admin-status": "Admin-Status",
     "first-name": "Vorname",
     "last-name": "Nachname",
-    "app-title": "Ausleihsystem",
+    "app-title": "Ausleihsystem (demo)",
     "last-borrowed-person": "Zuletzt ausgeliehen von",
     "currently-borrowed-by": "Derzeit ausgeliehen von",
     "back": "Zurückgehen",
@@ -84,9 +84,7 @@
     "contact": "Kontakt",
     "take": "Abholen",
     "return": "Zurückgeben",
-    "serverError": "Serverfehler. Bitte versuchen Sie es später erneut, oder laden Sie die Seite neu.",
     "take-loan-success": "Ausleihe erfolgreich abgeholt",
     "return-loan-success": "Ausleihe erfolgreich zurückgegeben",
-    "network-error": "Netzwerkfehler. Kontaktieren Sie den Administrator.",
-    "contactPage_messageDescription": "Bitte geben Sie hier Ihre Nachricht ein. Der Systemadministrator (Theis Gaedigk) wird sich so schnell wie möglich bei Ihnen melden."
+    "network-error": "Netzwerkfehler. Kontaktieren Sie den Administrator."
 }

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

@@ -68,7 +68,7 @@
     "admin-status": "Admin status",
     "first-name": "First name",
     "last-name": "Last name",
-    "app-title": "Borrow System",
+    "app-title": "Borrow System (demo)",
     "last-borrowed-person": "Last borrowed by",
     "currently-borrowed-by": "Currently borrowed by",
     "back": "Go back",
@@ -81,12 +81,5 @@
     "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."
+    "contact": "Contact"
 }

FrontendV2/vite.config.ts

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

admin/nginx.conf

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

admin/package-lock.json

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

admin/src/Layout/Login.tsx

@@ -3,7 +3,6 @@ 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("");
@@ -44,7 +43,8 @@ const Login: React.FC<{ onSuccess: () => void }> = ({ onSuccess }) => {
               </Field.Root>
               <Field.Root>
                 <Field.Label>password</Field.Label>
-                <PasswordInput
+                <Input
+                  type="password"
                   value={password}
                   onChange={(e) => setPassword(e.target.value)}
                 />

admin/src/components/ui/password-input.tsx

@@ -1,159 +0,0 @@
-"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/tsconfig.app.json

@@ -1,11 +1,10 @@
 {
   "compilerOptions": {
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "target": "ES2022",
+    "target": "ESNext",
     "useDefineForClassFields": true,
     "lib": ["ES2022", "DOM", "DOM.Iterable"],
     "module": "ESNext",
-    "types": ["vite/client"],
     "skipLibCheck": true,
 
     /* Bundler mode */
@@ -24,10 +23,14 @@
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true,
 
-    /* Path aliases */
+    /* Chakra / Pfad Aliases */
+    "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]
-    }
+    },
+
+    "forceConsistentCasingInFileNames": true,
+    "ignoreDeprecations": "5.0"
   },
   "include": ["src"]
 }

admin/vite.config.ts

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

backendV2/info.json

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

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

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

backendV2/routes/api/api.database.js

@@ -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,62 +42,50 @@ export const changeInSafeStateV2 = async (itemId) => {
 };
 
 export const setReturnDateV2 = async (loanCode) => {
-  try {
   const [items] = await pool.query(
-      "SELECT loaned_items_id, username FROM loans WHERE loan_code = ?",
-      [loanCode],
+    "SELECT loaned_items_id FROM loans WHERE loan_code = ?",
+    [loanCode]
   );
 
-    if (items.length === 0)
-      return { success: false, message: "No items found for loan" };
+  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 = ? AND returned_date IS NULL",
-      [loanCode],
+    "UPDATE loans SET returned_date = NOW() WHERE loan_code = ?",
+    [loanCode]
   );
 
-    if (result.affectedRows === 0) return { success: false };
-
-    if (itemIds.length > 0) {
-      await pool.query(
-        "UPDATE items SET in_safe = 1, currently_borrowing = NULL, last_borrowed_person = ? WHERE id IN (?)",
-        [items[0].username, itemIds],
-      );
-    }
-
-    return { success: true, data: { returned: true } };
-  } catch (error) {
-    console.error("setReturnDateV2 error:", error);
-    return { success: false, message: "Failed to set return date" };
+  if (result.affectedRows > 0 && setItemStates.affectedRows > 0) {
+    return { success: true };
   }
+  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, message: "No items found for loan" };
+  if (items.length === 0) return { success: false };
 
   const itemIds = Array.isArray(items[0].loaned_items_id)
     ? items[0].loaned_items_id
@@ -105,18 +93,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 = ? AND take_date IS NULL",
-    [loanCode],
+    "UPDATE loans SET take_date = NOW() WHERE loan_code = ?",
+    [loanCode]
   );
 
   if (result.affectedRows > 0 && setItemStates.affectedRows > 0) {
     return { success: true };
   }
-  return { message: "Failed to set take date", success: false };
+  return { success: false };
 };
 
 export const getAllLoansV2 = async () => {
@@ -130,12 +118,12 @@ export const getAllLoansV2 = async () => {
 export const openDoor = async (doorKey) => {
   const [result] = await pool.query(
     "SELECT safe_nr, id FROM items WHERE door_key = ?;",
-    [doorKey],
+    [doorKey]
   );
   if (result.length > 0) {
     const [changeItemSate] = await pool.query(
       "UPDATE items SET in_safe = NOT in_safe WHERE id = ?",
-      [result[0].id],
+      [result[0].id]
     );
     if (changeItemSate.affectedRows > 0) {
       return { success: true, data: result[0] };

backendV2/routes/api/api.route.js

@@ -47,7 +47,7 @@ router.get(
     } else {
       res.status(404).json({ message: "Loan not found" });
     }
-  },
+  }
 );
 
 // Route for API to set the return date by the loan code
@@ -58,11 +58,11 @@ router.post(
     const loanCode = req.params.loan_code;
     const result = await setReturnDateV2(loanCode);
     if (result.success) {
-      res.status(200).json({});
+      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
@@ -73,11 +73,11 @@ router.post(
     const loanCode = req.params.loan_code;
     const result = await setTakeDateV2(loanCode);
     if (result.success) {
-      res.status(200).json({});
+      res.status(200).json({ data: result.data });
     } else {
-      res.status(500).json({ message: result.message });
+      res.status(500).json({ message: "Failed to set take date" });
+    }
   }
-  },
 );
 
 // Route for API to open a door

backendV2/routes/app/loanMgmt.route.js

@@ -62,7 +62,6 @@ router.post("/createLoan", authenticate, async (req, res) => {
         mailInfo.data.start_date,
         mailInfo.data.end_date,
         mailInfo.data.created_at,
-        mailInfo.data.note,
       );
       return res.status(201).json({
         message: "Loan created successfully",

backendV2/routes/app/services/mailer.js

@@ -34,21 +34,14 @@ const formatDateTime = (value) => {
   return "N/A";
 };
 
-function buildLoanEmail({
-  user,
-  items,
-  startDate,
-  endDate,
-  createdDate,
-  note,
-}) {
+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>`,
+              `<li style="margin:2px 0; color:#111827; line-height:1.3;">${i}</li>`
           )
           .join("")}</ul>`
       : "<span style='color:#111827;'>N/A</span>";
@@ -108,27 +101,21 @@ function buildLoanEmail({
               <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;">
@@ -147,14 +134,7 @@ function buildLoanEmail({
 </html>`;
 }
 
-function buildLoanEmailText({
-  user,
-  items,
-  startDate,
-  endDate,
-  createdDate,
-  note,
-}) {
+function buildLoanEmailText({ user, items, startDate, endDate, createdDate }) {
   const itemsText =
     Array.isArray(items) && items.length ? items.join(", ") : "N/A";
   return [
@@ -165,18 +145,10 @@ function buildLoanEmailText({
     `Start: ${formatDateTime(startDate)}`,
     `Ende: ${formatDateTime(endDate)}`,
     `Erstellt am: ${formatDateTime(createdDate)}`,
-    `Notiz: ${note || "Keine Notiz"}`,
   ].join("\n");
 }
 
-export function sendMailLoan(
-  user,
-  items,
-  startDate,
-  endDate,
-  createdDate,
-  note,
-) {
+export function sendMailLoan(user, items, startDate, endDate, createdDate) {
   const transporter = nodemailer.createTransport({
     host: process.env.MAIL_HOST,
     port: process.env.MAIL_PORT,
@@ -198,18 +170,12 @@ export function sendMailLoan(
         startDate,
         endDate,
         createdDate,
-        note,
-      }),
-      html: buildLoanEmail({
-        user,
-        items,
-        startDate,
-        endDate,
-        createdDate,
-        note,
       }),
+      html: buildLoanEmail({ user, items, startDate, endDate, createdDate }),
     });
 
-    console.log("Loan message sent:", info.messageId);
+    // debugging logs
+    // console.log("Message sent:", info.messageId);
   })();
+  // console.log("sendMailLoan called");
 }

backendV2/routes/app/services/mailer_v2.js

@@ -38,6 +38,8 @@ export function sendMail(username, message) {
       html: mailHtml,
     });
 
-    console.log("Contact message sent: %s", info.messageId);
+    // debugging logs
+    // console.log("Message sent:", info.messageId);
   })();
+  // console.log("sendMailLoan called");
 }

backendV2/schemeV2.mock.sql

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

backendV2/schemeV2.sql

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

backendV2/server.js

@@ -20,7 +20,7 @@ import apiRouter from "./routes/api/api.route.js";
 
 env.config();
 const app = express();
-const port = 8004;
+const port = 8102;
 
 app.use(cors());
 // Body-Parser VOR den Routen registrieren

docker-compose.yml

@@ -1,35 +1,37 @@
 services:
-  #  usr-frontend_v2:
-  #    container_name: borrow_system-usr-frontend
-  #    build: ./FrontendV2
-  #    ports:
-  #      - "8001:80"
-  #    restart: unless-stopped
+  demo_usr_frontend:
+    container_name: demo_borrow_system-usr-frontend
+    networks:
+      - proxynet
+    build: ./FrontendV2
+    restart: unless-stopped
 
-  #  admin-frontend:
-  #    container_name: borrow_system-admin-frontend
-  #    build: ./admin
-  #    ports:
-  #      - "8003:80"
-  #    restart: unless-stopped
+  demo_admin_frontend:
+    container_name: demo_borrow_system-admin-frontend
+    networks:
+      - proxynet
+    build: ./admin
+    restart: unless-stopped
 
-  backend_v2:
-    container_name: borrow_system-backend_v2
+  demo_backend_v2:
+    container_name: demo_borrow_system-backend_v2
+    networks:
+      - proxynet
     build: ./backendV2
-    ports:
-      - "8004:8004"
     environment:
       NODE_ENV: production
-      DB_HOST: mysql_v2
+      DB_HOST: demo_mysql_v2
       DB_USER: root
       DB_PASSWORD: ${DB_PASSWORD_V2}
       DB_NAME: borrow_system_new
     depends_on:
-      - mysql_v2
+      - demo_mysql_v2
     restart: unless-stopped
 
-  mysql_v2:
-    container_name: borrow_system-mysql-v2
+  demo_mysql_v2:
+    container_name: demo_borrow_system-mysql-v2
+    networks:
+      - proxynet
     image: mysql:8.0
     restart: unless-stopped
     environment:
@@ -37,11 +39,13 @@ services:
       MYSQL_DATABASE: borrow_system_new
       TZ: Europe/Berlin
     volumes:
-      - mysql-v2-data:/var/lib/mysql
+      - demo_mysql-v2-data:/var/lib/mysql
       - ./mysql-timezone.cnf:/etc/mysql/conf.d/timezone.cnf:ro
-    ports:
-      - "3310:3306"
 
 volumes:
   mysql-data:
-  mysql-v2-data:
+  demo_mysql-v2-data:
+
+networks:
+  proxynet:
+    external: true