added MyLoansPage component and integrated loan deletion functionality; updated routing in App and added Header component

FrontendV2/src/pages/HomePage.tsx

@@ -1,25 +1,20 @@
-import { useUserContext } from "@/states/Context";
 import {
   Container,
   Stack,
-  Heading,
   Text,
-  Badge,
-  Flex,
   Button,
   Input,
   Spinner,
   VStack,
   Table,
 } from "@chakra-ui/react";
-import { triggerLogoutAtom, setIsLoggedInAtom } from "@/states/Atoms";
 import { useAtom } from "jotai";
-import Cookies from "js-cookie";
 import { getBorrowableItems } from "@/utils/Fetcher";
 import { useState } from "react";
 import MyAlert from "@/components/myChakra/MyAlert";
 import { borrowAbleItemsAtom } from "@/states/Atoms";
 import { createLoan } from "@/utils/Fetcher";
+import { Header } from "@/components/Header";
 
 export interface User {
   username: string;
@@ -27,9 +22,6 @@ export interface User {
 }
 
 export const HomePage = () => {
-  const userData = useUserContext();
-  const [, setTriggerLogout] = useAtom(triggerLogoutAtom);
-  const [, setIsLoggedIn] = useAtom(setIsLoggedInAtom);
   const [borrowableItems, setBorrowableItems] = useAtom(borrowAbleItemsAtom);
   const [startDate, setStartDate] = useState("");
   const [endDate, setEndDate] = useState("");
@@ -52,56 +44,7 @@ export const HomePage = () => {
 
   return (
     <Container maxW="7xl" className="px-6 sm:px-8 pt-10">
-      <Stack as="header" gap={3} className="mb-16">
-        <Flex
-          direction={{ base: "column", md: "row" }}
-          align={{ base: "stretch", md: "center" }}
-          justify="space-between"
-          gap={4}
-        >
-          <Stack gap={2}>
-            <Heading
-              size="2xl"
-              className="tracking-tight text-slate-900 dark:text-slate-100"
-            >
-              Home
-            </Heading>
-            <Stack
-              direction={{ base: "column", sm: "row" }}
-              gap={2}
-              alignItems="start"
-            >
-              <Text
-                fontSize="md"
-                className="text-slate-600 dark:text-slate-400"
-              >
-                Willkommen zurück,{" "}
-                {userData.username.replace(
-                  /^./,
-                  userData.username[0].toUpperCase()
-                )}
-                !
-              </Text>
-              <Badge variant="subtle" px={2} py={1} borderRadius="full">
-                Rolle: {userData.role}
-              </Badge>
-            </Stack>
-          </Stack>
-
-          <Button
-            onClick={() => {
-              Cookies.remove("token");
-              setIsLoggedIn(false);
-              setTriggerLogout(true);
-            }}
-            variant="solid"
-            size="sm"
-            className="self-start md:self-auto"
-          >
-            Logout
-          </Button>
-        </Flex>
-      </Stack>
+      <Header />
       {isMsg && (
         <MyAlert
           status={msgStatus}