feat: Implement loan management features including fetching, creating, and deleting loans

- Added database functions for managing loans: getLoans, getUserLoans, deleteLoan, and createLoan.
- Updated frontend to include new Form4 for displaying user loans and handling loan deletions.
- Replaced Form3 with Form4 in App component.
- Enhanced Form1 to set borrowing dates and fetch available items.
- Improved Form2 to display borrowable items and allow selection for loans.
- Introduced utility functions for handling loan creation and deletion in userHandler.
- Added event listeners for local storage updates to keep UI in sync.
- Updated fetchData utility to retrieve loans and user loans from the backend.

frontend/src/components/Form1.tsx

@@ -1,10 +1,25 @@
 import React from "react";
+import Cookies from "js-cookie";
+import { getBorrowableItems } from "../utils/fetchData";
 
 const Form1: React.FC = () => {
   return (
     <div className="space-y-6">
       <h2 className="text-xl font-bold text-blue-700">1. Zeitraum wählen</h2>
-      <form className="space-y-4">
+      <form
+        className="space-y-4"
+        onSubmit={(e) => {
+          e.preventDefault();
+          const form = e.currentTarget as HTMLFormElement;
+          const fd = new FormData(form);
+          const start = (fd.get("startDate") as string) || "";
+          const end = (fd.get("endDate") as string) || "";
+          Cookies.set("startDate", start);
+          Cookies.set("endDate", end);
+          getBorrowableItems();
+          console.log("Zeitraum erfolgreich gesetzt!");
+        }}
+      >
         <div>
           <label
             htmlFor="startDate"
@@ -15,6 +30,7 @@ const Form1: React.FC = () => {
           <input
             type="datetime-local"
             id="startDate"
+            name="startDate"
             className="w-full border border-blue-200 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:outline-none bg-white/70"
           />
         </div>
@@ -28,6 +44,7 @@ const Form1: React.FC = () => {
           <input
             type="datetime-local"
             id="endDate"
+            name="endDate"
             className="w-full border border-blue-200 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:outline-none bg-white/70"
           />
         </div>

frontend/src/components/Form2.tsx

@@ -1,59 +1,170 @@
 import React from "react";
+import Cookies from "js-cookie";
+import { createLoan } from "../utils/userHandler";
+import { addToRemove, rmFromRemove } from "../utils/userHandler";
+import { BORROWABLE_ITEMS_UPDATED_EVENT } from "../utils/fetchData";
+
+interface BorrowItem {
+  id: number;
+  item_name: string;
+  can_borrow_role: string;
+  inSafe: number;
+}
+
+const LOCAL_STORAGE_KEY = "borrowableItems";
+
+// Einfache Type-Guard/Validierung
+const isBorrowItem = (v: any): v is BorrowItem =>
+  v &&
+  typeof v.id === "number" &&
+  (typeof v.item_name === "string" || typeof v.name === "string") &&
+  (typeof v.can_borrow_role === "string" || typeof v.role === "string");
+
+// Helfer: unterschiedliche Server-Shapes normalisieren
+function normalizeBorrowable(data: any): BorrowItem[] {
+  const rawArr = Array.isArray(data)
+    ? data
+    : Array.isArray(data?.items)
+    ? data.items
+    : Array.isArray(data?.data)
+    ? data.data
+    : [];
+
+  return rawArr
+    .map((raw: any) => {
+      const idRaw =
+        raw.id ?? raw.item_id ?? raw.itemId ?? raw.itemID ?? raw.itemIdPk;
+      const id = Number(idRaw);
+      const item_name = String(raw.item_name ?? raw.name ?? raw.title ?? "");
+      const can_borrow_role = String(
+        raw.can_borrow_role ?? raw.role ?? raw.requiredRole ?? ""
+      );
+      const inSafeRaw =
+        raw.inSafe ?? raw.in_safe ?? raw.inLocker ?? raw.isInSafe ?? raw.safe;
+      const inSafe =
+        typeof inSafeRaw === "boolean"
+          ? Number(inSafeRaw)
+          : Number(isNaN(Number(inSafeRaw)) ? 0 : Number(inSafeRaw));
+
+      if (!Number.isFinite(id) || !item_name) return null;
+      return { id, item_name, can_borrow_role, inSafe };
+    })
+    .filter(Boolean) as BorrowItem[];
+}
+
+// Hook, der automatisch aus dem Local Storage liest und auf Änderungen hört
+function useBorrowableItems() {
+  const [items, setItems] = React.useState<BorrowItem[]>([]);
+
+  const readFromStorage = React.useCallback(() => {
+    try {
+      const raw = localStorage.getItem(LOCAL_STORAGE_KEY) || "[]";
+      const parsed = JSON.parse(raw);
+      const arr = normalizeBorrowable(parsed);
+      setItems(arr);
+    } catch {
+      setItems([]);
+    }
+  }, []);
+
+  React.useEffect(() => {
+    // Initial read
+    readFromStorage();
+
+    // Cross-tab updates
+    const onStorage = (e: StorageEvent) => {
+      if (e.key === LOCAL_STORAGE_KEY) readFromStorage();
+    };
+    window.addEventListener("storage", onStorage);
+
+    // Same-tab updates via Custom Event
+    const onBorrowableUpdated = () => readFromStorage();
+    window.addEventListener(
+      BORROWABLE_ITEMS_UPDATED_EVENT,
+      onBorrowableUpdated
+    );
+
+    return () => {
+      window.removeEventListener("storage", onStorage);
+      window.removeEventListener(
+        BORROWABLE_ITEMS_UPDATED_EVENT,
+        onBorrowableUpdated
+      );
+    };
+  }, [readFromStorage]);
+
+  return items;
+}
 
 const Form2: React.FC = () => {
-  const items = JSON.parse(localStorage.getItem("borrowableItems") || "[]");
+  const items = useBorrowableItems();
+
   return (
     <div className="space-y-6">
       <h2 className="text-xl font-bold text-blue-700">
         2. Gegenstand auswählen
       </h2>
-      <form className="space-y-4">
-        {items.length === 0 ? (
-          <div className="text-red-600 font-medium text-center bg-red-50 border border-red-200 rounded-xl p-4">
-            Keine Gegenstände verfügbar für diesen Zeitraum.
-          </div>
-        ) : (
-          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-            {items.map((item: any) => (
-              <label
-                key={item.id}
-                htmlFor={String(item.id)}
-                className="group cursor-pointer bg-white/80 rounded-xl p-4 shadow hover:shadow-md transition border border-blue-100 flex items-start gap-3"
-              >
-                <input
-                  type="checkbox"
-                  name={String(item.id)}
-                  id={String(item.id)}
-                  className="mt-1 h-4 w-4 rounded border-blue-300 text-blue-600 focus:ring-blue-400"
-                />
-                <div>
-                  <h3 className="text-sm font-semibold text-blue-800">
-                    {item.title}
-                  </h3>
-                  <p className="text-xs text-blue-500/80 line-clamp-2">
-                    {item.description}
-                  </p>
-                </div>
-              </label>
-            ))}
-          </div>
-        )}
 
-        <div className="flex flex-col sm:flex-row gap-3 pt-2">
-          <button
-            type="button"
-            className="flex-1 sm:flex-none sm:w-36 bg-white text-blue-700 border border-blue-200 hover:bg-blue-50 font-medium py-2 px-4 rounded-xl shadow-sm transition"
-          >
-            Zurück
-          </button>
-          <button
-            type="submit"
-            className="flex-1 sm:flex-none sm:w-40 bg-gradient-to-r from-blue-600 to-blue-400 hover:from-blue-700 hover:to-blue-500 text-white font-bold py-2 px-4 rounded-xl shadow transition"
-          >
-            Ausleihen
-          </button>
+      {items.length === 0 ? (
+        <div className="text-red-600 font-medium text-center bg-red-50 border border-red-200 rounded-xl p-4">
+          Keine Gegenstände verfügbar für diesen Zeitraum.
         </div>
-      </form>
+      ) : (
+        <div className="overflow-x-auto rounded-xl border border-blue-100 shadow-sm bg-white/80">
+          <table className="min-w-full divide-y divide-blue-100">
+            <thead className="bg-blue-50/60">
+              <tr>
+                <th className="px-4 py-2 text-left text-xs font-semibold text-blue-700">
+                  Gegenstand
+                </th>
+                <th className="px-4 py-2 text-left text-xs font-semibold text-blue-700">
+                  <input type="checkbox" className="invisible" />
+                </th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-blue-50">
+              {items.map((item) => (
+                <tr
+                  key={item.id}
+                  className="hover:bg-blue-50/40 transition-colors"
+                >
+                  <td className="px-4 py-2 text-sm font-medium text-blue-900">
+                    {item.item_name}
+                  </td>
+                  <td className="px-4 py-2 text-sm text-blue-700">
+                    <input
+                      type="checkbox"
+                      onChange={(e) => {
+                        if (e.target.checked) {
+                          addToRemove(item.id);
+                        } else {
+                          rmFromRemove(item.id);
+                        }
+                      }}
+                      id={`item-${item.id}`}
+                    />
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+
+      <div className="flex flex-col sm:flex-row gap-3 pt-2">
+        <button
+          onClick={() => {
+            createLoan(
+              Cookies.get("startDate") ?? "",
+              Cookies.get("endDate") ?? ""
+            );
+          }}
+          type="button"
+          className="flex-1 sm:flex-none sm:w-40 bg-gradient-to-r from-blue-600 to-blue-400 hover:from-blue-700 hover:to-blue-500 text-white font-bold py-2 px-4 rounded-xl shadow transition"
+        >
+          Ausleihen
+        </button>
+      </div>
     </div>
   );
 };

frontend/src/components/Form3.tsx

@@ -1,22 +0,0 @@
-import React from "react";
-
-const Form3: React.FC = () => {
-  const code = localStorage.getItem("borrowCode") ?? "—";
-
-  return (
-    <div className="space-y-4">
-      <h2 className="text-xl font-bold text-blue-700">3. Ausleihe bestätigt</h2>
-      <div className="mt-2 p-6 bg-blue-50/80 border border-blue-200 rounded-2xl text-center shadow-lg">
-        <p className="text-blue-800 font-semibold">Ihr Ausleihcode lautet</p>
-        <div className="text-3xl font-extrabold tracking-widest text-blue-700 mt-1">
-          {code}
-        </div>
-        <p className="text-blue-600 mt-2 text-sm">
-          Bitte merken Sie sich diesen Code, um das Schließfach zu öffnen.
-        </p>
-      </div>
-    </div>
-  );
-};
-
-export default Form3;

frontend/src/components/Form4.tsx

@@ -0,0 +1,161 @@
+import React, { useEffect, useState } from "react";
+import { Trash, ArrowLeftRight } from "lucide-react";
+import { handleDeleteLoan } from "../utils/userHandler";
+
+type Loan = {
+  id: number;
+  username: string;
+  loan_code: number;
+  start_date: string;
+  end_date: string;
+  returned_date: string | null;
+  created_at: string;
+  loaned_items_id: number[];
+  loaned_items_name: string[];
+};
+
+const formatDate = (iso: string | null) => {
+  if (!iso) return "-";
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return iso;
+  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 [];
+  }
+};
+
+const Form4: React.FC = () => {
+  const [userLoans, setUserLoans] = useState<Loan[]>(() =>
+    readUserLoansFromStorage()
+  );
+
+  // Keep in sync if localStorage changes (e.g., other tabs or parts of the app)
+  useEffect(() => {
+    const onStorage = (e: StorageEvent) => {
+      if (e.key === "userLoans") {
+        setUserLoans(readUserLoansFromStorage());
+      }
+    };
+    window.addEventListener("storage", onStorage);
+    return () => window.removeEventListener("storage", onStorage);
+  }, []);
+
+  const onDelete = async (loanID: number) => {
+    const ok = await handleDeleteLoan(loanID);
+    if (ok) {
+      setUserLoans((prev) =>
+        prev.filter((l) => Number(l.id) !== Number(loanID))
+      );
+    }
+  };
+
+  if (userLoans.length === 0) {
+    return (
+      <div className="rounded-xl border border-gray-200 bg-white p-6 text-center text-gray-600 shadow-sm">
+        <p>Keine Ausleihen gefunden.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-3">
+      <p className="text-lg font-semibold tracking-tight text-gray-900">
+        Meine Ausleihen
+      </p>
+      <p className="text-sm text-gray-600">
+        Wenn du eine Ausleihe ändern oder löschen möchtest, klicke auf das
+        Papierkorb-Symbol.
+      </p>
+
+      <div className="rounded-xl border border-gray-200 bg-white shadow-sm">
+        <div className="overflow-x-auto">
+          <table className="min-w-full text-sm text-gray-700">
+            <thead className="sticky top-0 z-10 bg-gray-50">
+              <tr className="border-b border-gray-200">
+                <th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-600">
+                  Leihcode
+                </th>
+                <th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-600">
+                  Start
+                </th>
+                <th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-600">
+                  Ende
+                </th>
+                <th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-600">
+                  Zurückgegeben
+                </th>
+                <th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-600">
+                  Erstellt
+                </th>
+                <th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-600">
+                  Gegenstände
+                </th>
+                <th className="px-4 py-3 text-right text-xs font-semibold uppercase tracking-wider text-gray-600">
+                  Aktionen
+                </th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-100">
+              {userLoans.map((loan) => (
+                <tr
+                  key={loan.id}
+                  className="odd:bg-white even:bg-gray-50 hover:bg-gray-100/60 transition-colors"
+                >
+                  <td className="px-4 py-3 whitespace-nowrap font-mono tabular-nums text-gray-900">
+                    {loan.loan_code}
+                  </td>
+                  <td className="px-4 py-3 whitespace-nowrap font-mono tabular-nums text-gray-900">
+                    {formatDate(loan.start_date)}
+                  </td>
+                  <td className="px-4 py-3 whitespace-nowrap font-mono tabular-nums text-gray-900">
+                    {formatDate(loan.end_date)}
+                  </td>
+                  <td className="px-4 py-3 whitespace-nowrap font-mono tabular-nums text-gray-900">
+                    {formatDate(loan.returned_date)}
+                  </td>
+                  <td className="px-4 py-3 whitespace-nowrap font-mono tabular-nums text-gray-900">
+                    {formatDate(loan.created_at)}
+                  </td>
+                  <td className="px-4 py-3">
+                    <div className="max-w-[22rem] truncate text-gray-900">
+                      {Array.isArray(loan.loaned_items_name)
+                        ? loan.loaned_items_name.join(", ")
+                        : "-"}
+                    </div>
+                  </td>
+                  <td className="px-4 py-3 text-right">
+                    <button
+                      onClick={() => onDelete(loan.id)}
+                      aria-label="Ausleihe löschen"
+                      className="inline-flex items-center rounded-md p-2 text-gray-500 hover:bg-red-50 hover:text-red-600 focus:outline-none focus:ring-2 focus:ring-red-500/30"
+                    >
+                      <Trash className="h-4 w-4" />
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+
+        {/* Scroll hint */}
+        <div className="border-t border-gray-100 px-4 py-2">
+          <div className="flex items-center gap-2 text-xs text-gray-500">
+            <ArrowLeftRight className="h-4 w-4 text-gray-400" />
+            <span>Hinweis: Horizontal scrollen, um alle Spalten zu sehen.</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Form4;

frontend/src/components/Object.tsx

@@ -7,12 +7,9 @@ type ObjectProps = {
 
 const Object: React.FC<ObjectProps> = ({ title, description }) => {
   return (
-    <div className="flex items-start gap-3">
-      <div className="shrink-0 w-3 h-3 mt-1.5 rounded-full bg-green-400" />
-      <div>
-        <h3 className="text-sm font-semibold text-blue-800">{title}</h3>
-        <p className="text-xs text-blue-500/80 line-clamp-2">{description}</p>
-      </div>
+    <div>
+      <h3 className="text-sm font-semibold text-blue-800">{title}</h3>
+      <p className="text-xs text-blue-500/80 line-clamp-2">{description}</p>
     </div>
   );
 };

frontend/src/components/Sidebar.tsx

@@ -18,37 +18,67 @@ const Sidebar: React.FC = () => {
     return () => window.removeEventListener(ALL_ITEMS_UPDATED_EVENT, handler);
   }, []);
 
+  const outCount = items.reduce((n, it) => n + (it.inSafe ? 0 : 1), 0);
+  const sorted = [...items].sort((a, b) => Number(a.inSafe) - Number(b.inSafe)); // außerhalb zuerst
+
   return (
-    <aside className="w-full md:w-80 md:min-h-screen bg-white/90 backdrop-blur md:border-r border-blue-100 shadow-xl flex flex-col p-6">
-      <h2 className="text-2xl font-extrabold mb-4 text-blue-700 tracking-tight flex items-center gap-2">
-        <svg
-          className="w-6 h-6 text-blue-500"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth={2}
-          viewBox="0 0 24 24"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            d="M16.5 7.5V4.75A2.25 2.25 0 0 0 14.25 2.5h-4.5A2.25 2.25 0 0 0 7.5 4.75V7.5m9 0h-9m9 0v11.75A2.25 2.25 0 0 1 14.25 21.5h-4.5A2.25 2.25 0 0 1 7.5 19.25V7.5m9 0h-9"
-          />
-        </svg>
-        Geräte Übersicht
+    <aside className="w-full md:w-80 md:h-screen md:sticky md:top-0 overflow-y-auto bg-white/90 backdrop-blur md:border-r border-blue-100 shadow-xl flex flex-col p-6">
+      <h2 className="text-2xl font-extrabold mb-4 text-blue-700 tracking-tight flex items-center justify-between">
+        <span className="flex items-center gap-2">
+          <svg
+            className="w-6 h-6 text-blue-500"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth={2}
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M16.5 7.5V4.75A2.25 2.25 0 0 0 14.25 2.5h-4.5A2.25 2.25 0 0 0 7.5 4.75V7.5m9 0h-9m9 0v11.75A2.25 2.25 0 0 1 14.25 21.5h-4.5A2.25 2.25 0 0 1 7.5 19.25V7.5m9 0h-9"
+            />
+          </svg>
+          Geräte Übersicht
+        </span>
+        {outCount > 0 && (
+          <span className="text-xs px-2 py-0.5 rounded-full bg-red-100 text-red-700">
+            {outCount} außerhalb
+          </span>
+        )}
       </h2>
 
-      <div className="space-y-4 flex-1 overflow-auto pr-1">
-        {items.map((item: any) => (
+      <div className="space-y-4 flex-1 pr-1">
+        {sorted.map((item: any) => (
           <div
             key={item.item_name}
-            className="bg-white/80 rounded-xl p-4 shadow hover:shadow-md transition"
+            className={`bg-white/80 rounded-xl p-4 shadow hover:shadow-md transition ${
+              item.inSafe ? "" : "ring-1 ring-red-200"
+            }`}
           >
-            <Object
-              title={item.item_name}
-              description={
-                item.inSafe ? "Im Schließfach" : "Nicht im Schließfach"
-              }
-            />
+            <div className="flex items-start gap-3">
+              <span className="relative mt-1 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-green-400" : "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>