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>