fixed bug: landingpage does not render content

- Updated LoanTable component to fetch loan data from new API endpoint and display notes.
- Enhanced UserTable component to include additional user fields (first name, last name, email, admin status) and updated input handling.
- Modified fetcher utility to use new user data API endpoint.
- Adjusted login functionality to point to the new admin login endpoint and handle unauthorized access.
- Refactored user actions utility to align with updated API endpoints for user management.
- Updated backend routes for user and loan data management to reflect new structure and naming conventions.
- Revised SQL schema and mock data to accommodate new fields and constraints.
- Changed Docker configuration to use the new database name.

.gitignore

@@ -109,7 +109,6 @@ backend/public/uploads/
 *.sqlite3
 
 # API keys and secrets (additional protection)
-config/
 secrets/
 keys/
 

Docs/CHANGELOG.md

@@ -1,22 +0,0 @@
-# Changelog
-v1.1
-
-## Current hosted version
-v1.1
-
-> No changelog available.
-
-## Upcoming changes
-
-v1.2
-
-### Fixes and improvements
-
-- Implement user roles and permissions
-- Improve form validation and error handling
-- Add loading indicators for async actions
-- Optimize performance for large datasets
-
-### New features
-
-- Admin panel for managing users, permissions and all of the system settings and database

Docs/README.md

@@ -2,4 +2,6 @@
 
 This document provides an overview of the backend API endpoints and their usage.
 
-To get to that information, go to the `backend_API_docs` directory.
+To get to that information, go to the `backend_API_docs` directory.
+
+If you need help, see HELP.md file in this directory.

Docs/backend_API_docs/README.md

@@ -1,58 +1,87 @@
-# Backend API docs (apiV2)
+# Backend API (V2) Documentation
 
-If you want to cooperate with me, or build something new with my backend API, feel free to reach out!
-
-On this page you will learn how my API works.
-
-## General information
-
-When you look at my backend folder and file structure, you can see that I have two files called `API`. The first file called `api.js` which is for my web frontend, because this file works together with my JWT token service.
-
-But I have built a second API. You can see the second API file in the same directory, the file is called `apiV2.js`.
-
-But first you have to get an API Key. You can get the API key from my admin dashboard. When you don't have any access to my admin dashboard, please contact your administrator or me.
+This document describes the current backend API routes and their real response shapes, based on the code in `backendV2`.
 
 ---
 
-## Base URL
+## Base URLs
 
 - Frontend: `https://insta.the1s.de`
 - Backend: `https://backend.insta.the1s.de`
-- Base path for this API: `https://backend.insta.the1s.de/apiV2`
+- Base path: `https://backend.insta.the1s.de/api`
 
-You can see the status of this and all my other services at `https://status.the1s.de`.
-
-_I have also build a [fallback page](https://git.the1s.de/theis.gaedigk/fallback-page). When only the application is down, you will see a friendly message and a link to the status page. (Only if the server is not down)_
+Service status: `https://status.the1s.de`
 
 ---
 
 ## Authentication
 
-All endpoints require an API key as a path parameter named `:key`.
+All **protected** endpoints require an API key as a path parameter `:key`.
 
-Example: `/apiV2/items/:key`
+Rules for `:key`:
 
-If the key is missing or invalid, the API responds with `401 Unauthorized`.
+- Exactly 8 characters  
+- Digits only (`^[0-9]{8}$`)
+
+Example:
+
+```http
+GET /api/items/12345678
+```
+
+On missing / invalid key:
+
+- Status: `401 Unauthorized`
+- 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
+## Endpoints (Overview)
 
-### 1) Get all items
+1. **Public**
+   - `GET /api/all-items` – List all items (no auth; from original docs)
 
-GET `/apiV2/items/:key`
+2. **Items (authenticated)**
+   - `GET /api/items/:key` – List all items
+   - `POST /api/change-state/:key/:itemId/:state` – Toggle item safe state
 
-Returns a list of all items wrapped in a `data` object.
+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
 
-Example request:
+---
 
-```
-GET https://backend.insta.the1s.de/apiV2/items/12345
+## 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
 ```
 
-Example response:
+#### Successful response
 
-```
+```json
 {
   "data": [
     {
@@ -60,151 +89,248 @@ Example response:
       "item_name": "DJI 1er Mikro",
       "can_borrow_role": 4,
       "inSafe": 1,
-      "entry_created_at": "2025-08-19T22:02:16.000Z"
+      "safe_nr": "01",
+      "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
     }
   ]
 }
 ```
 
-Fields:
+#### Error response
 
-- `id`: Unique identifier
-- `item_name`: Item name
-- `can_borrow_role`: Role allowed to borrow
-- `inSafe`: 1 if in locker, 0 otherwise
-- `entry_created_at`: Creation timestamp
+```json
+{ "message": "Failed to fetch items" }
+```
 
-Status: 200 on success, 500 on failure.
+#### 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) Change item safe state
+### 2.2 Toggle item safe state
 
-POST `/apiV2/controlInSafe/:key/:itemId/:state`
+**POST** `/api/change-state/:key/:itemId/:state`
 
-Updates `inSafe` (locker) state of an item.
+> 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.
 
-- `state` must be `"1"` (in safe) or `"0"` (not in safe)
+Path parameters:
 
-Example request:
+- `:key` – API key (8 digits)
+- `:itemId` – numeric `id` of the item
+- `:state` – must be `"1"` or `"0"`
 
-```
-POST https://backend.insta.the1s.de/apiV2/controlInSafe/12345/123/1
+Handler in `api.route.js` calls `changeInSafeStateV2(itemId)`, which executes:
+
+```sql
+UPDATE items SET inSafe = NOT inSafe WHERE id = ?
 ```
 
-Example response (shape depends on database service):
+#### Example request
 
-```
-{ "data": { /* update result */ } }
+```http
+POST https://backend.insta.the1s.de/api/change-state/12345678/42/1
 ```
 
-Status:
+(Will toggle `inSafe` for item `42`, regardless of the final `1`.)
 
-- 200 on success
-- 400 if `state` is invalid
-- 500 on failure
+#### Successful response (current implementation)
 
-**You can get the item id on the admin panel, from your system administrator.**
+```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) Get loan by code
+## 3) Loans
 
-GET `/apiV2/getLoanByCode/:key/:loan_code`
+### 3.1 Get loan by code
 
-Retrieves the details of a specific loan.
+**GET** `/api/get-loan-by-code/:key/:loan_code`
 
-Example request:
+Path parameters:
 
-```
-GET https://backend.insta.the1s.de/apiV2/getLoanByCode/12345/123456
+- `:key` – API key
+- `:loan_code` – 6-digit loan code (`^[0-9]{6}$` per DB constraint)
+
+Database layer (`getLoanByCodeV2`) currently selects:
+
+```sql
+SELECT first_name, returned_date, take_date, lockers
+FROM loans
+WHERE loan_code = ?;
 ```
 
-Example response:
+#### Example request
 
+```http
+GET https://backend.insta.the1s.de/api/get-loan-by-code/12345678/646473
 ```
+
+#### Successful response
+
+```json
 {
   "data": {
-    "id": 6,
-    "username": "theis",
-    "loan_code": 646473,
-    "start_date": "2025-08-25T13:23:00.000Z",
-    "end_date": "2025-08-26T13:23:00.000Z",
-    "take_date": null,
+    "first_name": "Theis",
     "returned_date": null,
-    "created_at": "2025-08-20T11:23:40.000Z",
-    "loaned_items_id": [8, 9],
-    "loaned_items_name": ["SD Karten", "Kameragimbal"]
+    "take_date": "2025-08-25T13:23:00.000Z",
+    "lockers": ["01", "03"]
   }
 }
 ```
 
-Status:
+#### Error response
 
-- 200 on success
-- 404 if not found
+```json
+{ "message": "Loan not found" }
+```
+
+#### Status codes
+
+- `200 OK` – loan found
+- `401 Unauthorized` – invalid / missing key
+- `404 Not Found` – no matching loan for this `loan_code`
 
 ---
 
-### 4) Set return date (now) by loan code
+### 3.2 Set take date
 
-POST `/apiV2/setReturnDate/:key/:loan_code`
+**POST** `/api/set-take-date/:key/:loan_code`
 
-Sets the `returned_date` to the current server time.
+Path parameters:
 
-**Note:** I have updated this API route, so that everytime you return or take a loan, the state of the loaned items is automatically updated.
+- `:key` – API key
+- `:loan_code` – loan code
 
-**DO NOT UPDATE THE STATE MANUALLY! (only if the item was taken with an admin key)**
+#### Example request
 
-Example request:
-
-```
-POST https://backend.insta.the1s.de/apiV2/setReturnDate/12345/123456
+```http
+POST https://backend.insta.the1s.de/api/set-take-date/12345678/646473
 ```
 
-Example response:
+#### Successful response
 
-```
-{ "data": { /* update result */ } }
+```json
+{
+  "data": null
+}
 ```
 
-Status: 200 on success, 500 on failure.
+#### 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`
 
 ---
 
-### 5) Set take date (now) by loan code
+### 3.3 Set return date
 
-POST `/apiV2/setTakeDate/:key/:loan_code`
+**POST** `/api/set-return-date/:key/:loan_code`
 
-Sets the `take_date` to the current server time.
+Path parameters:
 
-**Note:** I have updated this API route, so that everytime you return or take a loan, the state of the loaned items is automatically updated.
+- `:key` – API key
+- `:loan_code` – loan code
 
-**DO NOT UPDATE THE STATE MANUALLY! (only if the item was taken with an admin key)**
+#### Example request
 
-Example request:
-
-```
-POST https://backend.insta.the1s.de/apiV2/setTakeDate/12345/123456
+```http
+POST https://backend.insta.the1s.de/api/set-return-date/12345678/646473
 ```
 
-Example response:
+#### Successful response (current implementation)
 
-```
-{ "data": { /* update result */ } }
+```json
+{
+  "data": null
+}
 ```
 
-Status: 200 on success, 500 on failure.
+#### Error response
+
+```json
+{ "message": "Failed to set return date" }
+```
+
+#### Status codes
+
+- `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`
 
 ---
 
-## Error handling
+## Common Response Shapes
 
-- 401 Unauthorized: Missing or invalid API key
-- 400 Bad Request: Invalid parameters (e.g., wrong state value)
-- 404 Not Found: Loan not found
-- 500 Internal Server Error: Database or server error
+**Success – list (authenticated items):**
 
----
+```json
+{ "data": [ /* array of rows */ ] }
+```
 
-If you have questions or want to collaborate, please reach out!
+**Success – single loan:**
+
+```json
+{ "data": { /* selected loan fields */ } }
+```
+
+**Success – mutations (current code):**
+
+```json
+{ "data": null }
+```
+
+**Errors:**
+
+```json
+{ "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

@@ -0,0 +1,19 @@
+FROM node:18 as builder
+
+WORKDIR /app
+
+COPY package.json package-lock.json ./
+RUN npm ci
+
+COPY . .
+RUN npm run build
+
+FROM nginx:alpine AS runner
+
+WORKDIR /usr/share/nginx/html
+COPY --from=builder /app/dist .
+
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

FrontendV2/README.md

@@ -4,15 +4,19 @@ This template provides a minimal setup to get React working in Vite with HMR and
 
 Currently, two official plugins are available:
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
 - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
 
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
 ## Expanding the ESLint configuration
 
 If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
 
 ```js
-export default tseslint.config([
+export default defineConfig([
   globalIgnores(['dist']),
   {
     files: ['**/*.{ts,tsx}'],
@@ -20,11 +24,11 @@ export default tseslint.config([
       // Other configs...
 
       // Remove tseslint.configs.recommended and replace with this
-      ...tseslint.configs.recommendedTypeChecked,
+      tseslint.configs.recommendedTypeChecked,
       // Alternatively, use this for stricter rules
-      ...tseslint.configs.strictTypeChecked,
+      tseslint.configs.strictTypeChecked,
       // Optionally, add this for stylistic rules
-      ...tseslint.configs.stylisticTypeChecked,
+      tseslint.configs.stylisticTypeChecked,
 
       // Other configs...
     ],
@@ -46,7 +50,7 @@ You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-re
 import reactX from 'eslint-plugin-react-x'
 import reactDom from 'eslint-plugin-react-dom'
 
-export default tseslint.config([
+export default defineConfig([
   globalIgnores(['dist']),
   {
     files: ['**/*.{ts,tsx}'],

FrontendV2/eslint.config.js

@@ -3,9 +3,9 @@ import globals from 'globals'
 import reactHooks from 'eslint-plugin-react-hooks'
 import reactRefresh from 'eslint-plugin-react-refresh'
 import tseslint from 'typescript-eslint'
-import { globalIgnores } from 'eslint/config'
+import { defineConfig, globalIgnores } from 'eslint/config'
 
-export default tseslint.config([
+export default defineConfig([
   globalIgnores(['dist']),
   {
     files: ['**/*.{ts,tsx}'],

FrontendV2/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="/shapes.svg" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Ausleihsystem</title>
+    <title>frontendv2</title>
   </head>
   <body>
     <div id="root"></div>

FrontendV2/nginx.conf

@@ -0,0 +1,18 @@
+server {
+  listen 80;
+  server_name _;
+
+  root /usr/share/nginx/html;
+  index index.html;
+
+  location / {
+    try_files $uri $uri/ /index.html;
+  }
+
+  location ~* \.(?:js|mjs|css|png|jpg|jpeg|gif|ico|svg|woff2?)$ {
+    expires 1y;
+    access_log off;
+    add_header Cache-Control "public, immutable";
+    try_files $uri =404;
+  }
+}

FrontendV2/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "frontend",
+  "name": "admin",
   "private": true,
   "version": "0.0.0",
   "type": "module",
@@ -10,14 +10,21 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@chakra-ui/react": "^3.28.0",
+    "@emotion/react": "^11.14.0",
     "@tailwindcss/vite": "^4.1.11",
-    "@tanstack/react-query": "^5.85.5",
+    "@tanstack/react-query": "^5.90.5",
+    "i18next": "^25.6.0",
+    "jotai": "^2.15.0",
     "js-cookie": "^3.0.5",
     "lucide-react": "^0.539.0",
+    "next-themes": "^0.4.6",
     "primeicons": "^7.0.0",
     "primereact": "^10.9.6",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
+    "react-i18next": "^16.2.0",
+    "react-icons": "^5.5.0",
     "react-router-dom": "^7.8.0",
     "react-toastify": "^11.0.5",
     "split-lines": "^3.0.0",
@@ -39,6 +46,7 @@
     "globals": "^16.3.0",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.39.0",
-    "vite": "^7.1.0"
+    "vite": "^7.1.0",
+    "vite-tsconfig-paths": "^5.1.4"
   }
 }

FrontendV2/src/App.css

@@ -0,0 +1,73 @@
+@import "tailwindcss";
+
+:root {
+  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text",
+    "SF Pro Display", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
+    "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", sans-serif;
+}
+
+html,
+body,
+#root {
+  font-family: var(--font-sans);
+}
+
+/* Display für größere Überschriften */
+@font-face {
+  font-family: "SF Pro Display";
+  src: url("/src/assets/fonts/sf-pro/SFProDisplay-Regular.woff2")
+    format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "SF Pro Display";
+  src: url("/src/assets/fonts/sf-pro/SFProDisplay-Medium.woff2") format("woff2");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "SF Pro Display";
+  src: url("/src/assets/fonts/sf-pro/SFProDisplay-Bold.woff2") format("woff2");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* Text für Fließtext */
+@font-face {
+  font-family: "SF Pro Text";
+  src: url("/src/assets/fonts/sf-pro/SFProText-Regular.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "SF Pro Text";
+  src: url("/src/assets/fonts/sf-pro/SFProText-Medium.woff2") format("woff2");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "SF Pro Text";
+  src: url("/src/assets/fonts/sf-pro/SFProText-Bold.woff2") format("woff2");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* Global anwenden mit Fallbacks */
+:root {
+  --font-sans: "SF Pro Text", "SF Pro Display", -apple-system,
+    BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+}
+
+html,
+body,
+#root {
+  font-family: var(--font-sans);
+}

FrontendV2/src/App.tsx

@@ -0,0 +1,90 @@
+import "./App.css";
+import { LoginPage } from "@/pages/LoginPage";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { HomePage } from "@/pages/HomePage";
+import { ProtectedRoutes } from "./utils/ProtectedRoutes";
+import { useEffect, useState } from "react";
+import Cookies from "js-cookie";
+import { useAtom } from "jotai";
+import { setIsLoggedInAtom } from "@/states/Atoms";
+import { UserContext, type User } from "./states/Context";
+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 { Footer } from "./components/footer/Footer";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { API_BASE } from "@/config/api.config";
+
+const queryClient = new QueryClient();
+
+function App() {
+  const [user, setUser] = useState<User | undefined>(undefined);
+  const [, setIsLoggedIn] = useAtom(setIsLoggedInAtom);
+  const [, setTriggerLogout] = useAtom(triggerLogoutAtom);
+
+  useEffect(() => {
+    if (Cookies.get("token")) {
+      const verifyToken = async () => {
+        const response = await fetch(`${API_BASE}/verify`, {
+          method: "GET",
+          headers: {
+            Authorization: `Bearer ${Cookies.get("token")}`,
+          },
+        });
+        if (response.ok) {
+          setTriggerLogout(false);
+          const data = await response.json();
+          setUser({ username: data.user.username, role: data.user.role });
+          setIsLoggedIn(true);
+        } else {
+          Cookies.remove("token");
+          setIsLoggedIn(false);
+          window.location.reload();
+        }
+      };
+      verifyToken();
+    }
+
+    // set initial language
+    if (!Cookies.get("language")) {
+      const getBrowserLanguage = () => {
+        const lang = navigator.languages?.[0] || navigator.language || "en";
+        return lang.split("-")[0].toLowerCase();
+      };
+
+      changeLanguage(getBrowserLanguage());
+      Cookies.set("language", getBrowserLanguage());
+    }
+
+    if (Cookies.get("language")) {
+      changeLanguage(Cookies.get("language") || "en");
+    }
+  }, []);
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Flex direction="column" minH="100vh">
+        <Box as="main" flex="1">
+          <UserContext.Provider value={user}>
+            <BrowserRouter>
+              <Routes>
+                <Route element={<ProtectedRoutes />}>
+                  <Route path="/" element={<HomePage />} />
+                  <Route path="/my-loans" element={<MyLoansPage />} />
+                  <Route path="/landing" element={<Landingpage />} />
+                </Route>
+
+                <Route path="/login" element={<LoginPage />} />
+              </Routes>
+            </BrowserRouter>
+          </UserContext.Provider>
+        </Box>
+        <Footer />
+      </Flex>
+    </QueryClientProvider>
+  );
+}
+
+export default App;

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

@@ -0,0 +1,403 @@
+import {
+  Badge,
+  Button,
+  Flex,
+  Heading,
+  Stack,
+  Text,
+  CloseButton,
+  Dialog,
+  Portal,
+  HStack,
+  IconButton,
+  Menu,
+  Box,
+} 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,
+  Flag,
+} 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";
+
+export const Header = () => {
+  const navigate = useNavigate();
+  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("");
+
+  const [, setTriggerLogout] = useAtom(triggerLogoutAtom);
+  const [, setIsLoggedIn] = useAtom(setIsLoggedInAtom);
+
+  // 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("");
+  };
+
+  const username = userData?.username
+    ? userData.username[0].toUpperCase() + userData.username.slice(1)
+    : "User";
+
+  const logout = () => {
+    Cookies.remove("token");
+    setIsLoggedIn(false);
+    setTriggerLogout(true);
+    navigate("/login", { replace: true });
+  };
+
+  return (
+    <Stack
+      as="header"
+      gap={3}
+      className="mb-6"
+      position="relative"
+      pr={{ base: 10, md: 0 }} // Platz für den Mobile-Button rechts
+    >
+      {/* Mobile: Drei-Punkte-Button, vertikal zentriert im Header */}
+      <Box
+        display={{ base: "block", md: "none" }}
+        position="absolute"
+        top="50%"
+        right="0"
+        transform="translateY(-50%)"
+        zIndex={2}
+      >
+        <Menu.Root>
+          <Menu.Trigger asChild>
+            <IconButton
+              aria-label="Aktionen"
+              variant="solid"
+              colorScheme="teal"
+              size="md"
+              borderRadius="full"
+              boxShadow="md"
+            >
+              <MoreVertical size={20} />
+            </IconButton>
+          </Menu.Trigger>
+          <Menu.Positioner>
+            <Menu.Content>
+              <Menu.Item
+                value="create-loan"
+                onSelect={() => navigate("/", { replace: true })}
+                children={
+                  <HStack gap={3}>
+                    <CalendarPlus size={16} />
+                    <Text as="span">{t("create-loan")}</Text>
+                  </HStack>
+                }
+              />
+              <Menu.Item
+                value="my-loans"
+                onSelect={() => navigate("/my-loans", { replace: true })}
+                children={
+                  <HStack gap={3}>
+                    <CircleUserRound size={16} />
+                    <Text as="span">{t("my-loans")}</Text>
+                  </HStack>
+                }
+              />
+              <Menu.Item
+                value="change-password"
+                onSelect={() => setPwOpen(true)}
+                children={
+                  <HStack gap={3}>
+                    <RotateCcwKey size={16} />
+                    <Text as="span">{t("change-password")}</Text>
+                  </HStack>
+                }
+              />
+              <Menu.Item
+                value="change-language"
+                onSelect={() => {
+                  const currentLang = Cookies.get("language") || "en";
+                  const newLang = currentLang === "en" ? "de" : "en";
+                  Cookies.set("language", newLang);
+                  window.location.reload();
+                }}
+                children={
+                  <HStack gap={3}>
+                    <LifeBuoy size={16} />
+                    <Text as="span">{t("change-language")}</Text>
+                  </HStack>
+                }
+              />
+              <Menu.Item
+                value="help"
+                onSelect={() =>
+                  window.open(
+                    "https://git.the1s.de/Matthias-Claudius-Schule/borrow-system/wiki",
+                    "_blank",
+                    "noopener,noreferrer"
+                  )
+                }
+                children={
+                  <HStack gap={3}>
+                    <LifeBuoy size={16} />
+                    <Text as="span">{t("help")}</Text>
+                  </HStack>
+                }
+              />
+              <Menu.Item
+                value="source-code"
+                onSelect={() =>
+                  window.open(
+                    "https://git.the1s.de/Matthias-Claudius-Schule/borrow-system",
+                    "_blank",
+                    "noopener,noreferrer"
+                  )
+                }
+                children={
+                  <HStack gap={3}>
+                    <Code size={16} />
+                    <Text as="span">{t("source-code")}</Text>
+                  </HStack>
+                }
+              />
+              <Menu.Separator />
+              <Menu.Item
+                value="logout"
+                onSelect={logout}
+                children={
+                  <HStack gap={3} color="red.500">
+                    <LogOut size={16} />
+                    <Text as="span">{t("logout")}</Text>
+                  </HStack>
+                }
+              />
+            </Menu.Content>
+          </Menu.Positioner>
+        </Menu.Root>
+      </Box>
+
+      <Flex
+        direction={{ base: "column", md: "row" }}
+        align={{ base: "stretch", md: "center" }}
+        justify="space-between"
+        gap={4}
+      >
+        {/* Left: Title + user info */}
+        <Stack gap={1}>
+          {/* Titelzeile ohne Mobile-Menu (wurde nach oben verlegt) */}
+          <Flex align="center" justify="space-between" gap={2}>
+            <Heading
+              size="2xl"
+              className="tracking-tight text-slate-900 dark:text-slate-100"
+            >
+              Home
+            </Heading>
+          </Flex>
+
+          <HStack gap={3} align="center" flexWrap="wrap">
+            <Text fontSize="md" className="text-slate-600 dark:text-slate-400">
+              {t("greeting")}
+              <strong>{username}</strong>!
+            </Text>
+            <Badge variant="subtle" px={2} py={1} borderRadius="full">
+              Rolle: {userData?.role ?? "—"}
+            </Badge>
+          </HStack>
+        </Stack>
+
+        {/* Right: Actions */}
+        {/* Desktop actions */}
+        <HStack
+          gap={2}
+          align="center"
+          justify="flex-end"
+          flexWrap="wrap"
+          display={{ base: "none", md: "flex" }}
+        >
+          <Button
+            colorScheme="teal"
+            onClick={() => navigate("/", { replace: true })}
+          >
+            <HStack gap={2}>
+              <CalendarPlus size={18} />
+              <Text as="span">{t("create-loan")}</Text>
+            </HStack>
+          </Button>
+
+          <Button onClick={() => navigate("/my-loans", { replace: true })}>
+            <HStack gap={2}>
+              <CircleUserRound size={18} />
+              <Text as="span">{t("my-loans")}</Text>
+            </HStack>
+          </Button>
+
+          <Button variant="ghost" onClick={() => setPwOpen(true)}>
+            <HStack gap={2}>
+              <RotateCcwKey size={18} />
+              <Text as="span">{t("change-password")}</Text>
+            </HStack>
+          </Button>
+
+          <Button
+            variant="ghost"
+            onClick={() => {
+              const currentLang = Cookies.get("language") || "en";
+              const newLang = currentLang === "en" ? "de" : "en";
+              Cookies.set("language", newLang);
+              window.location.reload();
+            }}
+          >
+            <HStack gap={2}>
+              <Flag size={18} />
+              <Text as="span">{t("change-language")}</Text>
+            </HStack>
+          </Button>
+
+          <a
+            href="https://git.the1s.de/Matthias-Claudius-Schule/borrow-system/wiki"
+            target="_blank"
+          >
+            <Button variant="ghost">
+              <HStack gap={2}>
+                <LifeBuoy size={18} />
+                <Text as="span">{t("help")}</Text>
+              </HStack>
+            </Button>
+          </a>
+
+          <a
+            href="https://git.the1s.de/Matthias-Claudius-Schule/borrow-system"
+            target="_blank"
+          >
+            <Button variant="ghost">
+              <HStack gap={2}>
+                <Code size={18} />
+                <Text as="span">{t("source-code")}</Text>
+              </HStack>
+            </Button>
+          </a>
+
+          <Button onClick={logout} variant="outline" colorScheme="red">
+            <HStack gap={2}>
+              <LogOut size={18} />
+              <Text as="span">{t("logout")}</Text>
+            </HStack>
+          </Button>
+        </HStack>
+      </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/footer/Footer.tsx

@@ -0,0 +1,23 @@
+import { Box } from "@chakra-ui/react";
+import { useVersionInfoQuery } from "./versionInfo.query";
+
+export const Footer = () => {
+  const { data: info } = useVersionInfoQuery();
+
+  return (
+    <Box
+      as="footer"
+      py={4}
+      textAlign="center"
+      position="fixed"
+      bottom="0"
+      left="0"
+      right="0"
+    >
+      Made with ❤️ by Theis Gaedigk - Year 2019 at MCS-Bochum
+      <br />
+      Frontend-Version: {info ? info["frontend-info"].version : "N/A"} |
+      Backend-Version: {info ? info["backend-info"].version : "N/A"}
+    </Box>
+  );
+};

FrontendV2/src/components/footer/versionInfo.query.ts

@@ -0,0 +1,29 @@
+import { useQuery } from "@tanstack/react-query";
+import { API_BASE } from "@/config/api.config";
+
+export const useVersionInfoQuery = () =>
+  useQuery({
+    queryKey: ["versionInfo"],
+    queryFn: async () => {
+      const response = await fetch(`${API_BASE}/`, {
+        method: "GET",
+      });
+      if (response.ok) {
+        const data = await response.json();
+        return data;
+      } else {
+        console.error(
+          "Failed to fetch version info (versionInfo.query.ts): ",
+          response.statusText
+        );
+        return {
+          "backend-info": {
+            version: "N/A",
+          },
+          "frontend-info": {
+            version: "N/A",
+          },
+        };
+      }
+    },
+  });

FrontendV2/src/components/myChakra/MyAlert.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { Alert } from "@chakra-ui/react";
+
+type MyAlertProps = {
+  status: "error" | "success";
+  title: string;
+  description: string;
+};
+
+const MyAlert: React.FC<MyAlertProps> = ({ title, description, status }) => {
+  return (
+    <Alert.Root status={status}>
+      <Alert.Indicator />
+      <Alert.Content>
+        <Alert.Title>{title}</Alert.Title>
+        <Alert.Description>{description}</Alert.Description>
+      </Alert.Content>
+    </Alert.Root>
+  );
+};
+
+export default MyAlert;

FrontendV2/src/components/ui/color-mode.tsx

@@ -0,0 +1,108 @@
+"use client"
+
+import type { IconButtonProps, SpanProps } from "@chakra-ui/react"
+import { ClientOnly, IconButton, Skeleton, Span } from "@chakra-ui/react"
+import { ThemeProvider, useTheme } from "next-themes"
+import type { ThemeProviderProps } from "next-themes"
+import * as React from "react"
+import { LuMoon, LuSun } from "react-icons/lu"
+
+export interface ColorModeProviderProps extends ThemeProviderProps {}
+
+export function ColorModeProvider(props: ColorModeProviderProps) {
+  return (
+    <ThemeProvider attribute="class" disableTransitionOnChange {...props} />
+  )
+}
+
+export type ColorMode = "light" | "dark"
+
+export interface UseColorModeReturn {
+  colorMode: ColorMode
+  setColorMode: (colorMode: ColorMode) => void
+  toggleColorMode: () => void
+}
+
+export function useColorMode(): UseColorModeReturn {
+  const { resolvedTheme, setTheme, forcedTheme } = useTheme()
+  const colorMode = forcedTheme || resolvedTheme
+  const toggleColorMode = () => {
+    setTheme(resolvedTheme === "dark" ? "light" : "dark")
+  }
+  return {
+    colorMode: colorMode as ColorMode,
+    setColorMode: setTheme,
+    toggleColorMode,
+  }
+}
+
+export function useColorModeValue<T>(light: T, dark: T) {
+  const { colorMode } = useColorMode()
+  return colorMode === "dark" ? dark : light
+}
+
+export function ColorModeIcon() {
+  const { colorMode } = useColorMode()
+  return colorMode === "dark" ? <LuMoon /> : <LuSun />
+}
+
+interface ColorModeButtonProps extends Omit<IconButtonProps, "aria-label"> {}
+
+export const ColorModeButton = React.forwardRef<
+  HTMLButtonElement,
+  ColorModeButtonProps
+>(function ColorModeButton(props, ref) {
+  const { toggleColorMode } = useColorMode()
+  return (
+    <ClientOnly fallback={<Skeleton boxSize="9" />}>
+      <IconButton
+        onClick={toggleColorMode}
+        variant="ghost"
+        aria-label="Toggle color mode"
+        size="sm"
+        ref={ref}
+        {...props}
+        css={{
+          _icon: {
+            width: "5",
+            height: "5",
+          },
+        }}
+      >
+        <ColorModeIcon />
+      </IconButton>
+    </ClientOnly>
+  )
+})
+
+export const LightMode = React.forwardRef<HTMLSpanElement, SpanProps>(
+  function LightMode(props, ref) {
+    return (
+      <Span
+        color="fg"
+        display="contents"
+        className="chakra-theme light"
+        colorPalette="gray"
+        colorScheme="light"
+        ref={ref}
+        {...props}
+      />
+    )
+  },
+)
+
+export const DarkMode = React.forwardRef<HTMLSpanElement, SpanProps>(
+  function DarkMode(props, ref) {
+    return (
+      <Span
+        color="fg"
+        display="contents"
+        className="chakra-theme dark"
+        colorPalette="gray"
+        colorScheme="dark"
+        ref={ref}
+        {...props}
+      />
+    )
+  },
+)

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

FrontendV2/src/components/ui/provider.tsx

@@ -0,0 +1,15 @@
+"use client"
+
+import { ChakraProvider, defaultSystem } from "@chakra-ui/react"
+import {
+  ColorModeProvider,
+  type ColorModeProviderProps,
+} from "./color-mode"
+
+export function Provider(props: ColorModeProviderProps) {
+  return (
+    <ChakraProvider value={defaultSystem}>
+      <ColorModeProvider {...props} />
+    </ChakraProvider>
+  )
+}

FrontendV2/src/components/ui/toaster.tsx

@@ -0,0 +1,43 @@
+"use client"
+
+import {
+  Toaster as ChakraToaster,
+  Portal,
+  Spinner,
+  Stack,
+  Toast,
+  createToaster,
+} from "@chakra-ui/react"
+
+export const toaster = createToaster({
+  placement: "bottom-end",
+  pauseOnPageIdle: true,
+})
+
+export const Toaster = () => {
+  return (
+    <Portal>
+      <ChakraToaster toaster={toaster} insetInline={{ mdDown: "4" }}>
+        {(toast) => (
+          <Toast.Root width={{ md: "sm" }}>
+            {toast.type === "loading" ? (
+              <Spinner size="sm" color="blue.solid" />
+            ) : (
+              <Toast.Indicator />
+            )}
+            <Stack gap="1" flex="1" maxWidth="100%">
+              {toast.title && <Toast.Title>{toast.title}</Toast.Title>}
+              {toast.description && (
+                <Toast.Description>{toast.description}</Toast.Description>
+              )}
+            </Stack>
+            {toast.action && (
+              <Toast.ActionTrigger>{toast.action.label}</Toast.ActionTrigger>
+            )}
+            {toast.closable && <Toast.CloseTrigger />}
+          </Toast.Root>
+        )}
+      </ChakraToaster>
+    </Portal>
+  )
+}

FrontendV2/src/components/ui/tooltip.tsx

@@ -0,0 +1,46 @@
+import { Tooltip as ChakraTooltip, Portal } from "@chakra-ui/react"
+import * as React from "react"
+
+export interface TooltipProps extends ChakraTooltip.RootProps {
+  showArrow?: boolean
+  portalled?: boolean
+  portalRef?: React.RefObject<HTMLElement | null>
+  content: React.ReactNode
+  contentProps?: ChakraTooltip.ContentProps
+  disabled?: boolean
+}
+
+export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
+  function Tooltip(props, ref) {
+    const {
+      showArrow,
+      children,
+      disabled,
+      portalled = true,
+      content,
+      contentProps,
+      portalRef,
+      ...rest
+    } = props
+
+    if (disabled) return children
+
+    return (
+      <ChakraTooltip.Root {...rest}>
+        <ChakraTooltip.Trigger asChild>{children}</ChakraTooltip.Trigger>
+        <Portal disabled={!portalled} container={portalRef}>
+          <ChakraTooltip.Positioner>
+            <ChakraTooltip.Content ref={ref} {...contentProps}>
+              {showArrow && (
+                <ChakraTooltip.Arrow>
+                  <ChakraTooltip.ArrowTip />
+                </ChakraTooltip.Arrow>
+              )}
+              {content}
+            </ChakraTooltip.Content>
+          </ChakraTooltip.Positioner>
+        </Portal>
+      </ChakraTooltip.Root>
+    )
+  },
+)

FrontendV2/src/config/api.config.ts

@@ -0,0 +1,4 @@
+export const API_BASE =
+  (import.meta as any).env?.VITE_BACKEND_URL ||
+  import.meta.env.VITE_BACKEND_URL ||
+  "http://localhost:8002";

FrontendV2/src/index.css

@@ -0,0 +1,70 @@
+@import "tailwindcss";
+
+:root {
+  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text",
+    "SF Pro Display", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
+    "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", sans-serif;
+}
+
+html,
+body,
+#root {
+  font-family: var(--font-sans);
+}
+
+@font-face {
+  font-family: "SF Pro Display";
+  src: url("/src/assets/fonts/sf-pro/SFProDisplay-Regular.woff2")
+    format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "SF Pro Display";
+  src: url("/src/assets/fonts/sf-pro/SFProDisplay-Medium.woff2") format("woff2");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "SF Pro Display";
+  src: url("/src/assets/fonts/sf-pro/SFProDisplay-Bold.woff2") format("woff2");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "SF Pro Text";
+  src: url("/src/assets/fonts/sf-pro/SFProText-Regular.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "SF Pro Text";
+  src: url("/src/assets/fonts/sf-pro/SFProText-Medium.woff2") format("woff2");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "SF Pro Text";
+  src: url("/src/assets/fonts/sf-pro/SFProText-Bold.woff2") format("woff2");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+:root {
+  --font-sans: "SF Pro Text", "SF Pro Display", -apple-system,
+    BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+}
+
+html,
+body,
+#root {
+  font-family: var(--font-sans);
+}

FrontendV2/src/main.tsx

@@ -0,0 +1,18 @@
+import { Provider } from "@/components/ui/provider";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./App.tsx";
+import i18n from "./utils/i18n"; // import i18n configuration DO NOT REMOVE
+
+// Prevent unused variable tree shaking
+let i18nUnused = i18n;
+console.log(i18nUnused);
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <Provider>
+      <App />
+    </Provider>
+  </StrictMode>
+);

FrontendV2/src/pages/HomePage.tsx

@@ -0,0 +1,187 @@
+import {
+  Container,
+  Stack,
+  Text,
+  Button,
+  Input,
+  Spinner,
+  VStack,
+  Table,
+  InputGroup,
+  Span,
+} from "@chakra-ui/react";
+import { useAtom } from "jotai";
+import { getBorrowableItems } from "@/utils/Fetcher";
+import { useState } from "react";
+import MyAlert from "@/components/myChakra/MyAlert";
+import { borrowAbleItemsAtom } from "@/states/Atoms";
+import { createLoan } from "@/utils/Fetcher";
+import { Header } from "@/components/Header";
+import { useTranslation } from "react-i18next";
+
+export interface User {
+  username: string;
+  role: number;
+}
+
+export const HomePage = () => {
+  const { t } = useTranslation();
+
+  const [borrowableItems, setBorrowableItems] = useAtom(borrowAbleItemsAtom);
+  const [startDate, setStartDate] = useState("");
+  const [endDate, setEndDate] = useState("");
+  const [isLoadingA, setIsLoadingA] = useState(false);
+  const [selectedItems, setSelectedItems] = useState<number[]>([]);
+
+  const MAX_CHARACTERS = 500;
+  const [note, setNote] = useState("");
+
+  // Error handling states
+  const [isMsg, setIsMsg] = useState(false);
+  const [msgStatus, setMsgStatus] = useState<"error" | "success">("error");
+  const [msgTitle, setMsgTitle] = useState("");
+  const [msgDescription, setMsgDescription] = useState("");
+
+  const handleCheckboxChange = (itemId: number) => {
+    setSelectedItems((prevSelected) =>
+      prevSelected.includes(itemId)
+        ? prevSelected.filter((id) => id !== itemId)
+        : [...prevSelected, itemId]
+    );
+  };
+
+  return (
+    <Container className="px-6 sm:px-8 pt-10">
+      <Header />
+      {isMsg && (
+        <MyAlert
+          status={msgStatus}
+          title={msgTitle}
+          description={msgDescription}
+        />
+      )}
+      <Stack as="main">
+        <Text>{t("timezone-info")}</Text>
+        <label htmlFor="startDate">
+          <Text>{t("start-date")}</Text>
+        </label>
+        <Input
+          id="startDate"
+          placeholder={t("start-date")}
+          type="datetime-local"
+          value={startDate}
+          onChange={(e) => setStartDate(e.target.value)}
+        />
+        <label htmlFor="endDate">
+          <Text>{t("end-date")}</Text>
+        </label>
+        <Input
+          id="endDate"
+          placeholder={t("end-date")}
+          type="datetime-local"
+          value={endDate}
+          onChange={(e) => setEndDate(e.target.value)}
+        />
+        <Button
+          onClick={async () => {
+            setIsLoadingA(true);
+            if (!startDate || !endDate) {
+              setMsgStatus("error");
+              setMsgTitle(t("missing-fields"));
+              setMsgDescription(t("missing-fields-desc"));
+              setIsMsg(true);
+              setIsLoadingA(false);
+              return;
+            }
+            await getBorrowableItems(startDate, endDate).then((response) => {
+              setIsLoadingA(false);
+              if (response && response.status === "error") {
+                setMsgStatus("error");
+                setMsgTitle(response.title || t("error"));
+                setMsgDescription(response.description || t("unknown-error"));
+                setIsMsg(true);
+                return;
+              }
+              setBorrowableItems(response.data);
+              setIsMsg(false);
+              console.log(borrowableItems);
+            });
+          }}
+        >
+          {t("get-borrowable-items")}
+        </Button>
+        {isLoadingA && (
+          <VStack colorPalette="teal">
+            <Spinner color="colorPalette.600" />
+            <Text color="colorPalette.600">{t("loading")}</Text>
+          </VStack>
+        )}
+        {borrowableItems.length > 0 && (
+          <Table.ScrollArea borderWidth="1px" rounded="md">
+            <Table.Root size="sm" stickyHeader>
+              <Table.Header>
+                <Table.Row bg="bg.subtle">
+                  <Table.ColumnHeader></Table.ColumnHeader>
+                  <Table.ColumnHeader>{t("item")}</Table.ColumnHeader>
+                </Table.Row>
+              </Table.Header>
+
+              <Table.Body>
+                {borrowableItems.map((item) => (
+                  <Table.Row key={item.id}>
+                    <Table.Cell>
+                      <input
+                        onChange={() => handleCheckboxChange(item.id)}
+                        type="checkbox"
+                        name={item.id}
+                        id={item.id}
+                      />
+                    </Table.Cell>
+                    <Table.Cell>{item.item_name}</Table.Cell>
+                  </Table.Row>
+                ))}
+              </Table.Body>
+              <InputGroup
+                endElement={
+                  <Span color="fg.muted" textStyle="xs">
+                    {note.length} / {MAX_CHARACTERS}
+                  </Span>
+                }
+              >
+                <Input
+                  placeholder={t("optional-note")}
+                  value={note}
+                  maxLength={MAX_CHARACTERS}
+                  onChange={(e) => {
+                    setNote(e.currentTarget.value.slice(0, MAX_CHARACTERS));
+                  }}
+                />
+              </InputGroup>
+            </Table.Root>
+          </Table.ScrollArea>
+        )}
+        {selectedItems.length >= 1 && (
+          <Button
+            onClick={() =>
+              createLoan(selectedItems, startDate, endDate, note).then((response) => {
+                if (response.status === "error") {
+                  setMsgStatus("error");
+                  setMsgTitle(response.title || t("error"));
+                  setMsgDescription(response.description || t("unknown-error"));
+                  setIsMsg(true);
+                  return;
+                }
+                setMsgStatus("success");
+                setMsgTitle(t("success"));
+                setMsgDescription(t("loan-success"));
+                setIsMsg(true);
+              })
+            }
+          >
+            {t("create-loan")}
+          </Button>
+        )}
+      </Stack>
+    </Container>
+  );
+};

FrontendV2/src/pages/Landingpage.tsx

@@ -11,13 +11,18 @@ import {
   Button,
 } from "@chakra-ui/react";
 import { Lock, LockOpen } from "lucide-react";
-import MyAlert from "../myChakra/MyAlert";
-import { formatDateTime } from "@/utils/userFuncs";
+import MyAlert from "@/components/myChakra/MyAlert";
+import { useTranslation } from "react-i18next";
+import { API_BASE } from "@/config/api.config";
+import Cookies from "js-cookie";
 
-const API_BASE =
-  (import.meta as any).env?.VITE_BACKEND_URL ||
-  import.meta.env.VITE_BACKEND_URL ||
-  "http://localhost:8002";
+export const formatDateTime = (value: string | null | undefined) => {
+  if (!value) return "N/A";
+  const m = value.match(/^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})/);
+  if (!m) return "N/A";
+  const [, y, M, d, h, min] = m;
+  return `${d}.${M}.${y} ${h}:${min} Uhr`;
+};
 
 type Loan = {
   id: number;
@@ -35,9 +40,13 @@ type Device = {
   can_borrow_role: string;
   inSafe: number;
   entry_created_at: string;
+  last_borrowed_person: string | null;
+  currently_borrowing: string | null;
 };
 
 const Landingpage: React.FC = () => {
+  const { t } = useTranslation();
+
   const [isLoading, setIsLoading] = useState(false);
   const [loans, setLoans] = useState<Loan[]>([]);
   const [devices, setDevices] = useState<Device[]>([]);
@@ -62,35 +71,41 @@ const Landingpage: React.FC = () => {
     const fetchData = async () => {
       setIsLoading(true);
       try {
-        const loanRes = await fetch(`${API_BASE}/apiV2/allLoans`);
+        const loanRes = await fetch(`${API_BASE}/api/loans/all-loans`, {
+          method: "GET",
+          headers: {
+            Authorization: `Bearer ${Cookies.get("token")}`,
+          },
+        });
         const loanData = await loanRes.json();
         if (Array.isArray(loanData)) {
           setLoans(loanData);
         } else {
           setError(
             "error",
-            "Fehler beim Laden",
-            "Unerwartetes Datenformat erhalten. (Ausleihen)"
+            t("error-by-loading"),
+            t("unexpected-date-format_loan")
           );
         }
 
-        const deviceRes = await fetch(`${API_BASE}/apiV2/allItems`);
+        const deviceRes = await fetch(`${API_BASE}/api/loans/all-items`, {
+          method: "GET",
+          headers: {
+            Authorization: `Bearer ${Cookies.get("token")}`,
+          },
+        });
         const deviceData = await deviceRes.json();
         if (Array.isArray(deviceData)) {
           setDevices(deviceData);
         } else {
           setError(
             "error",
-            "Fehler beim Laden",
-            "Unerwartetes Datenformat erhalten. (Geräte)"
+            t("error-by-loading"),
+            t("unexpected-date-format_device")
           );
         }
       } catch (e) {
-        setError(
-          "error",
-          "Fehler beim Laden",
-          "Die Ausleihen konnten nicht geladen werden."
-        );
+        setError("error", t("error-by-loading"), t("error-fetching-loans"));
       } finally {
         setIsLoading(false);
       }
@@ -105,7 +120,7 @@ const Landingpage: React.FC = () => {
       </Heading>
 
       <Heading as="h2" size="md" mb={4}>
-        Alle Ausleihen
+        {t("all-loans")}
       </Heading>
 
       {isError && (
@@ -119,7 +134,7 @@ const Landingpage: React.FC = () => {
       {isLoading && (
         <VStack colorPalette="teal">
           <Spinner color="colorPalette.600" />
-          <Text color="colorPalette.600">Loading...</Text>
+          <Text color="colorPalette.600">{t("loading")}</Text>
         </VStack>
       )}
 
@@ -131,22 +146,22 @@ const Landingpage: React.FC = () => {
                 <strong>#</strong>
               </Table.ColumnHeader>
               <Table.ColumnHeader>
-                <strong>Benutzername</strong>
+                <strong>{t("username")}</strong>
               </Table.ColumnHeader>
               <Table.ColumnHeader>
-                <strong>Startdatum</strong>
+                <strong>{t("start-date")}</strong>
               </Table.ColumnHeader>
               <Table.ColumnHeader>
-                <strong>Enddatum</strong>
+                <strong>{t("end-date")}</strong>
               </Table.ColumnHeader>
               <Table.ColumnHeader>
-                <strong>Ausgeliehene Artikel</strong>
+                <strong>{t("rented-items")}</strong>
               </Table.ColumnHeader>
               <Table.ColumnHeader>
-                <strong>Rückgabedatum</strong>
+                <strong>{t("return-date")}</strong>
               </Table.ColumnHeader>
               <Table.ColumnHeader>
-                <strong>Ausleihdatum</strong>
+                <strong>{t("take-date")}</strong>
               </Table.ColumnHeader>
             </Table.Row>
           </Table.Header>
@@ -172,12 +187,12 @@ const Landingpage: React.FC = () => {
 
       {!isLoading && loans.length === 0 && !isError && (
         <Text color="gray.500" mt={2}>
-          Keine Ausleihen vorhanden.
+          {t("no-loans-found")}
         </Text>
       )}
 
       <Heading as="h2" size="md" mb={4}>
-        Alle Geräte
+        {t("all-devices")}
       </Heading>
 
       {/* Responsive Grid mit gleich hohen Karten */}
@@ -195,14 +210,24 @@ const Landingpage: React.FC = () => {
               <Heading size="md">{device.item_name}</Heading>
             </Card.Header>
             <Card.Body color="fg.muted">
-              <Text>Ausleihrolle: {device.can_borrow_role}</Text>
+              <Text>
+                {t("rent-role")}: {device.can_borrow_role}
+              </Text>
+              <Text>
+                {t("last-borrowed-person")}:{" "}
+                {device.last_borrowed_person || "N/A"}
+              </Text>
+              <Text>
+                {t("currently-borrowed-by")}:{" "}
+                {device.currently_borrowing || "N/A"}
+              </Text>
             </Card.Body>
           </Card.Root>
         ))}
       </SimpleGrid>
       <HStack mt={3} gap={3} align="center" role="group" aria-label="Legende">
         <Text fontWeight="medium" color="fg.muted">
-          Legende:
+          {t("legend")}:
         </Text>
         <Button
           size="sm"
@@ -214,7 +239,7 @@ const Landingpage: React.FC = () => {
         >
           <HStack gap={2}>
             <LockOpen size={16} />
-            <Text>Im Schließfach</Text>
+            <Text>{t("in-locker")}</Text>
           </HStack>
         </Button>
         <Button
@@ -227,7 +252,7 @@ const Landingpage: React.FC = () => {
         >
           <HStack gap={2}>
             <Lock size={16} />
-            <Text>Nicht im Schließfach</Text>
+            <Text>{t("not-in-locker")}</Text>
           </HStack>
         </Button>
       </HStack>

FrontendV2/src/pages/LoginPage.tsx

@@ -0,0 +1,119 @@
+import { useState, useEffect } from "react";
+import MyAlert from "../components/myChakra/MyAlert";
+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 { 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 = () => {
+  const { t } = useTranslation();
+
+  const [isLoggedIn, setIsLoggedIn] = useAtom(setIsLoggedInAtom);
+  const [triggerLogout, setTriggerLogout] = useAtom(triggerLogoutAtom);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (isLoggedIn) {
+      navigate("/", { replace: true });
+      window.location.reload(); // Wenn entfernt: Seite bleibt schwarz und muss manuell neu geladen werden
+    }
+  }, [isLoggedIn, navigate]);
+
+  const loginFnc = async (username: string, password: string) => {
+    const response = await fetch(`${API_BASE}/api/users/login`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ username, password }),
+    });
+
+    const data = await response.json();
+
+    if (!response.ok) {
+      return {
+        success: false,
+        message: data.message ?? t("login-failed"),
+        description: data.description ?? "",
+      };
+    }
+
+    Cookies.set("token", data.token);
+    setIsLoggedIn(true);
+    return { success: true };
+  };
+
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [isError, setIsError] = useState(false);
+  const [errorMsg, setErrorMsg] = useState("");
+  const [errorDsc, setErrorDsc] = useState("");
+
+  const handleLogin = async () => {
+    const result = await loginFnc(username, password);
+    if (!result.success) {
+      setErrorMsg(result.message);
+      setErrorDsc(result.description);
+      setIsError(true);
+      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">
+      <form onSubmit={(e) => e.preventDefault()}>
+        <Card.Root maxW="sm">
+          <Card.Header>
+            <Card.Title>{t("login")}</Card.Title>
+            <Card.Description>{t("enter-credentials")}</Card.Description>
+          </Card.Header>
+          <Card.Body>
+            <Stack gap="4" w="full">
+              <Field.Root>
+                <Field.Label>{t("username")}</Field.Label>
+                <Input
+                  value={username}
+                  onChange={(e) => setUsername(e.target.value)}
+                />
+              </Field.Root>
+              <Field.Root>
+                <Field.Label>{t("password")}</Field.Label>
+                <PasswordInput
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                />
+              </Field.Root>
+            </Stack>
+          </Card.Body>
+          <Card.Footer justifyContent="flex-end">
+            {isError && (
+              <MyAlert status="error" title={errorMsg} description={errorDsc} />
+            )}
+            <Button type="submit" onClick={() => handleLogin()} variant="solid">
+              Login
+            </Button>
+          </Card.Footer>
+          <Card.Footer justifyContent="flex-end">
+            {triggerLogout && (
+              <MyAlert
+                status="success"
+                title={t("logout-success")}
+                description={t("logout-success-desc")}
+              />
+            )}
+          </Card.Footer>
+        </Card.Root>
+      </form>
+      <Footer />
+    </div>
+  );
+};

FrontendV2/src/pages/MyLoansPage.tsx

@@ -0,0 +1,244 @@
+import { useEffect, useState } from "react";
+import Cookies from "js-cookie";
+import { useNavigate } from "react-router-dom";
+import MyAlert from "@/components/myChakra/MyAlert";
+import {
+  Container,
+  VStack,
+  Spinner,
+  Text,
+  Table,
+  Button,
+  CloseButton,
+  Dialog,
+  Portal,
+  Code,
+} from "@chakra-ui/react";
+import { Header } from "@/components/Header";
+import { Trash2 } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { API_BASE } from "@/config/api.config";
+
+export const MyLoansPage = () => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+
+  const [loans, setLoans] = useState<any[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [delLoanCode, setDelLoanCode] = useState<number | null>(null);
+
+  // Error handling states
+  const [isMsg, setIsMsg] = useState(false);
+  const [msgStatus, setMsgStatus] = useState<"error" | "success">("error");
+  const [msgTitle, setMsgTitle] = useState("");
+  const [msgDescription, setMsgDescription] = useState("");
+
+  useEffect(() => {
+    if (!Cookies.get("token")) {
+      navigate("/login", { replace: true });
+      return;
+    }
+
+    const fetchLoans = async () => {
+      try {
+        setIsLoading(true);
+        const res = await fetch(`${API_BASE}/api/loans/loans`, {
+          method: "GET",
+          headers: {
+            Authorization: `Bearer ${Cookies.get("token")}`,
+          },
+        });
+
+        if (!res.ok) {
+          setMsgStatus("error");
+          setMsgTitle(t("error"));
+          setMsgDescription(t("error-fetching-loans"));
+          setIsMsg(true);
+          return;
+        }
+
+        const data = await res.json();
+        setLoans(data);
+      } catch (e) {
+        setMsgStatus("error");
+        setMsgTitle(t("error"));
+        setMsgDescription(t("network-error-fetching-loans"));
+        setIsMsg(true);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchLoans();
+  }, [navigate]);
+
+  const deleteLoan = async (loanId: number) => {
+    try {
+      const res = await fetch(`${API_BASE}/api/loans/delete-loan/${loanId}`, {
+        method: "DELETE",
+        headers: {
+          Authorization: `Bearer ${Cookies.get("token")}`,
+        },
+      });
+
+      if (!res.ok) {
+        setMsgStatus("error");
+        setMsgTitle(t("error"));
+        setMsgDescription(t("error-deleting-loan"));
+        setIsMsg(true);
+        return;
+      }
+
+      setLoans((prev) => prev.filter((loan) => loan.id !== loanId));
+      setMsgStatus("success");
+      setMsgTitle(t("success"));
+      setMsgDescription(t("loan-deletion-success"));
+      setIsMsg(true);
+    } catch (e) {
+      setMsgStatus("error");
+      setMsgTitle(t("error"));
+      setMsgDescription(t("network-error-deleting-loan"));
+      setIsMsg(true);
+    }
+  };
+
+  const formatDate = (iso: string | null) => {
+    if (!iso) return "-";
+    const m = iso.match(/^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})/);
+    if (!m) return iso;
+    const [, y, M, d, h, min] = m;
+    return `${d}.${M}.${y} ${h}:${min}`;
+  };
+
+  return (
+    <>
+      <Container className="px-6 sm:px-8 pt-10">
+        <Header />
+        {isMsg && (
+          <MyAlert
+            status={msgStatus}
+            title={msgTitle}
+            description={msgDescription}
+          />
+        )}
+        {isLoading && (
+          <VStack colorPalette="teal">
+            <Spinner color="colorPalette.600" />
+            <Text color="colorPalette.600">{t("loading")}</Text>
+          </VStack>
+        )}
+        {loans && (
+          <Table.Root
+            size="sm"
+            variant="outline"
+            style={{ tableLayout: "fixed", width: "100%" }}
+          >
+            <Table.ColumnGroup>
+              {/* Ausleihcode */}
+              <Table.Column style={{ width: "14%" }} />
+              {/* Startdatum */}
+              <Table.Column style={{ width: "14%" }} />
+              {/* Enddatum */}
+              <Table.Column style={{ width: "14%" }} />
+              {/* Geräte (flexibler) */}
+              <Table.Column style={{ width: "28%" }} />
+              {/* Ausleihdatum */}
+              <Table.Column style={{ width: "14%" }} />
+              {/* Rückgabedatum */}
+              <Table.Column style={{ width: "14%" }} />
+              {/* Notiz */}
+              <Table.Column style={{ width: "14%" }} />
+              {/* Aktionen */}
+              <Table.Column style={{ width: "8%" }} />
+            </Table.ColumnGroup>
+            <Table.Header>
+              <Table.Row>
+                <Table.ColumnHeader>{t("loan-code")}</Table.ColumnHeader>
+                <Table.ColumnHeader>{t("start-date")}</Table.ColumnHeader>
+                <Table.ColumnHeader>{t("end-date")}</Table.ColumnHeader>
+                <Table.ColumnHeader>{t("devices")}</Table.ColumnHeader>
+                <Table.ColumnHeader>{t("take-date")}</Table.ColumnHeader>
+                <Table.ColumnHeader>{t("return-date")}</Table.ColumnHeader>
+                <Table.ColumnHeader>{t("note")}</Table.ColumnHeader>
+                <Table.ColumnHeader>{t("actions")}</Table.ColumnHeader>
+              </Table.Row>
+            </Table.Header>
+            <Table.Body>
+              {loans.map((loan) => (
+                <Table.Row key={loan.id}>
+                  <Table.Cell>
+                    <Text title={loan.loan_code}>
+                      <Code variant="solid">{`${loan.loan_code}`}</Code>
+                    </Text>
+                  </Table.Cell>
+                  <Table.Cell>{formatDate(loan.start_date)}</Table.Cell>
+                  <Table.Cell>{formatDate(loan.end_date)}</Table.Cell>
+                  <Table.Cell>
+                    <Text title={loan.loaned_items_name}>
+                      {loan.loaned_items_name}
+                    </Text>
+                  </Table.Cell>
+                  <Table.Cell>{formatDate(loan.take_date)}</Table.Cell>
+                  <Table.Cell>{formatDate(loan.returned_date)}</Table.Cell>
+                  <Table.Cell>{loan.note}</Table.Cell>
+                  <Table.Cell>
+                    <Dialog.Root role="alertdialog">
+                      <Dialog.Trigger asChild>
+                        <Button
+                          onClick={() => setDelLoanCode(loan.loan_code)}
+                          aria-label="Ausleihe löschen"
+                          style={{
+                            display: "inline-flex",
+                            alignItems: "center",
+                          }}
+                        >
+                          <Trash2 />
+                        </Button>
+                      </Dialog.Trigger>
+                      <Portal>
+                        <Dialog.Backdrop />
+                        <Dialog.Positioner>
+                          <Dialog.Content>
+                            <Dialog.Header>
+                              <Dialog.Title>{t("sure")}</Dialog.Title>
+                            </Dialog.Header>
+                            <Dialog.Body>
+                              <Text>
+                                {t("sure-delete-loan-0")}
+                                <strong>
+                                  <Code>{delLoanCode}</Code>
+                                </strong>{" "}
+                                {t("sure-delete-loan-1")}
+                                <br />
+                                {t("sure-delete-loan-2")}
+                              </Text>
+                            </Dialog.Body>
+                            <Dialog.Footer>
+                              <Dialog.ActionTrigger asChild>
+                                <Button variant="outline">{t("cancel")}</Button>
+                              </Dialog.ActionTrigger>
+                              <Button
+                                colorPalette="red"
+                                onClick={() => deleteLoan(loan.id)}
+                              >
+                                <strong>{t("delete")}</strong>
+                              </Button>
+                            </Dialog.Footer>
+                            <Dialog.CloseTrigger asChild>
+                              <CloseButton size="sm" />
+                            </Dialog.CloseTrigger>
+                          </Dialog.Content>
+                        </Dialog.Positioner>
+                      </Portal>
+                    </Dialog.Root>
+                  </Table.Cell>
+                </Table.Row>
+              ))}
+            </Table.Body>
+          </Table.Root>
+        )}
+      </Container>
+    </>
+  );
+};

FrontendV2/src/states/Atoms.tsx

@@ -0,0 +1,16 @@
+import { atom } from "jotai";
+
+interface Meta {
+  "backend-info": {
+    version: String;
+  };
+  "frontend-info": {
+    version: String;
+  };
+}
+
+export const testAtom = atom<number>(0);
+export const setIsLoggedInAtom = atom<boolean>(false);
+export const triggerLogoutAtom = atom<boolean>(false);
+export const borrowAbleItemsAtom = atom<any[]>([]);
+export const infoAtom = atom<Meta | undefined>(undefined);

FrontendV2/src/states/Context.ts

@@ -0,0 +1,19 @@
+import { createContext } from "react";
+import { useContext } from "react";
+
+export interface User {
+  username: string;
+  role: number;
+}
+
+export const UserContext = createContext<User | undefined>(undefined);
+
+export function useUserContext() {
+  const user = useContext(UserContext);
+
+  if (user === undefined) {
+    throw new Error("useUserContext must be used with a UserContext")
+  }
+
+  return user;
+}

FrontendV2/src/states/README.md

@@ -0,0 +1,36 @@
+# How to use Atoms
+Atoms are the fundamental building blocks of state management in this system. They represent individual pieces of state that can be shared and manipulated across different components.
+
+You can also name it global state.
+
+## Creating an Atom
+to create an atom you have to declare an atom like this:
+
+```ts
+import { atom } from 'jotai';
+
+export const NAME_OF_YOUR_ATOM = atom<type_of_your_atom>(initial_value);
+```
+
+In this project we declare all atoms in the `states/Atoms.tsx`file. Which you can find above this README file.
+
+## Using an Atom
+To use an atom in your component, you can use the `useAtom` hook provided by Jotai. Here's an example of how to use an atom in a React component:
+
+```tsx
+import { useAtom } from 'jotai';
+import { NAME_OF_YOUR_ATOM } from '@/states/Atoms';
+
+const MyComponent = () => {
+  const [value, setValue] = useAtom(NAME_OF_YOUR_ATOM);
+
+  return (
+    <div>
+      <p>Current value: {value}</p>
+      <button onClick={() => setValue(newValue)}>Update Value</button>
+    </div>
+  );
+};
+```
+
+As you can see, you can use `useAtom` like `useState` but the state is global. In this example `value` is the current state of the atom, and `setValue` is a function to update the state, which is also known as the setter function.

FrontendV2/src/utils/Fetcher.ts

@@ -0,0 +1,79 @@
+import Cookies from "js-cookie";
+import { API_BASE } from "@/config/api.config";
+
+export const getBorrowableItems = async (
+  startDate: string,
+  endDate: string
+) => {
+  try {
+    const response = await fetch(`${API_BASE}/api/loans/borrowable-items`, {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${Cookies.get("token") || ""}`,
+        "Content-Type": "application/json",
+        Accept: "application/json",
+      },
+      body: JSON.stringify({ startDate, endDate }),
+    });
+
+    if (!response.ok) {
+      return {
+        data: null,
+        status: "error",
+        title: "Server error",
+        description:
+          "Ein Fehler ist auf dem Server aufgetreten. Manchmal hilft es, die Seite neu zu laden.",
+      };
+    }
+
+    const data = await response.json();
+    return {
+      data: data,
+      status: "success",
+      title: null,
+      description: null,
+    };
+  } catch (error) {
+    return {
+      data: null,
+      status: "error",
+      title: "Netzwerkfehler",
+      description:
+        "Es konnte keine Verbindung zum Server hergestellt werden. Bitte überprüfe deine Internetverbindung.",
+    };
+  }
+};
+
+export const createLoan = async (
+  itemIds: number[],
+  startDate: string,
+  endDate: string,
+  note: string | null
+) => {
+  const response = await fetch(`${API_BASE}/api/loans/createLoan`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${Cookies.get("token") || ""}`,
+    },
+    body: JSON.stringify({ items: itemIds, startDate, endDate, note }),
+  });
+
+  if (!response.ok) {
+    return {
+      data: null,
+      status: "error",
+      title: "Server error",
+      description:
+        "Ein Fehler ist auf dem Server aufgetreten. Manchmal hilft es, die Seite neu zu laden.",
+    };
+  }
+
+  const data = await response.json();
+  return {
+    data: data,
+    status: "success",
+    title: null,
+    description: null,
+  };
+};

FrontendV2/src/utils/ProtectedRoutes.tsx

@@ -0,0 +1,20 @@
+import { Navigate, Outlet, useLocation } from "react-router-dom";
+import Cookies from "js-cookie";
+import { useContext } from "react";
+import { UserContext } from "@/states/Context";
+
+export const ProtectedRoutes = () => {
+  const user = useContext(UserContext);
+  const location = useLocation();
+  const hasToken = Boolean(Cookies.get("token"));
+
+  if (hasToken && !user) {
+    return null;
+  }
+
+  return user ? (
+    <Outlet />
+  ) : (
+    <Navigate to="/login" replace state={{ from: location }} />
+  );
+};

FrontendV2/src/utils/i18n/index.ts

@@ -0,0 +1,34 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import Cookies from "js-cookie";
+
+import enLang from "./locales/en/en.json";
+import deLang from "./locales/de/de.json";
+
+// the translations
+// (tip move them in a JSON file and import them,
+// or even better, manage them separated from your code: https://react.i18next.com/guides/multiple-translation-files)
+const resources = {
+  en: {
+    translation: enLang,
+  },
+  de: {
+    translation: deLang,
+  },
+};
+
+i18n
+  .use(initReactI18next) // passes i18n down to react-i18next
+  .init({
+    resources,
+    fallbackLng: "en", // use en if detected lng is not available
+    lng: Cookies.get("language") || "en", // language to use, more information here: https://www.i18next.com/overview/configuration-options#languages-namespaces-resources
+    // you can use the i18n.changeLanguage function to change the language manually: https://www.i18next.com/overview/api#changelanguage
+    // if you're using a language detector, do not define the lng option
+
+    interpolation: {
+      escapeValue: false, // react already safes from xss
+    },
+  });
+
+export default i18n;

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

@@ -0,0 +1,65 @@
+{
+    "greeting": "Willkommen zurück, ",
+    "err_pw_change": "Passwortänderung fehlgeschlagen",
+    "pw_mismatch": "Bitte überprüfen Sie Ihre Eingaben",
+    "pw_success": "Passwort erfolgreich geändert",
+    "pw_success_desc": "Ihr Passwort wurde erfolgreich geändert.",
+    "create-loan": "Ausleihe erstellen",
+    "my-loans": "Meine Ausleihen",
+    "change-password": "Passwort ändern",
+    "help": "Hilfe",
+    "source-code": "Quellcode",
+    "logout": "Abmelden",
+    "old-password": "Altes Passwort",
+    "new-password": "Neues Passwort",
+    "confirm-password": "Neues Passwort wiederholen",
+    "cancel": "Abbrechen",
+    "save": "Speichern",
+    "start-date": "Startdatum",
+    "end-date": "Enddatum",
+    "missing-fields": "Fehlende Eingaben",
+    "missing-fields-desc": "Bitte Start- und Enddatum angeben.",
+    "error": "Fehler",
+    "unknown-error": "Unbekannter Frontend Fehler",
+    "get-borrowable-items": "Verfügbare Gegenstände abrufen",
+    "loading": "Laden...",
+    "item": "Gegenstand",
+    "success": "Erfolg",
+    "loan-success": "Ausleihe erfolgreich erstellt",
+    "error-by-loading": "Fehler beim Laden",
+    "unexpected-date-format_loan": "Unerwartetes Datumsformat erhalten. (Ausleihen)",
+    "unexpected-date-format_device": "Unerwartetes Datumsformat erhalten. (Gerät)",
+    "error-fetching-loans": "Die Ausleihen konnten nicht abgerufen werden.",
+    "all-loans": "Alle Ausleihen",
+    "username": "Benutzername",
+    "rented-items": "Ausgeliehene Gegenstände",
+    "return-date": "Rückgabedatum",
+    "take-date": "Abholdatum",
+    "no-loans-found": "Keine Ausleihen vorhanden.",
+    "all-devices": "Alle Geräte",
+    "rent-role": "Ausleihrolle",
+    "legend": "Legende",
+    "in-locker": "Im Schließfach",
+    "not-in-locker": "Nicht im Schließfach",
+    "login-failed": "Anmeldung fehlgeschlagen",
+    "login": "Anmelden",
+    "enter-credentials": "Bitte unten Ihre Anmeldedaten eingeben.",
+    "password": "Passwort",
+    "logout-success": "Erfolgreich abgemeldet",
+    "logout-success-desc": "Sie wurden erfolgreich abgemeldet.",
+    "network-error-fetching-loans": "Netzwerkfehler beim Laden der Ausleihen.",
+    "error-deleting-loan": "Die Ausleihe konnte nicht gelöscht werden.",
+    "loan-deletion-success": "Die Ausleihe wurde erfolgreich gelöscht.",
+    "network-error-deleting-loan": "Netzwerkfehler beim Löschen der Ausleihe.",
+    "loan-code": "Ausleihcode",
+    "devices": "Geräte",
+    "actions": "Aktionen",
+    "sure": "Sind Sie sicher?",
+    "sure-delete-loan-0": "Möchten Sie die Ausleihe mit dem ",
+    "sure-delete-loan-1": " Ausleihcode wirklich löschen?",
+    "sure-delete-loan-2": "Für den Admin bleibt sie weiterhin sichtbar.",
+    "delete": "Löschen",
+    "change-language": "Sprache ändern",
+    "timezone-info": "Die angezeigten Daten und Uhrzeiten werden in deutscher Zeitzone dargestellt und müssen auch so eingegeben werden.",
+    "optional-note": "Optionale Notiz"
+}

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

@@ -0,0 +1,65 @@
+{
+    "greeting": "Welcome back, ",
+    "err_pw_change": "Password change failed",
+    "pw_mismatch": "Please check your input",
+    "pw_success": "Password changed successfully",
+    "pw_success_desc": "Your password was changed successfully.",
+    "create-loan": "Create loan",
+    "my-loans": "My loans",
+    "change-password": "Change password",
+    "help": "Help",
+    "source-code": "Source code",
+    "logout": "Log out",
+    "old-password": "Old password",
+    "new-password": "New password",
+    "confirm-password": "Repeat new password",
+    "cancel": "Cancel",
+    "save": "Save",
+    "start-date": "Start date",
+    "end-date": "End date",
+    "missing-fields": "Missing fields",
+    "missing-fields-desc": "Please provide start and end date.",
+    "error": "Error",
+    "unknown-error": "Unknown frontend error",
+    "get-borrowable-items": "Fetch available items",
+    "loading": "Loading...",
+    "item": "Item",
+    "success": "Success",
+    "loan-success": "Loan created successfully",
+    "error-by-loading": "Error while loading",
+    "unexpected-date-format_loan": "Unexpected date format received. (Loans)",
+    "unexpected-date-format_device": "Unexpected date format received. (Device)",
+    "error-fetching-loans": "The loans could not be retrieved.",
+    "all-loans": "All loans",
+    "username": "Username",
+    "rented-items": "Borrowed items",
+    "return-date": "Return date",
+    "take-date": "Collection date",
+    "no-loans-found": "No loans found.",
+    "all-devices": "All devices",
+    "rent-role": "Loan role",
+    "legend": "Legend",
+    "in-locker": "In locker",
+    "not-in-locker": "Not in locker",
+    "login-failed": "Login failed",
+    "login": "Log in",
+    "enter-credentials": "Please enter your credentials below.",
+    "password": "Password",
+    "logout-success": "Successfully logged out",
+    "logout-success-desc": "You have been logged out successfully.",
+    "network-error-fetching-loans": "Network error while loading loans.",
+    "error-deleting-loan": "The loan could not be deleted.",
+    "loan-deletion-success": "The loan was deleted successfully.",
+    "network-error-deleting-loan": "Network error while deleting the loan.",
+    "loan-code": "Loan code",
+    "devices": "Devices",
+    "actions": "Actions",
+    "sure": "Are you sure?",
+    "sure-delete-loan-0": "Do you really want to delete the loan with the ",
+    "sure-delete-loan-1": " loan code?",
+    "sure-delete-loan-2": "It will remain visible to the admin.",
+    "delete": "Delete",
+    "change-language": "Change language",
+    "timezone-info": "The displayed dates and times are shown in Berlin timezone and must also be entered as such.",
+    "optional-note": "Optional note"
+}

FrontendV2/tsconfig.app.json

@@ -5,6 +5,7 @@
     "useDefineForClassFields": true,
     "lib": ["ES2022", "DOM", "DOM.Iterable"],
     "module": "ESNext",
+    "types": ["vite/client"],
     "skipLibCheck": true,
 
     /* Bundler mode */
@@ -21,7 +22,12 @@
     "noUnusedParameters": true,
     "erasableSyntaxOnly": true,
     "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
+    "noUncheckedSideEffectImports": true,
+
+    /* Path aliases */
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   },
   "include": ["src"]
 }

FrontendV2/tsconfig.node.json

@@ -4,6 +4,7 @@
     "target": "ES2023",
     "lib": ["ES2023"],
     "module": "ESNext",
+    "types": ["node"],
     "skipLibCheck": true,
 
     /* Bundler mode */

FrontendV2/vite.config.ts

@@ -0,0 +1,16 @@
+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";
+
+export default defineConfig({
+  plugins: [react(), svgr(), tailwindcss(), tsconfigPaths()],
+  server: {
+    host: "0.0.0.0",
+    port: 8001,
+    watch: {
+      usePolling: true,
+    },
+  },
+});

Mock/AppMockup.tsx

@@ -1,276 +0,0 @@
-import React, { useState } from "react";
-
-// Beispiel-Daten für die Übersicht in der Seitenleiste
-const allItems = [
-  { id: 1, name: "Kamera" },
-  { id: 2, name: "Mikrofon" },
-  { id: 3, name: "Licht-Set" },
-  { id: 4, name: "Stativ" },
-];
-
-// Beispiel-Ausleihen, später per API dynamisch!
-const loans = [
-  {
-    itemId: 1,
-    username: "max",
-    start: "2025-01-01T08:00",
-    end: "2025-01-01T18:00",
-    loanCode: "123456",
-  },
-  {
-    itemId: 3,
-    username: "sara",
-    start: "2025-01-02T10:00",
-    end: "2025-01-02T16:00",
-    loanCode: "654321",
-  },
-];
-
-// Dummy: Für das Beispiel sind einige Items "nicht verfügbar" bei bestimmten Zeiträumen
-function getAvailableItems(start: string, end: string) {
-  if (start.startsWith("2025-01-01")) {
-    return allItems.filter(
-      (item) => item.name === "Kamera" || item.name === "Stativ"
-    );
-  }
-  return allItems;
-}
-
-export default function App() {
-  const [step, setStep] = useState<1 | 2 | 3>(1);
-  const [startDate, setStartDate] = useState("");
-  const [endDate, setEndDate] = useState("");
-  const [availableItems, setAvailableItems] = useState<typeof allItems>([]);
-  const [selectedItem, setSelectedItem] = useState<number | null>(null);
-
-  // Dummy Code für das Design
-  const loanCode = "123456";
-
-  return (
-    <div className="min-h-screen flex bg-gradient-to-r from-blue-50 via-white to-blue-100">
-      {/* Seitenleiste */}
-      <aside className="w-80 min-h-screen bg-white/90 backdrop-blur border-r border-blue-100 shadow-xl flex flex-col p-8">
-        <h2 className="text-2xl font-extrabold mb-6 text-blue-700 tracking-tight flex items-center gap-2">
-          <svg
-            className="w-7 h-7 text-blue-500"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth={2}
-            viewBox="0 0 24 24"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              d="M16.5 7.5V4.75A2.25 2.25 0 0 0 14.25 2.5h-4.5A2.25 2.25 0 0 0 7.5 4.75V7.5m9 0h-9m9 0v11.75A2.25 2.25 0 0 1 14.25 21.5h-4.5A2.25 2.25 0 0 1 7.5 19.25V7.5m9 0h-9"
-            />
-          </svg>
-          Ausleih-Übersicht
-        </h2>
-        <ul className="space-y-5 flex-1">
-          {allItems.map((item) => {
-            const itemLoans = loans.filter((loan) => loan.itemId === item.id);
-            return (
-              <li
-                key={item.id}
-                className="bg-white/80 rounded-xl p-4 shadow hover:shadow-md transition"
-              >
-                <div className="font-semibold text-gray-900 flex items-center gap-2">
-                  <span
-                    className="inline-block w-2 h-2 rounded-full"
-                    style={{
-                      background:
-                        itemLoans.length === 0 ? "#34d399" : "#60a5fa",
-                    }}
-                  ></span>
-                  {item.name}
-                </div>
-                {itemLoans.length === 0 ? (
-                  <div className="text-green-500 text-xs mt-1 font-medium">
-                    Verfügbar
-                  </div>
-                ) : (
-                  <ul className="mt-2 space-y-1">
-                    {itemLoans.map((loan, idx) => (
-                      <li
-                        key={idx}
-                        className="text-xs text-blue-800 bg-blue-100/60 p-1 rounded"
-                      >
-                        <span className="font-bold">{loan.username}</span>
-                        <span className="ml-2">
-                          {formatDateTime(loan.start)} –{" "}
-                          {formatDateTime(loan.end)}
-                        </span>
-                        <span className="ml-2 text-gray-400">
-                          ({loan.loanCode})
-                        </span>
-                      </li>
-                    ))}
-                  </ul>
-                )}
-              </li>
-            );
-          })}
-        </ul>
-        <div className="mt-10 text-xs text-gray-400 flex items-center gap-4">
-          <span className="inline-block w-3 h-3 bg-green-400 rounded-full mr-1"></span>
-          Verfügbar
-          <span className="inline-block w-3 h-3 bg-blue-400 rounded-full ml-4 mr-1"></span>
-          Verliehen
-        </div>
-      </aside>
-
-      {/* Hauptbereich */}
-      <main className="flex-1 flex flex-col items-center py-14 px-4">
-        <header className="mb-12">
-          <h1 className="text-4xl font-extrabold text-blue-800 tracking-tight drop-shadow-sm">
-            Gegenstand ausleihen
-          </h1>
-          <p className="text-blue-400 mt-2 text-lg font-medium">
-            Schnell und unkompliziert Equipment reservieren
-          </p>
-        </header>
-        <div className="bg-white/90 shadow-2xl rounded-3xl p-10 w-full max-w-xl ring-1 ring-blue-100">
-          {step === 1 && (
-            <form
-              className="space-y-6"
-              onSubmit={(e) => {
-                e.preventDefault();
-                setAvailableItems(getAvailableItems(startDate, endDate));
-                setStep(2);
-              }}
-            >
-              <h2 className="text-xl font-bold mb-2 text-blue-700">
-                1. Zeitraum wählen
-              </h2>
-              <div>
-                <label className="block font-medium mb-1 text-blue-900">
-                  Startdatum
-                </label>
-                <input
-                  type="datetime-local"
-                  className="w-full border border-blue-200 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:outline-none"
-                  value={startDate}
-                  onChange={(e) => setStartDate(e.target.value)}
-                  required
-                />
-              </div>
-              <div>
-                <label className="block font-medium mb-1 text-blue-900">
-                  Enddatum
-                </label>
-                <input
-                  type="datetime-local"
-                  className="w-full border border-blue-200 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:outline-none"
-                  value={endDate}
-                  onChange={(e) => setEndDate(e.target.value)}
-                  required
-                  min={startDate}
-                />
-              </div>
-              <button
-                type="submit"
-                className="w-full bg-gradient-to-r from-blue-600 to-blue-400 hover:from-blue-700 hover:to-blue-500 text-white font-bold py-2 px-4 rounded-xl shadow transition disabled:bg-gray-300"
-                disabled={!startDate || !endDate || endDate <= startDate}
-              >
-                Verfügbare Gegenstände anzeigen
-              </button>
-            </form>
-          )}
-
-          {step === 2 && (
-            <div>
-              <h2 className="text-xl font-bold mb-6 text-blue-700">
-                2. Gegenstand auswählen
-              </h2>
-              {availableItems.length === 0 ? (
-                <div className="text-red-600 mb-8 font-medium text-center">
-                  Keine Gegenstände verfügbar für diesen Zeitraum.
-                </div>
-              ) : (
-                <ul className="mb-8 space-y-3">
-                  {availableItems.map((item) => (
-                    <li
-                      key={item.id}
-                      className={`flex justify-between items-center p-4 rounded-xl shadow-sm border ${
-                        selectedItem === item.id
-                          ? "bg-blue-100 border-blue-400"
-                          : "bg-green-50 border-green-100 hover:bg-blue-50"
-                      } transition`}
-                    >
-                      <span className="font-medium text-lg">{item.name}</span>
-                      <button
-                        className={`px-4 py-1 rounded-lg bg-gradient-to-r from-blue-500 to-blue-400 text-white text-sm font-semibold shadow hover:from-blue-600 hover:to-blue-500 ${
-                          selectedItem === item.id ? "ring-2 ring-blue-400" : ""
-                        }`}
-                        onClick={() => setSelectedItem(item.id)}
-                      >
-                        {selectedItem === item.id ? "Ausgewählt" : "Auswählen"}
-                      </button>
-                    </li>
-                  ))}
-                </ul>
-              )}
-              <div className="flex justify-between">
-                <button
-                  className="px-5 py-2 bg-gray-100 text-gray-600 rounded-xl hover:bg-gray-200 font-semibold shadow"
-                  onClick={() => setStep(1)}
-                >
-                  Zurück
-                </button>
-                <button
-                  className="px-5 py-2 bg-gradient-to-r from-blue-600 to-blue-400 text-white rounded-xl hover:from-blue-700 hover:to-blue-500 font-bold shadow transition disabled:bg-gray-300"
-                  disabled={selectedItem === null}
-                  onClick={() => setStep(3)}
-                >
-                  Ausleihen
-                </button>
-              </div>
-            </div>
-          )}
-
-          {step === 3 && (
-            <div className="mt-2 p-8 bg-blue-50/80 border border-blue-200 rounded-2xl text-center shadow-lg">
-              <h3 className="font-extrabold text-blue-700 mb-3 text-2xl">
-                Ausleihe bestätigt!
-              </h3>
-              <p className="mb-2 text-lg">
-                Ihr Ausleih-Code lautet:{" "}
-                <span className="font-mono text-2xl text-blue-900 bg-white px-2 py-1 rounded shadow">
-                  {loanCode}
-                </span>
-              </p>
-              <p className="mt-2 text-blue-600 text-sm">
-                Bitte merken Sie sich diesen Code, um das Schließfach zu öffnen.
-              </p>
-              <button
-                className="mt-8 px-6 py-2 bg-gradient-to-r from-blue-600 to-blue-400 text-white rounded-xl hover:from-blue-700 hover:to-blue-500 font-bold shadow"
-                onClick={() => {
-                  setStep(1);
-                  setStartDate("");
-                  setEndDate("");
-                  setSelectedItem(null);
-                }}
-              >
-                Neue Ausleihe
-              </button>
-            </div>
-          )}
-        </div>
-      </main>
-    </div>
-  );
-}
-
-// Hilfsfunktion: Datumsformatierung (z.B. 01.01.2025 08:00)
-function formatDateTime(dt: string) {
-  const d = new Date(dt);
-  return (
-    d.toLocaleDateString("de-DE", {
-      day: "2-digit",
-      month: "2-digit",
-      year: "numeric",
-    }) +
-    " " +
-    d.toLocaleTimeString("de-DE", { hour: "2-digit", minute: "2-digit" })
-  );
-}

Mock/frontendMockData.json

@@ -1,20 +0,0 @@
-[
-    {
-        "id": 1,
-        "title": "Mock Book 1",
-        "author": "Author 1",
-        "description": "Description for Mock Book 1"
-    },
-    {
-        "id": 2,
-        "title": "Mock Book 2",
-        "author": "Author 2",
-        "description": "Description for Mock Book 2"
-    },
-    {
-        "id": 3,
-        "title": "Mock Book 3",
-        "author": "Author 3",
-        "description": "Description for Mock Book 3"
-    }
-]

README.md

@@ -1,7 +1,73 @@
 # Borrow System
 
-**You have reached the `debian12` branch.**
+![React](https://img.shields.io/badge/React-20232A?logo=react&logoColor=61DAFB)
+![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?logo=typescript&logoColor=white)
+![Vite](https://img.shields.io/badge/Vite-646CFF?logo=vite&logoColor=white)
+![TailwindCSS](https://img.shields.io/badge/Tailwind_CSS-38B2AC?logo=tailwind-css&logoColor=white)
+![Node.js](https://img.shields.io/badge/Node.js-339933?logo=node.js&logoColor=white)
+![Express](https://img.shields.io/badge/Express-000000?logo=express&logoColor=white)
+![MySQL](https://img.shields.io/badge/MySQL-4479A1?logo=mysql&logoColor=white)
+![Docker](https://img.shields.io/badge/Docker-2496ED?logo=docker&logoColor=white)
+![JWT](https://img.shields.io/badge/JWT-000000?logo=jsonwebtokens&logoColor=white)
 
-Here you will find the source code of exactly the application that I have hosted.
+A small full‑stack system to log in, view available items, reserve them for a time window, and manage personal loans.
 
-The main branch or the branch that I am developing on, is the `dev` branch.
+- Frontend: React + TypeScript + Vite + Tailwind CSS
+- Backend: Node.js + Express + MySQL + JWT (jose)
+- Orchestration: Docker Compose (backend + MySQL)
+
+## Contents
+
+- Frontend: [frontend/](frontend)
+  - Vite/Tailwind config: [frontend/vite.config.ts](frontend/vite.config.ts), [frontend/tailwind.config.js](frontend/tailwind.config.js)
+  - App entry: [frontend/src/main.tsx](frontend/src/main.tsx), [frontend/src/App.tsx](frontend/src/App.tsx)
+  - UI: [frontend/src/layout/Layout.tsx](frontend/src/layout/Layout.tsx), [frontend/src/components](frontend/src/components)
+  - Data/utilities: [frontend/src/utils/fetchData.ts](frontend/src/utils/fetchData.ts), [frontend/src/utils/userHandler.ts](frontend/src/utils/userHandler.ts), [frontend/src/utils/toastify.ts](frontend/src/utils/toastify.ts)
+- Backend: [backend/](backend)
+  - Server: [backend/server.js](backend/server.js)
+  - Routes: [backend/routes/api.js](backend/routes/api.js), [backend/routes/apiV2.js](backend/routes/apiV2.js)
+  - DB + services: [backend/services/database.js](backend/services/database.js), [backend/services/tokenService.js](backend/services/tokenService.js)
+  - Schema/seed: [backend/scheme.sql](backend/scheme.sql)
+- Docs: [docs/](docs)
+  - API docs (see below): [docs/backend_API_docs/README.md](docs/backend_API_docs/README.md)
+
+## Features (high‑level)
+
+- Auth via JWT (login -> token cookie) using the backend route in [backend/routes/api.js](backend/routes/api.js).
+- After login, the app loads items, loans, and user loans and keeps them in localStorage.
+- Choose a date range to fetch borrowable items, select items, and create a loan.
+- Manage personal loans list (and delete a loan).
+
+Key frontend utilities:
+
+- [`utils.fetchData.fetchAllData`](frontend/src/utils/fetchData.ts): loads items, loans, and user loans after login.
+- [`utils.fetchData.getBorrowableItems`](frontend/src/utils/fetchData.ts): fetches borrowable items for the selected time range.
+- [`utils.userHandler.createLoan`](frontend/src/utils/userHandler.ts): creates a new loan for selected items.
+- [`utils.userHandler.handleDeleteLoan`](frontend/src/utils/userHandler.ts): deletes a loan and syncs local state.
+- [`utils.toastify.myToast`](frontend/src/utils/toastify.ts): toast notifications.
+
+UI flow (main screens):
+
+- Period selection: [frontend/src/components/Form1.tsx](frontend/src/components/Form1.tsx)
+- Borrowable items + selection: [frontend/src/components/Form2.tsx](frontend/src/components/Form2.tsx)
+- User loans table: [frontend/src/components/Form4.tsx](frontend/src/components/Form4.tsx)
+
+## Development
+
+- Scripts: see [frontend/package.json](frontend/package.json) and [backend/package.json](backend/package.json)
+  - Frontend: `npm run dev`, `npm run build`, `npm run preview`, `npm run lint`
+  - Backend: `npm start`
+- Linting: ESLint configured via [frontend/eslint.config.js](frontend/eslint.config.js)
+- TypeScript configs: [frontend/tsconfig.app.json](frontend/tsconfig.app.json), [frontend/tsconfig.node.json](frontend/tsconfig.node.json)
+
+## Configuration notes
+
+- Vite/Tailwind integration via [frontend/vite.config.ts](frontend/vite.config.ts) and `@tailwindcss/vite`; CSS entry uses `@import "tailwindcss"` in [frontend/src/index.css](frontend/src/index.css).
+- Toasts wired in [frontend/src/main.tsx](frontend/src/main.tsx) with `react-toastify`.
+- Local state is stored in `localStorage` keys: `allItems`, `allLoans`, `userLoans`, `borrowableItems`. Cross‑component updates are signaled via window events from [`utils.fetchData`](frontend/src/utils/fetchData.ts).
+
+## API documentation
+
+Refer to the dedicated API docs:
+
+`docs/backend_API_docs/README.md`

admin/Dockerfile

@@ -1,12 +1,19 @@
-FROM node:20-alpine
+FROM node:18 as builder
 
 WORKDIR /app
 
-COPY package*.json ./
-RUN npm install
+COPY package.json package-lock.json ./
+RUN npm ci
 
 COPY . .
+RUN npm run build
 
-EXPOSE 8003
+FROM nginx:alpine AS runner
 
-CMD ["npm", "run", "dev"]
+WORKDIR /usr/share/nginx/html
+COPY --from=builder /app/dist .
+
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

admin/nginx.conf

@@ -0,0 +1,18 @@
+server {
+  listen 80;
+  server_name _;
+
+  root /usr/share/nginx/html;
+  index index.html;
+
+  location / {
+    try_files $uri $uri/ /index.html;
+  }
+
+  location ~* \.(?:js|mjs|css|png|jpg|jpeg|gif|ico|svg|woff2?)$ {
+    expires 1y;
+    access_log off;
+    add_header Cache-Control "public, immutable";
+    try_files $uri =404;
+  }
+}

admin/package-lock.json

@@ -12,6 +12,7 @@
         "@emotion/react": "^11.14.0",
         "@tailwindcss/vite": "^4.1.11",
         "@tanstack/react-query": "^5.85.5",
+        "jotai": "^2.15.0",
         "js-cookie": "^3.0.5",
         "lucide-react": "^0.539.0",
         "next-themes": "^0.4.6",
@@ -4420,6 +4421,35 @@
         "jiti": "lib/jiti-cli.mjs"
       }
     },
+    "node_modules/jotai": {
+      "version": "2.15.0",
+      "resolved": "https://registry.npmjs.org/jotai/-/jotai-2.15.0.tgz",
+      "integrity": "sha512-nbp/6jN2Ftxgw0VwoVnOg0m5qYM1rVcfvij+MZx99Z5IK13eGve9FJoCwGv+17JvVthTjhSmNtT5e1coJnr6aw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "peerDependencies": {
+        "@babel/core": ">=7.0.0",
+        "@babel/template": ">=7.0.0",
+        "@types/react": ">=17.0.0",
+        "react": ">=17.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "@babel/template": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/js-cookie": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
@@ -5645,13 +5675,13 @@
       }
     },
     "node_modules/tinyglobby": {
-      "version": "0.2.14",
-      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",
-      "integrity": "sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==",
+      "version": "0.2.15",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
+      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
       "license": "MIT",
       "dependencies": {
-        "fdir": "^6.4.4",
-        "picomatch": "^4.0.2"
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3"
       },
       "engines": {
         "node": ">=12.0.0"
@@ -5849,9 +5879,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "7.1.3",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.3.tgz",
-      "integrity": "sha512-OOUi5zjkDxYrKhTV3V7iKsoS37VUM7v40+HuwEmcrsf11Cdx9y3DIr2Px6liIcZFwt3XSRpQvFpL3WVy7ApkGw==",
+      "version": "7.1.11",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.11.tgz",
+      "integrity": "sha512-uzcxnSDVjAopEUjljkWh8EIrg6tlzrjFUfMcR1EVsRDGwf/ccef0qQPRyOrROwhrTDaApueq+ja+KLPlzR/zdg==",
       "license": "MIT",
       "dependencies": {
         "esbuild": "^0.25.0",
@@ -5859,7 +5889,7 @@
         "picomatch": "^4.0.3",
         "postcss": "^8.5.6",
         "rollup": "^4.43.0",
-        "tinyglobby": "^0.2.14"
+        "tinyglobby": "^0.2.15"
       },
       "bin": {
         "vite": "bin/vite.js"

admin/package.json

@@ -14,6 +14,7 @@
     "@emotion/react": "^11.14.0",
     "@tailwindcss/vite": "^4.1.11",
     "@tanstack/react-query": "^5.85.5",
+    "jotai": "^2.15.0",
     "js-cookie": "^3.0.5",
     "lucide-react": "^0.539.0",
     "next-themes": "^0.4.6",

admin/src/Layout/Layout.tsx

@@ -3,33 +3,23 @@ import { useEffect } from "react";
 import Dashboard from "./Dashboard";
 import Login from "./Login";
 import Cookies from "js-cookie";
-import Landingpage from "@/components/API/Landingpage";
-
-const API_BASE =
-  (import.meta as any).env?.VITE_BACKEND_URL ||
-  import.meta.env.VITE_BACKEND_URL ||
-  "http://localhost:8002";
+import { API_BASE } from "@/config/api.config";
 
 const Layout: React.FC = () => {
   const [isLoggedIn, setIsLoggedIn] = useState(false);
-  const [showAPI, setShowAPI] = useState(false);
 
   useEffect(() => {
-    const path = window.location.pathname.replace(/\/+$/, ""); // remove trailing slash
-    if (path === "/api") {
-      setShowAPI(true);
-      console.log("signal");
-      return;
-    }
-
     if (Cookies.get("token")) {
       const verifyToken = async () => {
-        const response = await fetch(`${API_BASE}/api/verifyToken`, {
-          method: "GET",
-          headers: {
-            Authorization: `Bearer ${Cookies.get("token")}`,
-          },
-        });
+        const response = await fetch(
+          `${API_BASE}/api/admin/user-mgmt/verify-token`,
+          {
+            method: "GET",
+            headers: {
+              Authorization: `Bearer ${Cookies.get("token")}`,
+            },
+          }
+        );
         if (response.ok) {
           setIsLoggedIn(true);
         } else {
@@ -48,14 +38,6 @@ const Layout: React.FC = () => {
     setIsLoggedIn(false);
   };
 
-  if (showAPI) {
-    return (
-      <main>
-        <Landingpage />
-      </main>
-    );
-  }
-
   return (
     <main>
       {isLoggedIn ? (

admin/src/Layout/Sidebar.tsx

@@ -1,5 +1,7 @@
 import React from "react";
+import { useEffect, useState } from "react";
 import { Box, Flex, VStack, Heading, Text, Link } from "@chakra-ui/react";
+import { API_BASE } from "@/config/api.config";
 
 type SidebarProps = {
   viewAusleihen: () => void;
@@ -15,10 +17,22 @@ const Sidebar: React.FC<SidebarProps> = ({
   viewUser,
   viewAPI,
 }) => {
+  const [info, setInfo] = useState<any>(null);
+
+  const fetchInfo = async () => {
+    const response = await fetch(`${API_BASE}/`);
+    const data = await response.json();
+    setInfo(data);
+  };
+
+  useEffect(() => {
+    fetchInfo();
+  }, []);
+
   return (
     <Box
       as="aside"
-      w="260px"
+      w="180px"
       minH="100vh"
       bg="gray.800"
       color="gray.100"
@@ -72,7 +86,33 @@ const Sidebar: React.FC<SidebarProps> = ({
         </VStack>
 
         <Box mt="auto" pt={8} fontSize="xs" color="gray.500">
-          <Text>&copy; Made with ❤️ by Theis Gaedigk</Text>
+          <Text mb={2}>&copy; Made with ❤️ by Theis Gaedigk</Text>
+          {info ? (
+            <Flex gap={2} wrap="wrap">
+              <Box
+                as="span"
+                px={2}
+                py={0.5}
+                rounded="full"
+                bg="gray.700"
+                color="gray.200"
+              >
+                Panel {info?.["admin-panel-info"]?.version ?? "—"}
+              </Box>
+              <Box
+                as="span"
+                px={2}
+                py={0.5}
+                rounded="full"
+                bg="gray.700"
+                color="gray.200"
+              >
+                Backend {info?.["backend-info"]?.version ?? "—"}
+              </Box>
+            </Flex>
+          ) : (
+            <Text color="gray.600">Lade Versionsinfos…</Text>
+          )}
         </Box>
       </Flex>
     </Box>

admin/src/States/Atoms.tsx

@@ -0,0 +1,3 @@
+import { atom } from "jotai";
+
+export const testAtom = atom<number>(0);

admin/src/States/README.md

@@ -0,0 +1,36 @@
+# How to use Atoms
+Atoms are the fundamental building blocks of state management in this system. They represent individual pieces of state that can be shared and manipulated across different components.
+
+You can also name it global state.
+
+## Creating an Atom
+to create an atom you have to declare an atom like this:
+
+```ts
+import { atom } from 'jotai';
+
+export const NAME_OF_YOUR_ATOM = atom<type_of_your_atom>(initial_value);
+```
+
+In this project we declare all atoms in the `States/Atoms.tsx`file. Which you can find above this README file.
+
+## Using an Atom
+To use an atom in your component, you can use the `useAtom` hook provided by Jotai. Here's an example of how to use an atom in a React component:
+
+```tsx
+import { useAtom } from 'jotai';
+import { NAME_OF_YOUR_ATOM } from '@/States/Atoms';
+
+const MyComponent = () => {
+  const [value, setValue] = useAtom(NAME_OF_YOUR_ATOM);
+
+  return (
+    <div>
+      <p>Current value: {value}</p>
+      <button onClick={() => setValue(newValue)}>Update Value</button>
+    </div>
+  );
+};
+```
+
+As you can see, you can use `useAtom` like `useState` but the state is global. In this example `value` is the current state of the atom, and `setValue` is a function to update the state, which is also known as the setter function.

admin/src/components/APIKeyTable.tsx

@@ -17,17 +17,14 @@ import { useState, useEffect } from "react";
 import { deleteAPKey } from "@/utils/userActions";
 import AddAPIKey from "./AddAPIKey";
 import { formatDateTime } from "@/utils/userFuncs";
-
-const API_BASE =
-  (import.meta as any).env?.VITE_BACKEND_URL ||
-  import.meta.env.VITE_BACKEND_URL ||
-  "http://localhost:8002";
+import { API_BASE } from "@/config/api.config";
 
 type Items = {
   id: number;
-  apiKey: string;
-  user: string;
+  api_key: string;
+  entry_name: string;
   entry_created_at: string;
+  last_used_at: string | null;
 };
 
 const APIKeyTable: React.FC = () => {
@@ -56,13 +53,17 @@ const APIKeyTable: React.FC = () => {
     const fetchData = async () => {
       setIsLoading(true);
       try {
-        const response = await fetch(`${API_BASE}/api/apiKeys`, {
-          method: "GET",
-          headers: {
-            Authorization: `Bearer ${Cookies.get("token")}`,
-          },
-        });
+        const response = await fetch(
+          `${API_BASE}/api/admin/api-data/get-api-keys`,
+          {
+            method: "GET",
+            headers: {
+              Authorization: `Bearer ${Cookies.get("token")}`,
+            },
+          }
+        );
         const data = await response.json();
+        console.log(data);
         return data;
       } catch (error) {
         setError("error", "Failed to fetch items", "There is an error");
@@ -149,39 +150,55 @@ const APIKeyTable: React.FC = () => {
         />
       )}
 
-      <Table.Root size="sm" striped>
+      <Table.Root
+        size="sm"
+        striped
+        w="100%"
+        // table-layout: auto => Spaltenbreite nach Content; volle Breite nutzen
+        style={{ tableLayout: "auto" }}
+      >
         <Table.Header>
           <Table.Row>
-            <Table.ColumnHeader>
+            <Table.ColumnHeader width="1%" whiteSpace="nowrap">
               <strong>#</strong>
             </Table.ColumnHeader>
             <Table.ColumnHeader>
               <strong>API Key</strong>
             </Table.ColumnHeader>
             <Table.ColumnHeader>
-              <strong>Benutzer</strong>
+              <strong>Name</strong>
             </Table.ColumnHeader>
-            <Table.ColumnHeader>
+            <Table.ColumnHeader whiteSpace="nowrap">
               <strong>Eintrag erstellt am</strong>
             </Table.ColumnHeader>
-            <Table.ColumnHeader>
+            <Table.ColumnHeader whiteSpace="nowrap">
+              <strong>Zuletzt benutzt am</strong>
+            </Table.ColumnHeader>
+            <Table.ColumnHeader width="1%" whiteSpace="nowrap">
               <strong>Aktionen</strong>
             </Table.ColumnHeader>
           </Table.Row>
         </Table.Header>
         <Table.Body>
-          {items.map((apiKey) => (
-            <Table.Row key={apiKey.id}>
-              <Table.Cell>{apiKey.id}</Table.Cell>
-              <Table.Cell>{apiKey.apiKey}</Table.Cell>
-              <Table.Cell>{apiKey.user}</Table.Cell>
-              <Table.Cell>{formatDateTime(apiKey.entry_created_at)}</Table.Cell>
-              <Table.Cell>
+          {items.map((item) => (
+            <Table.Row key={item.id}>
+              <Table.Cell whiteSpace="nowrap">{item.id}</Table.Cell>
+              <Table.Cell fontFamily="mono">{item.api_key}</Table.Cell>
+              <Table.Cell>{item.entry_name}</Table.Cell>
+              <Table.Cell whiteSpace="nowrap">
+                {formatDateTime(item.entry_created_at)}
+              </Table.Cell>
+              <Table.Cell whiteSpace="nowrap">
+                {!item.last_used_at
+                  ? "Nie benutzt"
+                  : formatDateTime(item.last_used_at)}
+              </Table.Cell>
+              <Table.Cell whiteSpace="nowrap">
                 <Button
                   onClick={() =>
-                    deleteAPKey(apiKey.id).then((response) => {
+                    deleteAPKey(item.id).then((response) => {
                       if (response.success) {
-                        setItems(items.filter((i) => i.id !== apiKey.id));
+                        setItems(items.filter((i) => i.id !== item.id));
                         setError(
                           "success",
                           "Gegenstand gelöscht",

admin/src/components/AddAPIKey.tsx

@@ -1,6 +1,15 @@
 import React from "react";
-import { Button, Card, Field, Input, Stack } from "@chakra-ui/react";
+import {
+  Button,
+  Card,
+  Field,
+  Input,
+  Stack,
+  InputGroup,
+  Span,
+} from "@chakra-ui/react";
 import { createAPIentry } from "@/utils/userActions";
+import { useState } from "react";
 
 type AddAPIKeyProps = {
   onClose: () => void;
@@ -12,6 +21,8 @@ type AddAPIKeyProps = {
 };
 
 const AddAPIKey: React.FC<AddAPIKeyProps> = ({ onClose, alert }) => {
+  const [value, setValue] = useState("");
+
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4">
       <Card.Root maxW="sm">
@@ -23,13 +34,26 @@ const AddAPIKey: React.FC<AddAPIKeyProps> = ({ onClose, alert }) => {
         </Card.Header>
         <Card.Body>
           <Stack gap="4" w="full">
+            <InputGroup
+              endElement={
+                <Span color="fg.muted" textStyle="xs">
+                  {value.length} / {15}
+                </Span>
+              }
+            >
+              <Input
+                placeholder="Er muss 15 Zeichen lang sein"
+                value={value}
+                id="apiKey"
+                maxLength={15}
+                onChange={(e) => {
+                  setValue(e.currentTarget.value.slice(0, 15));
+                }}
+              />
+            </InputGroup>
             <Field.Root>
-              <Field.Label>API key</Field.Label>
-              <Input type="number" id="apiKey" />
-            </Field.Root>
-            <Field.Root>
-              <Field.Label>Benutzer</Field.Label>
-              <Input id="user" type="text" />
+              <Field.Label>Name</Field.Label>
+              <Input id="name" type="text" />
             </Field.Root>
           </Stack>
         </Card.Body>
@@ -44,14 +68,14 @@ const AddAPIKey: React.FC<AddAPIKeyProps> = ({ onClose, alert }) => {
                 (
                   document.getElementById("apiKey") as HTMLInputElement
                 )?.value.trim() || "";
-              const user =
+              const name =
                 (
-                  document.getElementById("user") as HTMLInputElement
+                  document.getElementById("name") as HTMLInputElement
                 )?.value.trim() || "";
 
-              if (!apiKey || !user) return;
+              if (!apiKey || !name) return;
 
-              const res = await createAPIentry(apiKey, user);
+              const res = await createAPIentry(apiKey, name);
               if (res.success) {
                 alert(
                   "success",

admin/src/components/AddForm.tsx

@@ -1,5 +1,13 @@
 import React from "react";
-import { Button, Card, Field, Input, Stack } from "@chakra-ui/react";
+import {
+  Button,
+  Card,
+  Field,
+  Input,
+  Stack,
+  Text,
+  Checkbox,
+} from "@chakra-ui/react";
 import { createUser } from "@/utils/userActions";
 
 type AddFormProps = {
@@ -12,73 +20,128 @@ type AddFormProps = {
 };
 
 const AddForm: React.FC<AddFormProps> = ({ onClose, alert }) => {
+  const [admin, setAdmin] = React.useState(false);
+
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4">
-      <Card.Root maxW="sm">
-        <Card.Header>
-          <Card.Title>Neuen Nutzer erstellen</Card.Title>
-          <Card.Description>
-            Füllen Sie das folgende Formular aus, um einen Nutzer zu erstellen.
-          </Card.Description>
-        </Card.Header>
-        <Card.Body>
-          <Stack gap="4" w="full">
-            <Field.Root>
-              <Field.Label>Username</Field.Label>
-              <Input id="username" />
-            </Field.Root>
-            <Field.Root>
-              <Field.Label>Password</Field.Label>
-              <Input id="password" type="password" />
-            </Field.Root>
-            <Field.Root>
-              <Field.Label>Role</Field.Label>
-              <Input id="role" type="number" />
-            </Field.Root>
-          </Stack>
-        </Card.Body>
-        <Card.Footer justifyContent="flex-end">
-          <Button variant="outline" onClick={onClose}>
-            Abbrechen
-          </Button>
-          <Button
-            variant="solid"
-            onClick={async () => {
-              const username =
-                (
-                  document.getElementById("username") as HTMLInputElement
-                )?.value.trim() || "";
-              const password =
-                (document.getElementById("password") as HTMLInputElement)
-                  ?.value || "";
-              const role = Number(
-                (document.getElementById("role") as HTMLInputElement)?.value
-              );
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+        }}
+      >
+        <Card.Root maxW="sm">
+          <Card.Header>
+            <Card.Title>Neuen Nutzer erstellen</Card.Title>
+            <Card.Description>
+              Füllen Sie das folgende Formular aus, um einen Nutzer zu
+              erstellen.
+            </Card.Description>
+          </Card.Header>
 
-              if (!username || !password || Number.isNaN(role)) return;
+          <Card.Body>
+            <Stack gap="4" w="full">
+              <Field.Root>
+                <Field.Label>Benutzername</Field.Label>
+                <Input id="username" />
+              </Field.Root>
+              <Field.Root>
+                <Field.Label>Passwort</Field.Label>
+                <Input id="password" type="password" />
+              </Field.Root>
+              <Field.Root>
+                <Field.Label>Vorname</Field.Label>
+                <Input id="firstname" />
+              </Field.Root>
+              <Field.Root>
+                <Field.Label>Nachname</Field.Label>
+                <Input id="lastname" />
+              </Field.Root>
+              <Field.Root>
+                <Field.Label>E-Mail</Field.Label>
+                <Input id="email" type="email" />
+              </Field.Root>
 
-              const res = await createUser(username, role, password);
-              if (res.success) {
-                alert(
-                  "success",
-                  "Nutzer erstellt",
-                  "Der Nutzer wurde erfolgreich erstellt."
+              {/* Kontrollierte Checkbox */}
+              <Checkbox.Root
+                checked={admin}
+                onCheckedChange={(e: any) => setAdmin(Boolean(e?.checked ?? e))}
+              >
+                <Checkbox.HiddenInput />
+                <Checkbox.Control />
+                <Checkbox.Label>Admin</Checkbox.Label>
+              </Checkbox.Root>
+
+              <Field.Root>
+                <Field.Label>Rolle</Field.Label>
+                <Input id="role" type="number" />
+              </Field.Root>
+            </Stack>
+          </Card.Body>
+          <Card.Footer justifyContent="flex-end">
+            <Text>Der Benutzername kann nicht mehr geändert werden.</Text>
+            <Button variant="outline" onClick={onClose}>
+              Abbrechen
+            </Button>
+            <Button
+              variant="solid"
+              type="submit"
+              onClick={async () => {
+                const username =
+                  (
+                    document.getElementById("username") as HTMLInputElement
+                  )?.value.trim() || "";
+                const password =
+                  (document.getElementById("password") as HTMLInputElement)
+                    ?.value || "";
+                const role = Number(
+                  (document.getElementById("role") as HTMLInputElement)?.value
                 );
-                onClose();
-              } else {
-                alert(
-                  "error",
-                  "Fehler beim Erstellen des Nutzers",
-                  "Es gab einen Fehler beim Erstellen des Nutzers. Vielleicht gibt es bereits einen Nutzer mit diesem Benutzernamen."
+                const firstname =
+                  (
+                    document.getElementById("firstname") as HTMLInputElement
+                  )?.value.trim() || "";
+                const lastname =
+                  (
+                    document.getElementById("lastname") as HTMLInputElement
+                  )?.value.trim() || "";
+                const email =
+                  (
+                    document.getElementById("email") as HTMLInputElement
+                  )?.value.trim() || "";
+
+                // admin kommt jetzt zuverlässig aus dem State
+                const res = await createUser(
+                  username,
+                  role,
+                  password,
+                  firstname,
+                  lastname,
+                  email,
+                  admin
                 );
-                onClose();
-              }
-            }}
-          >
-            Erstellen
-          </Button>
-        </Card.Footer>
-      </Card.Root>
+
+                if (res.success) {
+                  alert(
+                    "success",
+                    "Nutzer erstellt",
+                    "Der Nutzer wurde erfolgreich erstellt."
+                  );
+                  onClose();
+                } else {
+                  alert(
+                    "error",
+                    "Fehler beim Erstellen des Nutzers",
+                    "Es gab einen Fehler beim Erstellen des Nutzers. Vielleicht gibt es bereits einen Nutzer mit diesem Benutzernamen."
+                  );
+                  onClose();
+                }
+              }}
+            >
+              Erstellen
+            </Button>
+          </Card.Footer>
+        </Card.Root>
+      </form>
     </div>
   );
 };

admin/src/components/ItemTable.tsx

@@ -10,6 +10,7 @@ import {
   Heading,
   Icon,
   Input,
+  Box, // added
 } from "@chakra-ui/react";
 import { Tooltip } from "@/components/ui/tooltip";
 import MyAlert from "./myChakra/MyAlert";
@@ -30,18 +31,17 @@ import {
 } from "@/utils/userActions";
 import AddItemForm from "./AddItemForm";
 import { formatDateTime } from "@/utils/userFuncs";
-
-const API_BASE =
-  (import.meta as any).env?.VITE_BACKEND_URL ||
-  import.meta.env.VITE_BACKEND_URL ||
-  "http://localhost:8002";
+import { API_BASE } from "@/config/api.config";
 
 type Items = {
   id: number;
   item_name: string;
   can_borrow_role: string;
-  inSafe: boolean;
+  in_safe: boolean;
   entry_created_at: string;
+  entry_updated_at: string;
+  last_borrowed_person: string | null;
+  currently_borrowing: string | null;
 };
 
 const ItemTable: React.FC = () => {
@@ -82,12 +82,15 @@ const ItemTable: React.FC = () => {
     const fetchData = async () => {
       setIsLoading(true);
       try {
-        const response = await fetch(`${API_BASE}/api/allItems`, {
-          method: "GET",
-          headers: {
-            Authorization: `Bearer ${Cookies.get("token")}`,
-          },
-        });
+        const response = await fetch(
+          `${API_BASE}/api/admin/item-data/all-items`,
+          {
+            method: "GET",
+            headers: {
+              Authorization: `Bearer ${Cookies.get("token")}`,
+            },
+          }
+        );
         const data = await response.json();
         return data;
       } catch (error) {
@@ -149,7 +152,7 @@ const ItemTable: React.FC = () => {
       </HStack>
       {/* End action toolbar */}
 
-      <Heading marginBottom={4} size="md">
+      <Heading marginBottom={4} size="2xl">
         Gegenstände
       </Heading>
       {isError && (
@@ -175,136 +178,161 @@ const ItemTable: React.FC = () => {
         />
       )}
 
-      <Table.Root size="sm" striped>
-        <Table.Header>
-          <Table.Row>
-            <Table.ColumnHeader>
-              <strong>#</strong>
-            </Table.ColumnHeader>
-            <Table.ColumnHeader>
-              <strong>Gegenstand</strong>
-            </Table.ColumnHeader>
-            <Table.ColumnHeader>
-              <strong>Ausleih Berechtigung</strong>
-            </Table.ColumnHeader>
-            <Table.ColumnHeader>
-              <strong>Im Schließfach</strong>
-            </Table.ColumnHeader>
-            <Table.ColumnHeader>
-              <strong>Eintrag erstellt am</strong>
-            </Table.ColumnHeader>
-            <Table.ColumnHeader>
-              <strong>Aktionen</strong>
-            </Table.ColumnHeader>
-          </Table.Row>
-        </Table.Header>
-        <Table.Body>
-          {items.map((item) => (
-            <Table.Row key={item.id}>
-              <Table.Cell>{item.id}</Table.Cell>
-              <Table.Cell>
-                <Input
-                  onChange={(e) =>
-                    handleItemNameChange(item.id, e.target.value)
-                  }
-                  value={item.item_name}
-                />
-              </Table.Cell>
-              <Table.Cell>
-                <Input
-                  onChange={(e) =>
-                    handleCanBorrowRoleChange(item.id, e.target.value)
-                  }
-                  value={item.can_borrow_role}
-                />
-              </Table.Cell>
-              <Table.Cell>
-                <Button
-                  onClick={() =>
-                    changeSafeState(item.id).then(() => setReload(!reload))
-                  }
-                  size="xs"
-                  rounded="full"
-                  px={3}
-                  py={1}
-                  gap={2}
-                  variant="ghost"
-                  color={item.inSafe ? "green.600" : "red.600"}
-                  borderWidth="1px"
-                  borderColor={item.inSafe ? "green.300" : "red.300"}
-                  _hover={{
-                    bg: item.inSafe ? "green.50" : "red.50",
-                    borderColor: item.inSafe ? "green.400" : "red.400",
-                    transform: "translateY(-1px)",
-                    shadow: "sm",
-                  }}
-                  _active={{ transform: "translateY(0)" }}
-                  aria-label={
-                    item.inSafe ? "Mark as not in safe" : "Mark as in safe"
-                  }
-                >
-                  <Icon
-                    as={item.inSafe ? CheckCircle2 : XCircle}
-                    boxSize={3.5}
-                    mr={2}
-                  />
-                  <Text as="span" fontSize="xs" fontWeight="semibold">
-                    {item.inSafe ? "Yes" : "No"}
-                  </Text>
-                </Button>
-              </Table.Cell>
-              <Table.Cell>{formatDateTime(item.entry_created_at)}</Table.Cell>
-              <Table.Cell>
-                <Button
-                  onClick={() =>
-                    handleEditItems(
-                      item.id,
-                      item.item_name,
-                      item.can_borrow_role
-                    ).then((response) => {
-                      if (response.success) {
-                        setError(
-                          "success",
-                          "Gegenstand erfolgreich bearbeitet!",
-                          "Gegenstand " +
-                            '"' +
-                            item.item_name +
-                            '" mit ID ' +
-                            item.id +
-                            " bearbeitet."
-                        );
-                      }
-                    })
-                  }
-                  colorPalette="teal"
-                  size="sm"
-                >
-                  <Save />
-                </Button>
-                <Button
-                  onClick={() =>
-                    deleteItem(item.id).then((response) => {
-                      if (response.success) {
-                        setItems(items.filter((i) => i.id !== item.id));
-                        setError(
-                          "success",
-                          "Gegenstand gelöscht",
-                          "Der Gegenstand wurde erfolgreich gelöscht."
-                        );
-                      }
-                    })
-                  }
-                  colorPalette="red"
-                  size="sm"
-                  ml={2}
-                >
-                  <Trash2 />
-                </Button>
-              </Table.Cell>
+      {/* make table content-sized with horizontal scroll if needed */}
+      <Box overflowX="auto">
+        <Table.Root
+          size="sm"
+          striped
+          tableLayout="auto"
+          w="max-content"
+          whiteSpace="nowrap"
+        >
+          <Table.Header>
+            <Table.Row>
+              <Table.ColumnHeader>
+                <strong>#</strong>
+              </Table.ColumnHeader>
+              <Table.ColumnHeader>
+                <strong>Gegenstand</strong>
+              </Table.ColumnHeader>
+              <Table.ColumnHeader>
+                <strong>Ausleih Berechtigung</strong>
+              </Table.ColumnHeader>
+              <Table.ColumnHeader>
+                <strong>Im Schließfach</strong>
+              </Table.ColumnHeader>
+              <Table.ColumnHeader>
+                <strong>Eintrag erstellt am</strong>
+              </Table.ColumnHeader>
+              <Table.ColumnHeader>
+                <strong>Eintrag aktualisiert am</strong>
+              </Table.ColumnHeader>
+              <Table.ColumnHeader>
+                <strong>Letzte ausleihende Person</strong>
+              </Table.ColumnHeader>
+              <Table.ColumnHeader>
+                <strong>Derzeit ausgeliehen von</strong>
+              </Table.ColumnHeader>
+              <Table.ColumnHeader>
+                <strong>Aktionen</strong>
+              </Table.ColumnHeader>
             </Table.Row>
-          ))}
-        </Table.Body>
-      </Table.Root>
+          </Table.Header>
+          <Table.Body>
+            {items.map((item) => (
+              <Table.Row key={item.id}>
+                <Table.Cell>{item.id}</Table.Cell>
+                <Table.Cell>
+                  <Input
+                    size="sm"
+                    w="max-content"
+                    onChange={(e) =>
+                      handleItemNameChange(item.id, e.target.value)
+                    }
+                    value={item.item_name}
+                  />
+                </Table.Cell>
+                <Table.Cell>
+                  <Input
+                    size="sm"
+                    w="max-content"
+                    onChange={(e) =>
+                      handleCanBorrowRoleChange(item.id, e.target.value)
+                    }
+                    value={item.can_borrow_role}
+                  />
+                </Table.Cell>
+                <Table.Cell>
+                  <Button
+                    onClick={() =>
+                      changeSafeState(item.id).then(() => setReload(!reload))
+                    }
+                    size="xs"
+                    rounded="full"
+                    px={3}
+                    py={1}
+                    gap={2}
+                    variant="ghost"
+                    color={item.in_safe ? "green.600" : "red.600"}
+                    borderWidth="1px"
+                    borderColor={item.in_safe ? "green.300" : "red.300"}
+                    _hover={{
+                      bg: item.in_safe ? "green.50" : "red.50",
+                      borderColor: item.in_safe ? "green.400" : "red.400",
+                      transform: "translateY(-1px)",
+                      shadow: "sm",
+                    }}
+                    _active={{ transform: "translateY(0)" }}
+                    aria-label={
+                      item.in_safe ? "Mark as not in safe" : "Mark as in safe"
+                    }
+                  >
+                    <Icon
+                      as={item.in_safe ? CheckCircle2 : XCircle}
+                      boxSize={3.5}
+                      mr={2}
+                    />
+                    <Text as="span" fontSize="xs" fontWeight="semibold">
+                      {item.in_safe ? "Yes" : "No"}
+                    </Text>
+                  </Button>
+                </Table.Cell>
+                <Table.Cell>{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>
+                  <Button
+                    onClick={() =>
+                      handleEditItems(
+                        item.id,
+                        item.item_name,
+                        item.can_borrow_role
+                      ).then((response) => {
+                        if (response.success) {
+                          setError(
+                            "success",
+                            "Gegenstand erfolgreich bearbeitet!",
+                            "Gegenstand " +
+                              '"' +
+                              item.item_name +
+                              '" mit ID ' +
+                              item.id +
+                              " bearbeitet."
+                          );
+                        }
+                      })
+                    }
+                    colorPalette="teal"
+                    size="sm"
+                  >
+                    <Save />
+                  </Button>
+                  <Button
+                    onClick={() =>
+                      deleteItem(item.id).then((response) => {
+                        if (response.success) {
+                          setItems(items.filter((i) => i.id !== item.id));
+                          setError(
+                            "success",
+                            "Gegenstand gelöscht",
+                            "Der Gegenstand wurde erfolgreich gelöscht."
+                          );
+                        }
+                      })
+                    }
+                    colorPalette="red"
+                    size="sm"
+                    ml={2}
+                  >
+                    <Trash2 />
+                  </Button>
+                </Table.Cell>
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table.Root>
+      </Box>
     </>
   );
 };

admin/src/components/LoanTable.tsx

@@ -17,11 +17,7 @@ import MyAlert from "./myChakra/MyAlert";
 import { formatDateTime } from "@/utils/userFuncs";
 import { Trash2, RefreshCcwDot } from "lucide-react";
 import { deleteLoan } from "@/utils/userActions";
-
-const API_BASE =
-  (import.meta as any).env?.VITE_BACKEND_URL ||
-  import.meta.env.VITE_BACKEND_URL ||
-  "http://localhost:8002";
+import { API_BASE } from "@/config/api.config";
 
 const LoanTable: React.FC = () => {
   const [items, setItems] = useState<Loan[]>([]);
@@ -54,18 +50,23 @@ const LoanTable: React.FC = () => {
     returned_date: string;
     created_at: string;
     loaned_items_name: string[];
+    deleted: boolean;
+    note: string;
   };
 
   useEffect(() => {
     const fetchData = async () => {
       setIsLoading(true);
       try {
-        const response = await fetch(`${API_BASE}/api/allLoans`, {
-          method: "GET",
-          headers: {
-            Authorization: `Bearer ${Cookies.get("token")}`,
-          },
-        });
+        const response = await fetch(
+          `${API_BASE}/api/admin/loan-data/all-loans`,
+          {
+            method: "GET",
+            headers: {
+              Authorization: `Bearer ${Cookies.get("token")}`,
+            },
+          }
+        );
         const data = await response.json();
         return data;
       } catch (error) {
@@ -108,9 +109,13 @@ const LoanTable: React.FC = () => {
       </HStack>
       {/* End action toolbar */}
 
-      <Heading marginBottom={4} size="md">
+      <Heading marginBottom={4} size="2xl">
         Ausleihen
       </Heading>
+      <Text>
+        Die Ausleihen die rot sind, wurden gelöscht und sind nur für den Admin
+        sichtbar.
+      </Text>
 
       {isError && (
         <MyAlert
@@ -156,6 +161,9 @@ const LoanTable: React.FC = () => {
               <Table.ColumnHeader>
                 <strong>Ausgeliehene Artikel</strong>
               </Table.ColumnHeader>
+              <Table.ColumnHeader>
+                <strong>Notiz</strong>
+              </Table.ColumnHeader>
               <Table.ColumnHeader>
                 <strong>Aktionen</strong>
               </Table.ColumnHeader>
@@ -163,7 +171,7 @@ const LoanTable: React.FC = () => {
           </Table.Header>
           <Table.Body>
             {items.map((item) => (
-              <Table.Row key={item.id}>
+              <Table.Row color={item.deleted ? "red" : "white"} key={item.id}>
                 <Table.Cell>{item.id}</Table.Cell>
                 <Table.Cell>{item.username}</Table.Cell>
                 <Table.Cell>
@@ -175,6 +183,7 @@ const LoanTable: React.FC = () => {
                 <Table.Cell>{formatDateTime(item.returned_date)}</Table.Cell>
                 <Table.Cell>{formatDateTime(item.created_at)}</Table.Cell>
                 <Table.Cell>{item.loaned_items_name.join(", ")}</Table.Cell>
+                <Table.Cell>{item.note}</Table.Cell>
                 <Table.Cell>
                   <Button
                     onClick={() =>

admin/src/components/UserTable.tsx

@@ -10,6 +10,7 @@ import {
   HStack,
   IconButton,
   Heading,
+  Switch, // neu
 } from "@chakra-ui/react";
 import { Tooltip } from "@/components/ui/tooltip";
 import { fetchUserData } from "@/utils/fetcher";
@@ -23,9 +24,13 @@ import ChangePWform from "./ChangePWform";
 type User = {
   id: number;
   username: string;
-  password: string;
-  role: string;
+  first_name: string;
+  last_name: string;
+  email: string;
+  is_admin: boolean;
+  role: number;
   entry_created_at: string;
+  entry_updated_at: string;
 };
 
 const UserTable: React.FC = () => {
@@ -52,10 +57,20 @@ const UserTable: React.FC = () => {
     setIsError(true);
   };
 
-  const handleInputChange = (userId: number, field: string, value: string) => {
+  const handleInputChange = (userId: number, field: string, value: any) => {
     setUsers((prevUsers) =>
       prevUsers.map((user) =>
-        user.id === userId ? { ...user, [field]: value } : user
+        user.id === userId
+          ? {
+              ...user,
+              [field]:
+                field === "role"
+                  ? Number(value)
+                  : field === "is_admin"
+                  ? value === true || value === "true" || value === 1
+                  : value,
+            }
+          : user
       )
     );
   };
@@ -70,7 +85,7 @@ const UserTable: React.FC = () => {
       setIsLoading(true);
       try {
         const data = await fetchUserData();
-        console.log("user api response", data);
+        console.log(data);
         if (Array.isArray(data)) {
           setUsers(data);
         } else {
@@ -144,7 +159,7 @@ const UserTable: React.FC = () => {
       </HStack>
       {/* End action toolbar */}
 
-      <Heading marginBottom={4} size="md">
+      <Heading marginBottom={4} size="2xl">
         Benutzer
       </Heading>
       {changePWform && (
@@ -180,25 +195,45 @@ const UserTable: React.FC = () => {
         </VStack>
       )}
       {!isLoading && (
-        <Table.Root size="sm" striped>
+        <Table.Root
+          size="sm"
+          striped
+          w="100%"
+          style={{ tableLayout: "auto" }} // Spalten nach Content
+        >
           <Table.Header>
             <Table.Row>
-              <Table.ColumnHeader>
+              <Table.ColumnHeader width="1%" whiteSpace="nowrap">
                 <strong>#</strong>
               </Table.ColumnHeader>
               <Table.ColumnHeader>
                 <strong>Benutzername</strong>
               </Table.ColumnHeader>
               <Table.ColumnHeader>
+                <strong>Vorname</strong>
+              </Table.ColumnHeader>
+              <Table.ColumnHeader>
+                <strong>Nachname</strong>
+              </Table.ColumnHeader>
+              <Table.ColumnHeader>
+                <strong>E-Mail</strong>
+              </Table.ColumnHeader>
+              <Table.ColumnHeader width="1%" whiteSpace="nowrap">
+                <strong>Admin</strong>
+              </Table.ColumnHeader>
+              <Table.ColumnHeader whiteSpace="nowrap">
                 <strong>Passwort ändern</strong>
               </Table.ColumnHeader>
-              <Table.ColumnHeader>
+              <Table.ColumnHeader width="1%" whiteSpace="nowrap">
                 <strong>Rolle</strong>
               </Table.ColumnHeader>
-              <Table.ColumnHeader>
+              <Table.ColumnHeader whiteSpace="nowrap">
                 <strong>Eintrag erstellt am</strong>
               </Table.ColumnHeader>
-              <Table.ColumnHeader>
+              <Table.ColumnHeader whiteSpace="nowrap">
+                <strong>Eintrag aktualisiert am</strong>
+              </Table.ColumnHeader>
+              <Table.ColumnHeader width="1%" whiteSpace="nowrap">
                 <strong>Aktionen</strong>
               </Table.ColumnHeader>
             </Table.Row>
@@ -206,37 +241,86 @@ const UserTable: React.FC = () => {
           <Table.Body>
             {users.map((user) => (
               <Table.Row key={user.id}>
-                <Table.Cell>{user.id}</Table.Cell>
+                <Table.Cell whiteSpace="nowrap">{user.id}</Table.Cell>
+                <Table.Cell>{user.username}</Table.Cell>
                 <Table.Cell>
                   <Input
+                    size="sm"
+                    value={user.first_name ?? ""}
                     onChange={(e) =>
-                      handleInputChange(user.id, "username", e.target.value)
+                      handleInputChange(user.id, "first_name", e.target.value)
                     }
-                    value={user.username}
                   />
                 </Table.Cell>
                 <Table.Cell>
-                  <Button onClick={() => handlePasswordChange(user.username)}>
-                    Passwort ändern
-                  </Button>
+                  <Input
+                    size="sm"
+                    value={user.last_name ?? ""}
+                    onChange={(e) =>
+                      handleInputChange(user.id, "last_name", e.target.value)
+                    }
+                  />
                 </Table.Cell>
                 <Table.Cell>
+                  <Input
+                    type="email"
+                    size="sm"
+                    value={user.email ?? ""}
+                    onChange={(e) =>
+                      handleInputChange(user.id, "email", e.target.value)
+                    }
+                  />
+                </Table.Cell>
+                <Table.Cell whiteSpace="nowrap">
+                  <Switch.Root
+                    size="sm"
+                    checked={!!user.is_admin}
+                    onCheckedChange={(d) =>
+                      handleInputChange(user.id, "is_admin", d.checked)
+                    }
+                    aria-label="Adminrechte umschalten"
+                  >
+                    <Switch.Control>
+                      <Switch.Thumb />
+                    </Switch.Control>
+                    <Switch.HiddenInput />
+                  </Switch.Root>
+                </Table.Cell>
+                <Table.Cell whiteSpace="nowrap">
+                  <Button
+                    size="sm"
+                    onClick={() => handlePasswordChange(user.username)}
+                  >
+                    Passwort ändern
+                  </Button>
+                </Table.Cell>
+                <Table.Cell whiteSpace="nowrap">
                   <Input
                     type="number"
+                    size="sm"
                     onChange={(e) =>
                       handleInputChange(user.id, "role", e.target.value)
                     }
                     value={user.role}
+                    width="70px"
                   />
                 </Table.Cell>
-                <Table.Cell>{formatDateTime(user.entry_created_at)}</Table.Cell>
-                <Table.Cell>
+                <Table.Cell whiteSpace="nowrap">
+                  {formatDateTime(user.entry_created_at)}
+                </Table.Cell>
+                <Table.Cell whiteSpace="nowrap">
+                  {formatDateTime(user.entry_updated_at)}
+                </Table.Cell>
+                <Table.Cell whiteSpace="nowrap">
                   <Button
                     onClick={() =>
                       handleEdit(
                         user.id,
-                        user.username,
-                        user.role,
+                        user.first_name,
+                        user.last_name,
+                        user.email,
+                        user.is_admin,
+                        Number(user.role)
                       ).then((response) => {
                         if (response.success) {
                           setError(

admin/src/config/api.config.ts

@@ -0,0 +1,4 @@
+export const API_BASE =
+  (import.meta as any).env?.VITE_BACKEND_URL ||
+  import.meta.env.VITE_BACKEND_URL ||
+  "http://localhost:8002";

admin/src/utils/fetcher.ts

@@ -1,12 +1,8 @@
 import Cookies from "js-cookie";
-
-const API_BASE =
-  (import.meta as any).env?.VITE_BACKEND_URL ||
-  import.meta.env.VITE_BACKEND_URL ||
-  "http://localhost:8002";
+import { API_BASE } from "@/config/api.config";
 
 export const fetchUserData = async () => {
-  const response = await fetch(`${API_BASE}/api/allUsers`, {
+  const response = await fetch(`${API_BASE}/api/admin/user-data/users`, {
     headers: {
       Authorization: `Bearer ${Cookies.get("token")}`,
     },

admin/src/utils/loginUser.ts

@@ -1,9 +1,5 @@
 import Cookies from "js-cookie";
-
-const API_BASE =
-  (import.meta as any).env?.VITE_BACKEND_URL ||
-  import.meta.env.VITE_BACKEND_URL ||
-  "http://localhost:8002";
+import { API_BASE } from "@/config/api.config";
 
 export type LoginSuccess = { success: true };
 export type LoginFailure = {
@@ -18,12 +14,20 @@ export const loginFunc = async (
   password: string
 ): Promise<LoginResult> => {
   try {
-    const response = await fetch(`${API_BASE}/api/loginAdmin`, {
+    const response = await fetch(`${API_BASE}/api/admin/user-mgmt/login`, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({ username, password }),
     });
 
+    if (response.status === 403) {
+      return {
+        success: false,
+        message: "Login failed!",
+        description: "You are not an admin user.",
+      };
+    }
+
     if (!response.ok) {
       return {
         success: false,
@@ -39,6 +43,7 @@ export const loginFunc = async (
     return { success: true };
   } catch (error) {
     console.error("Error logging in:", error);
+
     return {
       success: false,
       message: "Login failed!",

admin/src/utils/userActions.ts

@@ -1,14 +1,10 @@
 import Cookies from "js-cookie";
-
-const API_BASE =
-  (import.meta as any).env?.VITE_BACKEND_URL ||
-  import.meta.env.VITE_BACKEND_URL ||
-  "http://localhost:8002";
+import { API_BASE } from "@/config/api.config";
 
 export const handleDelete = async (userId: number) => {
   try {
     const response = await fetch(
-      `${API_BASE}/api/deleteUser/${userId}`,
+      `${API_BASE}/api/admin/user-data/delete-user/${userId}`,
       {
         method: "DELETE",
         headers: {
@@ -28,19 +24,28 @@ export const handleDelete = async (userId: number) => {
 
 export const handleEdit = async (
   userId: number,
-  username: string,
-  role: string
+  first_name: string,
+  last_name: string,
+  email: string,
+  is_admin: boolean,
+  role: number
 ) => {
   try {
     const response = await fetch(
-      `${API_BASE}/api/editUser/${userId}`,
+      `${API_BASE}/api/admin/user-data/edit-user/${userId}`,
       {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
           Authorization: `Bearer ${Cookies.get("token")}`,
         },
-        body: JSON.stringify({ username, role }),
+        body: JSON.stringify({
+          first_name,
+          last_name,
+          role,
+          email,
+          is_admin,
+        }),
       }
     );
     if (!response.ok) {
@@ -56,17 +61,32 @@ export const handleEdit = async (
 export const createUser = async (
   username: string,
   role: number,
-  password: string
+  password: string,
+  first_name: string,
+  last_name: string,
+  email: string,
+  isAdmin: boolean
 ) => {
   try {
-    const response = await fetch(`${API_BASE}/api/createUser`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${Cookies.get("token")}`,
-      },
-      body: JSON.stringify({ username, role, password }),
-    });
+    const response = await fetch(
+      `${API_BASE}/api/admin/user-data/create-user`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${Cookies.get("token")}`,
+        },
+        body: JSON.stringify({
+          username,
+          role,
+          password,
+          isAdmin,
+          email,
+          first_name,
+          last_name,
+        }),
+      }
+    );
     if (!response.ok) {
       throw new Error("Failed to create user");
     }
@@ -79,14 +99,17 @@ export const createUser = async (
 
 export const changePW = async (newPassword: string, username: string) => {
   try {
-    const response = await fetch(`${API_BASE}/api/changePWadmin`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${Cookies.get("token")}`,
-      },
-      body: JSON.stringify({ newPassword, username }),
-    });
+    const response = await fetch(
+      `${API_BASE}/api/admin/user-data/change-password`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${Cookies.get("token")}`,
+        },
+        body: JSON.stringify({ username, password: newPassword }),
+      }
+    );
     if (!response.ok) {
       throw new Error("Failed to change password");
     }
@@ -100,7 +123,7 @@ export const changePW = async (newPassword: string, username: string) => {
 export const deleteLoan = async (loanId: number) => {
   try {
     const response = await fetch(
-      `${API_BASE}/api/deleteLoan/${loanId}`,
+      `${API_BASE}/api/admin/loan-data/delete-loan/${loanId}`,
       {
         method: "DELETE",
         headers: {
@@ -121,7 +144,7 @@ export const deleteLoan = async (loanId: number) => {
 export const deleteItem = async (itemId: number) => {
   try {
     const response = await fetch(
-      `${API_BASE}/api/deleteItem/${itemId}`,
+      `${API_BASE}/api/admin/item-data/delete-item/${itemId}`,
       {
         method: "DELETE",
         headers: {
@@ -144,14 +167,17 @@ export const createItem = async (
   can_borrow_role: number
 ) => {
   try {
-    const response = await fetch(`${API_BASE}/api/createItem`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${Cookies.get("token")}`,
-      },
-      body: JSON.stringify({ item_name, can_borrow_role }),
-    });
+    const response = await fetch(
+      `${API_BASE}/api/admin/item-data/create-item`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${Cookies.get("token")}`,
+        },
+        body: JSON.stringify({ item_name, can_borrow_role }),
+      }
+    );
     if (!response.ok) {
       return {
         success: false,
@@ -172,14 +198,17 @@ export const handleEditItems = async (
   can_borrow_role: string
 ) => {
   try {
-    const response = await fetch(`${API_BASE}/api/updateItemByID`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${Cookies.get("token")}`,
-      },
-      body: JSON.stringify({ itemId, item_name, can_borrow_role }),
-    });
+    const response = await fetch(
+      `${API_BASE}/api/admin/item-data/edit-item/${itemId}`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${Cookies.get("token")}`,
+        },
+        body: JSON.stringify({ item_name, can_borrow_role }),
+      }
+    );
     if (!response.ok) {
       throw new Error("Failed to edit item");
     }
@@ -193,9 +222,9 @@ export const handleEditItems = async (
 export const changeSafeState = async (itemId: number) => {
   try {
     const response = await fetch(
-      `${API_BASE}/api/changeSafeState/${itemId}`,
+      `${API_BASE}/api/admin/item-data/change-safe-state/${itemId}`,
       {
-        method: "PUT",
+        method: "POST",
         headers: {
           Authorization: `Bearer ${Cookies.get("token")}`,
         },
@@ -211,16 +240,19 @@ export const changeSafeState = async (itemId: number) => {
   }
 };
 
-export const createAPIentry = async (apiKey: string, user: string) => {
+export const createAPIentry = async (apiKey: string, name: string) => {
   try {
-    const response = await fetch(`${API_BASE}/api/createAPIentry`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${Cookies.get("token")}`,
-      },
-      body: JSON.stringify({ apiKey, user }),
-    });
+    const response = await fetch(
+      `${API_BASE}/api/admin/api-data/create-api-key`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${Cookies.get("token")}`,
+        },
+        body: JSON.stringify({ apiKey, entryName: name }),
+      }
+    );
     if (!response.ok) {
       return {
         success: false,
@@ -238,7 +270,7 @@ export const createAPIentry = async (apiKey: string, user: string) => {
 export const deleteAPKey = async (apiKeyId: number) => {
   try {
     const response = await fetch(
-      `${API_BASE}/api/deleteAPKey/${apiKeyId}`,
+      `${API_BASE}/api/admin/api-data/delete-api-key/${apiKeyId}`,
       {
         method: "DELETE",
         headers: {

admin/tsconfig.app.json

@@ -30,7 +30,7 @@
     },
 
     "forceConsistentCasingInFileNames": true,
-    "ignoreDeprecations": "6.0"
+    "ignoreDeprecations": "5.0"
   },
   "include": ["src"]
 }

admin/vite.config.ts

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

backend/Dockerfile

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

backend/info.json

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

backend/routes/api.js

@@ -26,6 +26,7 @@ import {
   createAPIentry,
   deleteAPKey,
   getLoanInfoWithID,
+  SETdeleteLoanFromDatabase,
 } from "../services/database.js";
 import { authenticate, generateToken } from "../services/tokenService.js";
 const router = express.Router();
@@ -261,6 +262,16 @@ router.delete("/deleteLoan/:id", authenticate, async (req, res) => {
   }
 });
 
+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) {
@@ -432,7 +443,7 @@ router.delete("/deleteUser/:id", authenticate, async (req, res) => {
 });
 
 router.get("/verifyToken", authenticate, async (req, res) => {
-  res.status(200).json({ message: "Token is valid" });
+  res.status(200).json({ message: "Token is valid", user: req.user });
 });
 
 router.post("/editUser/:id", authenticate, async (req, res) => {

backend/scheme.sql

@@ -1,99 +0,0 @@
--- All necessary tables for the borrowing system
-
--- IMPORTANT: You need mySQL version 8.0 or newer!
-
-CREATE TABLE `users` (
-  `id` int NOT NULL AUTO_INCREMENT,
-  `username` varchar(100) NOT NULL,
-  `password` varchar(255) NOT NULL,
-  `role` int DEFAULT NULL,
-  `entry_created_at` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
-  PRIMARY KEY (`id`),
-  UNIQUE KEY `username` (`username`)
-);
-
-CREATE TABLE `admins` (
-  `id` int NOT NULL AUTO_INCREMENT,
-  `username` varchar(100) NOT NULL,
-  `password` varchar(255) NOT NULL,
-  `first_name` varchar(255) NOT NULL,
-  `last_name` varchar(255) NOT NULL,
-  `entry_created_at` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
-  PRIMARY KEY (`id`),
-  UNIQUE KEY `username` (`username`)
-);
-
-CREATE TABLE `loans` (
-  `id` int NOT NULL AUTO_INCREMENT,
-  `username` varchar(100) NOT NULL,
-  `loan_code` int NOT NULL,
-  `start_date` timestamp NOT NULL,
-  `end_date` timestamp NOT NULL,
-  `take_date` timestamp NULL DEFAULT NULL,
-  `returned_date` timestamp NULL DEFAULT NULL,
-  `created_at` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
-  `loaned_items_id` json NOT NULL DEFAULT ('[]'),
-  `loaned_items_name` json NOT NULL DEFAULT ('[]'),
-  PRIMARY KEY (`id`),
-  UNIQUE KEY `loan_code` (`loan_code`)
-);
-
-CREATE TABLE `items` (
-  `id` int NOT NULL AUTO_INCREMENT,
-  `item_name` varchar(255) NOT NULL,
-  `can_borrow_role` INT NOT NULL,
-  `inSafe` tinyint(1) NOT NULL DEFAULT '1',
-  `entry_created_at` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
-  PRIMARY KEY (`id`),
-  UNIQUE KEY `item_name` (`item_name`)
-);
-
-CREATE TABLE `lockers` (
-  `id` int NOT NULL AUTO_INCREMENT,
-  `item` varchar(255) NOT NULL,
-  `locker_number` int NOT NULL,
-  `entry_created_at` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
-  PRIMARY KEY (`id`),
-  UNIQUE KEY `item` (`item`),
-  UNIQUE KEY `locker_number` (`locker_number`)
-);
-
-CREATE TABLE `apiKeys` (
-  `id` int NOT NULL AUTO_INCREMENT,
-  `apiKey` int NOT NULL UNIQUE,
-  `user` VARCHAR(255) NOT NULL,
-  `entry_created_at` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
-  PRIMARY KEY (`id`)
-);
-
-INSERT INTO `items` (`item_name`, `can_borrow_role`, `inSafe`) VALUES
-('DJI 1er Mikro', 4, 1),
-('DJI 2er Mikro 1', 4, 1),
-('DJI 2er Mikro 2', 4, 1),
-('Rode Richt Mikrofon', 2, 1),
-('Kamera Stativ', 1, 0),
-('SONY Kamera - inkl. Akkus und Objektiv', 1, 1),
-('MacBook inkl. Adapter', 2, 0),
-('SD Karten', 3, 0),
-('Kameragimbal', 1, 0),
-('ATEM MINI PRO', 1, 1),
-('Handygimbal', 4, 0),
-('Kameralüfter', 1, 1),
-('Kleine Kamera 1 - inkl. Objektiv', 2, 1),
-('Kleine Kamera 2 - inkl. Objektiv', 2, 1);
-
-INSERT INTO `lockers` (`item`, `locker_number`) VALUES
-('DJI 1er Mikro', 1),
-('DJI 2er Mikro 1', 2),
-('DJI 2er Mikro 2', 3),
-('Rode Richt Mikrofon', 4),
-('Kamera Stativ', 5),
-('SONY Kamera - inkl. Akkus und Objektiv', 6),
-('MacBook inkl. Adapter', 7),
-('SD Karten', 8),
-('Kameragimbal', 9),
-('ATEM MINI PRO', 10),
-('Handygimbal', 11),
-('Kameralüfter', 12),
-('Kleine Kamera 1 - inkl. Objektiv', 13),
-('Kleine Kamera 2 - inkl. Objektiv', 14);

backend/server.js

@@ -5,7 +5,8 @@ import apiRouter from "./routes/api.js";
 import apiRouterV2 from "./routes/apiV2.js";
 env.config();
 const app = express();
-const port = 8102;
+const port = 8002;
+import serverInfo from "./info.json" assert { type: "json" }
 
 app.use(cors());
 // Increase body size limits to support large CSV JSON payloads
@@ -20,6 +21,10 @@ 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}`);
 });

backend/services/database.js

@@ -8,7 +8,6 @@ const pool = mysql
     user: process.env.DB_USER,
     password: process.env.DB_PASSWORD,
     database: process.env.DB_NAME,
-    port: process.env.DB_PORT,
   })
   .promise();
 
@@ -127,9 +126,10 @@ export const getLoansFromDatabase = async () => {
 };
 
 export const getUserLoansFromDatabase = async (username) => {
-  const [result] = await pool.query("SELECT * FROM loans WHERE username = ?;", [
-    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) {
@@ -150,6 +150,18 @@ export const deleteLoanFromDatabase = async (loanId) => {
   }
 };
 
+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,
@@ -167,6 +179,7 @@ export const getBorrowableItemsFromDatabase = async (
       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) > ?
     );
@@ -257,6 +270,7 @@ export const createLoanInDatabase = async (
       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) > ?
       `,
@@ -337,7 +351,6 @@ export const createLoanInDatabase = async (
 };
 
 // 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 = ?",
@@ -393,6 +406,7 @@ export const onReturn = async (loanId) => {
   }
   return { success: false };
 };
+// Temporary functions end here.
 
 export const loginAdmin = async (username, password) => {
   const [result] = await pool.query(

backendV2/Dockerfile

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

backendV2/info.json

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

backendV2/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "backendv2",
+  "version": "1.0.0",
+  "main": "server.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"
+  }
+}

backendV2/routes/admin/apiDataMgmt.route.js

@@ -0,0 +1,41 @@
+import express from "express";
+import { authenticateAdmin } from "../../services/authentication.js";
+const router = express.Router();
+import dotenv from "dotenv";
+dotenv.config();
+
+// database funcs import
+import {
+  getAllApiKeys,
+  createAPIentry,
+  deleteAPKey,
+} from "./database/apiDataMgmt.database.js";
+
+router.get("/get-api-keys", authenticateAdmin, 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 retrieve API keys" });
+});
+
+router.post("/create-api-key", authenticateAdmin, async (req, res) => {
+  const apiKey = req.body.apiKey;
+  const entryName = req.body.entryName;
+  const result = await createAPIentry(apiKey, entryName);
+  if (result.success) {
+    return res.status(201).json({ message: "API key created successfully" });
+  }
+  return res.status(500).json({ message: "Failed to create API key" });
+});
+
+router.delete("/delete-api-key/:id", authenticateAdmin, 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" });
+});
+
+export default router;

backendV2/routes/admin/database/apiDataMgmt.database.js

@@ -0,0 +1,37 @@
+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 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, entryName) => {
+  const [result] = await pool.query(
+    "INSERT INTO apiKeys (api_key, entry_name) VALUES (?, ?)",
+    [apiKey, entryName]
+  );
+  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 };
+};

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

@@ -0,0 +1,70 @@
+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 getAllItems = async () => {
+  const [result] = await pool.query("SELECT * FROM items");
+  if (result.length > 0) return { success: true, data: result };
+  return { success: false };
+};
+
+export const deleteItemById = 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, in_safe) => {
+  const [result] = await pool.query(
+    "INSERT INTO items (item_name, can_borrow_role, in_safe) VALUES (?, ?, ?)",
+    [item_name, can_borrow_role, true]
+  );
+  if (result.affectedRows > 0) return { success: true };
+  return { success: false };
+};
+
+export const editItemById = async (itemId, item_name, can_borrow_role) => {
+  const [result] = await pool.query(
+    "UPDATE items SET item_name = ?, can_borrow_role = ?, entry_updated_at = NOW() WHERE id = ?",
+    [item_name, can_borrow_role, itemId]
+  );
+  if (result.affectedRows > 0) return { success: true };
+  return { success: false };
+};
+
+export const changeSafeState = async (itemId) => {
+  const currentState = await pool.query(
+    "SELECT in_safe FROM items WHERE id = ?",
+    [itemId]
+  );
+  if (currentState[0].length === 0) {
+    return { success: false };
+  }
+
+  if (currentState[0][0].in_safe) {
+    const [result] = await pool.query(
+      "UPDATE items SET in_safe = false WHERE id = ?",
+      [itemId]
+    );
+    if (result.affectedRows > 0) return { success: true };
+  }
+
+  if (!currentState[0][0].in_safe) {
+    const [result] = await pool.query(
+      "UPDATE items SET in_safe = true WHERE id = ?",
+      [itemId]
+    );
+    if (result.affectedRows > 0) return { success: true };
+  }
+
+  return { success: false };
+};

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

@@ -0,0 +1,23 @@
+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 getAllLoans = async () => {
+  const [rows] = await pool.query("SELECT * FROM loans");
+  return { success: true, data: rows };
+};
+
+export const deleteLoanById = async (loanId) => {
+  const [result] = await pool.query("DELETE FROM loans WHERE id = ?", [loanId]);
+  if (result.affectedRows > 0) return { success: true };
+  return { success: false };
+};

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

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

backendV2/routes/admin/database/userMgmt.database.js

@@ -0,0 +1,47 @@
+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 loginAdmin = async (username, password) => {
+  const [rows] = await pool.query(
+    "SELECT id, username, first_name, last_name, role, is_admin FROM users WHERE username = ? AND password = ?",
+    [username, password]
+  );
+
+  if (rows.length === 0) {
+    return { success: false, reason: "invalid_credentials" };
+  }
+
+  const user = rows[0];
+  if (!user.is_admin) {
+    return { success: false, reason: "not_admin" };
+  }
+
+  return { success: true, data: user };
+};
+
+export const executeQuery = async (query, password, username) => {
+  let verified = false;
+  const [user] = await pool.query(
+    "SELECT * FROM users WHERE username = ? AND password = ?",
+    [username, password]
+  );
+  if (user.length > 0 && user[0].is_admin) {
+    verified = true;
+  }
+
+  if (!verified) {
+    return { success: false, message: "Unauthorized" };
+  }
+  const [result] = await pool.query(`${query}`);
+  return { success: true, data: result };
+};

backendV2/routes/admin/itemDataMgmt.route.js

@@ -0,0 +1,65 @@
+import express from "express";
+import { authenticateAdmin } from "../../services/authentication.js";
+const router = express.Router();
+import dotenv from "dotenv";
+dotenv.config();
+
+// database funcs import
+import {
+  editItemById,
+  getAllItems,
+  deleteItemById,
+  createItem,
+  changeSafeState,
+} from "./database/itemDataMgmt.database.js";
+
+router.get("/all-items", authenticateAdmin, 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 retrieve items" });
+});
+
+router.delete("/delete-item/:id", authenticateAdmin, async (req, res) => {
+  const itemId = req.params.id;
+  const result = await deleteItemById(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("/create-item", authenticateAdmin, 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("/edit-item/:id", authenticateAdmin, async (req, res) => {
+  const itemId = req.params.id;
+  const { item_name, can_borrow_role } = req.body;
+  const result = await editItemById(
+    itemId,
+    item_name,
+    can_borrow_role
+  );
+  if (result.success) {
+    return res.status(200).json({ message: "Item edited successfully" });
+  }
+  return res.status(500).json({ message: "Failed to edit item" });
+});
+
+router.post("/change-safe-state/:id", authenticateAdmin, async (req, res) => {
+  const itemId = req.params.id;
+  const result = await changeSafeState(itemId);
+  if (result.success) {
+    return res.status(200).json({ message: "Safe state changed successfully" });
+  }
+  return res.status(500).json({ message: "Failed to change safe state" });
+});
+
+export default router;

backendV2/routes/admin/loanDataMgmt.route.js

@@ -0,0 +1,30 @@
+import express from "express";
+import { authenticateAdmin } from "../../services/authentication.js";
+const router = express.Router();
+import dotenv from "dotenv";
+dotenv.config();
+
+// database funcs import
+import {
+  deleteLoanById,
+  getAllLoans,
+} from "./database/loanDataMgmt.database.js";
+
+router.get("/all-loans", authenticateAdmin, 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 retrieve loans" });
+});
+
+router.delete("/delete-loan/:id", authenticateAdmin, async (req, res) => {
+  const loanId = req.params.id;
+  const result = await deleteLoanById(loanId);
+  if (result.success) {
+    return res.status(200).json({ message: "Loan deleted successfully" });
+  }
+  return res.status(500).json({ message: "Failed to delete loan" });
+});
+
+export default router;

backendV2/routes/admin/userDataMgmt.route.js

@@ -0,0 +1,123 @@
+import express from "express";
+import { authenticateAdmin } from "../../services/authentication.js";
+const router = express.Router();
+import dotenv from "dotenv";
+dotenv.config();
+
+// database funcs import
+import {
+  createUser,
+  deleteUserById,
+  editUserById,
+  changePassword,
+  getAllUsers,
+  getUserById,
+} from "./database/userDataMgmt.database.js";
+
+router.post("/create-user", authenticateAdmin, async (req, res) => {
+  const username = req.body.username;
+  const role = req.body.role;
+  const password = req.body.password;
+  const isAdmin = req.body.isAdmin;
+  const email = req.body.email;
+  const first_name = req.body.first_name;
+  const last_name = req.body.last_name;
+  const result = await createUser(
+    username,
+    role,
+    password,
+    isAdmin,
+    email,
+    first_name,
+    last_name
+  );
+  if (result.success) {
+    return res.status(201).json({ message: "User created successfully" });
+  }
+  return res.status(500).json({ message: "Failed to create user" });
+});
+
+router.delete("/delete-user/:id", authenticateAdmin, async (req, res) => {
+  const userId = req.params.id;
+  const result = await deleteUserById(userId);
+  if (result.success) {
+    return res.status(200).json({ message: "User deleted successfully" });
+  }
+  return res.status(500).json({ message: "Failed to delete user" });
+});
+
+router.post("/edit-user/:id", authenticateAdmin, async (req, res) => {
+  const first_name = req.body.first_name;
+  const last_name = req.body.last_name;
+  const role = req.body.role;
+  const email = req.body.email;
+  const userId = req.params.id;
+  const is_admin = req.body.is_admin;
+
+  const result = await editUserById(
+    userId,
+    first_name,
+    last_name,
+    role,
+    email,
+    is_admin
+  );
+
+  if (result.success) {
+    return res.status(200).json({ message: "User edited successfully" });
+  }
+  return res.status(500).json({ message: "Failed to edit user" });
+});
+
+router.post("/change-password", authenticateAdmin, async (req, res) => {
+  const username = req.body.username;
+  const password = req.body.password;
+
+  const result = await changePassword(username, password);
+
+  if (result.success) {
+    return res.status(200).json({ message: "Password reset successfully" });
+  }
+  return res.status(500).json({ message: "Failed to reset password" });
+});
+
+router.post("/edit-user/:id", authenticateAdmin, async (req, res) => {
+  const userId = req.params.id;
+  const first_name = req.body.first_name;
+  const last_name = req.body.last_name;
+  const role = req.body.role;
+  const email = req.body.email;
+  const is_admin = req.body.is_admin;
+
+  const result = await editUserById(
+    userId,
+    first_name,
+    last_name,
+    role,
+    email,
+    is_admin
+  );
+
+  if (result.success) {
+    return res.status(200).json({ message: "User edited successfully" });
+  }
+  return res.status(500).json({ message: "Failed to edit user" });
+});
+
+router.get("/users", authenticateAdmin, 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 retrieve users" });
+});
+
+router.get("/user/:id", authenticateAdmin, async (req, res) => {
+  const result = await getUserById(req.params.id);
+  if (result.success) {
+    return res.status(200).json({ user: result.data });
+  }
+  return res.status(500).json({ message: "Failed to retrieve user" });
+});
+
+export default router;

backendV2/routes/admin/userMgmt.route.js

@@ -0,0 +1,54 @@
+import express from "express";
+import {
+  generateToken,
+  authenticateAdmin,
+} from "../../services/authentication.js";
+const router = express.Router();
+import dotenv from "dotenv";
+dotenv.config();
+
+// database funcs import
+import { loginAdmin, executeQuery } from "./database/userMgmt.database.js";
+
+router.post("/login", async (req, res) => {
+  const { username, password } = req.body || {};
+  if (!username || !password) {
+    return res.status(400).json({ message: "Missing username or password" });
+  }
+
+  const result = await loginAdmin(username, password);
+
+  if (result.success) {
+    const token = await generateToken({
+      username: result.data.username,
+      first_name: result.data.first_name,
+      last_name: result.data.last_name,
+      admin: result.data.is_admin,
+    });
+    return res.status(200).json({
+      message: "Login erfolgreich",
+      token,
+      first_name: result.data.first_name,
+    });
+  }
+
+  if (result.reason === "not_admin") {
+    return res.status(403).json({ message: "Du bist kein Admin" });
+  }
+
+  return res.status(401).json({ message: "Ungültige Anmeldedaten" });
+});
+
+router.get("/verify-token", authenticateAdmin, async (req, res) => {
+  return res.status(200).json({ message: "Token is valid" });
+});
+
+router.post("/database-query", authenticateAdmin, async (req, res) => {
+  const query = req.body.query;
+  const password = req.body.password;
+  const username = req.body.username;
+
+  const result = await executeQuery(query, password, username);
+});
+
+export default router;

backendV2/routes/api/api.database.js

@@ -0,0 +1,116 @@
+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 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 first_name, returned_date, take_date, lockers 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 inSafe = 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]
+  );
+
+  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 inSafe = 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 setTakeDateV2 = 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 inSafe = 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 };
+};
+
+export const getAllLoansV2 = async () => {
+  const [result] = await pool.query("SELECT * FROM loans;");
+  if (result.length > 0) {
+    return { success: true, data: result };
+  }
+  return { success: false };
+};

backendV2/routes/api/api.route.js

@@ -0,0 +1,91 @@
+import express from "express";
+import { authenticate } from "../../services/authentication.js";
+const router = express.Router();
+import dotenv from "dotenv";
+dotenv.config();
+
+import {
+  getItemsFromDatabaseV2,
+  changeInSafeStateV2,
+  setTakeDateV2,
+  setReturnDateV2,
+  getLoanByCodeV2,
+} from "./api.database.js";
+
+// Route for API to get all items from the database
+router.get("/items/:key", authenticate, 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 safe state of an item
+router.post(
+  "/change-state/:key/:itemId/:state",
+  authenticate,
+  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(
+  "/get-loan-by-code/:key/:loan_code",
+  authenticate,
+  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(
+  "/set-return-date/:key/:loan_code",
+  authenticate,
+  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(
+  "/set-take-date/:key/:loan_code",
+  authenticate,
+  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" });
+    }
+  }
+);
+
+export default router;

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

@@ -0,0 +1,254 @@
+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 createLoanInDatabase = async (
+  username,
+  startDate,
+  endDate,
+  note,
+  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 + lockers
+    const [itemsRows] = await conn.query(
+      "SELECT id, item_name, safe_nr 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);
+
+    // Build lockers array (unique, only 2-digit strings)
+    const lockers = [
+      ...new Set(
+        itemsRows
+          .map((r) => r.safe_nr)
+          .filter((sn) => typeof sn === "string" && /^\d{2}$/.test(sn))
+      ),
+    ];
+
+    // 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 (now includes lockers)
+    const [insertRes] = await conn.query(
+      `
+        INSERT INTO loans (username, loan_code, start_date, end_date, lockers, loaned_items_id, loaned_items_name, note)
+        VALUES (?, ?, ?, ?, CAST(? AS JSON), CAST(? AS JSON), CAST(? AS JSON), ?)
+        `,
+      [
+        username,
+        loanCode,
+        new Date(start).toISOString().slice(0, 19).replace("T", " "),
+        new Date(end).toISOString().slice(0, 19).replace("T", " "),
+        JSON.stringify(lockers),
+        JSON.stringify(itemIds.map((n) => Number(n))),
+        JSON.stringify(itemNames),
+        note,
+      ]
+    );
+
+    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,
+        lockers,
+      },
+    };
+  } catch (err) {
+    await conn.rollback();
+    console.error("createLoanInDatabase error:", err);
+    return {
+      success: false,
+      code: "SERVER_ERROR",
+      message: "Failed to create loan",
+    };
+  } finally {
+    conn.release();
+  }
+};
+
+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 getLoansFromDatabase = async (username) => {
+  const [result] = await pool.query(
+    "SELECT * FROM loans WHERE username = ? AND deleted = 0;",
+    [username]
+  );
+  if (result.length > 0) {
+    return { success: true, status: true, data: result };
+  } else if (result.length === 0) {
+    return { success: true, status: true, data: [] };
+  }
+  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 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 getALLLoans = async () => {
+  const [result] = await pool.query("SELECT * FROM loans WHERE deleted = 0;");
+  if (result.length > 0) {
+    return { success: true, data: result };
+  }
+  return { success: false };
+};
+
+export const getItems = async () => {
+  const [result] = await pool.query("SELECT * FROM items;");
+  if (result.length > 0) {
+    return { success: true, data: result };
+  }
+  return { success: false };
+};

backendV2/routes/app/database/userMgmt.database.js

@@ -0,0 +1,55 @@
+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 getItems = async () => {
+  const [rows] = await pool.query("SELECT * FROM items;");
+  if (rows.length > 0) {
+    return { success: true, data: rows };
+  }
+  return { success: false };
+};
+
+export const getALLLoans = async () => {
+  const [rows] = await pool.query("SELECT * FROM loans;");
+  if (rows.length > 0) {
+    return { success: true, data: rows };
+  }
+  return { success: false };
+};
+
+export const changePassword = async (username, oldPassword, newPassword) => {
+  // get user current password
+  const [user] = await pool.query(
+    "SELECT * FROM users WHERE username = ? AND password = ?",
+    [username, oldPassword]
+  );
+  if (user.length === 0) return { success: false };
+
+  // update password
+
+  const [result] = await pool.query(
+    "UPDATE users SET password = ? WHERE username = ?",
+    [newPassword, username]
+  );
+  if (result.affectedRows > 0) return { success: true };
+  return { success: false };
+};

backendV2/routes/app/loanMgmt.route.js

@@ -0,0 +1,150 @@
+import express from "express";
+import { authenticate, generateToken } from "../../services/authentication.js";
+const router = express.Router();
+import dotenv from "dotenv";
+dotenv.config();
+
+// database funcs import
+import {
+  createLoanInDatabase,
+  getLoanInfoWithID,
+  getLoansFromDatabase,
+  getBorrowableItemsFromDatabase,
+  getALLLoans,
+  getItems,
+  SETdeleteLoanFromDatabase,
+} from "./database/loansMgmt.database.js";
+import { sendMailLoan } from "./services/mailer.js";
+
+router.post("/createLoan", authenticate, async (req, res) => {
+  try {
+    const { items, startDate, endDate, note } = 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,
+      note,
+      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.get("/loans", authenticate, async (req, res) => {
+  const result = await getLoansFromDatabase(req.user.username);
+  if (result.success) {
+    res.status(200).json(result.data);
+  } else if (result.status) {
+    res.status(200).json([]);
+  } else {
+    res.status(500).json({ message: "Failed to fetch loans" });
+  }
+});
+
+router.get("/all-items", authenticate, async (req, res) => {
+  const result = await getItems();
+  if (result.success) {
+    res.status(200).json(result.data);
+  } else {
+    res.status(500).json({ message: "Failed to fetch items" });
+  }
+});
+
+router.delete("/delete-loan/: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.get("/all-loans", authenticate, async (req, res) => {
+  const result = await getALLLoans();
+  if (result.success) {
+    res.status(200).json(result.data);
+  } else {
+    res.status(500).json({ message: "Failed to fetch loans" });
+  }
+});
+
+router.post("/borrowable-items", 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" });
+  }
+});
+
+export default router;

backendV2/routes/app/services/mailer.js

@@ -0,0 +1,148 @@
+import nodemailer from "nodemailer";
+import dotenv from "dotenv";
+dotenv.config();
+
+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");
+}
+
+export 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");
+}

backendV2/routes/app/userMgmt.route.js

@@ -0,0 +1,35 @@
+import express from "express";
+import { authenticate, generateToken } from "../../services/authentication.js";
+const router = express.Router();
+import dotenv from "dotenv";
+dotenv.config();
+
+// database funcs import
+import { loginFunc, changePassword } from "./database/userMgmt.database.js";
+
+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.post("/change-password", authenticate, async (req, res) => {
+  const oldPassword = req.body.oldPassword;
+  const newPassword = req.body.newPassword;
+  const username = req.user.username;
+  const result = await changePassword(username, oldPassword, newPassword);
+  if (result.success) {
+    res.status(200).json({ message: "Password changed successfully" });
+  } else {
+    res.status(500).json({ message: "Failed to change password" });
+  }
+});
+
+export default router;

backendV2/schemeV2.mock_data.sql

@@ -0,0 +1,120 @@
+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)
+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; currently_borrowing aligns with active loans)
+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 arrays, 6-digit numeric loan_code)
+-- 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
+('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
+('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
+('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
+('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
+('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)
+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

@@ -0,0 +1,57 @@
+use borrow_system_new;
+
+CREATE TABLE users (
+  id int NOT NULL AUTO_INCREMENT,
+  username varchar(100) NOT NULL UNIQUE,
+  password varchar(255) NOT NULL,
+  email varchar(255) NOT NULL,
+  first_name varchar(255) NOT NULL,
+  last_name varchar(255) NOT NULL,
+  role int NOT NULL,
+  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,
+  PRIMARY KEY (id)
+) ENGINE=InnoDB;
+
+CREATE TABLE loans (
+  id int NOT NULL AUTO_INCREMENT,
+  username varchar(100) NOT NULL,
+  lockers json NOT NULL DEFAULT ('[]'),
+  loan_code Char(6) NOT NULL UNIQUE,
+  start_date timestamp NOT NULL,
+  end_date timestamp NOT NULL,
+  take_date timestamp NULL DEFAULT NULL,
+  returned_date timestamp NULL DEFAULT NULL,
+  created_at timestamp NULL DEFAULT CURRENT_TIMESTAMP,
+  loaned_items_id json NOT NULL DEFAULT ('[]'),
+  loaned_items_name json NOT NULL DEFAULT ('[]'),
+  deleted bool NOT NULL DEFAULT false,
+  note varchar(500) DEFAULT NULL,
+  PRIMARY KEY (id),
+  CHECK (loan_code REGEXP '^[0-9]{6}$')
+) ENGINE=InnoDB;
+
+CREATE TABLE items (
+  id int NOT NULL AUTO_INCREMENT,
+  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,
+  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),
+  CHECK (safe_nr REGEXP '^[0-9]{2}$' OR safe_nr IS NULL)
+) ENGINE=InnoDB;
+
+CREATE TABLE apiKeys (
+  id INT NOT NULL AUTO_INCREMENT,
+  api_key CHAR(8) NOT NULL UNIQUE,
+  entry_name VARCHAR(100) NOT NULL,
+  last_used_at TIMESTAMP NULL DEFAULT NULL ON UPDATE CURRENT_TIMESTAMP,
+  entry_created_at TIMESTAMP NULL DEFAULT CURRENT_TIMESTAMP,
+  PRIMARY KEY (id),
+  CHECK (api_key REGEXP '^[0-9]{8}$')
+) ENGINE=InnoDB;