added source code button

added footer component
refactor help site
2025-08-21 18:53:33 +02:00 · 2025-08-21 18:53:18 +02:00 · 2025-08-21 13:00:01 +02:00 · 2025-08-21 12:48:03 +02:00 · 2025-08-21 12:44:15 +02:00 · 2025-08-21 00:38:28 +02:00
21 changed files with 462 additions and 157 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -112,3 +112,5 @@ backend/public/uploads/
 config/
 secrets/
 keys/
+
+ToDo.txt
--- a/Docs/HELP.md
+++ b/Docs/HELP.md
@@ -0,0 +1,11 @@
+# Hilfe Seite
+
+Hier finden Sie Informationen zur Verwendung des Systems.
+
+## Unerwartete Probleme
+
+Falls unerwartetet Probleme im Web oder im Safe auftreten sollten, können Sie den Support via Teams kontaktieren.
+
+**Kontaktpersonen:**
+- Theis Gaedigk (Web & Safe)
+- Niklas Brunke (Safe)
--- a/Docs/backend_API_docs/README.md
+++ b/Docs/backend_API_docs/README.md
@@ -8,7 +8,7 @@ On this page you will learn how my API works.

 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` 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 I have built a second API. You can see the second API file in the same directory, the file is called `apiV2.js`.**

 This is the file that you can use to build an API.

@@ -24,6 +24,16 @@ Example: `/apiV2/items/{ADMIN_ID}`

 ---

+## URL
+
+- The frontend is currently running on `https://insta.the1s.de`.
+
+- The backend is currently running on `https://backend.insta.the1s.de`.
+
+You can see the status of this and all my other services at `https://status.the1s.de`.
+
+---
+
 ## Current endpoints

 ### 1. Get All Items
@@ -35,21 +45,114 @@ Returns a list of all items and their details.
 #### Example Request

 ```
-GET /apiV2/items/your_admin_key
+GET https://backend.insta.the1s.de/apiV2/items/your_admin_key
 ```

 #### Example Response

 ```
-[
-  {
-    "id": 1,
-    "item_name": "DJI 1er Mikro",
-    "can_borrow_role": "4",
-    "inSafe": 1
-  },
-  ...
-]
+{
+  "data": [
+    {
+      "id": 1,
+      "item_name": "DJI 1er Mikro",
+      "can_borrow_role": 4,
+      "inSafe": 1,
+      "entry_created_at": "2025-08-19T22:02:16.000Z"
+    },
+    {
+      "id": 2,
+      "item_name": "DJI 2er Mikro 1",
+      "can_borrow_role": 4,
+      "inSafe": 1,
+      "entry_created_at": "2025-08-19T22:02:16.000Z"
+    },
+    {
+      "id": 3,
+      "item_name": "DJI 2er Mikro 2",
+      "can_borrow_role": 4,
+      "inSafe": 1,
+      "entry_created_at": "2025-08-19T22:02:16.000Z"
+    },
+    {
+      "id": 4,
+      "item_name": "Rode Richt Mikrofon",
+      "can_borrow_role": 2,
+      "inSafe": 1,
+      "entry_created_at": "2025-08-19T22:02:16.000Z"
+    },
+    {
+      "id": 5,
+      "item_name": "Kamera Stativ",
+      "can_borrow_role": 1,
+      "inSafe": 1,
+      "entry_created_at": "2025-08-19T22:02:16.000Z"
+    },
+    {
+      "id": 6,
+      "item_name": "SONY Kamera - inkl. Akkus und Objektiv",
+      "can_borrow_role": 1,
+      "inSafe": 1,
+      "entry_created_at": "2025-08-19T22:02:16.000Z"
+    },
+    {
+      "id": 7,
+      "item_name": "MacBook inkl. Adapter",
+      "can_borrow_role": 2,
+      "inSafe": 1,
+      "entry_created_at": "2025-08-19T22:02:16.000Z"
+    },
+    {
+      "id": 8,
+      "item_name": "SD Karten",
+      "can_borrow_role": 3,
+      "inSafe": 1,
+      "entry_created_at": "2025-08-19T22:02:16.000Z"
+    },
+    {
+      "id": 9,
+      "item_name": "Kameragimbal",
+      "can_borrow_role": 1,
+      "inSafe": 1,
+      "entry_created_at": "2025-08-19T22:02:16.000Z"
+    },
+    {
+      "id": 10,
+      "item_name": "ATEM MINI PRO",
+      "can_borrow_role": 1,
+      "inSafe": 1,
+      "entry_created_at": "2025-08-19T22:02:16.000Z"
+    },
+    {
+      "id": 11,
+      "item_name": "Handygimbal",
+      "can_borrow_role": 4,
+      "inSafe": 1,
+      "entry_created_at": "2025-08-19T22:02:16.000Z"
+    },
+    {
+      "id": 12,
+      "item_name": "Kameralfter",
+      "can_borrow_role": 1,
+      "inSafe": 1,
+      "entry_created_at": "2025-08-19T22:02:16.000Z"
+    },
+    {
+      "id": 13,
+      "item_name": "Kleine Kamera 1 - inkl. Objektiv",
+      "can_borrow_role": 2,
+      "inSafe": 1,
+      "entry_created_at": "2025-08-19T22:02:16.000Z"
+    },
+    {
+      "id": 14,
+      "item_name": "Kleine Kamera 2 - inkl. Objektiv",
+      "can_borrow_role": 2,
+      "inSafe": 1,
+      "entry_created_at": "2025-08-19T22:02:16.000Z"
+    }
+  ]
+}
 ```

 Each item has the following properties:
@@ -59,6 +162,8 @@ Each item has the following properties:
 - `can_borrow_role`: The role ID that is allowed to borrow the item.
 - `inSafe`: Indicates whether the item is currently in the locker (1) or not (0). This variable/state can change over time.

+_You also get an http 200 status code._
+
 ---

 ### 2. Change Item Safe State
@@ -72,7 +177,7 @@ Updates the `inSafe` state of an item (whether it is in the locker).
 #### Example Request

 ```
-POST /apiV2/controlInSafe/your_admin_key/5/0
+POST https://backend.insta.the1s.de/apiV2/controlInSafe/your_admin_key/item_id/new_item_state
 ```

 #### Example Response
@@ -81,9 +186,9 @@ POST /apiV2/controlInSafe/your_admin_key/5/0
 {}
 ```

-*An empty object means, that the operation was successful and no further information is returned.*
+_An empty object means, that the operation was successful and no further information is returned._

-*You also get an http 2xx status code.*
+_You also get an http 200 status code._

 ---

@@ -98,7 +203,7 @@ Sets the `returned_date` of a loan to the current server time.
 #### Example Request

 ```
-POST /apiV2/setReturnDate/your_admin_key/123456
+POST https://backend.insta.the1s.de/apiV2/setReturnDate/your_admin_key/your_loan_code
 ```

 #### Example Response
@@ -107,9 +212,9 @@ POST /apiV2/setReturnDate/your_admin_key/123456
 {}
 ```

-*An empty object means, that the operation was successful and no further information is returned.*
+_An empty object means, that the operation was successful and no further information is returned._

-*You also get an http 2xx status code.*
+_You also get an http 200 status code._

 ---

@@ -124,7 +229,7 @@ Sets the `take_date` of a loan to the current server time.
 #### Example Request

 ```
-POST /apiV2/setTakeDate/your_admin_key/123456
+POST https://backend.insta.the1s.de/apiV2/setTakeDate/your_admin_key/your_loan_code
 ```

 #### Example Response
@@ -133,9 +238,60 @@ POST /apiV2/setTakeDate/your_admin_key/123456
 {}
 ```

-*An empty object means, that the operation was successful and no further information is returned.*
+_An empty object means, that the operation was successful and no further information is returned._

-*You also get an http 2xx status code.*
+_You also get an http 2xx status code._
+
+---
+
+### 5. Get whole loan by loan code
+
+**POST** `/getLoanByCode/:key/:loan_code`
+
+Retrieves the details of a specific loan by its unique code.
+
+- `loan_code`: The unique code of the loan.
+
+#### Example Request
+
+```
+GET https://backend.insta.the1s.de/getLoanByCode/your_admin_key/your_loan_code
+```
+
+#### Example Response
+
+```
+{
+  "data": {
+    "id": 6,
+    "username": "theis",
+    "loan_code": 646473,
+    "start_date": "2025-08-25T13:23:00.000Z",
+    "end_date": "2025-08-26T13:23:00.000Z",
+    "take_date": null,
+    "returned_date": null,
+    "created_at": "2025-08-20T11:23:40.000Z",
+    "loaned_items_id": [
+      8,
+      9
+    ],
+    "loaned_items_name": [
+      "SD Karten",
+      "Kameragimbal"
+    ]
+  }
+}
+```
+
+_You also get an http 200 status code._
+
+If the loan id does not exist, you will receive a 404 status code and an error message.
+
+```
+{
+  "message": "Loan not found"
+}
+```

 ---

--- a/backend/routes/api.js
+++ b/backend/routes/api.js
@@ -11,7 +11,6 @@ import {
 import { authenticate, generateToken } from "../services/tokenService.js";
 const router = express.Router();

-// Example endpoint
 router.post("/login", async (req, res) => {
  const result = await loginFunc(req.body.username, req.body.password);
  if (result.success) {
--- a/backend/routes/apiV2.js
+++ b/backend/routes/apiV2.js
@@ -5,6 +5,7 @@ import {
  changeInSafeStateV2,
  setReturnDateV2,
  setTakeDateV2,
+  getLoanByCodeV2,
 } from "../services/database.js";

 dotenv.config();
@@ -44,6 +45,19 @@ router.post("/controlInSafe/:key/:itemId/:state", async (req, res) => {
  }
 });

+router.get("/getLoanByCode/:key/:loan_code", async (req, res) => {
+  if (req.params.key === process.env.ADMIN_ID) {
+    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
 router.post("/setReturnDate/:key/:loan_code", async (req, res) => {
  if (req.params.key === process.env.ADMIN_ID) {
--- a/backend/services/database.js
+++ b/backend/services/database.js
@@ -28,6 +28,17 @@ export const getItemsFromDatabaseV2 = async () => {
  return { success: false };
 };

+export const getLoanByCodeV2 = async (loan_code) => {
+  const [result] = await pool.query(
+    "SELECT * FROM loans WHERE loan_code = ?;",
+    [loan_code]
+  );
+  if (result.length > 0) {
+    return { success: true, data: result[0] };
+  }
+  return { success: false };
+};
+
 export const changeInSafeStateV2 = async (itemId, state) => {
  const [result] = await pool.query(
    "UPDATE items SET inSafe = ? WHERE id = ?",
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -9,7 +9,7 @@
      "version": "0.0.0",
      "dependencies": {
        "@tailwindcss/vite": "^4.1.11",
-        "@tanstack/react-query": "^5.85.0",
+        "@tanstack/react-query": "^5.85.5",
        "js-cookie": "^3.0.5",
        "lucide-react": "^0.539.0",
        "primeicons": "^7.0.0",
@@ -1836,9 +1836,9 @@
      }
    },
    "node_modules/@tanstack/query-core": {
-      "version": "5.85.3",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.85.3.tgz",
-      "integrity": "sha512-9Ne4USX83nHmRuEYs78LW+3lFEEO2hBDHu7mrdIgAFx5Zcrs7ker3n/i8p4kf6OgKExmaDN5oR0efRD7i2J0DQ==",
+      "version": "5.85.5",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.85.5.tgz",
+      "integrity": "sha512-KO0WTob4JEApv69iYp1eGvfMSUkgw//IpMnq+//cORBzXf0smyRwPLrUvEe5qtAEGjwZTXrjxg+oJNP/C00t6w==",
      "license": "MIT",
      "funding": {
        "type": "github",
@@ -1846,12 +1846,12 @@
      }
    },
    "node_modules/@tanstack/react-query": {
-      "version": "5.85.3",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.85.3.tgz",
-      "integrity": "sha512-AqU8TvNh5GVIE8I+TUU0noryBRy7gOY0XhSayVXmOPll4UkZeLWKDwi0rtWOZbwLRCbyxorfJ5DIjDqE7GXpcQ==",
+      "version": "5.85.5",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.85.5.tgz",
+      "integrity": "sha512-/X4EFNcnPiSs8wM2v+b6DqS5mmGeuJQvxBglmDxl6ZQb5V26ouD2SJYAcC3VjbNwqhY2zjxVD15rDA5nGbMn3A==",
      "license": "MIT",
      "dependencies": {
-        "@tanstack/query-core": "5.85.3"
+        "@tanstack/query-core": "5.85.5"
      },
      "funding": {
        "type": "github",
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -11,7 +11,7 @@
  },
  "dependencies": {
    "@tailwindcss/vite": "^4.1.11",
-    "@tanstack/react-query": "^5.85.0",
+    "@tanstack/react-query": "^5.85.5",
    "js-cookie": "^3.0.5",
    "lucide-react": "^0.539.0",
    "primeicons": "^7.0.0",
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -6,7 +6,11 @@ import Form2 from "./components/Form2";
 import Form4 from "./components/Form4";
 import LoginForm from "./components/LoginForm";
 import Cookies from "js-cookie";
-import { fetchAllData, ALL_ITEMS_UPDATED_EVENT } from "./utils/fetchData";
+import {
+  fetchAllData,
+  ALL_ITEMS_UPDATED_EVENT,
+  AUTH_LOGOUT_EVENT,
+} from "./utils/fetchData";
 import { myToast } from "./utils/toastify";

 function App() {
@@ -18,10 +22,17 @@ function App() {
      setIsLoggedIn(true);
      fetchAllData(token);
    }
-
    localStorage.setItem("borrowableItems", JSON.stringify([]));
  }, []);

+  useEffect(() => {
+    const onAuthLogout = () => {
+      setIsLoggedIn(false);
+    };
+    window.addEventListener(AUTH_LOGOUT_EVENT, onAuthLogout);
+    return () => window.removeEventListener(AUTH_LOGOUT_EVENT, onAuthLogout);
+  }, []);
+
  const handleLogout = () => {
    Cookies.remove("token");
    localStorage.removeItem("allItems");
--- a/frontend/src/components/Footer.tsx
+++ b/frontend/src/components/Footer.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+
+const Footer: React.FC = () => {
+  return (
+    <footer className="fixed bottom-0 left-0 text-sm w-full bg-slate-100 text-center py-2 border-t border-slate-200 z-50">
+      <p>Made with ❤️ by Theis Gaedigk - Jahrgang 2019</p>
+      <p>v1.1</p>
+    </footer>
+  );
+};
+
+export default Footer;
--- a/frontend/src/components/Form4.tsx
+++ b/frontend/src/components/Form4.tsx
@@ -1,6 +1,9 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { Trash, ArrowLeftRight } from "lucide-react";
 import { handleDeleteLoan } from "../utils/userHandler";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import Cookies from "js-cookie";
+import { queryClient } from "../utils/queryClient";

 type Loan = {
  id: number;
@@ -22,40 +25,39 @@ const formatDate = (iso: string | null) => {
  return d.toLocaleString("de-DE", { dateStyle: "short", timeStyle: "short" });
 };

-const readUserLoansFromStorage = (): Loan[] => {
-  const raw = localStorage.getItem("userLoans");
-  if (!raw || raw === '"No loans found for this user"') return [];
-  try {
-    const parsed = JSON.parse(raw);
-    return Array.isArray(parsed) ? (parsed as Loan[]) : [];
-  } catch {
-    return [];
-  }
-};
+async function fetchUserLoans(): Promise<Loan[]> {
+  const res = await fetch("http://localhost:8002/api/userLoans", {
+    method: "GET",
+    headers: { Authorization: `Bearer ${Cookies.get("token") || ""}` },
+  });
+  if (!res.ok) throw new Error("Failed to fetch user loans");
+  const data = await res.json();
+  if (data === "No loans found for this user") return [];
+  return Array.isArray(data) ? (data as Loan[]) : [];
+}

 const Form4: React.FC = () => {
-  const [userLoans, setUserLoans] = useState<Loan[]>(() =>
-    readUserLoansFromStorage()
-  );
+  const { data: userLoans = [], isFetching } = useQuery({
+    queryKey: ["userLoans"],
+    queryFn: fetchUserLoans,
+  });

-  useEffect(() => {
-    const onStorage = (e: StorageEvent) => {
-      if (e.key === "userLoans") {
-        setUserLoans(readUserLoansFromStorage());
-      }
-    };
-    window.addEventListener("storage", onStorage);
-    return () => window.removeEventListener("storage", onStorage);
-  }, []);
+  const deleteMutation = useMutation({
+    mutationFn: (loanID: number) => handleDeleteLoan(loanID),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["userLoans"] });
+    },
+  });

-  const onDelete = async (loanID: number) => {
-    const ok = await handleDeleteLoan(loanID);
-    if (ok) {
-      setUserLoans((prev) =>
-        prev.filter((l) => Number(l.id) !== Number(loanID))
-      );
-    }
-  };
+  const onDelete = (loanID: number) => deleteMutation.mutate(loanID);
+
+  if (isFetching) {
+    return (
+      <div className="rounded-xl border border-slate-200 bg-white p-6 text-center text-slate-600 shadow-sm">
+        <p>Lade Ausleihen…</p>
+      </div>
+    );
+  }

  if (userLoans.length === 0) {
    return (
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -23,6 +23,16 @@ const Header: React.FC<HeaderProps> = ({ onLogout }) => {
        >
          Logout
        </button>
+        <a href="https://git.the1s.de/Matthias-Claudius-Schule/borrow-system/src/branch/dev/Docs/HELP.md">
+          <button className="h-9 px-3 rounded-md border border-slate-300 text-slate-700 hover:bg-slate-100 transition">
+            Hilfe
+          </button>
+        </a>
+        <a href="https://git.the1s.de/Matthias-Claudius-Schule/borrow-system">
+          <button className="h-9 px-3 rounded-md border border-slate-300 text-slate-700 hover:bg-slate-100 transition">
+            Source Code
+          </button>
+        </a>
      </div>
    </header>
  );
--- a/frontend/src/components/LoginForm.tsx
+++ b/frontend/src/components/LoginForm.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import Footer from "./Footer";
 import { useState } from "react";
 import { loginUser } from "../utils/fetchData";
 import { myToast } from "../utils/toastify";
@@ -66,6 +67,7 @@ const LoginForm: React.FC<LoginFormProps> = ({ onLogin }) => {
          </button>
        </form>
      </div>
+      <Footer />
    </div>
  );
 };
--- a/frontend/src/components/Object.tsx
+++ b/frontend/src/components/Object.tsx
@@ -8,7 +8,7 @@ type ObjectProps = {
 const Object: React.FC<ObjectProps> = ({ title, description }) => {
  return (
    <div className="min-w-0">
-      <h3 className="text-sm font-semibold text-slate-900 truncate">{title}</h3>
+      <h3 className="text-sm font-semibold text-slate-900">{title}</h3>
      <p className="text-xs text-slate-600 line-clamp-2">{description}</p>
    </div>
  );
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
 import Object from "./Object";
+import { MonitorSmartphone } from "lucide-react";
 import { ALL_ITEMS_UPDATED_EVENT } from "../utils/fetchData";

 const Sidebar: React.FC = () => {
@@ -21,74 +22,74 @@ const Sidebar: React.FC = () => {
  const sorted = [...items].sort((a, b) => Number(a.inSafe) - Number(b.inSafe));

  return (
-    <aside className="w-full md:w-72 md:h-[calc(100vh-2rem)] md:sticky md:top-4 overflow-y-auto bg-white rounded-2xl p-3 sm:p-4 ring-1 ring-slate-200 shadow-sm">
-      <h2 className="text-lg sm:text-xl font-bold mb-3 text-slate-900 tracking-tight flex items-center justify-between">
-        <span className="flex items-center gap-2">
-          <svg
-            className="w-5 h-5 text-slate-700"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth={2}
-            viewBox="0 0 24 24"
-            aria-hidden="true"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              d="M16.5 7.5V4.75A2.25 2.25 0 0 0 14.25 2.5h-4.5A2.25 2.25 0 0 0 7.5 4.75V7.5m9 0h-9m9 0v11.75A2.25 2.25 0 0 1 14.25 21.5h-4.5A2.25 2.25 0 0 1 7.5 19.25V7.5m9 0h-9"
-            />
-          </svg>
-          Geräte Übersicht
+    <aside className="w-full md:w-72 md:h-full flex flex-col rounded-2xl pt-0 px-3 pb-3 sm:pt-0 sm:px-4 sm:pb-4 bg-gradient-to-b from-white to-slate-50 ring-1 ring-slate-200/70 shadow-md overflow-hidden">
+      <div className="sticky top-0 z-10 -mx-3 sm:-mx-4 px-3 sm:px-4 py-2.5 bg-white/85 backdrop-blur supports-[backdrop-filter]:backdrop-blur border-b border-slate-200/70 text-lg sm:text-xl font-bold mb-3 text-slate-900 tracking-tight flex items-center justify-between gap-2 rounded-t-2xl">
+        <span className="flex items-center gap-2 min-w-0 flex-1 truncate">
+          <MonitorSmartphone className="w-5 h-5 text-slate-700 shrink-0" />
+          <span className="truncate">Geräte</span>
        </span>
        {outCount > 0 && (
-          <span className="text-[10px] sm:text-xs px-2 py-0.5 rounded-full bg-amber-100 text-amber-700">
+          <span className="inline-flex items-center gap-1 whitespace-nowrap tabular-nums text-[10px] sm:text-xs px-2.5 py-1 rounded-full bg-amber-50 text-amber-700 ring-1 ring-amber-200/70 shadow-sm font-medium">
            {outCount} außerhalb
          </span>
        )}
-      </h2>
-
-      {/* Mobile: horizontal scroll, Desktop: vertical list */}
-      <div className="flex gap-3 overflow-x-auto snap-x snap-mandatory pb-1 -mr-1 pr-2 md:block md:space-y-3 md:pr-1">
-        {sorted.map((item: any) => (
-          <div
-            key={item.item_name}
-            className={`bg-white rounded-xl p-3 sm:p-4 ring-1 ring-slate-200 hover:ring-slate-300 transition ${
-              item.inSafe ? "" : "ring-red-200"
-            } shrink-0 snap-start min-w-[240px] md:min-w-0`}
-          >
-            <div className="flex items-start gap-3">
-              <span className="relative mt-0.5 inline-flex" aria-hidden="true">
-                {!item.inSafe && (
-                  <span className="absolute inline-flex h-3 w-3 rounded-full bg-red-400 opacity-75 animate-ping"></span>
-                )}
-                <span
-                  className={`inline-block w-3 h-3 rounded-full ${
-                    item.inSafe ? "bg-emerald-500" : "bg-red-500"
-                  }`}
-                  title={
-                    item.inSafe ? "Im Schließfach" : "Nicht im Schließfach"
-                  }
-                  aria-label={
-                    item.inSafe ? "Im Schließfach" : "Nicht im Schließfach"
-                  }
-                />
-              </span>
-              <Object
-                title={item.item_name}
-                description={
-                  item.inSafe ? "Im Schließfach" : "Nicht im Schließfach"
-                }
-              />
-            </div>
-          </div>
-        ))}
      </div>

-      <div className="mt-3 text-[10px] sm:text-xs text-slate-500 items-center gap-4 hidden md:flex">
-        <span className="inline-block w-3 h-3 bg-emerald-500 rounded-full"></span>
-        Verfügbar
-        <span className="inline-block w-3 h-3 bg-red-500 rounded-full"></span>
-        Außerhalb des Schließfachs
+      {/* Scroll area */}
+      <div className="flex-1 min-h-0 overflow-y-auto overflow-x-hidden">
+        <div className="flex flex-col gap-3 md:space-y-3">
+          {sorted.map((item: any) => (
+            <div
+              key={item.item_name}
+              className={`group relative w-full bg-white rounded-xl p-3 sm:p-4 ring-1 ring-slate-200/70 duration-200 hover:shadow-md focus-within:ring-slate-300 ${
+                item.inSafe
+                  ? "border-l-4 border-emerald-400"
+                  : "border-l-4 border-red-400 ring-red-200/60 bg-red-50/40"
+              }`}
+            >
+              <div className="flex items-start gap-3">
+                <span
+                  className="relative mt-0.5 inline-flex"
+                  aria-hidden="true"
+                >
+                  {!item.inSafe && (
+                    <span className="absolute inline-flex h-3 w-3 rounded-full bg-red-400 opacity-75 animate-ping"></span>
+                  )}
+                  <span
+                    className={`inline-block w-3 h-3 rounded-full ring-2 ring-white ${
+                      item.inSafe ? "bg-emerald-500" : "bg-red-500"
+                    }`}
+                    title={
+                      item.inSafe ? "Im Schließfach" : "Nicht im Schließfach"
+                    }
+                    aria-label={
+                      item.inSafe ? "Im Schließfach" : "Nicht im Schließfach"
+                    }
+                  />
+                </span>
+                <Object
+                  title={item.item_name}
+                  description={
+                    item.inSafe
+                      ? "Aktuell im Schließfach"
+                      : "Aktuell nicht im Schließfach"
+                  }
+                />
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div className="mt-4 pt-3 border-t border-slate-200/70 text-[10px] sm:text-xs text-slate-500 items-center gap-4 hidden md:flex">
+          <span className="inline-flex items-center gap-1">
+            <span className="inline-block w-3 h-3 bg-emerald-500 rounded-full ring-2 ring-white shadow-sm"></span>
+            Im Schließfach
+          </span>
+          <span className="inline-flex items-center gap-1">
+            <span className="inline-block w-3 h-3 bg-red-500 rounded-full ring-2 ring-white shadow-sm"></span>
+            Außerhalb des Schließfachs
+          </span>
+        </div>
      </div>
    </aside>
  );
--- a/frontend/src/layout/Layout.tsx
+++ b/frontend/src/layout/Layout.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import "../App.css";
 import Header from "../components/Header";
 import Sidebar from "../components/Sidebar";
+import Footer from "../components/Footer";

 type LayoutProps = {
  children: React.ReactNode;
@@ -10,29 +11,24 @@ type LayoutProps = {

 const Layout: React.FC<LayoutProps> = ({ children, onLogout }) => {
  return (
-    <div className="min-h-screen flex bg-slate-50 text-slate-800">
+    <div className="h-screen flex flex-col bg-slate-50 text-slate-800">
      {/* Main */}
-      <main className="flex-1 flex flex-col items-center px-3 sm:px-5 py-4 sm:py-8">
-        {/* Sidebar on mobile appears inline on top; on desktop it's a sticky column */}
-        <div className="w-full max-w-5xl md:flex md:gap-6">
-          <div className="block md:hidden mb-3">
+      <main className="flex-1 min-h-0 overflow-hidden flex flex-col items-center px-3 sm:px-5 py-4 sm:py-8 pb-12">
+        <div className="w-full max-w-5xl flex flex-col gap-3 md:flex-row md:gap-6 md:items-stretch min-h-0 h-full">
+          <div className="hidden md:flex md:flex-col md:shrink-0 md:w-72 md:min-h-0 md:h-full">
            <Sidebar />
          </div>
-
-          <div className="hidden md:block md:shrink-0 md:w-72">
-            <Sidebar />
-          </div>
-
-          <div className="flex-1 min-w-0">
+          <div className="flex-1 min-w-0 min-h-0 h-full flex flex-col overflow-hidden">
            <div className="w-full">
              <Header onLogout={onLogout} />
            </div>
-            <div className="w-full bg-white shadow-md md:shadow-lg rounded-2xl p-4 sm:p-6 ring-1 ring-slate-200">
+            <div className="w-full bg-white shadow-md md:shadow-lg rounded-2xl p-4 sm:p-6 ring-1 ring-slate-200 flex-1 min-h-0 overflow-y-auto">
              {children}
            </div>
          </div>
        </div>
      </main>
+      <Footer />
    </div>
  );
 };
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -2,24 +2,28 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import "./index.css";
 import App from "./App.tsx";
-import { ToastContainer } from "react-toastify";
+import { ToastContainer, Flip } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { queryClient } from "./utils/queryClient";

 createRoot(document.getElementById("root")!).render(
  <StrictMode>
-    <App />
-    <ToastContainer
-      position="top-right"
-      autoClose={3000}
-      hideProgressBar={false}
-      newestOnTop
-      closeOnClick
-      rtl={false}
-      pauseOnFocusLoss={false}
-      draggable
-      pauseOnHover
-      theme="colored"
-      style={{ zIndex: 9999 }}
-    />
+    <QueryClientProvider client={queryClient}>
+      <App />
+      <ToastContainer
+        position="top-right"
+        autoClose={3000}
+        hideProgressBar={false}
+        newestOnTop
+        closeOnClick
+        rtl={false}
+        pauseOnFocusLoss
+        draggable
+        pauseOnHover
+        theme="colored"
+        transition={Flip}
+      />
+    </QueryClientProvider>
  </StrictMode>
 );
--- a/frontend/src/utils/fetchData.ts
+++ b/frontend/src/utils/fetchData.ts
@@ -4,6 +4,22 @@ import { myToast } from "./toastify";
 // Event name used to notify the app when the list of items has been updated
 export const ALL_ITEMS_UPDATED_EVENT = "allItemsUpdated";
 export const BORROWABLE_ITEMS_UPDATED_EVENT = "borrowableItemsUpdated";
+export const AUTH_LOGOUT_EVENT = "authLogout";
+
+let sendError = false;
+
+function logout() {
+  Cookies.remove("token");
+  Cookies.remove("startDate");
+  Cookies.remove("endDate");
+  localStorage.removeItem("allItems");
+  localStorage.removeItem("allLoans");
+  localStorage.removeItem("userLoans");
+  localStorage.removeItem("borrowableItems");
+  window.dispatchEvent(new Event(ALL_ITEMS_UPDATED_EVENT));
+  window.dispatchEvent(new Event(BORROWABLE_ITEMS_UPDATED_EVENT));
+  window.dispatchEvent(new Event(AUTH_LOGOUT_EVENT));
+}

 export const fetchAllData = async (token: string | undefined) => {
  if (!token) return;
@@ -16,6 +32,16 @@ export const fetchAllData = async (token: string | undefined) => {
      },
    });

+    if (response.status === 500) {
+      if (!sendError) {
+        sendError = true;
+        myToast("Session expired. Please log in again.", "error");
+        logout();
+        return;
+      }
+      return;
+    }
+
    if (!response.ok) {
      myToast("Failed to fetch items", "error");
      return;
@@ -38,6 +64,16 @@ export const fetchAllData = async (token: string | undefined) => {
      },
    });

+    if (response.status === 500) {
+      if (!sendError) {
+        sendError = true;
+        myToast("Session expired. Please log in again.", "error");
+        logout();
+        return;
+      }
+      return;
+    }
+
    if (!response.ok) {
      myToast("Failed to fetch loans!", "error");
      return;
@@ -60,6 +96,16 @@ export const fetchAllData = async (token: string | undefined) => {
      },
    });

+    if (response.status === 500) {
+      if (!sendError) {
+        sendError = true;
+        myToast("Session expired. Please log in again.", "error");
+        logout();
+        return;
+      }
+      return;
+    }
+
    if (!response.ok) {
      myToast("Failed to fetch user loans!", "error");
      return;
@@ -122,6 +168,16 @@ export const getBorrowableItems = async () => {
      body: JSON.stringify({ startDate, endDate }),
    });

+    if (response.status === 500) {
+      if (!sendError) {
+        sendError = true;
+        myToast("Session expired. Please log in again.", "error");
+        logout();
+        return;
+      }
+      return;
+    }
+
    if (!response.ok) {
      myToast("Failed to fetch borrowable items", "error");
      return;
--- a/frontend/src/utils/queryClient.ts
+++ b/frontend/src/utils/queryClient.ts
@@ -0,0 +1,11 @@
+import { QueryClient } from "@tanstack/react-query";
+
+// Central QueryClient instance so utilities (e.g. file upload) can invalidate queries.
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      retry: 1,
+    },
+  },
+});
--- a/frontend/src/utils/toastify.ts
+++ b/frontend/src/utils/toastify.ts
@@ -1,17 +1,18 @@
-import { toast, type ToastOptions } from "react-toastify";
+import { toast, Flip, type ToastOptions } from "react-toastify";

 export type ToastType = "success" | "error" | "info" | "warning";

 export const myToast = (message: string, msgType: ToastType) => {
  let config: ToastOptions = {
    position: "top-right",
-    autoClose: 5000,
+    autoClose: 3000,
    hideProgressBar: false,
    closeOnClick: true,
    pauseOnHover: true,
    draggable: true,
    progress: undefined,
-    theme: "light",
+    theme: "colored",
+    transition: Flip,
  };
  toast[msgType](message, config);
 };
--- a/frontend/src/utils/userHandler.ts
+++ b/frontend/src/utils/userHandler.ts
@@ -1,5 +1,6 @@
 import { myToast } from "./toastify";
 import Cookies from "js-cookie";
+import { queryClient } from "./queryClient";

 export const handleDeleteLoan = async (loanID: number): Promise<boolean> => {
  try {
@@ -92,5 +93,10 @@ export const createLoan = async (startDate: string, endDate: string) => {
  removeArr = [];
  Cookies.set("removeArr", "[]");
  myToast("Ausleihe erfolgreich erstellt!", "success");
+
+  queryClient.invalidateQueries({ queryKey: ["userLoans"] });
+  queryClient.invalidateQueries({ queryKey: ["allLoans"] });
+  queryClient.invalidateQueries({ queryKey: ["borrowableItems"] });
+
  return true;
 };
Author	SHA1	Message	Date
theis.gaedigk	7faf95188d	added source code button	2025-08-21 18:53:33 +02:00
theis.gaedigk	79df00a17e	added footer component	2025-08-21 18:53:18 +02:00
theis.gaedigk	d1625d7e47	refactor help site	2025-08-21 13:00:01 +02:00
theis.gaedigk	a8377e5ec3	added help section	2025-08-21 12:48:03 +02:00
theis.gaedigk	8f1d401aa1	enhance sidebar item descriptions for clarity	2025-08-21 12:44:15 +02:00
theis.gaedigk	226a267ccb	updated example response in API documentation to include detailed item properties and entry creation timestamps	2025-08-21 00:38:28 +02:00
theis.gaedigk	fd9496645a	added detailed API documentation for retrieving loan details by loan code	2025-08-21 00:36:19 +02:00
theis.gaedigk	33bb64f44b	added ToDo.tsx to .gitignore	2025-08-20 18:14:15 +02:00
theis.gaedigk	2cf82c8dcb	fixed bug: error handeling	2025-08-20 18:09:33 +02:00
theis.gaedigk	bcf3cc08bb	added improved error handeling	2025-08-20 18:06:59 +02:00
theis.gaedigk	cd2b0e8e42	deleted unused notes	2025-08-20 18:06:40 +02:00
theis.gaedigk	4b79583574	added new api endpoint for getting the loan by the loan code	2025-08-20 17:07:49 +02:00
theis.gaedigk	c779a31bfa	updated toastify design	2025-08-20 13:38:54 +02:00
theis.gaedigk	c33f3e1101	refactor Layout component for improved sidebar responsiveness	2025-08-20 13:17:23 +02:00
theis.gaedigk	67dd74d3d3	refactor Sidebar component layout for improved responsiveness	2025-08-20 13:09:32 +02:00
theis.gaedigk	d82cde55cc	deleted unnecessary imports	2025-08-20 13:06:46 +02:00
theis.gaedigk	2b7f6e8e17	fixed sidebar displaying bug	2025-08-20 13:06:22 +02:00
theis.gaedigk	ccceb5840c	fixed sidebar display bug	2025-08-20 12:42:29 +02:00
theis.gaedigk	ff219d850b	fixed bug: Now you dont have to reload the page twice, after creating a loan	2025-08-20 12:30:37 +02:00
theis.gaedigk	ef19592b32	refactor docs	2025-08-20 01:29:58 +02:00