added script to avoid error

2025-10-26 15:32:41 +01:00
164 changed files with 18989 additions and 9205 deletions
@@ -1,14 +0,0 @@
 **/node_modules
 **/dist
 **/dist-ssr
 .git
 .idea
 .vscode
 **/.env
 **/.env.*
 **/.DS_Store
 **/*.log
 docs
 pics
 icon
 no-as-a-service
@@ -1,10 +0,0 @@
 DB_PASSWORD=
 BACKEND_URL=
 MAIL_HOST=
 MAIL_PORT=
 MAIL_USER=
 MAIL_PASSWORD=
 MAIL_SENDEES_CONTACT=
 MAIL_SENDEES=
 NAAS_URL=
 SECRET_KEY=
@@ -11,8 +11,6 @@ dist/
 build/
 out/
 docker-compose.override.yml
 # Environment variables
 .env
 .env.local
@@ -111,16 +109,8 @@ backend/public/uploads/
 *.sqlite3
 # API keys and secrets (additional protection)
 config/
 secrets/
 keys/
-ToDo.txt
+ToDo.txt
 # only in development branch
 next-env.d.ts
 # psd files from footage
 pics/*.psd
 icon/
@@ -1,3 +0,0 @@
 [submodule "no-as-a-service"]
 	path = no-as-a-service
 	url = https://github.com/hotheadhacker/no-as-a-service.git
@@ -1,7 +0,0 @@
 {
  "semi": true,
  "singleQuote": false,
  "trailingComma": "all",
  "printWidth": 80,
  "tabWidth": 2
 }
@@ -0,0 +1,22 @@
 # 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
@@ -2,6 +2,4 @@
 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.
@@ -1,177 +1,210 @@
-# Borrow System API Documentation
+# Backend API docs (apiV2)
-## Overview
+If you want to cooperate with me, or build something new with my backend API, feel free to reach out!
-The Borrow System API provides endpoints for managing items, loans, and door access for a borrowing/locker system. All endpoints require authentication via an 8-digit API key passed as a URL parameter.
+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.
 ---
 ## Base URL
 - Frontend: `https://insta.the1s.de`
 - Backend: `https://backend.insta.the1s.de`
 - Base path for this API: `https://backend.insta.the1s.de/apiV2`
 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)_
 ---
 ## Authentication
-All requests must include a valid API key in the URL path as the `:key` parameter. API keys are 8-digit numeric strings.
+All endpoints require an API key as a path parameter named `:key`.
 Example: `/apiV2/items/:key`
 If the key is missing or invalid, the API responds with `401 Unauthorized`.
 ---
 ## Endpoints
-The Base URL for all endpoints is: `https://insta.the1s.de/backend/api`
+### 1) Get all items
-### Get All Items
+GET `/apiV2/items/:key`
-`GET /items/:key`
+Returns a list of all items wrapped in a `data` object.
-Returns all items in the system.
+Example request:
-**Response 200:**
+```
 GET https://backend.insta.the1s.de/apiV2/items/12345
 ```
-```json
+Example response:
 ```
 {
  "data": [
    {
      "id": 1,
-      "item_name": "Laptop",
+      "item_name": "DJI 1er Mikro",
-      "can_borrow_role": 1,
+      "can_borrow_role": 4,
-      "in_safe": true,
+      "inSafe": 1,
-      "safe_nr": 3,
+      "entry_created_at": "2025-08-19T22:02:16.000Z"
      "door_key": 101,
      "last_borrowed_person": "jdoe",
      "currently_borrowing": null
    }
  ]
 }
 ```
-**Response 500:**
+Fields:
-```json
+- `id`: Unique identifier
-{ "message": "Failed to fetch items" }
+- `item_name`: Item name
-```
+- `can_borrow_role`: Role allowed to borrow
 - `inSafe`: 1 if in locker, 0 otherwise
 - `entry_created_at`: Creation timestamp
 Status: 200 on success, 500 on failure.
 ---
-### Change Item Safe State
+### 2) Change item safe state
-`POST /change-state/:key/:itemId`
+POST `/apiV2/controlInSafe/:key/:itemId/:state`
-Toggles the `in_safe` boolean state of an item.
+Updates `inSafe` (locker) state of an item.
-**URL Parameters:**
+- `state` must be `"1"` (in safe) or `"0"` (not in safe)
- **key** - API key
+Example request:
 - **itemId** - The item's ID
 **Response 200:** Returns on successful toggle.
 **Response 500:**
 ```json
 { "message": "Failed to update item state" }
 ```
 POST https://backend.insta.the1s.de/apiV2/controlInSafe/12345/123/1
 ```
 Example response (shape depends on database service):
 ```
 { "data": { /* update result */ } }
 ```
 Status:
 - 200 on success
 - 400 if `state` is invalid
 - 500 on failure
 **You can get the item id on the admin panel, from your system administrator.**
 ---
-### Get Loan by Code
+### 3) Get loan by code
-`GET /get-loan-by-code/:key/:loan_code`
+GET `/apiV2/getLoanByCode/:key/:loan_code`
-Retrieves loan details by its 6-digit loan code.
+Retrieves the details of a specific loan.
-**URL Parameters:**
+Example request:
- **key** - API key
+```
- **loan_code** - A 6-digit numeric loan code
+GET https://backend.insta.the1s.de/apiV2/getLoanByCode/12345/123456
 ```
-**Response 200:**
+Example response:
-```json
+```
 {
  "data": {
-    "username": "jdoe",
+    "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,
    "returned_date": null,
-    "take_date": "2024-01-15T10:30:00.000Z",
+    "created_at": "2025-08-20T11:23:40.000Z",
-    "lockers": [1, 3]
+    "loaned_items_id": [8, 9],
    "loaned_items_name": ["SD Karten", "Kameragimbal"]
  }
 }
 ```
-**Response 404:**
+Status:
-```json
+- 200 on success
-{ "message": "Loan not found" }
+- 404 if not found
 ```
 ---
-### Set Take Date
+### 4) Set return date (now) by loan code
-`POST /set-take-date/:key/:loan_code`
+POST `/apiV2/setReturnDate/:key/:loan_code`
-Records when items are physically taken by setting `take_date` to the current timestamp. Updates associated items to `in_safe = false` and sets `currently_borrowing` to the loan's username.
+Sets the `returned_date` to the current server time.
-**URL 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
+**DO NOT UPDATE THE STATE MANUALLY! (only if the item was taken with an admin key)**
 - **loan_code** - A 6-digit numeric loan code
-**Response 200:** Empty JSON object on success.
+Example request:
-**Response 500:**
+```
-
+POST https://backend.insta.the1s.de/apiV2/setReturnDate/12345/123456
 ```json
 { "message": "Loan not found or already taken" }
 ```
-> **Note:** This endpoint will fail if the loan has already been taken or does not exist.
+Example response:
 ```
 { "data": { /* update result */ } }
 ```
 Status: 200 on success, 500 on failure.
 ---
-### Set Return Date
+### 5) Set take date (now) by loan code
-`POST /set-return-date/:key/:loan_code`
+POST `/apiV2/setTakeDate/:key/:loan_code`
-Marks a loan as returned by setting `returned_date` to the current timestamp. Also updates all associated items to `in_safe = true`, clears `currently_borrowing`, and sets `last_borrowed_person`. Therefore, keep in mind that you must not call other endpoints that will change the safe state of an item after or before calling this endpoint, otherwise the state of the items will be inconsistent.
+Sets the `take_date` to the current server time.
-**URL 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
+**DO NOT UPDATE THE STATE MANUALLY! (only if the item was taken with an admin key)**
 - **loan_code** - A 6-digit numeric loan code
-**Response 200:** Empty JSON object on success.
+Example request:
-**Response 500:**
+```
-
+POST https://backend.insta.the1s.de/apiV2/setTakeDate/12345/123456
 ```json
 { "message": "Failed to set return date" }
 ```
-> **Note:** This endpoint will fail if the loan has already been returned (i.e., `returned_date` is not `NULL`).
+Example response:
 ```
 { "data": { /* update result */ } }
 ```
 Status: 200 on success, 500 on failure.
 ---
-### Open Door
+## Error handling
-`GET /open-door/:key/:doorKey`
+- 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
-Toggles the safe state of an item identified by its door key and returns the associated safe number.
+---
-**URL Parameters:**
+If you have questions or want to collaborate, please reach out!
 - **key** - API key
 - **doorKey** - The door key identifier assigned to an item
 **Response 200:**
 ```json
 {
  "data": {
    "safe_nr": 3,
    "id": 1
  }
 }
 ```
 **Response 500:**
 ```json
 { "message": "Failed to open door" }
 ```
 ## Error Handling
 All endpoints return a `500` status code for server-side failures and a JSON body with a `message` field, except for **Get Loan by Code** which returns `404` when no matching loan is found.
@@ -1,78 +0,0 @@
 # Docker
 ## Prerequisites
 You have created an empty `docker-compose.override.yml` file in the root directory of this repository.
 ## Docker Network
 If you want to run the stack in a docker network, you need to change the `BACKEND_HOST` variable in the root `.env` file
 to `stockhome-backend`. To add a docker network, create a `docker-compose.override.yml` file in the root directory of
 this repository with the following content:
 ```yaml
 services:
  admin-frontend:
    networks:
      - proxynet
  backend:
    networks:
      - proxynet
  usr-frontend:
    networks:
      - proxynet
  no-as-a-service:
    networks:
      - proxynet
  mysql:
    networks:
      - proxynet
 networks:
  proxynet:
    external: true
 ```
 To start off I recommend to set the `BACKEND_HOST` variable to `localhost` and start the stack without a docker network.
 After you have started the stack and everything is working, you can add a docker network.
 ## Ports
 ### Change Exposed Ports
 If you want to change the exposed ports, you can do this in the `docker-compose.yml` file like so:
 ```yaml
 services:
  mysql:
    ports:
      - "3306:3306"
  backend:
    ports:
      - "8004:8004"
  usr-frontend:
    ports:
      - "80:80"
 ```
 ### Remove Exposed Ports
 If you want to remove the exposed ports, you can do this in the `docker-compose.override.yml` file like so:
 ```yaml
 services:
  mysql:
    ports: !override [ ]
  backend:
    ports: !override [ ]
  usr-frontend:
    ports: !override [ ]
 ```
@@ -0,0 +1,24 @@
 # Logs
 logs
 *.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 node_modules
 dist
 dist-ssr
 *.local
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
 .idea
 .DS_Store
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?
@@ -0,0 +1,12 @@
 FROM node:20-alpine
 WORKDIR /app
 COPY package*.json ./
 RUN npm install
 COPY . .
 EXPOSE 8001
 CMD ["npm", "run", "dev"]
@@ -0,0 +1,73 @@
 # React + TypeScript + Vite
 This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
 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/) (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 defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...
      // Remove tseslint.configs.recommended and replace with this
      tseslint.configs.recommendedTypeChecked,
      // Alternatively, use this for stricter rules
      tseslint.configs.strictTypeChecked,
      // Optionally, add this for stylistic rules
      tseslint.configs.stylisticTypeChecked,
      // Other configs...
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
 ])
 ```
 You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
 ```js
 // eslint.config.js
 import reactX from 'eslint-plugin-react-x'
 import reactDom from 'eslint-plugin-react-dom'
 export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs['recommended-typescript'],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
 ])
 ```
@@ -0,0 +1,23 @@
 import js from '@eslint/js'
 import globals from 'globals'
 import reactHooks from 'eslint-plugin-react-hooks'
 import reactRefresh from 'eslint-plugin-react-refresh'
 import tseslint from 'typescript-eslint'
 import { defineConfig, globalIgnores } from 'eslint/config'
 export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      js.configs.recommended,
      tseslint.configs.recommended,
      reactHooks.configs['recommended-latest'],
      reactRefresh.configs.vite,
    ],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
    },
  },
 ])
@@ -0,0 +1,13 @@
 <!doctype html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>frontendv2</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
 </html>
@@ -0,0 +1,52 @@
 {
  "name": "admin",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "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",
    "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",
    "tailwind-merge": "^3.3.1",
    "tailwindcss": "^4.1.11",
    "tailwindcss-animate": "^1.0.7",
    "tw-animate-css": "^1.3.5",
    "vite-plugin-svgr": "^4.3.0"
  },
  "devDependencies": {
    "@eslint/js": "^9.32.0",
    "@types/js-cookie": "^3.0.6",
    "@types/react": "^19.1.9",
    "@types/react-dom": "^19.1.7",
    "@vitejs/plugin-react": "^4.7.0",
    "eslint": "^9.32.0",
    "eslint-plugin-react-hooks": "^5.2.0",
    "eslint-plugin-react-refresh": "^0.4.20",
    "globals": "^16.3.0",
    "typescript": "~5.8.3",
    "typescript-eslint": "^8.39.0",
    "vite": "^7.1.0",
    "vite-tsconfig-paths": "^5.1.4"
  }
 }
@@ -0,0 +1 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
@@ -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);
 }
@@ -0,0 +1,89 @@
 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";
 const API_BASE =
  (import.meta as any).env?.VITE_BACKEND_URL ||
  import.meta.env.VITE_BACKEND_URL ||
  "http://localhost:8002";
 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}/api/verifyToken`, {
          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 (
    <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>
  );
 }
 export default App;
@@ -0,0 +1 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
@@ -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)."
                    ]
                }
            ]
        }
    ]
 }
@@ -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>
  );
 }
@@ -0,0 +1,19 @@
 import { Box } from "@chakra-ui/react";
 export const Footer = () => {
  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 />
      v2.0
    </Box>
  );
 };
@@ -0,0 +1,407 @@
 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";
 const API_BASE =
  (import.meta as any).env?.VITE_BACKEND_URL ||
  import.meta.env.VITE_BACKEND_URL ||
  "http://localhost:8002";
 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/changePassword`, {
      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>
  );
 };
@@ -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);
 }
@@ -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
 // code below is to avoid linter error for unused import
 let i18nUnused = i18n;
 console.log(i18nUnused);
 createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <Provider>
      <App />
    </Provider>
  </StrictMode>
 );
@@ -0,0 +1,165 @@
 import {
  Container,
  Stack,
  Text,
  Button,
  Input,
  Spinner,
  VStack,
  Table,
 } 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[]>([]);
  // 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">
        <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>
            </Table.Root>
          </Table.ScrollArea>
        )}
        {selectedItems.length >= 1 && (
          <Button
            onClick={() =>
              createLoan(selectedItems, startDate, endDate).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>
  );
 };
@@ -9,13 +9,10 @@ import {
  Card,
  SimpleGrid,
  Button,
  Container,
 } from "@chakra-ui/react";
 import { Lock, LockOpen } from "lucide-react";
 import MyAlert from "@/components/myChakra/MyAlert";
 import { useTranslation } from "react-i18next";
 import { API_BASE } from "@/config/api.config";
 import Cookies from "js-cookie";
 import { Header } from "@/components/Header";
 export const formatDateTime = (value: string | null | undefined) => {
  if (!value) return "N/A";
@@ -25,6 +22,11 @@ export const formatDateTime = (value: string | null | undefined) => {
  return `${d}.${M}.${y} ${h}:${min} Uhr`;
 };
 const API_BASE =
  (import.meta as any).env?.VITE_BACKEND_URL ||
  import.meta.env.VITE_BACKEND_URL ||
  "http://localhost:8002";
 type Loan = {
  id: number;
  username: string;
@@ -33,17 +35,14 @@ type Loan = {
  returned_date: string | null;
  take_date: string | null;
  loaned_items_name: string[] | string;
  note: string | null;
 };
 type Device = {
  id: number;
  item_name: string;
  can_borrow_role: string;
-  in_safe: number;
+  inSafe: number;
  entry_created_at: string;
  last_borrowed_person: string | null;
  currently_borrowing: string | null;
 };
 const Landingpage: React.FC = () => {
@@ -60,7 +59,7 @@ const Landingpage: React.FC = () => {
  const setError = (
    status: "error" | "success",
    message: string,
-    description: string,
+    description: string
  ) => {
    setIsError(false);
    setErrorStatus(status);
@@ -73,22 +72,7 @@ const Landingpage: React.FC = () => {
    const fetchData = async () => {
      setIsLoading(true);
      try {
-        const loanRes = await fetch(`${API_BASE}/api/loans/all-loans`, {
+        const loanRes = await fetch(`${API_BASE}/apiV2/allLoans`);
          method: "GET",
          headers: {
            Authorization: `Bearer ${Cookies.get("token")}`,
          },
        });
        if (loanRes.status === 503) {
          setError(
            "error",
            t("serviceDeactivatedHeadline"),
            t("loan_page_serviceDeactivatedText"),
          );
          setIsLoading(false);
          return;
        }
        const loanData = await loanRes.json();
        if (Array.isArray(loanData)) {
          setLoans(loanData);
@@ -96,16 +80,11 @@ const Landingpage: React.FC = () => {
          setError(
            "error",
            t("error-by-loading"),
-            t("unexpected-date-format_loan"),
+            t("unexpected-date-format_loan")
          );
        }
-        const deviceRes = await fetch(`${API_BASE}/api/loans/all-items`, {
+        const deviceRes = await fetch(`${API_BASE}/apiV2/allItems`);
          method: "GET",
          headers: {
            Authorization: `Bearer ${Cookies.get("token")}`,
          },
        });
        const deviceData = await deviceRes.json();
        if (Array.isArray(deviceData)) {
          setDevices(deviceData);
@@ -113,7 +92,7 @@ const Landingpage: React.FC = () => {
          setError(
            "error",
            t("error-by-loading"),
-            t("unexpected-date-format_device"),
+            t("unexpected-date-format_device")
          );
        }
      } catch (e) {
@@ -126,8 +105,10 @@ const Landingpage: React.FC = () => {
  }, []);
  return (
-    <Container className="px-6 sm:px-8 pt-10">
+    <>
-      <Header />
+      <Heading as="h1" size="lg" mb={2}>
        Matthias-Claudius-Schule Technik
      </Heading>
      <Heading as="h2" size="md" mb={4}>
        {t("all-loans")}
@@ -167,14 +148,11 @@ const Landingpage: React.FC = () => {
              <Table.ColumnHeader>
                <strong>{t("rented-items")}</strong>
              </Table.ColumnHeader>
              <Table.ColumnHeader>
                <strong>{t("take-date")}</strong>
              </Table.ColumnHeader>
              <Table.ColumnHeader>
                <strong>{t("return-date")}</strong>
              </Table.ColumnHeader>
              <Table.ColumnHeader>
-                <strong>{t("note")}</strong>
+                <strong>{t("take-date")}</strong>
              </Table.ColumnHeader>
            </Table.Row>
          </Table.Header>
@@ -190,9 +168,8 @@ const Landingpage: React.FC = () => {
                    ? loan.loaned_items_name.join(", ")
                    : loan.loaned_items_name}
                </Table.Cell>
                <Table.Cell>{formatDateTime(loan.take_date)}</Table.Cell>
                <Table.Cell>{formatDateTime(loan.returned_date)}</Table.Cell>
-                <Table.Cell>{loan.note}</Table.Cell>
+                <Table.Cell>{formatDateTime(loan.take_date)}</Table.Cell>
              </Table.Row>
            ))}
          </Table.Body>
@@ -215,26 +192,17 @@ const Landingpage: React.FC = () => {
          <Card.Root
            key={device.id}
            size="sm"
-            bg={device.in_safe ? "green" : "red"}
+            bg={device.inSafe ? "green" : "red"}
            h="full"
            minH="100px"
          >
            <Card.Header>
-              <Heading size="md">
+              {device.inSafe ? <LockOpen size={16} /> : <Lock size={16} />}
-                <strong>{device.item_name}</strong>
+              <Heading size="md">{device.item_name}</Heading>
              </Heading>
            </Card.Header>
-            <Card.Body>
+            <Card.Body color="fg.muted">
              <Text>
-                <strong>{t("role")}</strong>: {device.can_borrow_role}
+                {t("rent-role")}: {device.can_borrow_role}
              </Text>
              <Text>
                <strong>{t("last-borrowed-person")}</strong>:{" "}
                {device.last_borrowed_person || "N/A"}
              </Text>
              <Text>
                <strong>{t("currently-borrowed-by")}</strong>:{" "}
                {device.currently_borrowing || "N/A"}
              </Text>
            </Card.Body>
          </Card.Root>
@@ -253,6 +221,7 @@ const Landingpage: React.FC = () => {
          borderRadius="full"
        >
          <HStack gap={2}>
            <LockOpen size={16} />
            <Text>{t("in-locker")}</Text>
          </HStack>
        </Button>
@@ -265,11 +234,12 @@ const Landingpage: React.FC = () => {
          borderRadius="full"
        >
          <HStack gap={2}>
            <Lock size={16} />
            <Text>{t("not-in-locker")}</Text>
          </HStack>
        </Button>
      </HStack>
-    </Container>
+    </>
  );
 };
@@ -0,0 +1,123 @@
 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";
 const API_BASE =
  (import.meta as any).env?.VITE_BACKEND_URL ||
  import.meta.env.VITE_BACKEND_URL ||
  "http://localhost:8002";
 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();                                                       // Mit Tobais besprechen, ob das so bleiben soll
    }
  }, [isLoggedIn, navigate]);
  const loginFnc = async (username: string, password: string) => {
    const response = await fetch(`${API_BASE}/api/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>
  );
 };
@@ -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";
 const API_BASE =
  (import.meta as any).env?.VITE_BACKEND_URL ||
  import.meta.env.VITE_BACKEND_URL ||
  "http://localhost:8002";
 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/userLoans`, {
          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/SETdeleteLoan/${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%" }} />
              {/* 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("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>
                    <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>
    </>
  );
 };
@@ -1,16 +1,6 @@
 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);
@@ -3,9 +3,6 @@ import { useContext } from "react";
 export interface User {
  username: string;
  is_admin: boolean;
  first_name: string;
  last_name: string;
  role: number;
 }
@@ -15,8 +12,8 @@ export function useUserContext() {
  const user = useContext(UserContext);
  if (user === undefined) {
-    throw new Error("useUserContext must be used with a UserContext");
+    throw new Error("useUserContext must be used with a UserContext")
  }
  return user;
-}
+}
@@ -1,12 +1,15 @@
 import Cookies from "js-cookie";
-import { API_BASE } from "@/config/api.config";
+const API_BASE =
  (import.meta as any).env?.VITE_BACKEND_URL ||
  import.meta.env.VITE_BACKEND_URL ||
  "http://localhost:8002";
 export const getBorrowableItems = async (
  startDate: string,
-  endDate: string,
+  endDate: string
 ) => {
  try {
-    const response = await fetch(`${API_BASE}/api/loans/borrowable-items`, {
+    const response = await fetch(`${API_BASE}/api/borrowableItems`, {
      method: "POST",
      headers: {
        Authorization: `Bearer ${Cookies.get("token") || ""}`,
@@ -17,26 +20,17 @@ export const getBorrowableItems = async (
    });
    if (!response.ok) {
      if (response.status === 503) {
        return {
          data: null,
          status: "error",
          title: "Service deactivated",
          description:
            "The loan service is currently deactivated. Please try again later.",
        };
      }
      return {
        data: null,
        status: "error",
        title: "Server error",
        description:
-          "An error occurred on the server. Sometimes reloading the page helps. Otherwise, please contact the administrator.",
+          "Ein Fehler ist auf dem Server aufgetreten. Manchmal hilft es, die Seite neu zu laden.",
      };
    }
    const data = await response.json();
    console.log(data);
    return {
      data: data,
      status: "success",
@@ -57,29 +51,18 @@ export const getBorrowableItems = async (
 export const createLoan = async (
  itemIds: number[],
  startDate: string,
-  endDate: string,
+  endDate: string
  note: string | null,
 ) => {
-  const response = await fetch(`${API_BASE}/api/loans/createLoan`, {
+  const response = await fetch(`${API_BASE}/api/createLoan`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${Cookies.get("token") || ""}`,
    },
-    body: JSON.stringify({ items: itemIds, startDate, endDate, note }),
+    body: JSON.stringify({ items: itemIds, startDate, endDate }),
  });
  if (!response.ok) {
    if (response.status === 503) {
      return {
        data: null,
        status: "error",
        title: "Service deactivated",
        description:
          "The loan service is currently deactivated. Please try again later.",
      };
    }
    return {
      data: null,
      status: "error",
@@ -0,0 +1,63 @@
 {
    "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"
 }
@@ -0,0 +1,63 @@
 {
    "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"
 }
@@ -0,0 +1,11 @@
 module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,jsx,ts,tsx}",
    // add other paths if needed
  ],
  theme: {
    extend: {},
  },
  plugins: [],
 };
@@ -0,0 +1,33 @@
 {
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2022",
    "useDefineForClassFields": true,
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "types": ["vite/client"],
    "skipLibCheck": true,
    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "verbatimModuleSyntax": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",
    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "erasableSyntaxOnly": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true,
    /* Path aliases */
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src"]
 }
@@ -0,0 +1,7 @@
 {
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ]
 }
@@ -0,0 +1,26 @@
 {
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
    "target": "ES2023",
    "lib": ["ES2023"],
    "module": "ESNext",
    "types": ["node"],
    "skipLibCheck": true,
    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "verbatimModuleSyntax": true,
    "moduleDetection": "force",
    "noEmit": true,
    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "erasableSyntaxOnly": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },
  "include": ["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,
    },
  },
 });
@@ -1,6 +0,0 @@
 Copyright (c) 2026 Theis Gaedigk
 All rights reserved.
 This source code is not to be copied, modified, or distributed in any form
 without explicit written permission from the author.
@@ -19,21 +19,17 @@ A small full‑stack system to log in, view available items, reserve them for a
 ## Contents
 - Frontend: [frontend/](frontend)
-    - Vite/Tailwind
+  - Vite/Tailwind config: [frontend/vite.config.ts](frontend/vite.config.ts), [frontend/tailwind.config.js](frontend/tailwind.config.js)
-      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)
-    - 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)
    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)
+  - Server: [backend/server.js](backend/server.js)
-    - Routes: [backend/routes/api.js](backend/routes/api.js), [backend/routes/apiV2.js](backend/routes/apiV2.js)
+  - Routes: [backend/routes/api.js](backend/routes/api.js), [backend/routes/apiV2.js](backend/routes/apiV2.js)
-    - DB +
+  - DB + services: [backend/services/database.js](backend/services/database.js), [backend/services/tokenService.js](backend/services/tokenService.js)
-      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)
    - 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)
+  - API docs (see below): [docs/backend_API_docs/README.md](docs/backend_API_docs/README.md)
 ## Features (high‑level)
@@ -45,8 +41,7 @@ A small full‑stack system to log in, view available items, reserve them for a
 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
+- [`utils.fetchData.getBorrowableItems`](frontend/src/utils/fetchData.ts): fetches borrowable items for the selected time range.
  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.
@@ -59,18 +54,20 @@ UI flow (main screens):
 ## Development
- The NAAS (no-as-a-service) and the mysql database are running in a docker container
+- Scripts: see [frontend/package.json](frontend/package.json) and [backend/package.json](backend/package.json)
- `frontend`, `backend` and `admin` are both in a vite dev server and can be started by `npm run dev` in the root
+  - Frontend: `npm run dev`, `npm run build`, `npm run preview`, `npm run lint`
-  directory.
+  - 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
+- 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).
  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
+- 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).
  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)
+Refer to the dedicated API docs:
 `docs/backend_API_docs/README.md`
@@ -1,26 +1,12 @@
-# Build context is the repo root (npm workspaces share one root package-lock.json)
+FROM node:20-alpine
 FROM node:22-alpine AS builder
 WORKDIR /app
-COPY package.json package-lock.json ./
+COPY package*.json ./
-COPY frontend/package.json frontend/
+RUN npm install
 COPY admin/package.json admin/
 COPY backend/package.json backend/
 RUN npm ci -w admin
-ARG VITE_BACKEND_URL
+COPY . .
 ENV VITE_BACKEND_URL=$VITE_BACKEND_URL
-COPY admin/ admin/
+EXPOSE 8003
 RUN npm run build -w admin
-FROM nginx:alpine AS runner
+CMD ["npm", "run", "dev"]
 WORKDIR /usr/share/nginx/html
 COPY --from=builder /app/admin/dist .
 COPY admin/nginx.conf /etc/nginx/conf.d/default.conf
 EXPOSE 80
 CMD ["nginx", "-g", "daemon off;"]
@@ -1,10 +1,10 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/user-star.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Adminpanel</title>
+    <title>Admin panel</title>
  </head>
  <body>
    <div id="root"></div>
@@ -1,26 +0,0 @@
 server {
  listen 80;
  server_name _;
  root /usr/share/nginx/html;
  index index.html;
  location / {
    try_files $uri $uri/ /index.html;
  }
  location = /backend {
    return 301 /backend/;
  }
  location /backend/ {
    proxy_pass http://borrow-system_backend:8004/;
  }
  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;
  }
 }
@@ -1,7 +1,7 @@
 {
  "name": "admin",
  "private": true,
-  "version": "1.3.2-dev",
+  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
@@ -47,4 +47,4 @@
    "vite": "^7.1.0",
    "vite-tsconfig-paths": "^5.1.4"
  }
-}
+}
@@ -7,7 +7,6 @@ import UserTable from "../components/UserTable";
 import ItemTable from "../components/ItemTable";
 import LoanTable from "../components/LoanTable";
 import APIKeyTable from "@/components/APIKeyTable";
 import ServerConfig from "@/components/ServerConfig";
 import { MoveLeft } from "lucide-react";
 type DashboardProps = {
@@ -45,9 +44,8 @@ const Dashboard: React.FC<DashboardProps> = ({ onLogout }) => {
        viewSchliessfaecher={() => setActiveView("Schließfächer")}
        viewUser={() => setActiveView("User")}
        viewAPI={() => setActiveView("API")}
        viewConfig={() => setActiveView("Server Konfiguration")}
      />
-      <Box flex="1" display="flex" flexDirection="column" minH={0}>
+      <Box flex="1" display="flex" flexDirection="column">
        <Flex
          as="header"
          align="center"
@@ -68,7 +66,7 @@ const Dashboard: React.FC<DashboardProps> = ({ onLogout }) => {
            </Button>
          </Flex>
        </Flex>
-        <Box as="main" flex="1" p={6} minH={0} overflow="hidden">
+        <Box as="main" flex="1" p={6}>
          {activeView === "" && (
            <Flex
              align="center"
@@ -90,7 +88,6 @@ const Dashboard: React.FC<DashboardProps> = ({ onLogout }) => {
          {activeView === "Ausleihen" && <LoanTable />}
          {activeView === "Gegenstände" && <ItemTable />}
          {activeView === "API" && <APIKeyTable />}
          {activeView === "Server Konfiguration" && <ServerConfig />}
        </Box>
      </Box>
    </Flex>
@@ -3,7 +3,11 @@ import { useEffect } from "react";
 import Dashboard from "./Dashboard";
 import Login from "./Login";
 import Cookies from "js-cookie";
-import { API_BASE } from "@/config/api.config";
+
 const API_BASE =
  (import.meta as any).env?.VITE_BACKEND_URL ||
  import.meta.env.VITE_BACKEND_URL ||
  "http://localhost:8002";
 const Layout: React.FC = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
@@ -11,15 +15,12 @@ const Layout: React.FC = () => {
  useEffect(() => {
    if (Cookies.get("token")) {
      const verifyToken = async () => {
-        const response = await fetch(
+        const response = await fetch(`${API_BASE}/api/verifyToken`, {
-          `${API_BASE}/api/admin/user-mgmt/verify-token`,
+          method: "GET",
-          {
+          headers: {
-            method: "GET",
+            Authorization: `Bearer ${Cookies.get("token")}`,
-            headers: {
+          },
-              Authorization: `Bearer ${Cookies.get("token")}`,
+        });
            },
          }
        );
        if (response.ok) {
          setIsLoggedIn(true);
        } else {
@@ -3,7 +3,6 @@ import { useState } from "react";
 import { loginFunc } from "@/utils/loginUser";
 import MyAlert from "../components/myChakra/MyAlert";
 import { Button, Card, Field, Input, Stack } from "@chakra-ui/react";
 import { PasswordInput } from "@/components/ui/password-input";
 const Login: React.FC<{ onSuccess: () => void }> = ({ onSuccess }) => {
  const [username, setUsername] = useState("");
@@ -44,7 +43,8 @@ const Login: React.FC<{ onSuccess: () => void }> = ({ onSuccess }) => {
              </Field.Root>
              <Field.Root>
                <Field.Label>password</Field.Label>
-                <PasswordInput
+                <Input
                  type="password"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                />
@@ -1,7 +1,5 @@
 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;
@@ -9,7 +7,6 @@ type SidebarProps = {
  viewSchliessfaecher: () => void;
  viewUser: () => void;
  viewAPI: () => void;
  viewConfig: () => void;
 };
 const Sidebar: React.FC<SidebarProps> = ({
@@ -17,24 +14,11 @@ const Sidebar: React.FC<SidebarProps> = ({
  viewGegenstaende,
  viewUser,
  viewAPI,
  viewConfig
 }) => {
  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="180px"
+      w="260px"
      minH="100vh"
      bg="gray.800"
      color="gray.100"
@@ -85,45 +69,10 @@ const Sidebar: React.FC<SidebarProps> = ({
          >
            API Keys
          </Link>
          <Link
            px={3}
            py={2}
            rounded="md"
            _hover={{ bg: "gray.700", textDecoration: "none" }}
            onClick={viewConfig}
          >
            Server Konfiguration
          </Link>
        </VStack>
        <Box mt="auto" pt={8} fontSize="xs" color="gray.500">
-          <Text mb={2}>&copy; Made with ❤️ by Theis Gaedigk</Text>
+          <Text>&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>
@@ -17,14 +17,17 @@ import { useState, useEffect } from "react";
 import { deleteAPKey } from "@/utils/userActions";
 import AddAPIKey from "./AddAPIKey";
 import { formatDateTime } from "@/utils/userFuncs";
-import { API_BASE } from "@/config/api.config";
+
 const API_BASE =
  (import.meta as any).env?.VITE_BACKEND_URL ||
  import.meta.env.VITE_BACKEND_URL ||
  "http://localhost:8002";
 type Items = {
  id: number;
-  api_key: string;
+  apiKey: string;
-  entry_name: string;
+  user: string;
  entry_created_at: string;
  last_used_at: string | null;
 };
 const APIKeyTable: React.FC = () => {
@@ -53,15 +56,12 @@ const APIKeyTable: React.FC = () => {
    const fetchData = async () => {
      setIsLoading(true);
      try {
-        const response = await fetch(
+        const response = await fetch(`${API_BASE}/api/apiKeys`, {
-          `${API_BASE}/api/admin/api-data/get-api-keys`,
+          method: "GET",
-          {
+          headers: {
-            method: "GET",
+            Authorization: `Bearer ${Cookies.get("token")}`,
-            headers: {
+          },
-              Authorization: `Bearer ${Cookies.get("token")}`,
+        });
            },
          }
        );
        const data = await response.json();
        return data;
      } catch (error) {
@@ -123,8 +123,8 @@ const APIKeyTable: React.FC = () => {
      </HStack>
      {/* End action toolbar */}
-      <Heading marginBottom={4} size="2xl">
+      <Heading marginBottom={4} size="md">
-        API Keys
+        Gegenstände
      </Heading>
      {isError && (
        <MyAlert
@@ -149,55 +149,39 @@ const APIKeyTable: React.FC = () => {
        />
      )}
-      <Table.Root
+      <Table.Root size="sm" striped>
        size="sm"
        striped
        w="100%"
        // table-layout: auto => Spaltenbreite nach Content; volle Breite nutzen
        style={{ tableLayout: "auto" }}
      >
        <Table.Header>
          <Table.Row>
-            <Table.ColumnHeader width="1%" whiteSpace="nowrap">
+            <Table.ColumnHeader>
              <strong>#</strong>
            </Table.ColumnHeader>
            <Table.ColumnHeader>
              <strong>API Key</strong>
            </Table.ColumnHeader>
            <Table.ColumnHeader>
-              <strong>Name</strong>
+              <strong>Benutzer</strong>
            </Table.ColumnHeader>
-            <Table.ColumnHeader whiteSpace="nowrap">
+            <Table.ColumnHeader>
              <strong>Eintrag erstellt am</strong>
            </Table.ColumnHeader>
-            <Table.ColumnHeader whiteSpace="nowrap">
+            <Table.ColumnHeader>
              <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((item) => (
+          {items.map((apiKey) => (
-            <Table.Row key={item.id}>
+            <Table.Row key={apiKey.id}>
-              <Table.Cell whiteSpace="nowrap">{item.id}</Table.Cell>
+              <Table.Cell>{apiKey.id}</Table.Cell>
-              <Table.Cell fontFamily="mono">{item.api_key}</Table.Cell>
+              <Table.Cell>{apiKey.apiKey}</Table.Cell>
-              <Table.Cell>{item.entry_name}</Table.Cell>
+              <Table.Cell>{apiKey.user}</Table.Cell>
-              <Table.Cell whiteSpace="nowrap">
+              <Table.Cell>{formatDateTime(apiKey.entry_created_at)}</Table.Cell>
-                {formatDateTime(item.entry_created_at)}
+              <Table.Cell>
              </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(item.id).then((response) => {
+                    deleteAPKey(apiKey.id).then((response) => {
                      if (response.success) {
-                        setItems(items.filter((i) => i.id !== item.id));
+                        setItems(items.filter((i) => i.id !== apiKey.id));
                        setError(
                          "success",
                          "Gegenstand gelöscht",
@@ -1,15 +1,6 @@
 import React from "react";
-import {
+import { Button, Card, Field, Input, Stack } from "@chakra-ui/react";
  Button,
  Card,
  Field,
  Input,
  Stack,
  InputGroup,
  Span,
 } from "@chakra-ui/react";
 import { createAPIentry } from "@/utils/userActions";
 import { useState } from "react";
 type AddAPIKeyProps = {
  onClose: () => void;
@@ -21,8 +12,6 @@ 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">
@@ -34,26 +23,13 @@ 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} / {8}
                </Span>
              }
            >
              <Input
                placeholder="Er muss 8 zahlen lang sein"
                value={value}
                id="apiKey"
                maxLength={8}
                onChange={(e) => {
                  setValue(e.currentTarget.value.slice(0, 8));
                }}
              />
            </InputGroup>
            <Field.Root>
-              <Field.Label>Name</Field.Label>
+              <Field.Label>API key</Field.Label>
-              <Input id="name" type="text" />
+              <Input type="number" id="apiKey" />
            </Field.Root>
            <Field.Root>
              <Field.Label>Benutzer</Field.Label>
              <Input id="user" type="text" />
            </Field.Root>
          </Stack>
        </Card.Body>
@@ -68,14 +44,14 @@ const AddAPIKey: React.FC<AddAPIKeyProps> = ({ onClose, alert }) => {
                (
                  document.getElementById("apiKey") as HTMLInputElement
                )?.value.trim() || "";
-              const name =
+              const user =
                (
-                  document.getElementById("name") as HTMLInputElement
+                  document.getElementById("user") as HTMLInputElement
                )?.value.trim() || "";
-              if (!apiKey || !name) return;
+              if (!apiKey || !user) return;
-              const res = await createAPIentry(apiKey, name);
+              const res = await createAPIentry(apiKey, user);
              if (res.success) {
                alert(
                  "success",
@@ -1,13 +1,5 @@
 import React from "react";
-import {
+import { Button, Card, Field, Input, Stack } from "@chakra-ui/react";
  Button,
  Card,
  Field,
  Input,
  Stack,
  Text,
  Checkbox,
 } from "@chakra-ui/react";
 import { createUser } from "@/utils/userActions";
 type AddFormProps = {
@@ -20,128 +12,73 @@ 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">
-      <form
+      <Card.Root maxW="sm">
-        onSubmit={(e) => {
+        <Card.Header>
-          e.preventDefault();
+          <Card.Title>Neuen Nutzer erstellen</Card.Title>
-        }}
+          <Card.Description>
-      >
+            Füllen Sie das folgende Formular aus, um einen Nutzer zu erstellen.
-        <Card.Root maxW="sm">
+          </Card.Description>
-          <Card.Header>
+        </Card.Header>
-            <Card.Title>Neuen Nutzer erstellen</Card.Title>
+        <Card.Body>
-            <Card.Description>
+          <Stack gap="4" w="full">
-              Füllen Sie das folgende Formular aus, um einen Nutzer zu
+            <Field.Root>
-              erstellen.
+              <Field.Label>Username</Field.Label>
-            </Card.Description>
+              <Input id="username" />
-          </Card.Header>
+            </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
              );
-          <Card.Body>
+              if (!username || !password || Number.isNaN(role)) return;
            <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>
-              {/* Kontrollierte Checkbox */}
+              const res = await createUser(username, role, password);
-              <Checkbox.Root
+              if (res.success) {
-                checked={admin}
+                alert(
-                onCheckedChange={(e: any) => setAdmin(Boolean(e?.checked ?? e))}
+                  "success",
-              >
+                  "Nutzer erstellt",
-                <Checkbox.HiddenInput />
+                  "Der Nutzer wurde erfolgreich erstellt."
                <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
                );
-                const firstname =
+                onClose();
-                  (
+              } else {
-                    document.getElementById("firstname") as HTMLInputElement
+                alert(
-                  )?.value.trim() || "";
+                  "error",
-                const lastname =
+                  "Fehler beim Erstellen des Nutzers",
-                  (
+                  "Es gab einen Fehler beim Erstellen des Nutzers. Vielleicht gibt es bereits einen Nutzer mit diesem Benutzernamen."
                    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();
-                if (res.success) {
+              }
-                  alert(
+            }}
-                    "success",
+          >
-                    "Nutzer erstellt",
+            Erstellen
-                    "Der Nutzer wurde erfolgreich erstellt."
+          </Button>
-                  );
+        </Card.Footer>
-                  onClose();
+      </Card.Root>
                } 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>
  );
 };
@@ -25,19 +25,15 @@ const AddItemForm: React.FC<AddItemFormProps> = ({ onClose, alert }) => {
        <Card.Body>
          <Stack gap="4" w="full">
            <Field.Root>
-              <Field.Label>Gegenstandsname (muss einzigartig sein)</Field.Label>
+              <Field.Label>Gegenstandsname</Field.Label>
              <Input id="item_name" placeholder="z.B. Laptop" />
            </Field.Root>
            <Field.Root>
              <Field.Label>Schließfachnummer</Field.Label>
              <Input id="safe_nr" placeholder="Nummer 1 - 6" />
            </Field.Root>
            <Field.Root>
              <Field.Label>Ausleih-Berechtigung (Rolle)</Field.Label>
              <Input
                id="can_borrow_role"
                type="number"
-                placeholder="Zahl (1 - 6)"
+                placeholder="Zahl (1 - 4)"
              />
            </Field.Root>
          </Stack>
@@ -57,15 +53,10 @@ const AddItemForm: React.FC<AddItemFormProps> = ({ onClose, alert }) => {
                (document.getElementById("can_borrow_role") as HTMLInputElement)
                  ?.value
              );
              const safeNrValue = (
                document.getElementById("safe_nr") as HTMLInputElement
              )?.value.trim();
              const safeNr = safeNrValue === "" ? null : safeNrValue;
              if (!name || Number.isNaN(role)) return;
-              const res = await createItem(name, role, safeNr);
+              const res = await createItem(name, role);
              if (res.success) {
                alert(
                  "success",
@@ -30,19 +30,18 @@ import {
 } from "@/utils/userActions";
 import AddItemForm from "./AddItemForm";
 import { formatDateTime } from "@/utils/userFuncs";
-import { API_BASE } from "@/config/api.config";
+
 const API_BASE =
  (import.meta as any).env?.VITE_BACKEND_URL ||
  import.meta.env.VITE_BACKEND_URL ||
  "http://localhost:8002";
 type Items = {
  id: number;
  item_name: string;
  can_borrow_role: string;
-  in_safe: boolean;
+  inSafe: boolean;
  safe_nr: string;
  door_key: string;
  entry_created_at: string;
  entry_updated_at: string;
  last_borrowed_person: string | null;
  currently_borrowing: string | null;
 };
 const ItemTable: React.FC = () => {
@@ -57,32 +56,20 @@ const ItemTable: React.FC = () => {
  const handleItemNameChange = (id: number, value: string) => {
    setItems((prev) =>
-      prev.map((it) => (it.id === id ? { ...it, item_name: value } : it)),
+      prev.map((it) => (it.id === id ? { ...it, item_name: value } : it))
    );
  };
  const handleCanBorrowRoleChange = (id: number, value: string) => {
    setItems((prev) =>
-      prev.map((it) => (it.id === id ? { ...it, can_borrow_role: value } : it)),
+      prev.map((it) => (it.id === id ? { ...it, can_borrow_role: value } : it))
    );
  };
  const handleLockerNumberChange = (id: number, value: string) => {
    setItems((prev) =>
      prev.map((it) => (it.id === id ? { ...it, safe_nr: value } : it)),
    );
  };
  const handleDoorKeyChange = (id: number, value: string) => {
    setItems((prev) =>
      prev.map((it) => (it.id === id ? { ...it, door_key: value } : it)),
    );
  };
  const setError = (
    status: "error" | "success",
    message: string,
-    description: string,
+    description: string
  ) => {
    setIsError(false);
    setErrorStatus(status);
@@ -95,15 +82,12 @@ const ItemTable: React.FC = () => {
    const fetchData = async () => {
      setIsLoading(true);
      try {
-        const response = await fetch(
+        const response = await fetch(`${API_BASE}/api/allItems`, {
-          `${API_BASE}/api/admin/item-data/all-items`,
+          method: "GET",
-          {
+          headers: {
-            method: "GET",
+            Authorization: `Bearer ${Cookies.get("token")}`,
            headers: {
              Authorization: `Bearer ${Cookies.get("token")}`,
            },
          },
-        );
+        });
        const data = await response.json();
        return data;
      } catch (error) {
@@ -191,234 +175,136 @@ const ItemTable: React.FC = () => {
        />
      )}
-      {/* make table fill available width, like UserTable */}
+      <Table.Root size="sm" striped>
-      {!isLoading && (
+        <Table.Header>
-        <Table.ScrollArea flex="1" minH={0} rounded="md" mt={4}>
+          <Table.Row>
-          <Table.Root
+            <Table.ColumnHeader>
-            size="sm"
+              <strong>#</strong>
-            striped
+            </Table.ColumnHeader>
-            stickyHeader
+            <Table.ColumnHeader>
-            css={{
+              <strong>Gegenstand</strong>
-              "& [data-sticky]": {
+            </Table.ColumnHeader>
-                position: "sticky",
+            <Table.ColumnHeader>
-                zIndex: 1,
+              <strong>Ausleih Berechtigung</strong>
-                bg: "bg",
+            </Table.ColumnHeader>
-
+            <Table.ColumnHeader>
-                _after: {
+              <strong>Im Schließfach</strong>
-                  content: '""',
+            </Table.ColumnHeader>
-                  position: "absolute",
+            <Table.ColumnHeader>
-                  pointerEvents: "none",
+              <strong>Eintrag erstellt am</strong>
-                  top: "0",
+            </Table.ColumnHeader>
-                  bottom: "-1px",
+            <Table.ColumnHeader>
-                  width: "32px",
+              <strong>Aktionen</strong>
-                },
+            </Table.ColumnHeader>
-              },
+          </Table.Row>
-
+        </Table.Header>
-              "& [data-sticky=end]": {
+        <Table.Body>
-                _after: {
+          {items.map((item) => (
-                  insetInlineEnd: "0",
+            <Table.Row key={item.id}>
-                  translate: "100% 0",
+              <Table.Cell>{item.id}</Table.Cell>
-                  shadow: "inset 8px 0px 8px -8px rgba(0, 0, 0, 0.16)",
+              <Table.Cell>
-                },
+                <Input
-              },
+                  onChange={(e) =>
-
+                    handleItemNameChange(item.id, e.target.value)
-              "& [data-sticky=start]": {
+                  }
-                _after: {
+                  value={item.item_name}
-                  insetInlineStart: "0",
+                />
-                  translate: "-100% 0",
+              </Table.Cell>
-                  shadow: "inset -8px 0px 8px -8px rgba(0, 0, 0, 0.16)",
+              <Table.Cell>
-                },
+                <Input
-              },
+                  onChange={(e) =>
-
+                    handleCanBorrowRoleChange(item.id, e.target.value)
-              "& thead tr": {
+                  }
-                shadow: "0 1px 0 0 {colors.border}",
+                  value={item.can_borrow_role}
-                "&:has(th[data-sticky])": {
+                />
-                  zIndex: 2,
+              </Table.Cell>
-                },
+              <Table.Cell>
-              },
+                <Button
-            }}
+                  onClick={() =>
-          >
+                    changeSafeState(item.id).then(() => setReload(!reload))
-            <Table.Header>
+                  }
-              <Table.Row>
+                  size="xs"
-                <Table.ColumnHeader>
+                  rounded="full"
-                  <strong>#</strong>
+                  px={3}
-                </Table.ColumnHeader>
+                  py={1}
-                <Table.ColumnHeader>
+                  gap={2}
-                  <strong>Gegenstand</strong>
+                  variant="ghost"
-                </Table.ColumnHeader>
+                  color={item.inSafe ? "green.600" : "red.600"}
-                <Table.ColumnHeader>
+                  borderWidth="1px"
-                  <strong>Ausleih Berechtigung</strong>
+                  borderColor={item.inSafe ? "green.300" : "red.300"}
-                </Table.ColumnHeader>
+                  _hover={{
-                <Table.ColumnHeader>
+                    bg: item.inSafe ? "green.50" : "red.50",
-                  <strong>Im Schließfach</strong>
+                    borderColor: item.inSafe ? "green.400" : "red.400",
-                </Table.ColumnHeader>
+                    transform: "translateY(-1px)",
-                <Table.ColumnHeader width="1%" whiteSpace="nowrap">
+                    shadow: "sm",
-                  <strong>Schließfachnummer</strong>
+                  }}
-                </Table.ColumnHeader>
+                  _active={{ transform: "translateY(0)" }}
-                <Table.ColumnHeader width="1%" whiteSpace="nowrap">
+                  aria-label={
-                  <strong>Schlüssel</strong>
+                    item.inSafe ? "Mark as not in safe" : "Mark as in safe"
-                </Table.ColumnHeader>
+                  }
-                <Table.ColumnHeader>
+                >
-                  <strong>Eintrag erstellt am</strong>
+                  <Icon
-                </Table.ColumnHeader>
+                    as={item.inSafe ? CheckCircle2 : XCircle}
-                <Table.ColumnHeader>
+                    boxSize={3.5}
-                  <strong>Eintrag aktualisiert am</strong>
+                    mr={2}
-                </Table.ColumnHeader>
+                  />
-                <Table.ColumnHeader>
+                  <Text as="span" fontSize="xs" fontWeight="semibold">
-                  <strong>LaP *</strong>
+                    {item.inSafe ? "Yes" : "No"}
-                </Table.ColumnHeader>
+                  </Text>
-                <Table.ColumnHeader>
+                </Button>
-                  <strong>Dav **</strong>
+              </Table.Cell>
-                </Table.ColumnHeader>
+              <Table.Cell>{formatDateTime(item.entry_created_at)}</Table.Cell>
-                <Table.ColumnHeader width="1%" whiteSpace="nowrap">
+              <Table.Cell>
-                  <strong>Aktionen</strong>
+                <Button
-                </Table.ColumnHeader>
+                  onClick={() =>
-              </Table.Row>
+                    handleEditItems(
-            </Table.Header>
+                      item.id,
-            <Table.Body>
+                      item.item_name,
-              {items.map((item) => (
+                      item.can_borrow_role
-                <Table.Row key={item.id}>
+                    ).then((response) => {
-                  <Table.Cell>{item.id}</Table.Cell>
+                      if (response.success) {
-                  <Table.Cell>
+                        setError(
-                    <Input
+                          "success",
-                      size="sm"
+                          "Gegenstand erfolgreich bearbeitet!",
-                      w="max-content"
+                          "Gegenstand " +
-                      onChange={(e) =>
+                            '"' +
-                        handleItemNameChange(item.id, e.target.value)
+                            item.item_name +
                            '" mit ID ' +
                            item.id +
                            " bearbeitet."
                        );
                      }
-                      value={item.item_name}
+                    })
-                    />
+                  }
-                  </Table.Cell>
+                  colorPalette="teal"
-                  <Table.Cell>
+                  size="sm"
-                    <Input
+                >
-                      size="sm"
+                  <Save />
-                      w="max-content"
+                </Button>
-                      onChange={(e) =>
+                <Button
-                        handleCanBorrowRoleChange(item.id, e.target.value)
+                  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."
                        );
                      }
-                      value={item.can_borrow_role}
+                    })
-                    />
+                  }
-                  </Table.Cell>
+                  colorPalette="red"
-                  <Table.Cell>
+                  size="sm"
-                    <Button
+                  ml={2}
-                      onClick={() =>
+                >
-                        changeSafeState(item.id).then(() => setReload(!reload))
+                  <Trash2 />
-                      }
+                </Button>
-                      size="xs"
+              </Table.Cell>
-                      rounded="full"
+            </Table.Row>
-                      px={3}
+          ))}
-                      py={1}
+        </Table.Body>
-                      gap={2}
+      </Table.Root>
                      variant="ghost"
                      color={item.in_safe ? "green.600" : "red.600"}
                      borderWidth="1px"
                      borderColor={item.in_safe ? "green.300" : "red.300"}
                      _hover={{
                        bg: item.in_safe ? "green.50" : "red.50",
                        borderColor: item.in_safe ? "green.400" : "red.400",
                        transform: "translateY(-1px)",
                        shadow: "sm",
                      }}
                      _active={{ transform: "translateY(0)" }}
                      aria-label={
                        item.in_safe ? "Mark as not in safe" : "Mark as in safe"
                      }
                    >
                      <Icon
                        as={item.in_safe ? CheckCircle2 : XCircle}
                        boxSize={3.5}
                        mr={2}
                      />
                      <Text as="span" fontSize="xs" fontWeight="semibold">
                        {item.in_safe ? "Yes" : "No"}
                      </Text>
                    </Button>
                  </Table.Cell>
                  <Table.Cell>
                    <Input
                      size="sm"
                      w="max-content"
                      onChange={(e) =>
                        handleLockerNumberChange(item.id, e.target.value)
                      }
                      value={item.safe_nr}
                    />
                  </Table.Cell>
                  <Table.Cell>
                    <Input
                      size="sm"
                      w="max-content"
                      onChange={(e) =>
                        handleDoorKeyChange(item.id, e.target.value)
                      }
                      value={item.door_key}
                    />
                  </Table.Cell>
                  <Table.Cell>
                    {formatDateTime(item.entry_created_at)}
                  </Table.Cell>
                  <Table.Cell>
                    {formatDateTime(item.entry_updated_at)}
                  </Table.Cell>
                  <Table.Cell>{item.last_borrowed_person}</Table.Cell>
                  <Table.Cell>{item.currently_borrowing}</Table.Cell>
                  <Table.Cell whiteSpace="nowrap">
                    <Button
                      onClick={() =>
                        handleEditItems(
                          item.id,
                          item.item_name,
                          item.safe_nr,
                          item.door_key,
                          item.can_borrow_role,
                        ).then((response) => {
                          if (response.success) {
                            setError(
                              "success",
                              "Gegenstand erfolgreich bearbeitet!",
                              "Gegenstand " +
                                '"' +
                                item.item_name +
                                '" mit ID ' +
                                item.id +
                                " bearbeitet.",
                            );
                          }
                        })
                      }
                      colorPalette="teal"
                      size="sm"
                    >
                      <Save />
                    </Button>
                    <Button
                      onClick={() =>
                        deleteItem(item.id).then((response) => {
                          if (response.success) {
                            setItems(items.filter((i) => i.id !== item.id));
                            setError(
                              "success",
                              "Gegenstand gelöscht",
                              "Der Gegenstand wurde erfolgreich gelöscht.",
                            );
                          }
                        })
                      }
                      colorPalette="red"
                      size="sm"
                      ml={2}
                    >
                      <Trash2 />
                    </Button>
                  </Table.Cell>
                </Table.Row>
              ))}
            </Table.Body>
          </Table.Root>
        </Table.ScrollArea>
      )}
      <Text>* LaP = Letzte ausleihende Person</Text>
      <Text>** Dav = Derzeit ausgeliehen von</Text>
    </>
  );
 };
@@ -1,6 +1,5 @@
 import React from "react";
 import {
  Box,
  Table,
  Spinner,
  Text,
@@ -18,7 +17,11 @@ import MyAlert from "./myChakra/MyAlert";
 import { formatDateTime } from "@/utils/userFuncs";
 import { Trash2, RefreshCcwDot } from "lucide-react";
 import { deleteLoan } from "@/utils/userActions";
-import { API_BASE } from "@/config/api.config";
+
 const API_BASE =
  (import.meta as any).env?.VITE_BACKEND_URL ||
  import.meta.env.VITE_BACKEND_URL ||
  "http://localhost:8002";
 const LoanTable: React.FC = () => {
  const [items, setItems] = useState<Loan[]>([]);
@@ -32,7 +35,7 @@ const LoanTable: React.FC = () => {
  const setError = (
    status: "error" | "success",
    message: string,
-    description: string,
+    description: string
  ) => {
    setIsError(false);
    setErrorStatus(status);
@@ -52,22 +55,18 @@ const LoanTable: React.FC = () => {
    created_at: string;
    loaned_items_name: string[];
    deleted: boolean;
    note: string;
  };
  useEffect(() => {
    const fetchData = async () => {
      setIsLoading(true);
      try {
-        const response = await fetch(
+        const response = await fetch(`${API_BASE}/api/allLoans`, {
-          `${API_BASE}/api/admin/loan-data/all-loans`,
+          method: "GET",
-          {
+          headers: {
-            method: "GET",
+            Authorization: `Bearer ${Cookies.get("token")}`,
            headers: {
              Authorization: `Bearer ${Cookies.get("token")}`,
            },
          },
-        );
+        });
        const data = await response.json();
        return data;
      } catch (error) {
@@ -84,7 +83,7 @@ const LoanTable: React.FC = () => {
  }, [reload]);
  return (
-    <Box h="full" display="flex" flexDirection="column" minH={0}>
+    <>
      {/* Action toolbar */}
      <HStack
        mb={4}
@@ -132,131 +131,82 @@ const LoanTable: React.FC = () => {
        </VStack>
      )}
      {!isLoading && (
-        <Table.ScrollArea flex="1" minH={0} rounded="md" mt={4}>
+        <Table.Root size="sm" striped>
-          <Table.Root
+          <Table.Header>
-            size="sm"
+            <Table.Row>
-            striped
+              <Table.ColumnHeader>
-            stickyHeader
+                <strong>#</strong>
-            css={{
+              </Table.ColumnHeader>
-              "& [data-sticky]": {
+              <Table.ColumnHeader>
-                position: "sticky",
+                <strong>Besitzer</strong>
-                zIndex: 1,
+              </Table.ColumnHeader>
-                bg: "bg",
+              <Table.ColumnHeader>
-
+                <strong>Ausleih code</strong>
-                _after: {
+              </Table.ColumnHeader>
-                  content: '""',
+              <Table.ColumnHeader>
-                  position: "absolute",
+                <strong>Startdatum</strong>
-                  pointerEvents: "none",
+              </Table.ColumnHeader>
-                  top: "0",
+              <Table.ColumnHeader>
-                  bottom: "-1px",
+                <strong>Enddatum</strong>
-                  width: "32px",
+              </Table.ColumnHeader>
-                },
+              <Table.ColumnHeader>
-              },
+                <strong>Ausleihdatum</strong>
-
+              </Table.ColumnHeader>
-              "& [data-sticky=end]": {
+              <Table.ColumnHeader>
-                _after: {
+                <strong>Rückgabedatum</strong>
-                  insetInlineEnd: "0",
+              </Table.ColumnHeader>
-                  translate: "100% 0",
+              <Table.ColumnHeader>
-                  shadow: "inset 8px 0px 8px -8px rgba(0, 0, 0, 0.16)",
+                <strong>Erstellt am</strong>
-                },
+              </Table.ColumnHeader>
-              },
+              <Table.ColumnHeader>
-
+                <strong>Ausgeliehene Artikel</strong>
-              "& [data-sticky=start]": {
+              </Table.ColumnHeader>
-                _after: {
+              <Table.ColumnHeader>
-                  insetInlineStart: "0",
+                <strong>Aktionen</strong>
-                  translate: "-100% 0",
+              </Table.ColumnHeader>
-                  shadow: "inset -8px 0px 8px -8px rgba(0, 0, 0, 0.16)",
+            </Table.Row>
-                },
+          </Table.Header>
-              },
+          <Table.Body>
-
+            {items.map((item) => (
-              "& thead tr": {
+              <Table.Row color={item.deleted ? "red" : "white"} key={item.id}>
-                shadow: "0 1px 0 0 {colors.border}",
+                <Table.Cell>{item.id}</Table.Cell>
-                "&:has(th[data-sticky])": {
+                <Table.Cell>{item.username}</Table.Cell>
-                  zIndex: 2,
+                <Table.Cell>
-                },
+                  <Code>{item.loan_code}</Code>
-              },
+                </Table.Cell>
-            }}
+                <Table.Cell>{formatDateTime(item.start_date)}</Table.Cell>
-          >
+                <Table.Cell>{formatDateTime(item.end_date)}</Table.Cell>
-            <Table.Header>
+                <Table.Cell>{formatDateTime(item.take_date)}</Table.Cell>
-              <Table.Row>
+                <Table.Cell>{formatDateTime(item.returned_date)}</Table.Cell>
-                <Table.ColumnHeader>
+                <Table.Cell>{formatDateTime(item.created_at)}</Table.Cell>
-                  <strong>#</strong>
+                <Table.Cell>{item.loaned_items_name.join(", ")}</Table.Cell>
-                </Table.ColumnHeader>
+                <Table.Cell>
-                <Table.ColumnHeader>
+                  <Button
-                  <strong>Besitzer</strong>
+                    onClick={() =>
-                </Table.ColumnHeader>
+                      deleteLoan(item.id).then((response) => {
-                <Table.ColumnHeader>
+                        if (response.success) {
-                  <strong>Ausleihcode</strong>
+                          setItems(items.filter((i) => i.id !== item.id));
-                </Table.ColumnHeader>
+                          setError(
-                <Table.ColumnHeader>
+                            "success",
-                  <strong>Startdatum</strong>
+                            "Loan deleted",
-                </Table.ColumnHeader>
+                            "The loan has been successfully deleted."
-                <Table.ColumnHeader>
+                          );
-                  <strong>Enddatum</strong>
+                        }
-                </Table.ColumnHeader>
+                      })
-                <Table.ColumnHeader>
+                    }
-                  <strong>Ausleihdatum</strong>
+                    colorPalette="red"
-                </Table.ColumnHeader>
+                    size="sm"
-                <Table.ColumnHeader>
+                    ml={2}
-                  <strong>Rückgabedatum</strong>
+                  >
-                </Table.ColumnHeader>
+                    <Trash2 />
-                <Table.ColumnHeader>
+                  </Button>
-                  <strong>Erstellt am</strong>
+                </Table.Cell>
                </Table.ColumnHeader>
                <Table.ColumnHeader>
                  <strong>Ausgeliehene Artikel</strong>
                </Table.ColumnHeader>
                <Table.ColumnHeader>
                  <strong>Notiz</strong>
                </Table.ColumnHeader>
                <Table.ColumnHeader>
                  <strong>Aktionen</strong>
                </Table.ColumnHeader>
              </Table.Row>
-            </Table.Header>
+            ))}
-            <Table.Body>
+          </Table.Body>
-              {items.map((item) => (
+        </Table.Root>
                <Table.Row color={item.deleted ? "red" : "white"} key={item.id}>
                  <Table.Cell>{item.id}</Table.Cell>
                  <Table.Cell>{item.username}</Table.Cell>
                  <Table.Cell>
                    <Code>{item.loan_code}</Code>
                  </Table.Cell>
                  <Table.Cell>{formatDateTime(item.start_date)}</Table.Cell>
                  <Table.Cell>{formatDateTime(item.end_date)}</Table.Cell>
                  <Table.Cell>{formatDateTime(item.take_date)}</Table.Cell>
                  <Table.Cell>{formatDateTime(item.returned_date)}</Table.Cell>
                  <Table.Cell>{formatDateTime(item.created_at)}</Table.Cell>
                  <Table.Cell>{item.loaned_items_name.join(", ")}</Table.Cell>
                  <Table.Cell>{item.note}</Table.Cell>
                  <Table.Cell>
                    <Button
                      onClick={() =>
                        deleteLoan(item.id).then((response) => {
                          if (response.success) {
                            setItems(items.filter((i) => i.id !== item.id));
                            setError(
                              "success",
                              "Loan deleted",
                              "The loan has been successfully deleted.",
                            );
                          }
                        })
                      }
                      colorPalette="red"
                      size="sm"
                      ml={2}
                    >
                      <Trash2 />
                    </Button>
                  </Table.Cell>
                </Table.Row>
              ))}
            </Table.Body>
          </Table.Root>
        </Table.ScrollArea>
      )}
-    </Box>
+    </>
  );
 };
@@ -1,175 +0,0 @@
 import React from "react";
 import {
  Table,
  Spinner,
  Text,
  VStack,
  Heading,
  Switch,
 } from "@chakra-ui/react";
 import MyAlert from "./myChakra/MyAlert";
 import Cookies from "js-cookie";
 import { useState, useEffect } from "react";
 import { formatDateTime } from "@/utils/userFuncs";
 import { API_BASE } from "@/config/api.config";
 type Items = {
  id: number;
  function_name: string;
  active: boolean;
  entry_created_at: string;
  updated_at: string | null;
 };
 const ServerConfig: React.FC = () => {
  const [items, setItems] = useState<Items[]>([]);
  const [errorStatus, setErrorStatus] = useState<"error" | "success">("error");
  const [errorMessage, setErrorMessage] = useState("");
  const [errorDsc, setErrorDsc] = useState("");
  const [isError, setIsError] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [reload, setReload] = useState(false);
  const handleSwitchChange = async (id: number, newState: boolean) => {
    try {
      const response = await fetch(
        `${API_BASE}/api/admin/server-config/update?functionName=${encodeURIComponent(
          items.find((item) => item.id === id)?.function_name || "",
        )}&active=${newState}`,
        {
          method: "POST",
          headers: {
            Authorization: `Bearer ${Cookies.get("token")}`,
          },
        },
      );
      if (response.ok) {
        setReload((prev) => !prev);
        setError(
          "success",
          "Status updated",
          "The function status was updated successfully.",
        );
      } else {
        setError(
          "error",
          "Failed to update status",
          "There is an error updating the function status.",
        );
      }
    } catch (error) {
      setError(
        "error",
        "Failed to update status",
        "There is an error updating the function status.",
      );
    }
  };
  const setError = (
    status: "error" | "success",
    message: string,
    description: string,
  ) => {
    setIsError(false);
    setErrorStatus(status);
    setErrorMessage(message);
    setErrorDsc(description);
    setIsError(true);
  };
  useEffect(() => {
    const fetchData = async () => {
      setIsLoading(true);
      try {
        const response = await fetch(
          `${API_BASE}/api/admin/server-config/all`,
          {
            method: "GET",
            headers: {
              Authorization: `Bearer ${Cookies.get("token")}`,
            },
          },
        );
        const data = await response.json();
        return data.data;
      } catch (error) {
        setError("error", "Failed to fetch items", "There is an error");
      } finally {
        setIsLoading(false);
      }
    };
    fetchData().then((data) => {
      if (Array.isArray(data)) {
        setItems(data);
      }
    });
  }, [reload]);
  return (
    <>
      <Heading marginBottom={4} size="2xl">
        Server Konfiguration
      </Heading>
      {isError && (
        <MyAlert
          status={errorStatus}
          description={errorDsc}
          title={errorMessage}
        />
      )}
      {isLoading && (
        <VStack colorPalette="teal">
          <Spinner color="colorPalette.600" />
          <Text color="colorPalette.600">Loading...</Text>
        </VStack>
      )}
      <Table.Root size="sm" striped w="100%" style={{ tableLayout: "auto" }}>
        <Table.Header>
          <Table.Row>
            <Table.ColumnHeader width="1%" whiteSpace="nowrap">
              <strong>#</strong>
            </Table.ColumnHeader>
            <Table.ColumnHeader>
              <strong>Service Name</strong>
            </Table.ColumnHeader>
            <Table.ColumnHeader>
              <strong>Toggle</strong>
            </Table.ColumnHeader>
            <Table.ColumnHeader>
              <strong>Eintrag erstellt am</strong>
            </Table.ColumnHeader>
          </Table.Row>
        </Table.Header>
        <Table.Body>
          {items.map((item) => (
            <Table.Row key={item.id}>
              <Table.Cell whiteSpace="nowrap">{item.id}</Table.Cell>
              <Table.Cell fontFamily="mono">{item.function_name}</Table.Cell>
              <Table.Cell>
                <Switch.Root
                  checked={item.active}
                  onCheckedChange={() =>
                    handleSwitchChange(item.id, !item.active)
                  }
                >
                  <Switch.HiddenInput />
                  <Switch.Control>
                    <Switch.Thumb />
                  </Switch.Control>
                  <Switch.Label />
                </Switch.Root>
              </Table.Cell>
              <Table.Cell whiteSpace="nowrap">
                {formatDateTime(item.entry_created_at)}
              </Table.Cell>
            </Table.Row>
          ))}
        </Table.Body>
      </Table.Root>
    </>
  );
 };
 export default ServerConfig;
@@ -10,7 +10,6 @@ import {
  HStack,
  IconButton,
  Heading,
  Switch, // neu
 } from "@chakra-ui/react";
 import { Tooltip } from "@/components/ui/tooltip";
 import { fetchUserData } from "@/utils/fetcher";
@@ -24,13 +23,9 @@ import ChangePWform from "./ChangePWform";
 type User = {
  id: number;
  username: string;
-  first_name: string;
+  password: string;
-  last_name: string;
+  role: string;
  email: string;
  is_admin: boolean;
  role: number;
  entry_created_at: string;
  entry_updated_at: string;
 };
 const UserTable: React.FC = () => {
@@ -57,20 +52,10 @@ const UserTable: React.FC = () => {
    setIsError(true);
  };
-  const handleInputChange = (userId: number, field: string, value: any) => {
+  const handleInputChange = (userId: number, field: string, value: string) => {
    setUsers((prevUsers) =>
      prevUsers.map((user) =>
-        user.id === userId
+        user.id === userId ? { ...user, [field]: value } : user
          ? {
              ...user,
              [field]:
                field === "role"
                  ? Number(value)
                  : field === "is_admin"
                  ? value === true || value === "true" || value === 1
                  : value,
            }
          : user
      )
    );
  };
@@ -85,6 +70,7 @@ const UserTable: React.FC = () => {
      setIsLoading(true);
      try {
        const data = await fetchUserData();
        console.log("user api response", data);
        if (Array.isArray(data)) {
          setUsers(data);
        } else {
@@ -194,45 +180,25 @@ const UserTable: React.FC = () => {
        </VStack>
      )}
      {!isLoading && (
-        <Table.Root
+        <Table.Root size="sm" striped>
          size="sm"
          striped
          w="100%"
          style={{ tableLayout: "auto" }} // Spalten nach Content
        >
          <Table.Header>
            <Table.Row>
-              <Table.ColumnHeader width="1%" whiteSpace="nowrap">
+              <Table.ColumnHeader>
                <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 width="1%" whiteSpace="nowrap">
+              <Table.ColumnHeader>
                <strong>Rolle</strong>
              </Table.ColumnHeader>
-              <Table.ColumnHeader whiteSpace="nowrap">
+              <Table.ColumnHeader>
                <strong>Eintrag erstellt am</strong>
              </Table.ColumnHeader>
-              <Table.ColumnHeader whiteSpace="nowrap">
+              <Table.ColumnHeader>
                <strong>Eintrag aktualisiert am</strong>
              </Table.ColumnHeader>
              <Table.ColumnHeader width="1%" whiteSpace="nowrap">
                <strong>Aktionen</strong>
              </Table.ColumnHeader>
            </Table.Row>
@@ -240,86 +206,37 @@ const UserTable: React.FC = () => {
          <Table.Body>
            {users.map((user) => (
              <Table.Row key={user.id}>
-                <Table.Cell whiteSpace="nowrap">{user.id}</Table.Cell>
+                <Table.Cell>{user.id}</Table.Cell>
                <Table.Cell>{user.username}</Table.Cell>
                <Table.Cell>
                  <Input
                    size="sm"
                    value={user.first_name ?? ""}
                    onChange={(e) =>
-                      handleInputChange(user.id, "first_name", e.target.value)
+                      handleInputChange(user.id, "username", e.target.value)
                    }
                    value={user.username}
                  />
                </Table.Cell>
                <Table.Cell>
-                  <Input
+                  <Button onClick={() => handlePasswordChange(user.username)}>
                    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">
+                <Table.Cell>
                  <Input
                    type="number"
                    size="sm"
                    onChange={(e) =>
                      handleInputChange(user.id, "role", e.target.value)
                    }
                    value={user.role}
                    width="70px"
                  />
                </Table.Cell>
-                <Table.Cell whiteSpace="nowrap">
+                <Table.Cell>{formatDateTime(user.entry_created_at)}</Table.Cell>
-                  {formatDateTime(user.entry_created_at)}
+                <Table.Cell>
                </Table.Cell>
                <Table.Cell whiteSpace="nowrap">
                  {formatDateTime(user.entry_updated_at)}
                </Table.Cell>
                <Table.Cell whiteSpace="nowrap">
                  <Button
                    onClick={() =>
                      handleEdit(
                        user.id,
-                        user.first_name,
+                        user.username,
-                        user.last_name,
+                        user.role,
                        user.email,
                        user.is_admin,
                        Number(user.role)
                      ).then((response) => {
                        if (response.success) {
                          setError(
@@ -1,4 +0,0 @@
 export const API_BASE =
  (import.meta as any).env?.VITE_BACKEND_URL ||
  import.meta.env.VITE_BACKEND_URL ||
  "http://localhost:8002";
@@ -1,8 +1,12 @@
 import Cookies from "js-cookie";
-import { API_BASE } from "@/config/api.config";
+
 const API_BASE =
  (import.meta as any).env?.VITE_BACKEND_URL ||
  import.meta.env.VITE_BACKEND_URL ||
  "http://localhost:8002";
 export const fetchUserData = async () => {
-  const response = await fetch(`${API_BASE}/api/admin/user-data/users`, {
+  const response = await fetch(`${API_BASE}/api/allUsers`, {
    headers: {
      Authorization: `Bearer ${Cookies.get("token")}`,
    },
@@ -1,5 +1,9 @@
 import Cookies from "js-cookie";
-import { API_BASE } from "@/config/api.config";
+
 const API_BASE =
  (import.meta as any).env?.VITE_BACKEND_URL ||
  import.meta.env.VITE_BACKEND_URL ||
  "http://localhost:8002";
 export type LoginSuccess = { success: true };
 export type LoginFailure = {
@@ -14,20 +18,12 @@ export const loginFunc = async (
  password: string
 ): Promise<LoginResult> => {
  try {
-    const response = await fetch(`${API_BASE}/api/admin/user-mgmt/login`, {
+    const response = await fetch(`${API_BASE}/api/loginAdmin`, {
      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,
@@ -43,7 +39,6 @@ export const loginFunc = async (
    return { success: true };
  } catch (error) {
    console.error("Error logging in:", error);
    return {
      success: false,
      message: "Login failed!",
@@ -1,10 +1,14 @@
 import Cookies from "js-cookie";
-import { API_BASE } from "@/config/api.config";
+
 const API_BASE =
  (import.meta as any).env?.VITE_BACKEND_URL ||
  import.meta.env.VITE_BACKEND_URL ||
  "http://localhost:8002";
 export const handleDelete = async (userId: number) => {
  try {
    const response = await fetch(
-      `${API_BASE}/api/admin/user-data/delete-user/${userId}`,
+      `${API_BASE}/api/deleteUser/${userId}`,
      {
        method: "DELETE",
        headers: {
@@ -24,28 +28,19 @@ export const handleDelete = async (userId: number) => {
 export const handleEdit = async (
  userId: number,
-  first_name: string,
+  username: string,
-  last_name: string,
+  role: string
  email: string,
  is_admin: boolean,
  role: number
 ) => {
  try {
    const response = await fetch(
-      `${API_BASE}/api/admin/user-data/edit-user/${userId}`,
+      `${API_BASE}/api/editUser/${userId}`,
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${Cookies.get("token")}`,
        },
-        body: JSON.stringify({
+        body: JSON.stringify({ username, role }),
          first_name,
          last_name,
          role,
          email,
          is_admin,
        }),
      }
    );
    if (!response.ok) {
@@ -61,32 +56,17 @@ 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(
+    const response = await fetch(`${API_BASE}/api/createUser`, {
-      `${API_BASE}/api/admin/user-data/create-user`,
+      method: "POST",
-      {
+      headers: {
-        method: "POST",
+        "Content-Type": "application/json",
-        headers: {
+        Authorization: `Bearer ${Cookies.get("token")}`,
-          "Content-Type": "application/json",
+      },
-          Authorization: `Bearer ${Cookies.get("token")}`,
+      body: JSON.stringify({ username, role, password }),
-        },
+    });
        body: JSON.stringify({
          username,
          role,
          password,
          isAdmin,
          email,
          first_name,
          last_name,
        }),
      }
    );
    if (!response.ok) {
      throw new Error("Failed to create user");
    }
@@ -99,17 +79,14 @@ export const createUser = async (
 export const changePW = async (newPassword: string, username: string) => {
  try {
-    const response = await fetch(
+    const response = await fetch(`${API_BASE}/api/changePWadmin`, {
-      `${API_BASE}/api/admin/user-data/change-password`,
+      method: "POST",
-      {
+      headers: {
-        method: "POST",
+        "Content-Type": "application/json",
-        headers: {
+        Authorization: `Bearer ${Cookies.get("token")}`,
-          "Content-Type": "application/json",
+      },
-          Authorization: `Bearer ${Cookies.get("token")}`,
+      body: JSON.stringify({ newPassword, username }),
-        },
+    });
        body: JSON.stringify({ username, password: newPassword }),
      }
    );
    if (!response.ok) {
      throw new Error("Failed to change password");
    }
@@ -123,7 +100,7 @@ export const changePW = async (newPassword: string, username: string) => {
 export const deleteLoan = async (loanId: number) => {
  try {
    const response = await fetch(
-      `${API_BASE}/api/admin/loan-data/delete-loan/${loanId}`,
+      `${API_BASE}/api/deleteLoan/${loanId}`,
      {
        method: "DELETE",
        headers: {
@@ -144,7 +121,7 @@ export const deleteLoan = async (loanId: number) => {
 export const deleteItem = async (itemId: number) => {
  try {
    const response = await fetch(
-      `${API_BASE}/api/admin/item-data/delete-item/${itemId}`,
+      `${API_BASE}/api/deleteItem/${itemId}`,
      {
        method: "DELETE",
        headers: {
@@ -164,26 +141,22 @@ export const deleteItem = async (itemId: number) => {
 export const createItem = async (
  item_name: string,
-  can_borrow_role: number,
+  can_borrow_role: number
  lockerNumber: string | null
 ) => {
  try {
-    const response = await fetch(
+    const response = await fetch(`${API_BASE}/api/createItem`, {
-      `${API_BASE}/api/admin/item-data/create-item`,
+      method: "POST",
-      {
+      headers: {
-        method: "POST",
+        "Content-Type": "application/json",
-        headers: {
+        Authorization: `Bearer ${Cookies.get("token")}`,
-          "Content-Type": "application/json",
+      },
-          Authorization: `Bearer ${Cookies.get("token")}`,
+      body: JSON.stringify({ item_name, can_borrow_role }),
-        },
+    });
        body: JSON.stringify({ item_name, can_borrow_role, lockerNumber }),
      }
    );
    if (!response.ok) {
      return {
        success: false,
        message:
-          "Fehler beim Erstellen des Gegenstands. Der Name des Gegenstandes und die Schließfachnummer dürfen nicht mehrmals vergeben werden.",
+          "Fehler beim Erstellen des Gegenstands. Der Name des Gegenstandes darf nicht mehrmals vergeben werden.",
      };
    }
    return { success: true };
@@ -196,22 +169,17 @@ export const createItem = async (
 export const handleEditItems = async (
  itemId: number,
  item_name: string,
  safe_nr: string | null,
  door_key: string | null,
  can_borrow_role: string
 ) => {
  try {
-    const response = await fetch(
+    const response = await fetch(`${API_BASE}/api/updateItemByID`, {
-      `${API_BASE}/api/admin/item-data/edit-item/${itemId}`,
+      method: "POST",
-      {
+      headers: {
-        method: "POST",
+        "Content-Type": "application/json",
-        headers: {
+        Authorization: `Bearer ${Cookies.get("token")}`,
-          "Content-Type": "application/json",
+      },
-          Authorization: `Bearer ${Cookies.get("token")}`,
+      body: JSON.stringify({ itemId, item_name, can_borrow_role }),
-        },
+    });
        body: JSON.stringify({ item_name, safe_nr, door_key, can_borrow_role }),
      }
    );
    if (!response.ok) {
      throw new Error("Failed to edit item");
    }
@@ -225,9 +193,9 @@ export const handleEditItems = async (
 export const changeSafeState = async (itemId: number) => {
  try {
    const response = await fetch(
-      `${API_BASE}/api/admin/item-data/change-safe-state/${itemId}`,
+      `${API_BASE}/api/changeSafeState/${itemId}`,
      {
-        method: "POST",
+        method: "PUT",
        headers: {
          Authorization: `Bearer ${Cookies.get("token")}`,
        },
@@ -243,19 +211,16 @@ export const changeSafeState = async (itemId: number) => {
  }
 };
-export const createAPIentry = async (apiKey: string, name: string) => {
+export const createAPIentry = async (apiKey: string, user: string) => {
  try {
-    const response = await fetch(
+    const response = await fetch(`${API_BASE}/api/createAPIentry`, {
-      `${API_BASE}/api/admin/api-data/create-api-key`,
+      method: "POST",
-      {
+      headers: {
-        method: "POST",
+        "Content-Type": "application/json",
-        headers: {
+        Authorization: `Bearer ${Cookies.get("token")}`,
-          "Content-Type": "application/json",
+      },
-          Authorization: `Bearer ${Cookies.get("token")}`,
+      body: JSON.stringify({ apiKey, user }),
-        },
+    });
        body: JSON.stringify({ apiKey, entryName: name }),
      }
    );
    if (!response.ok) {
      return {
        success: false,
@@ -273,7 +238,7 @@ export const createAPIentry = async (apiKey: string, name: string) => {
 export const deleteAPKey = async (apiKeyId: number) => {
  try {
    const response = await fetch(
-      `${API_BASE}/api/admin/api-data/delete-api-key/${apiKeyId}`,
+      `${API_BASE}/api/deleteAPKey/${apiKeyId}`,
      {
        method: "DELETE",
        headers: {
@@ -1,11 +1,10 @@
 {
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "target": "ES2022",
+    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "types": ["vite/client"],
    "skipLibCheck": true,
    /* Bundler mode */
@@ -24,10 +23,14 @@
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true,
-    /* Path aliases */
+    /* Chakra / Pfad Aliases */
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
-    }
+    },
    "forceConsistentCasingInFileNames": true,
    "ignoreDeprecations": "6.0"
  },
  "include": ["src"]
 }
@@ -1,28 +1,12 @@
 # Build context is the repo root (npm workspaces share one root package-lock.json)
 FROM node:20-alpine
-ENV NODE_ENV=production
+WORKDIR /backend
 WORKDIR /app
-COPY package.json package-lock.json ./
+COPY package*.json ./
-COPY frontend/package.json frontend/
+RUN npm install
 COPY admin/package.json admin/
 COPY backend/package.json backend/
 RUN npm ci -w backend --omit=dev
-COPY backend/ backend/
+COPY . .
-# Generate info.json from the workspace package.json versions, without the "-dev" suffix
+EXPOSE 8002
 RUN node -e ' \
  const fs = require("fs"); \
  const v = (p) => "v" + JSON.parse(fs.readFileSync(p + "/package.json")).version.replace(/-dev$/, ""); \
  fs.writeFileSync("backend/info.json", JSON.stringify({ \
    "backend-info": { version: v("backend") }, \
    "frontend-info": { version: v("frontend") }, \
    "admin-panel-info": { version: v("admin") } \
  }, null, 4)); \
 '
-WORKDIR /app/backend
+CMD ["npm", "start"]
 EXPOSE 8004
 CMD ["npm", "start"]
@@ -1,11 +0,0 @@
 {
    "backend-info": {
        "version": "v2.2 (dev)"
    },
    "frontend-info": {
        "version": "v2.2 (dev)"
    },
    "admin-panel-info": {
        "version": "v1.4 (dev)"
    }
 }
@@ -1,11 +1,10 @@
 {
  "name": "backend",
-  "version": "2.1.1-dev",
+  "version": "1.0.0",
-  "private": true,
+  "main": "index.js",
  "main": "server.js",
  "scripts": {
-    "dev": "node --watch server.js",
+    "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "NODE_ENV=production node server.js"
+    "start": "node server.js"
  },
  "keywords": [],
  "author": "",
@@ -16,9 +15,8 @@
    "dotenv": "^17.2.1",
    "ejs": "^3.1.10",
    "express": "^5.1.0",
    "express-rate-limit": "^8.4.1",
    "jose": "^6.0.12",
    "mysql2": "^3.14.3",
-    "nodemailer": "^10.2.1"
+    "nodemailer": "^7.0.6"
  }
 }
@@ -1,41 +0,0 @@
 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;
@@ -1,37 +0,0 @@
 import mysql from "mysql2";
 import dotenv from "dotenv";
 dotenv.config();
 const pool = mysql
  .createPool({
    host: process.env.DB_HOST,
    user: process.env.DB_USER,
    password: process.env.DB_PASSWORD,
    database: process.env.DB_NAME,
  })
  .promise();
 export const 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 };
 };
@@ -1,82 +0,0 @@
 import mysql from "mysql2";
 import dotenv from "dotenv";
 dotenv.config();
 const pool = mysql
  .createPool({
    host: process.env.DB_HOST,
    user: process.env.DB_USER,
    password: process.env.DB_PASSWORD,
    database: process.env.DB_NAME,
  })
  .promise();
 export const 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, lockerNumber) => {
  const [result] = await pool.query(
    "INSERT INTO items (item_name, can_borrow_role, in_safe, safe_nr) VALUES (?, ?, ?, ?)",
    [item_name, can_borrow_role, true, lockerNumber]
  );
  if (result.affectedRows > 0) return { success: true };
  return { success: false };
 };
 export const editItemById = async (
  itemId,
  item_name,
  can_borrow_role,
  safe_nr,
  door_key
 ) => {
  let newSafeNr;
  if (safe_nr === null || safe_nr === "") {
    newSafeNr = null;
  } else {
    newSafeNr = safe_nr;
  }
  const [result] = await pool.query(
    "UPDATE items SET item_name = ?, can_borrow_role = ?, safe_nr = ?, door_key = ?, entry_updated_at = NOW() WHERE id = ?",
    [item_name, can_borrow_role, newSafeNr, door_key, 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 };
 };
@@ -1,26 +0,0 @@
 import mysql from "mysql2";
 import dotenv from "dotenv";
 dotenv.config();
 const pool = mysql
  .createPool({
    host: process.env.DB_HOST,
    user: process.env.DB_USER,
    password: process.env.DB_PASSWORD,
    database: process.env.DB_NAME,
  })
  .promise();
 export const getAllLoans = async () => {
  const [rows] = await pool.query("SELECT * FROM loans WHERE deleted_admin = 0;");
  return { success: true, data: rows };
 };
 export const deleteLoanById = async (loanId) => {
  const [result] = await pool.query(
    "UPDATE loans SET deleted = true, deleted_admin = true WHERE id = ?",
    [loanId],
  );
  if (result.affectedRows > 0) return { success: true };
  return { success: false };
 };
@@ -1,26 +0,0 @@
 import mysql from "mysql2";
 import dotenv from "dotenv";
 dotenv.config();
 const pool = mysql
  .createPool({
    host: process.env.DB_HOST,
    user: process.env.DB_USER,
    password: process.env.DB_PASSWORD,
    database: process.env.DB_NAME,
  })
  .promise();
 export const getAllFunctions = async () => {
  const [rows] = await pool.query("SELECT * FROM functions");
  return { success: true, data: rows };
 };
 export const updateFunctionStatus = async (functionName, active) => {
  const [result] = await pool.query(
    "UPDATE functions SET active = ? WHERE function_name = ?",
    [active, functionName],
  );
  if (result.affectedRows > 0) return { success: true };
  return { success: false };
 };
@@ -1,79 +0,0 @@
 import mysql from "mysql2";
 import dotenv from "dotenv";
 dotenv.config();
 const pool = mysql
  .createPool({
    host: process.env.DB_HOST,
    user: process.env.DB_USER,
    password: process.env.DB_PASSWORD,
    database: process.env.DB_NAME,
  })
  .promise();
 export const 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 (username, newPassword) => {
  const [result] = await pool.query(
    "UPDATE users SET password = ?, entry_updated_at = NOW() WHERE username = ?",
    [newPassword, username],
  );
  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 = ?, entry_updated_at = NOW() 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] };
 };
@@ -1,47 +0,0 @@
 import mysql from "mysql2";
 import dotenv from "dotenv";
 dotenv.config();
 const pool = mysql
  .createPool({
    host: process.env.DB_HOST,
    user: process.env.DB_USER,
    password: process.env.DB_PASSWORD,
    database: process.env.DB_NAME,
  })
  .promise();
 export const 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 };
 };
@@ -1,68 +0,0 @@
 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, lockerNumber } = req.body;
  const result = await createItem(item_name, can_borrow_role, lockerNumber);
  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, safe_nr, door_key } = req.body;
  const result = await editItemById(
    itemId,
    item_name,
    can_borrow_role,
    safe_nr,
    door_key
  );
  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;
@@ -1,30 +0,0 @@
 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;
@@ -1,50 +0,0 @@
 import express from "express";
 import { authenticateAdmin } from "../../services/authentication.js";
 const router = express.Router();
 import dotenv from "dotenv";
 dotenv.config();
 // database funcs import
 import {
  getAllFunctions,
  updateFunctionStatus,
 } from "./database/serverConfMgmt.database.js";
 // Route to get all functions and their statuses
 router.get("/all", async (req, res) => {
  try {
    const result = await getAllFunctions();
    if (result.success) {
      res.status(200).json({ data: result.data });
    } else {
      res.status(500).json({ message: "Failed to fetch functions" });
    }
  } catch (error) {
    res
      .status(500)
      .json({ message: "An error occurred", error: error.message });
  }
 });
 // Route to update the status of a function
 router.post("/update", async (req, res) => {
  const functionName = req.query.functionName;
  let active = req.query.active;
  if (active === "false") {
    active = 0;
  } else if (active === "true") {
    active = 1;
  } else {
    res.status(406).json({ message: "Got unexpected format" });
  }
  const result = await updateFunctionStatus(functionName, active);
  if (result.success) {
    res.status(200).json({ message: "Function status updated successfully" });
  } else {
    res.status(500).json({ message: "Failed to update function status" });
  }
 });
 export default router;
@@ -1,123 +0,0 @@
 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;
@@ -1,54 +0,0 @@
 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;
@@ -0,0 +1,599 @@
 import express from "express";
 import {
  loginFunc,
  getItemsFromDatabase,
  getLoansFromDatabase,
  getUserLoansFromDatabase,
  deleteLoanFromDatabase,
  getBorrowableItemsFromDatabase,
  createLoanInDatabase,
  onTake,
  loginAdmin,
  onReturn,
  getAllUsers,
  deleteUserID,
  handleEdit,
  createUser,
  getAllLoans,
  getAllItems,
  deleteItemID,
  createItem,
  changeUserPassword,
  changeUserPasswordFRONTEND,
  changeInSafeStateV2,
  updateItemByID,
  getAllApiKeys,
  createAPIentry,
  deleteAPKey,
  getLoanInfoWithID,
  SETdeleteLoanFromDatabase,
 } from "../services/database.js";
 import { authenticate, generateToken } from "../services/tokenService.js";
 const router = express.Router();
 import nodemailer from "nodemailer";
 import dotenv from "dotenv";
 dotenv.config();
 // Nice HTML + text templates for the loan email
 function buildLoanEmail({ user, items, startDate, endDate, createdDate }) {
  const brand = process.env.MAIL_BRAND_COLOR || "#0ea5e9";
  const itemsList =
    Array.isArray(items) && items.length
      ? `<ul style="margin:4px 0 0 18px; padding:0;">${items
          .map(
            (i) =>
              `<li style="margin:2px 0; color:#111827; line-height:1.3;">${i}</li>`
          )
          .join("")}</ul>`
      : "<span style='color:#111827;'>N/A</span>";
  return `<!doctype html>
 <html lang="de">
 <head>
  <meta charset="utf-8">
  <meta name="color-scheme" content="light">
  <meta name="supported-color-schemes" content="light">
  <meta name="x-apple-disable-message-reformatting">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <style>
    :root { color-scheme: light; supported-color-schemes: light; }
    body { margin:0; padding:0; }
    /* Mobile stacking */
    @media (max-width:480px) {
      .outer { width:100% !important; }
      .pad-sm { padding:16px !important; }
      .w-label { width:120px !important; }
    }
    /* Dark-mode override safety */
    @media (prefers-color-scheme: dark) {
      body, table, td, p, a, h1, h2, h3 { background:#ffffff !important; color:#111827 !important; }
      .brand-header { background:${brand} !important; color:#ffffff !important; }
      a { color:${brand} !important; }
    }
  </style>
 </head>
 <body bgcolor="#ffffff" style="background:#ffffff; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; color:#111827; -webkit-text-size-adjust:100%;">
  <!-- Preheader (hidden) -->
  <div style="display:none; max-height:0; overflow:hidden; opacity:0; mso-hide:all;">
    Neue Ausleihe erstellt – Übersicht der Buchung.
  </div>
  <div role="article" aria-roledescription="email" lang="de" style="padding:24px; background:#f2f4f7;">
    <table role="presentation" cellpadding="0" cellspacing="0" width="100%" class="outer" style="max-width:600px; margin:0 auto; background:#ffffff; border:1px solid #e5e7eb; border-radius:14px; overflow:hidden;">
      <tr>
        <td class="brand-header" style="padding:22px 26px; background:${brand}; color:#ffffff;">
          <h1 style="margin:0; font-size:18px; line-height:1.35; font-weight:600;">Neue Ausleihe erstellt</h1>
        </td>
      </tr>
      <tr>
        <td class="pad-sm" style="padding:24px 26px; color:#111827;">
          <p style="margin:0 0 14px 0; line-height:1.4;">Es wurde eine neue Ausleihe angelegt. Hier sind die Details:</p>
          <table role="presentation" cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse; font-size:14px; line-height:1.3; background:#fcfcfd; border:1px solid #e5e7eb; border-radius:10px; overflow:hidden;">
            <tbody>
              <tr>
                <td class="w-label" style="padding:10px 14px; color:#6b7280; width:170px; border-bottom:1px solid #ececec;">Benutzer</td>
                <td style="padding:10px 14px; font-weight:600; border-bottom:1px solid #ececec; color:#111827;">${
                  user || "N/A"
                }</td>
              </tr>
              <tr>
                <td style="padding:10px 14px; color:#6b7280; vertical-align:top; border-bottom:1px solid #ececec;">Ausgeliehene Gegenstände</td>
                <td style="padding:10px 14px; font-weight:600; border-bottom:1px solid #ececec; color:#111827;">${itemsList}</td>
              </tr>
              <tr>
                <td style="padding:10px 14px; color:#6b7280; border-bottom:1px solid #ececec;">Startdatum</td>
                <td style="padding:10px 14px; font-weight:600; border-bottom:1px solid #ececec; color:#111827;">${formatDateTime(
                  startDate
                )}</td>
              </tr>
              <tr>
                <td style="padding:10px 14px; color:#6b7280; border-bottom:1px solid #ececec;">Enddatum</td>
                <td style="padding:10px 14px; font-weight:600; border-bottom:1px solid #ececec; color:#111827;">${formatDateTime(
                  endDate
                )}</td>
              </tr>
              <tr>
                <td style="padding:10px 14px; color:#6b7280;">Erstellt am</td>
                <td style="padding:10px 14px; font-weight:600; color:#111827;">${formatDateTime(
                  createdDate
                )}</td>
              </tr>
            </tbody>
          </table>
          <p style="margin:22px 0 0 0; font-size:14px;">
            <a href="https://admin.insta.the1s.de/api" style="display:inline-block; background:${brand}; color:#ffffff; text-decoration:none; padding:10px 16px; border-radius:6px; font-weight:600; font-size:14px;" target="_blank" rel="noopener noreferrer">
              Übersicht öffnen
            </a>
          </p>
          <p style="margin:18px 0 0 0; font-size:12px; color:#6b7280; line-height:1.4;">
            Diese E-Mail wurde automatisch vom Ausleihsystem gesendet. Bitte nicht antworten.
          </p>
        </td>
      </tr>
    </table>
  </div>
 </body>
 </html>`;
 }
 function buildLoanEmailText({ user, items, startDate, endDate, createdDate }) {
  const itemsText =
    Array.isArray(items) && items.length ? items.join(", ") : "N/A";
  return [
    "Neue Ausleihe erstellt",
    "",
    `Benutzer: ${user || "N/A"}`,
    `Gegenstände: ${itemsText}`,
    `Start: ${formatDateTime(startDate)}`,
    `Ende: ${formatDateTime(endDate)}`,
    `Erstellt am: ${formatDateTime(createdDate)}`,
  ].join("\n");
 }
 function sendMailLoan(user, items, startDate, endDate, createdDate) {
  const transporter = nodemailer.createTransport({
    host: process.env.MAIL_HOST,
    port: process.env.MAIL_PORT,
    secure: true,
    auth: {
      user: process.env.MAIL_USER,
      pass: process.env.MAIL_PASSWORD,
    },
  });
  (async () => {
    const info = await transporter.sendMail({
      from: '"Ausleihsystem" <noreply@mcs-medien.de>',
      to: process.env.MAIL_SENDEES,
      subject: "Eine neue Ausleihe wurde erstellt!",
      text: buildLoanEmailText({
        user,
        items,
        startDate,
        endDate,
        createdDate,
      }),
      html: buildLoanEmail({ user, items, startDate, endDate, createdDate }),
    });
    console.log("Message sent:", info.messageId);
  })();
  console.log("sendMailLoan called");
 }
 const formatDateTime = (value) => {
  if (value == null) return "N/A";
  const toOut = (d) => {
    if (!(d instanceof Date) || isNaN(d.getTime())) return "N/A";
    const dd = String(d.getDate()).padStart(2, "0");
    const mm = String(d.getMonth() + 1).padStart(2, "0");
    const yyyy = d.getFullYear();
    const hh = String(d.getHours()).padStart(2, "0");
    const mi = String(d.getMinutes()).padStart(2, "0");
    return `${dd}.${mm}.${yyyy} ${hh}:${mi} Uhr`;
  };
  if (value instanceof Date) return toOut(value);
  if (typeof value === "number") return toOut(new Date(value));
  const s = String(value).trim();
  // Direct pattern: "YYYY-MM-DD[ T]HH:mm[:ss]"
  const m = s.match(/^(\d{4})-(\d{2})-(\d{2})[ T](\d{2}):(\d{2})(?::\d{2})?/);
  if (m) {
    const [, y, M, d, h, min] = m;
    return `${d}.${M}.${y} ${h}:${min} Uhr`;
  }
  // ISO or other parseable formats
  const dObj = new Date(s);
  if (!isNaN(dObj.getTime())) return toOut(dObj);
  return "N/A";
 };
 router.post("/login", async (req, res) => {
  const result = await loginFunc(req.body.username, req.body.password);
  if (result.success) {
    const token = await generateToken({
      username: result.data.username,
      role: result.data.role,
    });
    res.status(200).json({ message: "Login successful", token });
  } else {
    res.status(401).json({ message: "Invalid credentials" });
  }
 });
 router.get("/items", authenticate, async (req, res) => {
  const result = await getItemsFromDatabase(req.user.role);
  if (result.success) {
    res.status(200).json(result.data);
  } else {
    res.status(500).json({ message: "Failed to fetch items" });
  }
 });
 router.get("/loans", authenticate, async (req, res) => {
  const result = await getLoansFromDatabase();
  if (result.success) {
    res.status(200).json(result.data);
  } else {
    res.status(500).json({ message: "Failed to fetch loans" });
  }
 });
 router.get("/userLoans", authenticate, async (req, res) => {
  const result = await getUserLoansFromDatabase(req.user.username);
  if (result.success) {
    res.status(200).json(result.data);
  } else {
    res.status(500).json({ message: "Failed to fetch user loans" });
  }
 });
 router.delete("/deleteLoan/:id", authenticate, async (req, res) => {
  const loanId = req.params.id;
  const result = await deleteLoanFromDatabase(loanId);
  if (result.success) {
    res.status(200).json({ message: "Loan deleted successfully" });
  } else {
    res.status(500).json({ message: "Failed to delete loan" });
  }
 });
 router.delete("/SETdeleteLoan/:id", authenticate, async (req, res) => {
  const loanId = req.params.id;
  const result = await SETdeleteLoanFromDatabase(loanId);
  if (result.success) {
    res.status(200).json({ message: "Loan deleted successfully" });
  } else {
    res.status(500).json({ message: "Failed to delete loan" });
  }
 });
 router.post("/borrowableItems", authenticate, async (req, res) => {
  const { startDate, endDate } = req.body || {};
  if (!startDate || !endDate) {
    return res
      .status(400)
      .json({ message: "startDate and endDate are required" });
  }
  const result = await getBorrowableItemsFromDatabase(
    startDate,
    endDate,
    req.user.role
  );
  if (result.success) {
    // return the array directly for consistency with /items
    return res.status(200).json(result.data);
  } else {
    return res
      .status(500)
      .json({ message: "Failed to fetch borrowable items" });
  }
 });
 router.post("/takeLoan/:id", authenticate, async (req, res) => {
  const loanId = req.params.id;
  const result = await onTake(loanId);
  if (result.success) {
    res.status(200).json({ message: "Loan taken successfully" });
  } else {
    res.status(500).json({ message: "Failed to take loan" });
  }
 });
 router.post("/returnLoan/:id", authenticate, async (req, res) => {
  const loanId = req.params.id;
  const result = await onReturn(loanId);
  if (result.success) {
    res.status(200).json({ message: "Loan returned successfully" });
  } else {
    res.status(500).json({ message: "Failed to return loan" });
  }
 });
 router.post("/createLoan", authenticate, async (req, res) => {
  try {
    const { items, startDate, endDate } = req.body || {};
    if (!Array.isArray(items) || items.length === 0) {
      return res.status(400).json({ message: "Items array is required" });
    }
    // If dates are not provided, default to now .. +7 days
    const start =
      startDate ?? new Date().toISOString().slice(0, 19).replace("T", " ");
    const end =
      endDate ??
      new Date(Date.now() + 7 * 24 * 60 * 60 * 1000)
        .toISOString()
        .slice(0, 19)
        .replace("T", " ");
    // Coerce item IDs to numbers and filter invalids
    const itemIds = items
      .map((v) => Number(v))
      .filter((n) => Number.isFinite(n));
    if (itemIds.length === 0) {
      return res.status(400).json({ message: "No valid item IDs provided" });
    }
    const result = await createLoanInDatabase(
      req.user.username,
      start,
      end,
      itemIds
    );
    if (result.success) {
      const mailInfo = await getLoanInfoWithID(result.data.id);
      console.log(mailInfo);
      sendMailLoan(
        mailInfo.data.username,
        mailInfo.data.loaned_items_name,
        mailInfo.data.start_date,
        mailInfo.data.end_date,
        mailInfo.data.created_at
      );
      return res.status(201).json({
        message: "Loan created successfully",
        loanId: result.data.id,
        loanCode: result.data.loan_code,
      });
    }
    if (result.code === "CONFLICT") {
      return res
        .status(409)
        .json({ message: "Items not available in the selected period" });
    }
    if (result.code === "BAD_REQUEST") {
      return res.status(400).json({ message: result.message });
    }
    return res.status(500).json({ message: "Failed to create loan" });
  } catch (err) {
    console.error("createLoan error:", err);
    return res.status(500).json({ message: "Failed to create loan" });
  }
 });
 router.post("/changePassword", authenticate, async (req, res) => {
  const { oldPassword, newPassword } = req.body || {};
  const username = req.user.username;
  const result = await changeUserPasswordFRONTEND(
    username,
    oldPassword,
    newPassword
  );
  if (result.success) {
    res.status(200).json({ message: "Password changed successfully" });
  } else {
    res.status(500).json({ message: "Failed to change password" });
  }
 });
 // Admin panel functions
 router.post("/loginAdmin", async (req, res) => {
  const { username, password } = req.body || {};
  if (!username || !password) {
    return res
      .status(400)
      .json({ message: "Username and password are required" });
  }
  const result = await loginAdmin(username, password);
  if (result.success) {
    const token = await generateToken({
      username: result.data.username,
      role: result.data.role,
    });
    return res.status(200).json({
      message: "Login successful",
      first_name: result.data.first_name,
      token,
    });
  }
  return res.status(401).json({ message: "Invalid credentials" });
 });
 router.get("/allUsers", authenticate, async (req, res) => {
  const result = await getAllUsers();
  if (result.success) {
    return res.status(200).json(result.data);
  }
  return res.status(500).json({ message: "Failed to fetch users" });
 });
 router.delete("/deleteUser/:id", authenticate, async (req, res) => {
  const userId = req.params.id;
  const result = await deleteUserID(userId);
  if (result.success) {
    return res.status(200).json({ message: "User deleted successfully" });
  }
  return res.status(500).json({ message: "Failed to delete user" });
 });
 router.get("/verifyToken", authenticate, async (req, res) => {
  res.status(200).json({ message: "Token is valid", user: req.user });
 });
 router.post("/editUser/:id", authenticate, async (req, res) => {
  const userId = req.params.id;
  const { username, role } = req.body || {};
  const result = await handleEdit(userId, username, role);
  if (result.success) {
    return res.status(200).json({ message: "User edited successfully" });
  }
  return res.status(500).json({ message: "Failed to edit user" });
 });
 router.post("/createUser", authenticate, async (req, res) => {
  const { username, role, password } = req.body || {};
  const result = await createUser(username, role, password);
  if (result.success) {
    return res.status(201).json({ message: "User created successfully" });
  }
  return res.status(500).json({ message: "Failed to create user" });
 });
 router.get("/allLoans", authenticate, async (req, res) => {
  const result = await getAllLoans();
  if (result.success) {
    return res.status(200).json(result.data);
  }
  return res.status(500).json({ message: "Failed to fetch loans" });
 });
 router.get("/allItems", authenticate, async (req, res) => {
  const result = await getAllItems();
  if (result.success) {
    return res.status(200).json(result.data);
  }
  return res.status(500).json({ message: "Failed to fetch items" });
 });
 router.delete("/deleteItem/:id", authenticate, async (req, res) => {
  const itemId = req.params.id;
  const result = await deleteItemID(itemId);
  if (result.success) {
    return res.status(200).json({ message: "Item deleted successfully" });
  }
  return res.status(500).json({ message: "Failed to delete item" });
 });
 router.post("/createItem", authenticate, async (req, res) => {
  const { item_name, can_borrow_role } = req.body || {};
  const result = await createItem(item_name, can_borrow_role);
  if (result.success) {
    return res.status(201).json({ message: "Item created successfully" });
  }
  return res.status(500).json({ message: "Failed to create item" });
 });
 router.post("/changePWadmin", authenticate, async (req, res) => {
  const newPassword = req.body.newPassword;
  if (!newPassword) {
    return res.status(400).json({ message: "New password is required" });
  }
  const result = await changeUserPassword(req.body.username, newPassword);
  if (result.success) {
    return res.status(200).json({ message: "Password changed successfully" });
  }
  return res.status(500).json({ message: "Failed to change password" });
 });
 router.post("/updateItemByID", authenticate, async (req, res) => {
  const role = req.body.can_borrow_role;
  const itemId = req.body.itemId;
  const item_name = req.body.item_name;
  const result = await updateItemByID(itemId, item_name, role);
  if (result.success) {
    return res.status(200).json({ message: "Item updated successfully" });
  }
  return res.status(500).json({ message: "Failed to update item" });
 });
 router.put("/changeSafeState/:itemId", authenticate, async (req, res) => {
  const itemId = req.params.itemId;
  const result = await changeInSafeStateV2(itemId);
  if (result.success) {
    return res
      .status(200)
      .json({ message: "Item safe state updated successfully" });
  }
  return res.status(500).json({ message: "Failed to update item safe state" });
 });
 router.get("/apiKeys", authenticate, async (req, res) => {
  const result = await getAllApiKeys();
  if (result.success) {
    return res.status(200).json(result.data);
  }
  return res.status(500).json({ message: "Failed to fetch API keys" });
 });
 router.delete("/deleteAPKey/:id", authenticate, async (req, res) => {
  const apiKeyId = req.params.id;
  const result = await deleteAPKey(apiKeyId);
  if (result.success) {
    return res.status(200).json({ message: "API key deleted successfully" });
  }
  return res.status(500).json({ message: "Failed to delete API key" });
 });
 router.post("/createAPIentry", authenticate, async (req, res) => {
  const apiKey = req.body.apiKey;
  const user = req.body.user;
  if (!apiKey || !user) {
    return res.status(400).json({ message: "API key and user are required" });
  }
  // Ensure apiKey is a number
  const apiKeyNum = Number(apiKey);
  if (!Number.isFinite(apiKeyNum)) {
    return res.status(400).json({ message: "API key must be a number" });
  }
  const result = await createAPIentry(apiKeyNum, user);
  if (result.success) {
    return res.status(201).json({ message: "API key created successfully" });
  }
  if (result.code === "DUPLICATE") {
    return res.status(409).json({ message: "API key already exists" });
  }
  return res.status(500).json({ message: "Failed to create API key" });
 });
 router.get("/apiKeys/validate/:key", async (req, res) => {
  try {
    const rawKey = req.params.key;
    const result = await getAllApiKeys();
    if (!result.success || !Array.isArray(result.data)) {
      return res.status(500).json({ valid: false });
    }
    const isValid = result.data.some((entry) => {
      const val = String(
        entry?.key ?? entry?.apiKey ?? entry?.api_key ?? entry
      );
      return val === String(rawKey);
    });
    return res.status(200).json({ valid: isValid });
  } catch (err) {
    console.error("validate api key error:", err);
    return res.status(500).json({ valid: false });
  }
 });
 export default router;
@@ -1,139 +0,0 @@
 import mysql from "mysql2";
 import dotenv from "dotenv";
 dotenv.config();
 const pool = mysql
  .createPool({
    host: process.env.DB_HOST,
    user: process.env.DB_USER,
    password: process.env.DB_PASSWORD,
    database: process.env.DB_NAME,
  })
  .promise();
 export const 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 username, 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 in_safe = NOT in_safe WHERE id = ?",
    [itemId],
  );
  if (result.affectedRows > 0) {
    return { success: true };
  }
  return { success: false };
 };
 export const setReturnDateV2 = async (loanCode) => {
  try {
    const [items] = await pool.query(
      "SELECT loaned_items_id, username FROM loans WHERE loan_code = ?",
      [loanCode],
    );
    if (items.length === 0)
      return { success: false, message: "No items found for loan" };
    const itemIds = Array.isArray(items[0].loaned_items_id)
      ? items[0].loaned_items_id
      : JSON.parse(items[0].loaned_items_id || "[]");
    const [result] = await pool.query(
      "UPDATE loans SET returned_date = NOW() WHERE loan_code = ? AND returned_date IS NULL",
      [loanCode],
    );
    if (result.affectedRows === 0) return { success: false };
    if (itemIds.length > 0) {
      await pool.query(
        "UPDATE items SET in_safe = 1, currently_borrowing = NULL, last_borrowed_person = ? WHERE id IN (?)",
        [items[0].username, itemIds],
      );
    }
    return { success: true, data: { returned: true } };
  } catch (error) {
    console.error("setReturnDateV2 error:", error);
    return { success: false, message: "Failed to set return date" };
  }
 };
 export const setTakeDateV2 = async (loanCode) => {
  const [isTaken] = await pool.query(
    "SELECT take_date FROM loans WHERE loan_code = ?",
    [loanCode],
  );
  if (isTaken.length === 0 || isTaken[0].take_date !== null) {
    return { success: false, message: "Loan not found or already taken" };
  }
  const [items] = await pool.query(
    "SELECT loaned_items_id FROM loans WHERE loan_code = ?",
    [loanCode],
  );
  const [owner] = await pool.query(
    "SELECT username FROM loans WHERE loan_code = ?",
    [loanCode],
  );
  if (items.length === 0)
    return { success: false, message: "No items found for loan" };
  const itemIds = Array.isArray(items[0].loaned_items_id)
    ? items[0].loaned_items_id
    : JSON.parse(items[0].loaned_items_id || "[]");
  const [setItemStates] = await pool.query(
    "UPDATE items SET in_safe = 0, currently_borrowing = (?) WHERE id IN (?)",
    [owner[0].username, itemIds],
  );
  const [result] = await pool.query(
    "UPDATE loans SET take_date = NOW() WHERE loan_code = ? AND take_date IS NULL",
    [loanCode],
  );
  if (result.affectedRows > 0 && setItemStates.affectedRows > 0) {
    return { success: true };
  }
  return { message: "Failed to set take date", success: false };
 };
 export const openDoor = async (doorKey) => {
  const [result] = await pool.query(
    "SELECT safe_nr, id FROM items WHERE door_key = ?;",
    [doorKey],
  );
  if (result.length > 0) {
    const [changeItemSate] = await pool.query(
      "UPDATE items SET in_safe = NOT in_safe WHERE id = ?",
      [result[0].id],
    );
    if (changeItemSate.affectedRows > 0) {
      return { success: true, data: result[0] };
    } else {
      return { success: false };
    }
  }
  return { success: false };
 };
@@ -1,101 +0,0 @@
 import express from "express";
 import { authenticate } from "../../services/authentication.js";
 import { checkIfServiceIsActive } from "../../services/functions.js";
 const router = express.Router();
 import dotenv from "dotenv";
 dotenv.config();
 const loan_service = "Loan Service";
 import {
  getItemsFromDatabaseV2,
  changeInSafeStateV2,
  setTakeDateV2,
  setReturnDateV2,
  getLoanByCodeV2,
  openDoor,
 } 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", authenticate, async (req, res) => {
  const itemId = req.params.itemId;
  const result = await changeInSafeStateV2(itemId);
  if (result.success) {
    res.status(200).json({ data: result.data });
  } else {
    res.status(500).json({ message: "Failed to update item state" });
  }
 });
 // Route for API to get a loan by its code
 router.get(
  "/get-loan-by-code/:key/:loan_code",
  authenticate,
  checkIfServiceIsActive(loan_service),
  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,
  checkIfServiceIsActive(loan_service),
  async (req, res) => {
    const loanCode = req.params.loan_code;
    const result = await setReturnDateV2(loanCode);
    if (result.success) {
      res.status(200).json({});
    } else {
      res.status(500).json({ message: "Failed to set return date" });
    }
  },
 );
 // Route for API to set the take away date by the loan code
 router.post(
  "/set-take-date/:key/:loan_code",
  authenticate,
  checkIfServiceIsActive(loan_service),
  async (req, res) => {
    const loanCode = req.params.loan_code;
    const result = await setTakeDateV2(loanCode);
    if (result.success) {
      res.status(200).json({});
    } else {
      res.status(500).json({ message: result.message });
    }
  },
 );
 // Route for API to open a door
 router.get("/open-door/:key/:doorKey", authenticate, async (req, res) => {
  const doorKey = req.params.doorKey;
  const result = await openDoor(doorKey);
  if (result.success) {
    res.status(200).json({ data: result.data });
  } else {
    res.status(500).json({ message: "Failed to open door" });
  }
 });
 export default router;
@@ -0,0 +1,133 @@
 import express from "express";
 import dotenv from "dotenv";
 import {
  getItemsFromDatabaseV2,
  changeInSafeStateV2,
  setTakeDateV2,
  setReturnDateV2,
  getLoanByCodeV2,
  getAllLoansV2,
  getAPIkey,
 } from "../services/database.js";
 dotenv.config();
 const router = express.Router();
 async function validateAPIKey(apiKey) {
  try {
    if (!apiKey) return false;
    const result = await getAPIkey();
    if (!result?.success || !Array.isArray(result.data)) return false;
    return result.data.some((row) => String(row.apiKey) === String(apiKey));
  } catch (err) {
    console.error("validateAPIKey error:", err);
    return false;
  }
 }
 // Add a guard that returns Access Denied instead of hanging
 const apiKeyGuard = async (req, res, next) => {
  try {
    const key = req.params.key;
    if (!key) {
      return res
        .status(401)
        .json({ message: "Access denied: missing API key" });
    }
    const ok = await validateAPIKey(key);
    if (!ok) {
      return res
        .status(401)
        .json({ message: "Access denied: invalid API key" });
    }
    next();
  } catch (e) {
    console.error("apiKeyGuard error:", e);
    res.status(500).json({ message: "Internal server error" });
  }
 };
 // Route for API to get ALL items from the database
 router.get("/items/:key", apiKeyGuard, async (req, res) => {
  const result = await getItemsFromDatabaseV2();
  if (result.success) {
    res.status(200).json({ data: result.data });
  } else {
    res.status(500).json({ message: "Failed to fetch items" });
  }
 });
 // Route for API to control the position of an item
 router.post(
  "/controlInSafe/:key/:itemId/:state",
  apiKeyGuard,
  async (req, res) => {
    const itemId = req.params.itemId;
    const state = req.params.state;
    if (state === "1" || state === "0") {
      const result = await changeInSafeStateV2(itemId, state);
      if (result.success) {
        res.status(200).json({ data: result.data });
      } else {
        res.status(500).json({ message: "Failed to update item state" });
      }
    } else {
      res.status(400).json({ message: "Invalid state value" });
    }
  }
 );
 // Route for API to get a loan by its code
 router.get("/getLoanByCode/:key/:loan_code", apiKeyGuard, async (req, res) => {
  const loan_code = req.params.loan_code;
  const result = await getLoanByCodeV2(loan_code);
  if (result.success) {
    res.status(200).json({ data: result.data });
  } else {
    res.status(404).json({ message: "Loan not found" });
  }
 });
 // Route for API to set the return date by the loan code
 router.post("/setReturnDate/:key/:loan_code", apiKeyGuard, async (req, res) => {
  const loanCode = req.params.loan_code;
  const result = await setReturnDateV2(loanCode);
  if (result.success) {
    res.status(200).json({ data: result.data });
  } else {
    res.status(500).json({ message: "Failed to set return date" });
  }
 });
 // Route for API to set the take away date by the loan code
 router.post("/setTakeDate/:key/:loan_code", apiKeyGuard, async (req, res) => {
  const loanCode = req.params.loan_code;
  const result = await setTakeDateV2(loanCode);
  if (result.success) {
    res.status(200).json({ data: result.data });
  } else {
    res.status(500).json({ message: "Failed to set take date" });
  }
 });
 // Route for API to get ALL loans from the database without sensitive info (only for landingpage)
 router.get("/allLoans", async (req, res) => {
  const result = await getAllLoansV2();
  if (result.success) {
    return res.status(200).json(result.data);
  }
  return res.status(500).json({ message: "Failed to fetch loans" });
 });
 // Route for API to get ALL items from the database (only for landingpage)
 router.get("/allItems", async (req, res) => {
  const result = await getItemsFromDatabaseV2();
  if (result.success) {
    res.status(200).json(result.data);
  } else {
    res.status(500).json({ message: "Failed to fetch items" });
  }
 });
 export default router;
@@ -1,340 +0,0 @@
 import mysql from "mysql2";
 import dotenv from "dotenv";
 dotenv.config();
 const pool = mysql
  .createPool({
    host: process.env.DB_HOST,
    user: process.env.DB_USER,
    password: process.env.DB_PASSWORD,
    database: process.env.DB_NAME,
  })
  .promise();
 export const 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,
    );
    // Build lockers array (unique, only 2-digit numbers from safe_nr)
    const lockers = [
      ...new Set(
        itemsRows
          .map((r) => r.safe_nr)
          .filter(
            (sn) =>
              sn !== null &&
              sn !== undefined &&
              Number.isInteger(Number(sn)) &&
              Number(sn) >= 0 &&
              Number(sn) <= 99,
          )
          .map((sn) => Number(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",
      };
    }
    let index = false;
    let candidate;
    let loanCode;
    // Generates 6-digit loan code
    do {
      candidate = Math.floor(100000 + Math.random() * 899999);
      const [rows] = await conn.query(
        "SELECT 1 FROM loans where loan_code = ? LIMIT 1",
        [candidate],
      );
      if (rows.length == 0) {
        index = true;
        loanCode = candidate;
      }
    } while (index === false);
    // 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 [checkIfdatesReturned] = await pool.query(
    "SELECT take_date, returned_date FROM loans WHERE id = ? AND deleted = 0",
    [loanId],
  );
  if (checkIfdatesReturned.length === 0) {
    return { success: false, code: "LOAN_NOT_FOUND" };
  }
  const { take_date, returned_date } = checkIfdatesReturned[0];
  const bothNull = take_date === null && returned_date === null;
  const bothSet = take_date !== null && returned_date !== null;
  if (!(bothNull || bothSet)) {
    return { success: false, code: "LOAN_NOT_RETURNED" };
  }
  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 };
 };
 export const setReturnDate = async (loanCode) => {
  const [items] = await pool.query(
    "SELECT loaned_items_id FROM loans WHERE loan_code = ?",
    [loanCode],
  );
  const [owner] = await pool.query(
    "SELECT username FROM loans WHERE loan_code = ?",
    [loanCode],
  );
  if (items.length === 0) return { success: false };
  const itemIds = Array.isArray(items[0].loaned_items_id)
    ? items[0].loaned_items_id
    : JSON.parse(items[0].loaned_items_id || "[]");
  const [setItemStates] = await pool.query(
    "UPDATE items SET in_safe = 1, currently_borrowing = NULL, last_borrowed_person = (?) WHERE id IN (?)",
    [owner[0].username, itemIds],
  );
  const [result] = await pool.query(
    "UPDATE loans SET returned_date = NOW() WHERE loan_code = ?",
    [loanCode],
  );
  if (result.affectedRows > 0 && setItemStates.affectedRows > 0) {
    return { success: true };
  }
  return { success: false };
 };
 export const setTakeDate = async (loanCode) => {
  const [items] = await pool.query(
    "SELECT loaned_items_id FROM loans WHERE loan_code = ?",
    [loanCode],
  );
  const [owner] = await pool.query(
    "SELECT username FROM loans WHERE loan_code = ?",
    [loanCode],
  );
  if (items.length === 0) return { success: false };
  const itemIds = Array.isArray(items[0].loaned_items_id)
    ? items[0].loaned_items_id
    : JSON.parse(items[0].loaned_items_id || "[]");
  const [setItemStates] = await pool.query(
    "UPDATE items SET in_safe = 0, currently_borrowing = (?) WHERE id IN (?)",
    [owner[0].username, itemIds],
  );
  const [result] = await pool.query(
    "UPDATE loans SET take_date = NOW() WHERE loan_code = ?",
    [loanCode],
  );
  if (result.affectedRows > 0 && setItemStates.affectedRows > 0) {
    return { success: true };
  }
  return { success: false };
 };
@@ -1,63 +0,0 @@
 import mysql from "mysql2";
 import dotenv from "dotenv";
 dotenv.config();
 const pool = mysql
  .createPool({
    host: process.env.DB_HOST,
    user: process.env.DB_USER,
    password: process.env.DB_PASSWORD,
    database: process.env.DB_NAME,
  })
  .promise();
 export const loginFunc = async (username, password) => {
  const [result] = await pool.query(
    "SELECT * FROM users WHERE username = ? AND password = ?",
    [username, password],
  );
  if (result.length > 0) return { success: true, data: result[0] };
  return { success: false };
 };
 export const 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 };
 };
 export const getDeactivatedServices = async () => {
  const [rows] = await pool.query("SELECT function_name FROM functions WHERE active = 0;");
  if (rows.length > 0) {
    return { success: true, data: rows };
  }
  return { success: false };
 };
@@ -1,237 +0,0 @@
 import express from "express";
 import { authenticate, generateToken } from "../../services/authentication.js";
 import {
  checkIfServiceIsActive,
  checkIfServiceIsActive2,
 } from "../../services/functions.js";
 // mailer imports
 import { sendMail } from "../../services/mailer/send.js";
 import { loanMail } from "../../services/mailer/templates/loan_created.js";
 import dotenv from "dotenv";
 dotenv.config();
 const router = express.Router();
 const loan_service = "Loan Service";
 const loan_mailer_service = "Loan Mailer";
 // database funcs import
 import {
  createLoanInDatabase,
  getLoanInfoWithID,
  getLoansFromDatabase,
  getBorrowableItemsFromDatabase,
  getALLLoans,
  getItems,
  SETdeleteLoanFromDatabase,
  setReturnDate,
  setTakeDate,
 } from "./database/loansMgmt.database.js";
 router.post(
  "/createLoan",
  checkIfServiceIsActive(loan_service),
  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) {
        if (await checkIfServiceIsActive2(loan_mailer_service)) {
          const mailInfo = await getLoanInfoWithID(result.data.id);
          console.log(mailInfo);
          const { html, text } = loanMail(
            req.user.first_name + " " + req.user.last_name,
            mailInfo.data.loaned_items_name,
            mailInfo.data.start_date,
            mailInfo.data.end_date,
            mailInfo.data.created_at,
            mailInfo.data.note,
          );
          await sendMail({
            to: process.env.MAIL_SENDEES,
            subject: "Neue Ausleihe erstellt!",
            html,
            text,
          });
        }
        return res.status(201).json({
          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",
  checkIfServiceIsActive(loan_service),
  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.post(
  "/set-return-date/:loan_code",
  checkIfServiceIsActive(loan_service),
  authenticate,
  async (req, res) => {
    const loanCode = req.params.loan_code;
    const result = await setReturnDate(loanCode);
    if (result.success) {
      res.status(200).json({ data: result.data });
    } else {
      res.status(500).json({ message: "Failed to set return date" });
    }
  },
 );
 router.post(
  "/set-take-date/:loan_code",
  checkIfServiceIsActive(loan_service),
  authenticate,
  async (req, res) => {
    const loanCode = req.params.loan_code;
    const result = await setTakeDate(loanCode);
    if (result.success) {
      res.status(200).json({ data: result.data });
    } else {
      res.status(500).json({ message: "Failed to set take date" });
    }
  },
 );
 router.get("/all-items", authenticate, async (req, res) => {
  const result = await getItems();
  if (result.success) {
    res.status(200).json(result.data);
  } else {
    res.status(500).json({ message: "Failed to fetch items" });
  }
 });
 router.delete(
  "/delete-loan/:id",
  checkIfServiceIsActive(loan_service),
  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 {
      if (result.code === "LOAN_NOT_FOUND") {
        res.status(404).json({ message: "Loan not found" });
      }
      if (result.code === "LOAN_NOT_RETURNED") {
        res.status(507).json({
          message: "Cannot delete loan that has not been returned",
        });
      }
      res.status(500).json({ message: "Failed to delete loan" });
    }
  },
 );
 router.get(
  "/all-loans",
  checkIfServiceIsActive(loan_service),
  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",
  checkIfServiceIsActive(loan_service),
  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;
@@ -1,99 +0,0 @@
 import express from "express";
 import { authenticate, generateToken } from "../../services/authentication.js";
 import { checkIfServiceIsActive } from "../../services/functions.js";
 const router = express.Router();
 import dotenv from "dotenv";
 dotenv.config();
 const user_frontend_service = "User Frontend";
 const contact_form_service = "Contact Form Service";
 // database funcs import
 import {
  loginFunc,
  changePassword,
  getDeactivatedServices,
 } from "./database/userMgmt.database.js";
 // mailer imports
 import { sendMail } from "../../services/mailer/send.js";
 import { contactMail } from "../../services/mailer/templates/contact.js";
 router.post(
  "/login",
  checkIfServiceIsActive(user_frontend_service),
  async (req, res) => {
    const result = await loginFunc(req.body.username, req.body.password);
    if (result.success) {
      const token = await generateToken({
        username: result.data.username,
        is_admin: result.data.is_admin,
        first_name: result.data.first_name,
        last_name: result.data.last_name,
        role: result.data.role,
      });
      res.status(200).json({ message: "Login successful", token });
    } else {
      res.status(401).json({ message: "Invalid credentials" });
    }
  },
 );
 router.post(
  "/change-password",
  checkIfServiceIsActive(user_frontend_service),
  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" });
    }
  },
 );
 router.post(
  "/contact",
  checkIfServiceIsActive(contact_form_service),
  authenticate,
  async (req, res) => {
    try {
      const message = req.body?.message;
      const username = req.user?.first_name + " " + req.user?.last_name;
      if (!username || !message) {
        return res
          .status(400)
          .json({ message: "Username and message are required" });
      }
      const { html, text } = contactMail({ username, message });
      await sendMail({
        to: process.env.MAIL_SENDEES_CONTACT,
        subject: "Neue Nachricht!",
        html,
        text,
      });
      res.status(200).json({ message: "Contact message sent successfully" });
    } catch (error) {
      console.error("Failed to send contact mail:", error);
      res.status(500).json({ message: "Failed to send contact message" });
    }
  },
 );
 router.get("/deactivated-services", authenticate, async (req, res) => {
  const result = await getDeactivatedServices();
  if (result.success) {
    res.status(200).json(result.data);
  } else {
    res.status(500).json({ message: "Failed to fetch deactivated services" });
  }
 });
 export default router;
@@ -0,0 +1,100 @@
 -- 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 ('[]'),
  `deleted` bool NOT NULL DEFAULT false,
  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);
@@ -1,69 +0,0 @@
 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,
  deleted_admin 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 INT DEFAULT NULL UNIQUE,
  door_key INT DEFAULT NULL UNIQUE,
  entry_created_at timestamp NULL DEFAULT CURRENT_TIMESTAMP,
  entry_updated_at timestamp NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  last_borrowed_person varchar(255) DEFAULT NULL,
  currently_borrowing varchar(255) DEFAULT NULL,
  PRIMARY KEY (id)
 ) 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;
 CREATE TABLE functions (
  id INT NOT NULL AUTO_INCREMENT,
  function_name VARCHAR(500) NOT NULL UNIQUE,
  active BOOLEAN NOT NULL DEFAULT true,
  entry_updated_at timestamp NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  entry_created_at TIMESTAMP NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (id)
 ) ENGINE=InnoDB;
 INSERT INTO functions (function_name) VALUES ("Loan Mailer"), ("Loan Service"), ("Contact Form Service"), ("User Frontend"), ("API")
@@ -1,91 +1,32 @@
 import express from "express";
 import cors from "cors";
-import dotenv from "dotenv";
+import env from "dotenv";
-import info from "./info.json" with { type: "json" };
+import apiRouter from "./routes/api.js";
-import { authenticate } from "./services/authentication.js";
+import apiRouterV2 from "./routes/apiV2.js";
-import { rateLimit } from "express-rate-limit";
+env.config();
 dotenv.config();
 const app = express();
-const port = 8004;
+const port = 8002;
 const naasURL = process.env.NAAS_URL;
 const limiter = rateLimit({
  windowMs: 1 * 60 * 1000, // 1 minute
  limit: 50, // Limit each IP to 50 requests per `window` (here, per 1 minute).
  standardHeaders: "draft-8", // draft-6: `RateLimit-*` headers; draft-7 & draft-8: combined `RateLimit` header
  legacyHeaders: false, // Disable the `X-RateLimit-*` headers.
  ipv6Subnet: 56, // Set to 60 or 64 to be less aggressive, or 52 or 48 to be more aggressive
  // store: ... , // Redis, Memcached, etc. See below.
 });
 app.use(limiter);
 // frontend routes
 import loansMgmtRouter from "./routes/app/loanMgmt.route.js";
 import userMgmtRouterAPP from "./routes/app/userMgmt.route.js";
 // admin routes
 import userDataMgmtRouter from "./routes/admin/userDataMgmt.route.js";
 import loanDataMgmtRouter from "./routes/admin/loanDataMgmt.route.js";
 import itemDataMgmtRouter from "./routes/admin/itemDataMgmt.route.js";
 import apiDataMgmtRouter from "./routes/admin/apiDataMgmt.route.js";
 import userMgmtRouterADMIN from "./routes/admin/userMgmt.route.js";
 import serverConfMgmtRouter from "./routes/admin/serverConfMgmt.route.js";
 // API routes
 import apiRouter from "./routes/api/api.route.js";
 app.use(cors());
-// Body-Parser VOR den Routen registrieren
+// Increase body size limits to support large CSV JSON payloads
 app.use(express.json({ limit: "10mb" }));
 app.use(express.urlencoded({ extended: true, limit: "10mb" }));
 // frontend routes
 app.use("/api/loans", loansMgmtRouter);
 app.use("/api/users", userMgmtRouterAPP);
 // admin routes
 app.use("/api/admin/loan-data", loanDataMgmtRouter);
 app.use("/api/admin/user-data", userDataMgmtRouter);
 app.use("/api/admin/item-data", itemDataMgmtRouter);
 app.use("/api/admin/api-data", apiDataMgmtRouter);
 app.use("/api/admin/user-mgmt", userMgmtRouterADMIN);
 app.use("/api/admin/server-config", serverConfMgmtRouter);
 // API routes
 app.use("/api", apiRouter);
 app.set("view engine", "ejs");
 app.use(express.json({ limit: "10mb" }));
 app.use("/api", apiRouter);
 app.use("/apiV2", apiRouterV2);
 app.get("/", (req, res) => {
  res.render("index.ejs");
 });
 app.listen(port, () => {
  console.log(`Server is running on port: ${port}`);
 });
 app.get("/no", async (req, res) => {
  try {
    const response = await fetch(naasURL);
    if (!response.ok) {
      res.status(500).send("Request to no-as-a-service went wrong.");
    }
    const data = await response.json();
    res.json(data);
  } catch (error) {
    console.error("Error communicating with no-as-a-service:", error);
    res.status(500).send("Error communicating with no-as-a-service.");
  }
 });
 app.get("/verify", authenticate, async (req, res) => {
  res.status(200).json({ message: "Token is valid", user: req.user });
 });
 app.get("/", (req, res) => {
  res.send(info);
 });
 // error handling code
 app.use((err, req, res, next) => {
  // Log the error stack and send a generic error response
  console.error(err.stack);
  res.status(500).send("Something broke!");
 });
--- a/Show More
+++ b/Show More
		`@@ -0,0 +1 @@`
							<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>