changed url

.gitignore

@@ -112,3 +112,5 @@ backend/public/uploads/
 config/
 secrets/
 keys/
+
+ToDo.txt

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)

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.
 
@@ -45,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:
@@ -69,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
@@ -82,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
@@ -93,7 +188,7 @@ POST /apiV2/controlInSafe/your_admin_key/5/0
 
 _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._
 
 ---
 
@@ -108,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
@@ -119,7 +214,7 @@ POST /apiV2/setReturnDate/your_admin_key/123456
 
 _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._
 
 ---
 
@@ -134,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
@@ -149,6 +244,57 @@ _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"
+}
+```
+
+---
+
 ## Error Handling
 
 - `403 Forbidden`: Invalid or missing API key.

README.md

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

backend/routes/api.js

@@ -7,11 +7,12 @@ import {
   deleteLoanFromDatabase,
   getBorrowableItemsFromDatabase,
   createLoanInDatabase,
+  onTake,
+  onReturn,
 } from "../services/database.js";
 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) {
@@ -86,6 +87,26 @@ router.post("/borrowableItems", authenticate, async (req, res) => {
   }
 });
 
+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 || {};

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) {

backend/services/database.js

@@ -29,6 +29,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 = ?",
@@ -283,3 +294,29 @@ export const createLoanInDatabase = async (
     conn.release();
   }
 };
+
+// These functions are only temporary, and will be deleted when the full bin is set up.
+
+export const onTake = async (loanId) => {
+  const [result] = await pool.query(
+    "UPDATE loans SET take_date = NOW() WHERE id = ?",
+    [loanId]
+  );
+
+  if (result.affectedRows > 0) {
+    return { success: true };
+  }
+  return { success: false };
+};
+
+export const onReturn = async (loanId) => {
+  const [result] = await pool.query(
+    "UPDATE loans SET returned_date = NOW() WHERE id = ?",
+    [loanId]
+  );
+
+  if (result.affectedRows > 0) {
+    return { success: true };
+  }
+  return { success: false };
+};

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

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;

frontend/src/components/Form4.tsx

@@ -4,6 +4,7 @@ import { handleDeleteLoan } from "../utils/userHandler";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import Cookies from "js-cookie";
 import { queryClient } from "../utils/queryClient";
+import { onTake, onReturn } from "../utils/userHandler";
 
 type Loan = {
   id: number;
@@ -26,7 +27,7 @@ const formatDate = (iso: string | null) => {
 };
 
 async function fetchUserLoans(): Promise<Loan[]> {
-  const res = await fetch("http://localhost:8002/api/userLoans", {
+  const res = await fetch("https://backend.insta.the1s.de/api/userLoans", {
     method: "GET",
     headers: { Authorization: `Bearer ${Cookies.get("token") || ""}` },
   });
@@ -49,6 +50,20 @@ const Form4: React.FC = () => {
     },
   });
 
+  const takeMutation = useMutation({
+    mutationFn: (loanID: number) => onTake(loanID),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["userLoans"] });
+    },
+  });
+
+  const returnMutation = useMutation({
+    mutationFn: (loanID: number) => onReturn(loanID),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["userLoans"] });
+    },
+  });
+
   const onDelete = (loanID: number) => deleteMutation.mutate(loanID);
 
   if (isFetching) {
@@ -99,11 +114,32 @@ const Form4: React.FC = () => {
                   </div>
                   <div>
                     <span className="text-slate-500">Abgeholt:</span>{" "}
-                    {formatDate(loan.take_date)}
+                    {loan.take_date ? (
+                      formatDate(loan.take_date)
+                    ) : (
+                      <button
+                        className="inline-flex items-center rounded-md border border-blue-200 bg-blue-50 px-2 py-0.5 text-[11px] font-medium text-blue-700 hover:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-500/40 disabled:opacity-50"
+                        onClick={() => takeMutation.mutate(loan.id)}
+                        disabled={takeMutation.isPending}
+                      >
+                        {takeMutation.isPending ? "..." : "Abholen"}
+                      </button>
+                    )}
                   </div>
                   <div>
                     <span className="text-slate-500">Zurück:</span>{" "}
-                    {formatDate(loan.returned_date)}
+                    {loan.returned_date ? (
+                      formatDate(loan.returned_date)
+                    ) : (
+                      <button
+                        className="inline-flex items-center rounded-md border border-emerald-200 bg-emerald-50 px-2 py-0.5 text-[11px] font-medium text-emerald-700 hover:bg-emerald-100 focus:outline-none focus:ring-2 focus:ring-emerald-500/40 disabled:opacity-50"
+                        onClick={() => returnMutation.mutate(loan.id)}
+                        disabled={returnMutation.isPending || !loan.take_date}
+                        title={!loan.take_date ? "Erst abholen" : ""}
+                      >
+                        {returnMutation.isPending ? "..." : "Zurückgeben"}
+                      </button>
+                    )}
                   </div>
                 </div>
                 <div className="mt-2 text-xs text-slate-700">
@@ -170,10 +206,31 @@ const Form4: React.FC = () => {
                     {formatDate(loan.end_date)}
                   </td>
                   <td className="px-4 py-3 whitespace-nowrap font-mono tabular-nums text-slate-900">
-                    {formatDate(loan.take_date)}
+                    {loan.take_date ? (
+                      formatDate(loan.take_date)
+                    ) : (
+                      <button
+                        className="inline-flex items-center rounded-md border border-blue-200 bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 hover:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-500/40 disabled:opacity-50"
+                        onClick={() => takeMutation.mutate(loan.id)}
+                        disabled={takeMutation.isPending}
+                      >
+                        {takeMutation.isPending ? "..." : "Abholen"}
+                      </button>
+                    )}
                   </td>
                   <td className="px-4 py-3 whitespace-nowrap font-mono tabular-nums text-slate-900">
-                    {formatDate(loan.returned_date)}
+                    {loan.returned_date ? (
+                      formatDate(loan.returned_date)
+                    ) : (
+                      <button
+                        className="inline-flex items-center rounded-md border border-emerald-200 bg-emerald-50 px-2 py-1 text-xs font-medium text-emerald-700 hover:bg-emerald-100 focus:outline-none focus:ring-2 focus:ring-emerald-500/40 disabled:opacity-50"
+                        onClick={() => returnMutation.mutate(loan.id)}
+                        disabled={returnMutation.isPending || !loan.take_date}
+                        title={!loan.take_date ? "Erst abholen" : ""}
+                      >
+                        {returnMutation.isPending ? "..." : "Zurückgeben"}
+                      </button>
+                    )}
                   </td>
                   <td className="px-4 py-3 whitespace-nowrap font-mono tabular-nums text-slate-900">
                     {formatDate(loan.created_at)}
@@ -182,7 +239,7 @@ const Form4: React.FC = () => {
                     <div className="text-slate-900">
                       {Array.isArray(loan.loaned_items_name)
                         ? loan.loaned_items_name.join(", ")
-                        : "-"}
+                        : ""}
                     </div>
                   </td>
                   <td className="px-4 py-3 text-right">

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

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

frontend/src/components/Sidebar.tsx

@@ -70,7 +70,9 @@ const Sidebar: React.FC = () => {
                 <Object
                   title={item.item_name}
                   description={
-                    item.inSafe ? "Im Schließfach" : "Nicht im Schließfach"
+                    item.inSafe
+                      ? "Aktuell im Schließfach"
+                      : "Aktuell nicht im Schließfach"
                   }
                 />
               </div>
@@ -81,7 +83,7 @@ const Sidebar: React.FC = () => {
         <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>
-            Verfügbar
+            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>

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,15 +11,13 @@ type LayoutProps = {
 
 const Layout: React.FC<LayoutProps> = ({ children, onLogout }) => {
   return (
-    <div className="h-screen overflow-hidden 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 min-h-0 overflow-hidden 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 */}
+      <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="flex-1 min-w-0 min-h-0 h-full flex flex-col overflow-hidden">
             <div className="w-full">
               <Header onLogout={onLogout} />
@@ -29,6 +28,7 @@ const Layout: React.FC<LayoutProps> = ({ children, onLogout }) => {
           </div>
         </div>
       </main>
+      <Footer />
     </div>
   );
 };

frontend/src/main.tsx

@@ -2,7 +2,7 @@ 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";
@@ -18,11 +18,11 @@ createRoot(document.getElementById("root")!).render(
         newestOnTop
         closeOnClick
         rtl={false}
-        pauseOnFocusLoss={false}
+        pauseOnFocusLoss
         draggable
         pauseOnHover
         theme="colored"
-        style={{ zIndex: 9999 }}
+        transition={Flip}
       />
     </QueryClientProvider>
   </StrictMode>

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;

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

frontend/src/utils/userHandler.ts

@@ -75,14 +75,17 @@ export const rmFromRemove = (itemID: number) => {
 
 export const createLoan = async (startDate: string, endDate: string) => {
   const items = removeArr;
-  const response = await fetch("https://backend.insta.the1s.de/api/createLoan", {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      Authorization: `Bearer ${Cookies.get("token") || ""}`,
-    },
-    body: JSON.stringify({ items, startDate, endDate }),
-  });
+  const response = await fetch(
+    "https://backend.insta.the1s.de/api/createLoan",
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${Cookies.get("token") || ""}`,
+      },
+      body: JSON.stringify({ items, startDate, endDate }),
+    }
+  );
 
   if (!response.ok) {
     myToast("Fehler beim Erstellen der Ausleihe", "error");
@@ -100,3 +103,43 @@ export const createLoan = async (startDate: string, endDate: string) => {
 
   return true;
 };
+
+export const onReturn = async (loanID: number) => {
+  const response = await fetch(
+    `https://backend.insta.the1s.de/api/returnLoan/${loanID}`,
+    {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${Cookies.get("token") || ""}`,
+      },
+    }
+  );
+
+  if (!response.ok) {
+    myToast("Fehler beim Zurückgeben der Ausleihe", "error");
+    return false;
+  }
+
+  myToast("Ausleihe erfolgreich zurückgegeben!", "success");
+  return true;
+};
+
+export const onTake = async (loanID: number) => {
+  const response = await fetch(
+    `https://backend.insta.the1s.de/api/takeLoan/${loanID}`,
+    {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${Cookies.get("token") || ""}`,
+      },
+    }
+  );
+
+  if (!response.ok) {
+    myToast("Fehler beim Ausleihen der Ausleihe", "error");
+    return false;
+  }
+
+  myToast("Ausleihe erfolgreich ausgeliehen!", "success");
+  return true;
+};