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/App.tsx

@@ -3,7 +3,7 @@ import Layout from "./layout/Layout";
 import { useEffect, useState } from "react";
 import Form1 from "./components/Form1";
 import Form2 from "./components/Form2";
-import Form3 from "./components/Form3";
+import Form4 from "./components/Form4";
 import LoginForm from "./components/LoginForm";
 import Cookies from "js-cookie";
 import { fetchAllData, ALL_ITEMS_UPDATED_EVENT } from "./utils/fetchData";
@@ -20,13 +20,15 @@ function App() {
     }
 
     localStorage.setItem("borrowableItems", JSON.stringify([]));
-    localStorage.setItem("borrowCode", "123456");
   }, []);
 
   // Mock flow without real logic: show the three sections stacked for design preview
   const handleLogout = () => {
     Cookies.remove("token");
     localStorage.removeItem("allItems");
+    localStorage.removeItem("allLoans");
+    localStorage.removeItem("userLoans");
+    localStorage.removeItem("borrowableItems");
     // Let listeners refresh from empty state
     window.dispatchEvent(new Event(ALL_ITEMS_UPDATED_EVENT));
     myToast("Logged out successfully!", "success");
@@ -40,7 +42,7 @@ function App() {
         <div className="h-px bg-blue-100" />
         <Form2 />
         <div className="h-px bg-blue-100" />
-        <Form3 />
+        <Form4 />
       </div>
     </Layout>
   ) : (