refactored api routes

feat: edited imports

FrontendV2/package-lock.json

@@ -11,7 +11,8 @@
         "@chakra-ui/react": "^3.28.0",
         "@emotion/react": "^11.14.0",
         "@tailwindcss/vite": "^4.1.11",
-        "@tanstack/react-query": "^5.85.5",
+        "@tanstack/react-query": "^5.90.5",
+        "i18next": "^25.6.0",
         "jotai": "^2.15.0",
         "js-cookie": "^3.0.5",
         "lucide-react": "^0.539.0",
@@ -20,6 +21,7 @@
         "primereact": "^10.9.6",
         "react": "^19.1.1",
         "react-dom": "^19.1.1",
+        "react-i18next": "^16.2.0",
         "react-icons": "^5.5.0",
         "react-router-dom": "^7.8.0",
         "react-toastify": "^11.0.5",
@@ -4313,6 +4315,46 @@
         "react-is": "^16.7.0"
       }
     },
+    "node_modules/html-parse-stringify": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+      "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+      "license": "MIT",
+      "dependencies": {
+        "void-elements": "3.1.0"
+      }
+    },
+    "node_modules/i18next": {
+      "version": "25.6.0",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-25.6.0.tgz",
+      "integrity": "sha512-tTn8fLrwBYtnclpL5aPXK/tAYBLWVvoHM1zdfXoRNLcI+RvtMsoZRV98ePlaW3khHYKuNh/Q65W/+NVFUeIwVw==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://locize.com"
+        },
+        {
+          "type": "individual",
+          "url": "https://locize.com/i18next.html"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.27.6"
+      },
+      "peerDependencies": {
+        "typescript": "^5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -5264,6 +5306,33 @@
         "react": "^19.2.0"
       }
     },
+    "node_modules/react-i18next": {
+      "version": "16.2.0",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-16.2.0.tgz",
+      "integrity": "sha512-giCEDa6NtQYvuLGW9xaBo4HCVxT0Y8jrOpX/uSnd+lZ3Dmm/2BNrGNEgRZzWDkSobmE6IWPJ+/Ow9Rhi/gP6+g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.27.6",
+        "html-parse-stringify": "^3.0.1",
+        "use-sync-external-store": "^1.6.0"
+      },
+      "peerDependencies": {
+        "i18next": ">= 25.5.2",
+        "react": ">= 16.8.0",
+        "typescript": "^5"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-icons": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
@@ -5845,6 +5914,15 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/vite": {
       "version": "7.1.12",
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.12.tgz",
@@ -5982,6 +6060,15 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+      "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",

FrontendV2/package.json

@@ -13,7 +13,8 @@
     "@chakra-ui/react": "^3.28.0",
     "@emotion/react": "^11.14.0",
     "@tailwindcss/vite": "^4.1.11",
-    "@tanstack/react-query": "^5.85.5",
+    "@tanstack/react-query": "^5.90.5",
+    "i18next": "^25.6.0",
     "jotai": "^2.15.0",
     "js-cookie": "^3.0.5",
     "lucide-react": "^0.539.0",
@@ -22,6 +23,7 @@
     "primereact": "^10.9.6",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
+    "react-i18next": "^16.2.0",
     "react-icons": "^5.5.0",
     "react-router-dom": "^7.8.0",
     "react-toastify": "^11.0.5",

FrontendV2/public/vite.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shapes-icon lucide-shapes"><path d="M8.3 10a.7.7 0 0 1-.626-1.079L11.4 3a.7.7 0 0 1 1.198-.043L16.3 8.9a.7.7 0 0 1-.572 1.1Z"/><rect x="3" y="14" width="7" height="7" rx="1"/><circle cx="17.5" cy="17.5" r="3.5"/></svg>

FrontendV2/src/App.tsx

@@ -11,11 +11,13 @@ import { UserContext, type User } from "./states/Context";
 import { triggerLogoutAtom } from "@/states/Atoms";
 import { MyLoansPage } from "./pages/MyLoansPage";
 import Landingpage from "./pages/Landingpage";
+import { changeLanguage } from "i18next";
+import { Box, Flex } from "@chakra-ui/react";
+import { Footer } from "./components/footer/Footer";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { API_BASE } from "@/config/api.config";
 
-const API_BASE =
+const queryClient = new QueryClient();
-  (import.meta as any).env?.VITE_BACKEND_URL ||
-  import.meta.env.VITE_BACKEND_URL ||
-  "http://localhost:8002";
 
 function App() {
   const [user, setUser] = useState<User | undefined>(undefined);
@@ -44,24 +46,44 @@ function App() {
       };
       verifyToken();
     }
+
+    // set initial language
+    if (!Cookies.get("language")) {
+      const getBrowserLanguage = () => {
+        const lang = navigator.languages?.[0] || navigator.language || "en";
+        return lang.split("-")[0].toLowerCase();
+      };
+
+      changeLanguage(getBrowserLanguage());
+      Cookies.set("language", getBrowserLanguage());
+    }
+
+    if (Cookies.get("language")) {
+      changeLanguage(Cookies.get("language") || "en");
+    }
   }, []);
 
   return (
-    <>
+    <QueryClientProvider client={queryClient}>
-      <UserContext.Provider value={user}>
+      <Flex direction="column" minH="100vh">
-        <BrowserRouter>
+        <Box as="main" flex="1">
-          <Routes>
+          <UserContext.Provider value={user}>
-            <Route element={<ProtectedRoutes />}>
+            <BrowserRouter>
-              <Route path="/" element={<HomePage />} />
+              <Routes>
-              <Route path="/my-loans" element={<MyLoansPage />} />
+                <Route element={<ProtectedRoutes />}>
-              <Route path="/landing" element={<Landingpage />} />
+                  <Route path="/" element={<HomePage />} />
-            </Route>
+                  <Route path="/my-loans" element={<MyLoansPage />} />
+                  <Route path="/landing" element={<Landingpage />} />
+                </Route>
 
-            <Route path="/login" element={<LoginPage />} />
+                <Route path="/login" element={<LoginPage />} />
-          </Routes>
+              </Routes>
-        </BrowserRouter>
+            </BrowserRouter>
-      </UserContext.Provider>
+          </UserContext.Provider>
-    </>
+        </Box>
+        <Footer />
+      </Flex>
+    </QueryClientProvider>
   );
 }
 

FrontendV2/src/components/Header.tsx

@@ -26,19 +26,18 @@ import {
   LogOut,
   CalendarPlus,
   MoreVertical,
+  Flag,
 } from "lucide-react";
 import { useUserContext } from "@/states/Context";
 import { useState } from "react";
 import MyAlert from "./myChakra/MyAlert";
-
+import { useTranslation } from "react-i18next";
-const API_BASE =
+import { API_BASE } from "@/config/api.config";
-  (import.meta as any).env?.VITE_BACKEND_URL ||
-  import.meta.env.VITE_BACKEND_URL ||
-  "http://localhost:8002";
 
 export const Header = () => {
   const navigate = useNavigate();
   const userData = useUserContext();
+  const { t } = useTranslation();
 
   // Error handling states
   const [isMsg, setIsMsg] = useState(false);
@@ -58,8 +57,8 @@ export const Header = () => {
 
   const changePassword = async () => {
     if (newPassword !== confirmPassword) {
-      setMsgTitle("Passwortänderung fehlgeschlagen");
+      setMsgTitle(t("err_pw_change"));
-      setMsgDescription("Passwörter stimmen nicht überein");
+      setMsgDescription(t("pw_mismatch"));
       setMsgStatus("error");
       setIsMsg(true);
       return;
@@ -75,15 +74,15 @@ export const Header = () => {
     });
 
     if (!response.ok) {
-      setMsgTitle("Passwortänderung fehlgeschlagen");
+      setMsgTitle(t("err_pw_change"));
-      setMsgDescription("Bitte überprüfen Sie Ihre Eingaben");
+      setMsgDescription(t("pw_mismatch"));
       setMsgStatus("error");
       setIsMsg(true);
       return;
     }
 
-    setMsgTitle("Passwort erfolgreich geändert");
+    setMsgTitle(t("pw_success"));
-    setMsgDescription("Ihr Passwort wurde erfolgreich geändert");
+    setMsgDescription(t("pw_success_desc"));
     setMsgStatus("success");
     setIsMsg(true);
 
@@ -100,6 +99,7 @@ export const Header = () => {
     Cookies.remove("token");
     setIsLoggedIn(false);
     setTriggerLogout(true);
+    navigate("/login", { replace: true });
   };
 
   return (
@@ -140,7 +140,7 @@ export const Header = () => {
                 children={
                   <HStack gap={3}>
                     <CalendarPlus size={16} />
-                    <Text as="span">Ausleihe erstellen</Text>
+                    <Text as="span">{t("create-loan")}</Text>
                   </HStack>
                 }
               />
@@ -150,7 +150,7 @@ export const Header = () => {
                 children={
                   <HStack gap={3}>
                     <CircleUserRound size={16} />
-                    <Text as="span">Meine Ausleihen</Text>
+                    <Text as="span">{t("my-loans")}</Text>
                   </HStack>
                 }
               />
@@ -160,7 +160,22 @@ export const Header = () => {
                 children={
                   <HStack gap={3}>
                     <RotateCcwKey size={16} />
-                    <Text as="span">Passwort ändern</Text>
+                    <Text as="span">{t("change-password")}</Text>
+                  </HStack>
+                }
+              />
+              <Menu.Item
+                value="change-language"
+                onSelect={() => {
+                  const currentLang = Cookies.get("language") || "en";
+                  const newLang = currentLang === "en" ? "de" : "en";
+                  Cookies.set("language", newLang);
+                  window.location.reload();
+                }}
+                children={
+                  <HStack gap={3}>
+                    <LifeBuoy size={16} />
+                    <Text as="span">{t("change-language")}</Text>
                   </HStack>
                 }
               />
@@ -176,7 +191,7 @@ export const Header = () => {
                 children={
                   <HStack gap={3}>
                     <LifeBuoy size={16} />
-                    <Text as="span">Hilfe</Text>
+                    <Text as="span">{t("help")}</Text>
                   </HStack>
                 }
               />
@@ -192,7 +207,7 @@ export const Header = () => {
                 children={
                   <HStack gap={3}>
                     <Code size={16} />
-                    <Text as="span">Source Code</Text>
+                    <Text as="span">{t("source-code")}</Text>
                   </HStack>
                 }
               />
@@ -203,7 +218,7 @@ export const Header = () => {
                 children={
                   <HStack gap={3} color="red.500">
                     <LogOut size={16} />
-                    <Text as="span">Logout</Text>
+                    <Text as="span">{t("logout")}</Text>
                   </HStack>
                 }
               />
@@ -232,7 +247,8 @@ export const Header = () => {
 
           <HStack gap={3} align="center" flexWrap="wrap">
             <Text fontSize="md" className="text-slate-600 dark:text-slate-400">
-              Willkommen zurück, {username}!
+              {t("greeting")}
+              <strong>{username}</strong>!
             </Text>
             <Badge variant="subtle" px={2} py={1} borderRadius="full">
               Rolle: {userData?.role ?? "—"}
@@ -255,21 +271,36 @@ export const Header = () => {
           >
             <HStack gap={2}>
               <CalendarPlus size={18} />
-              <Text as="span">Ausleihe erstellen</Text>
+              <Text as="span">{t("create-loan")}</Text>
             </HStack>
           </Button>
 
           <Button onClick={() => navigate("/my-loans", { replace: true })}>
             <HStack gap={2}>
               <CircleUserRound size={18} />
-              <Text as="span">Meine Ausleihen</Text>
+              <Text as="span">{t("my-loans")}</Text>
             </HStack>
           </Button>
 
           <Button variant="ghost" onClick={() => setPwOpen(true)}>
             <HStack gap={2}>
               <RotateCcwKey size={18} />
-              <Text as="span">Passwort ändern</Text>
+              <Text as="span">{t("change-password")}</Text>
+            </HStack>
+          </Button>
+
+          <Button
+            variant="ghost"
+            onClick={() => {
+              const currentLang = Cookies.get("language") || "en";
+              const newLang = currentLang === "en" ? "de" : "en";
+              Cookies.set("language", newLang);
+              window.location.reload();
+            }}
+          >
+            <HStack gap={2}>
+              <Flag size={18} />
+              <Text as="span">{t("change-language")}</Text>
             </HStack>
           </Button>
 
@@ -280,7 +311,7 @@ export const Header = () => {
             <Button variant="ghost">
               <HStack gap={2}>
                 <LifeBuoy size={18} />
-                <Text as="span">Hilfe</Text>
+                <Text as="span">{t("help")}</Text>
               </HStack>
             </Button>
           </a>
@@ -292,7 +323,7 @@ export const Header = () => {
             <Button variant="ghost">
               <HStack gap={2}>
                 <Code size={18} />
-                <Text as="span">Source Code</Text>
+                <Text as="span">{t("source-code")}</Text>
               </HStack>
             </Button>
           </a>
@@ -300,7 +331,7 @@ export const Header = () => {
           <Button onClick={logout} variant="outline" colorScheme="red">
             <HStack gap={2}>
               <LogOut size={18} />
-              <Text as="span">Logout</Text>
+              <Text as="span">{t("logout")}</Text>
             </HStack>
           </Button>
         </HStack>
@@ -313,7 +344,7 @@ export const Header = () => {
           <Dialog.Positioner>
             <Dialog.Content maxW="md">
               <Dialog.Header>
-                <Dialog.Title>Passwort ändern</Dialog.Title>
+                <Dialog.Title>{t("change-password")}</Dialog.Title>
               </Dialog.Header>
               <form
                 onSubmit={(e) => {
@@ -326,17 +357,17 @@ export const Header = () => {
                     <PasswordInput
                       value={oldPassword}
                       onChange={(e) => setOldPassword(e.target.value)}
-                      placeholder="Altes Passwort"
+                      placeholder={t("old-password")}
                     />
                     <PasswordInput
                       value={newPassword}
                       onChange={(e) => setNewPassword(e.target.value)}
-                      placeholder="Neues Passwort"
+                      placeholder={t("new-password")}
                     />
                     <PasswordInput
                       value={confirmPassword}
                       onChange={(e) => setConfirmPassword(e.target.value)}
-                      placeholder="Neues Passwort wiederholen"
+                      placeholder={t("confirm-password")}
                     />
                   </Stack>
                 </Dialog.Body>
@@ -351,10 +382,10 @@ export const Header = () => {
                     )}
                     <HStack justify="flex-end" gap={2}>
                       <Dialog.ActionTrigger asChild>
-                        <Button variant="outline">Abbrechen</Button>
+                        <Button variant="outline">{t("cancel")}</Button>
                       </Dialog.ActionTrigger>
                       <Button type="submit" colorScheme="teal">
-                        Speichern
+                        {t("save")}
                       </Button>
                     </HStack>
                   </Stack>

FrontendV2/src/components/footer/Footer.tsx

@@ -0,0 +1,23 @@
+import { Box } from "@chakra-ui/react";
+import { useVersionInfoQuery } from "./versionInfo.query";
+
+export const Footer = () => {
+  const { data: info } = useVersionInfoQuery();
+
+  return (
+    <Box
+      as="footer"
+      py={4}
+      textAlign="center"
+      position="fixed"
+      bottom="0"
+      left="0"
+      right="0"
+    >
+      Made with ❤️ by Theis Gaedigk - Year 2019 at MCS-Bochum
+      <br />
+      Frontend-Version: {info ? info["frontend-info"].version : "N/A"} |
+      Backend-Version: {info ? info["backend-info"].version : "N/A"}
+    </Box>
+  );
+};

FrontendV2/src/components/footer/versionInfo.query.ts

@@ -0,0 +1,29 @@
+import { useQuery } from "@tanstack/react-query";
+import { API_BASE } from "@/config/api.config";
+
+export const useVersionInfoQuery = () =>
+  useQuery({
+    queryKey: ["versionInfo"],
+    queryFn: async () => {
+      const response = await fetch(`${API_BASE}/server-info`, {
+        method: "GET",
+      });
+      if (response.ok) {
+        const data = await response.json();
+        return data;
+      } else {
+        console.error(
+          "Failed to fetch version info (versionInfo.query.ts): ",
+          response.statusText
+        );
+        return {
+          "backend-info": {
+            version: "N/A",
+          },
+          "frontend-info": {
+            version: "N/A",
+          },
+        };
+      }
+    },
+  });

FrontendV2/src/main.tsx

@@ -3,6 +3,11 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import "./index.css";
 import App from "./App.tsx";
+import i18n from "./utils/i18n"; // import i18n configuration DO NOT REMOVE
+
+// Prevent unused variable tree shaking
+let i18nUnused = i18n;
+console.log(i18nUnused);
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>

FrontendV2/src/pages/HomePage.tsx

@@ -15,6 +15,7 @@ import MyAlert from "@/components/myChakra/MyAlert";
 import { borrowAbleItemsAtom } from "@/states/Atoms";
 import { createLoan } from "@/utils/Fetcher";
 import { Header } from "@/components/Header";
+import { useTranslation } from "react-i18next";
 
 export interface User {
   username: string;
@@ -22,6 +23,8 @@ export interface User {
 }
 
 export const HomePage = () => {
+  const { t } = useTranslation();
+
   const [borrowableItems, setBorrowableItems] = useAtom(borrowAbleItemsAtom);
   const [startDate, setStartDate] = useState("");
   const [endDate, setEndDate] = useState("");
@@ -43,7 +46,7 @@ export const HomePage = () => {
   };
 
   return (
-    <Container maxW="7xl" className="px-6 sm:px-8 pt-10">
+    <Container className="px-6 sm:px-8 pt-10">
       <Header />
       {isMsg && (
         <MyAlert
@@ -53,22 +56,23 @@ export const HomePage = () => {
         />
       )}
       <Stack as="main">
+        <Text>{t("timezone-info")}</Text>
         <label htmlFor="startDate">
-          <Text>Startdatum</Text>
+          <Text>{t("start-date")}</Text>
         </label>
         <Input
           id="startDate"
-          placeholder="Startdatum"
+          placeholder={t("start-date")}
           type="datetime-local"
           value={startDate}
           onChange={(e) => setStartDate(e.target.value)}
         />
         <label htmlFor="endDate">
-          <Text>Enddatum</Text>
+          <Text>{t("end-date")}</Text>
         </label>
         <Input
           id="endDate"
-          placeholder="Enddatum"
+          placeholder={t("end-date")}
           type="datetime-local"
           value={endDate}
           onChange={(e) => setEndDate(e.target.value)}
@@ -78,8 +82,8 @@ export const HomePage = () => {
             setIsLoadingA(true);
             if (!startDate || !endDate) {
               setMsgStatus("error");
-              setMsgTitle("Fehlende Eingaben");
+              setMsgTitle(t("missing-fields"));
-              setMsgDescription("Bitte Start- und Enddatum angeben.");
+              setMsgDescription(t("missing-fields-desc"));
               setIsMsg(true);
               setIsLoadingA(false);
               return;
@@ -88,10 +92,8 @@ export const HomePage = () => {
               setIsLoadingA(false);
               if (response && response.status === "error") {
                 setMsgStatus("error");
-                setMsgTitle(response.title || "Fehler");
+                setMsgTitle(response.title || t("error"));
-                setMsgDescription(
+                setMsgDescription(response.description || t("unknown-error"));
-                  response.description || "Unbekannter Frontend Fehler"
-                );
                 setIsMsg(true);
                 return;
               }
@@ -101,12 +103,12 @@ export const HomePage = () => {
             });
           }}
         >
-          Verfügbare Gegenstände anzeigen
+          {t("get-borrowable-items")}
         </Button>
         {isLoadingA && (
           <VStack colorPalette="teal">
             <Spinner color="colorPalette.600" />
-            <Text color="colorPalette.600">Loading...</Text>
+            <Text color="colorPalette.600">{t("loading")}</Text>
           </VStack>
         )}
         {borrowableItems.length > 0 && (
@@ -115,7 +117,7 @@ export const HomePage = () => {
               <Table.Header>
                 <Table.Row bg="bg.subtle">
                   <Table.ColumnHeader></Table.ColumnHeader>
-                  <Table.ColumnHeader>Gegenstand</Table.ColumnHeader>
+                  <Table.ColumnHeader>{t("item")}</Table.ColumnHeader>
                 </Table.Row>
               </Table.Header>
 
@@ -143,21 +145,19 @@ export const HomePage = () => {
               createLoan(selectedItems, startDate, endDate).then((response) => {
                 if (response.status === "error") {
                   setMsgStatus("error");
-                  setMsgTitle(response.title || "Fehler");
+                  setMsgTitle(response.title || t("error"));
-                  setMsgDescription(
+                  setMsgDescription(response.description || t("unknown-error"));
-                    response.description || "Unbekannter Frontend Fehler"
-                  );
                   setIsMsg(true);
                   return;
                 }
                 setMsgStatus("success");
-                setMsgTitle("Erfolg");
+                setMsgTitle(t("success"));
-                setMsgDescription("Gegenstände erfolgreich ausgeliehen.");
+                setMsgDescription(t("loan-success"));
                 setIsMsg(true);
               })
             }
           >
-            Gegenstände ausleihen
+            {t("create-loan")}
           </Button>
         )}
       </Stack>

FrontendV2/src/pages/Landingpage.tsx

@@ -12,6 +12,8 @@ import {
 } from "@chakra-ui/react";
 import { Lock, LockOpen } from "lucide-react";
 import MyAlert from "@/components/myChakra/MyAlert";
+import { useTranslation } from "react-i18next";
+import { API_BASE } from "@/config/api.config";
 
 export const formatDateTime = (value: string | null | undefined) => {
   if (!value) return "N/A";
@@ -21,11 +23,6 @@ export const formatDateTime = (value: string | null | undefined) => {
   return `${d}.${M}.${y} ${h}:${min} Uhr`;
 };
 
-const API_BASE =
-  (import.meta as any).env?.VITE_BACKEND_URL ||
-  import.meta.env.VITE_BACKEND_URL ||
-  "http://localhost:8002";
-
 type Loan = {
   id: number;
   username: string;
@@ -45,6 +42,8 @@ type Device = {
 };
 
 const Landingpage: React.FC = () => {
+  const { t } = useTranslation();
+
   const [isLoading, setIsLoading] = useState(false);
   const [loans, setLoans] = useState<Loan[]>([]);
   const [devices, setDevices] = useState<Device[]>([]);
@@ -76,8 +75,8 @@ const Landingpage: React.FC = () => {
         } else {
           setError(
             "error",
-            "Fehler beim Laden",
+            t("error-by-loading"),
-            "Unerwartetes Datenformat erhalten. (Ausleihen)"
+            t("unexpected-date-format_loan")
           );
         }
 
@@ -88,16 +87,12 @@ const Landingpage: React.FC = () => {
         } else {
           setError(
             "error",
-            "Fehler beim Laden",
+            t("error-by-loading"),
-            "Unerwartetes Datenformat erhalten. (Geräte)"
+            t("unexpected-date-format_device")
           );
         }
       } catch (e) {
-        setError(
+        setError("error", t("error-by-loading"), t("error-fetching-loans"));
-          "error",
-          "Fehler beim Laden",
-          "Die Ausleihen konnten nicht geladen werden."
-        );
       } finally {
         setIsLoading(false);
       }
@@ -112,7 +107,7 @@ const Landingpage: React.FC = () => {
       </Heading>
 
       <Heading as="h2" size="md" mb={4}>
-        Alle Ausleihen
+        {t("all-loans")}
       </Heading>
 
       {isError && (
@@ -126,7 +121,7 @@ const Landingpage: React.FC = () => {
       {isLoading && (
         <VStack colorPalette="teal">
           <Spinner color="colorPalette.600" />
-          <Text color="colorPalette.600">Loading...</Text>
+          <Text color="colorPalette.600">{t("loading")}</Text>
         </VStack>
       )}
 
@@ -138,22 +133,22 @@ const Landingpage: React.FC = () => {
                 <strong>#</strong>
               </Table.ColumnHeader>
               <Table.ColumnHeader>
-                <strong>Benutzername</strong>
+                <strong>{t("username")}</strong>
               </Table.ColumnHeader>
               <Table.ColumnHeader>
-                <strong>Startdatum</strong>
+                <strong>{t("start-date")}</strong>
               </Table.ColumnHeader>
               <Table.ColumnHeader>
-                <strong>Enddatum</strong>
+                <strong>{t("end-date")}</strong>
               </Table.ColumnHeader>
               <Table.ColumnHeader>
-                <strong>Ausgeliehene Artikel</strong>
+                <strong>{t("rented-items")}</strong>
               </Table.ColumnHeader>
               <Table.ColumnHeader>
-                <strong>Rückgabedatum</strong>
+                <strong>{t("return-date")}</strong>
               </Table.ColumnHeader>
               <Table.ColumnHeader>
-                <strong>Ausleihdatum</strong>
+                <strong>{t("take-date")}</strong>
               </Table.ColumnHeader>
             </Table.Row>
           </Table.Header>
@@ -179,12 +174,12 @@ const Landingpage: React.FC = () => {
 
       {!isLoading && loans.length === 0 && !isError && (
         <Text color="gray.500" mt={2}>
-          Keine Ausleihen vorhanden.
+          {t("no-loans-found")}
         </Text>
       )}
 
       <Heading as="h2" size="md" mb={4}>
-        Alle Geräte
+        {t("all-devices")}
       </Heading>
 
       {/* Responsive Grid mit gleich hohen Karten */}
@@ -202,14 +197,16 @@ const Landingpage: React.FC = () => {
               <Heading size="md">{device.item_name}</Heading>
             </Card.Header>
             <Card.Body color="fg.muted">
-              <Text>Ausleihrolle: {device.can_borrow_role}</Text>
+              <Text>
+                {t("rent-role")}: {device.can_borrow_role}
+              </Text>
             </Card.Body>
           </Card.Root>
         ))}
       </SimpleGrid>
       <HStack mt={3} gap={3} align="center" role="group" aria-label="Legende">
         <Text fontWeight="medium" color="fg.muted">
-          Legende:
+          {t("legend")}:
         </Text>
         <Button
           size="sm"
@@ -221,7 +218,7 @@ const Landingpage: React.FC = () => {
         >
           <HStack gap={2}>
             <LockOpen size={16} />
-            <Text>Im Schließfach</Text>
+            <Text>{t("in-locker")}</Text>
           </HStack>
         </Button>
         <Button
@@ -234,7 +231,7 @@ const Landingpage: React.FC = () => {
         >
           <HStack gap={2}>
             <Lock size={16} />
-            <Text>Nicht im Schließfach</Text>
+            <Text>{t("not-in-locker")}</Text>
           </HStack>
         </Button>
       </HStack>

FrontendV2/src/pages/LoginPage.tsx

@@ -6,13 +6,13 @@ import { useAtom } from "jotai";
 import Cookies from "js-cookie";
 import { Navigate, useNavigate } from "react-router-dom";
 import { PasswordInput } from "@/components/ui/password-input";
-
+import { useTranslation } from "react-i18next";
-const API_BASE =
+import { Footer } from "@/components/footer/Footer";
-  (import.meta as any).env?.VITE_BACKEND_URL ||
+import { API_BASE } from "@/config/api.config";
-  import.meta.env.VITE_BACKEND_URL ||
-  "http://localhost:8002";
 
 export const LoginPage = () => {
+  const { t } = useTranslation();
+
   const [isLoggedIn, setIsLoggedIn] = useAtom(setIsLoggedInAtom);
   const [triggerLogout, setTriggerLogout] = useAtom(triggerLogoutAtom);
   const navigate = useNavigate();
@@ -20,6 +20,7 @@ export const LoginPage = () => {
   useEffect(() => {
     if (isLoggedIn) {
       navigate("/", { replace: true });
+      window.location.reload(); // Wenn entfernt: Seite bleibt schwarz und muss manuell neu geladen werden
     }
   }, [isLoggedIn, navigate]);
 
@@ -35,7 +36,7 @@ export const LoginPage = () => {
     if (!response.ok) {
       return {
         success: false,
-        message: data.message ?? "Login fehlgeschlagen",
+        message: data.message ?? t("login-failed"),
         description: data.description ?? "",
       };
     }
@@ -72,22 +73,20 @@ export const LoginPage = () => {
       <form onSubmit={(e) => e.preventDefault()}>
         <Card.Root maxW="sm">
           <Card.Header>
-            <Card.Title>Login</Card.Title>
+            <Card.Title>{t("login")}</Card.Title>
-            <Card.Description>
+            <Card.Description>{t("enter-credentials")}</Card.Description>
-              Bitte unten Ihre Zugangsdaten eingeben.
-            </Card.Description>
           </Card.Header>
           <Card.Body>
             <Stack gap="4" w="full">
               <Field.Root>
-                <Field.Label>Benutzername</Field.Label>
+                <Field.Label>{t("username")}</Field.Label>
                 <Input
                   value={username}
                   onChange={(e) => setUsername(e.target.value)}
                 />
               </Field.Root>
               <Field.Root>
-                <Field.Label>Passwort</Field.Label>
+                <Field.Label>{t("password")}</Field.Label>
                 <PasswordInput
                   value={password}
                   onChange={(e) => setPassword(e.target.value)}
@@ -107,13 +106,14 @@ export const LoginPage = () => {
             {triggerLogout && (
               <MyAlert
                 status="success"
-                title={"Logout erfolgreich!"}
+                title={t("logout-success")}
-                description={"Sie wurden erfolgreich abgemeldet."}
+                description={t("logout-success-desc")}
               />
             )}
           </Card.Footer>
         </Card.Root>
       </form>
+      <Footer />
     </div>
   );
 };

FrontendV2/src/pages/MyLoansPage.tsx

@@ -16,13 +16,11 @@ import {
 } from "@chakra-ui/react";
 import { Header } from "@/components/Header";
 import { Trash2 } from "lucide-react";
-
+import { useTranslation } from "react-i18next";
-const API_BASE =
+import { API_BASE } from "@/config/api.config";
-  (import.meta as any).env?.VITE_BACKEND_URL ||
-  import.meta.env.VITE_BACKEND_URL ||
-  "http://localhost:8002";
 
 export const MyLoansPage = () => {
+  const { t } = useTranslation();
   const navigate = useNavigate();
 
   const [loans, setLoans] = useState<any[]>([]);
@@ -54,21 +52,18 @@ export const MyLoansPage = () => {
 
         if (!res.ok) {
           setMsgStatus("error");
-          setMsgTitle("Fehler");
+          setMsgTitle(t("error"));
-          setMsgDescription(
+          setMsgDescription(t("error-fetching-loans"));
-            "Beim Laden der Ausleihen ist ein Fehler aufgetreten."
-          );
           setIsMsg(true);
           return;
         }
 
         const data = await res.json();
         setLoans(data);
-        console.log("Fetched loans:", data);
       } catch (e) {
         setMsgStatus("error");
-        setMsgTitle("Fehler");
+        setMsgTitle(t("error"));
-        setMsgDescription("Netzwerkfehler beim Laden der Ausleihen.");
+        setMsgDescription(t("network-error-fetching-loans"));
         setIsMsg(true);
       } finally {
         setIsLoading(false);
@@ -89,23 +84,21 @@ export const MyLoansPage = () => {
 
       if (!res.ok) {
         setMsgStatus("error");
-        setMsgTitle("Fehler");
+        setMsgTitle(t("error"));
-        setMsgDescription(
+        setMsgDescription(t("error-deleting-loan"));
-          "Beim Löschen der Ausleihe ist ein Fehler aufgetreten."
-        );
         setIsMsg(true);
         return;
       }
 
       setLoans((prev) => prev.filter((loan) => loan.id !== loanId));
       setMsgStatus("success");
-      setMsgTitle("Erfolg");
+      setMsgTitle(t("success"));
-      setMsgDescription("Ausleihe erfolgreich gelöscht.");
+      setMsgDescription(t("loan-deletion-success"));
       setIsMsg(true);
     } catch (e) {
       setMsgStatus("error");
-      setMsgTitle("Fehler");
+      setMsgTitle(t("error"));
-      setMsgDescription("Netzwerkfehler beim Löschen der Ausleihe.");
+      setMsgDescription(t("network-error-deleting-loan"));
       setIsMsg(true);
     }
   };
@@ -120,7 +113,7 @@ export const MyLoansPage = () => {
 
   return (
     <>
-      <Container maxW="7xl" className="px-6 sm:px-8 pt-10">
+      <Container className="px-6 sm:px-8 pt-10">
         <Header />
         {isMsg && (
           <MyAlert
@@ -132,7 +125,7 @@ export const MyLoansPage = () => {
         {isLoading && (
           <VStack colorPalette="teal">
             <Spinner color="colorPalette.600" />
-            <Text color="colorPalette.600">Loading...</Text>
+            <Text color="colorPalette.600">{t("loading")}</Text>
           </VStack>
         )}
         {loans && (
@@ -159,13 +152,13 @@ export const MyLoansPage = () => {
             </Table.ColumnGroup>
             <Table.Header>
               <Table.Row>
-                <Table.ColumnHeader>Ausleihcode</Table.ColumnHeader>
+                <Table.ColumnHeader>{t("loan-code")}</Table.ColumnHeader>
-                <Table.ColumnHeader>Startdatum</Table.ColumnHeader>
+                <Table.ColumnHeader>{t("start-date")}</Table.ColumnHeader>
-                <Table.ColumnHeader>Enddatum</Table.ColumnHeader>
+                <Table.ColumnHeader>{t("end-date")}</Table.ColumnHeader>
-                <Table.ColumnHeader>Geräte</Table.ColumnHeader>
+                <Table.ColumnHeader>{t("devices")}</Table.ColumnHeader>
-                <Table.ColumnHeader>Ausleihdatum</Table.ColumnHeader>
+                <Table.ColumnHeader>{t("take-date")}</Table.ColumnHeader>
-                <Table.ColumnHeader>Rückgabedatum</Table.ColumnHeader>
+                <Table.ColumnHeader>{t("return-date")}</Table.ColumnHeader>
-                <Table.ColumnHeader>Aktionen</Table.ColumnHeader>
+                <Table.ColumnHeader>{t("actions")}</Table.ColumnHeader>
               </Table.Row>
             </Table.Header>
             <Table.Body>
@@ -204,26 +197,28 @@ export const MyLoansPage = () => {
                         <Dialog.Positioner>
                           <Dialog.Content>
                             <Dialog.Header>
-                              <Dialog.Title>Sicher?</Dialog.Title>
+                              <Dialog.Title>{t("sure")}</Dialog.Title>
                             </Dialog.Header>
                             <Dialog.Body>
                               <Text>
-                                Möchtest du die Ausleihe mit dem{" "}
+                                {t("sure-delete-loan-0")}
-                                <strong><Code>{delLoanCode}</Code></strong> Code wirklich
+                                <strong>
-                                löschen?
+                                  <Code>{delLoanCode}</Code>
+                                </strong>{" "}
+                                {t("sure-delete-loan-1")}
                                 <br />
-                                Für den Admin bleibt sie weiterhin sichtbar.
+                                {t("sure-delete-loan-2")}
                               </Text>
                             </Dialog.Body>
                             <Dialog.Footer>
                               <Dialog.ActionTrigger asChild>
-                                <Button variant="outline">Abbrechen</Button>
+                                <Button variant="outline">{t("cancel")}</Button>
                               </Dialog.ActionTrigger>
                               <Button
                                 colorPalette="red"
                                 onClick={() => deleteLoan(loan.id)}
                               >
-                                <strong>Löschen</strong>
+                                <strong>{t("delete")}</strong>
                               </Button>
                             </Dialog.Footer>
                             <Dialog.CloseTrigger asChild>

FrontendV2/src/states/Atoms.tsx

@@ -1,6 +1,16 @@
 import { atom } from "jotai";
 
+interface Meta {
+  "backend-info": {
+    version: String;
+  };
+  "frontend-info": {
+    version: String;
+  };
+}
+
 export const testAtom = atom<number>(0);
 export const setIsLoggedInAtom = atom<boolean>(false);
 export const triggerLogoutAtom = atom<boolean>(false);
 export const borrowAbleItemsAtom = atom<any[]>([]);
+export const infoAtom = atom<Meta | undefined>(undefined);

FrontendV2/src/utils/Fetcher.ts

@@ -1,8 +1,5 @@
 import Cookies from "js-cookie";
-const API_BASE =
+import { API_BASE } from "@/config/api.config";
-  (import.meta as any).env?.VITE_BACKEND_URL ||
-  import.meta.env.VITE_BACKEND_URL ||
-  "http://localhost:8002";
 
 export const getBorrowableItems = async (
   startDate: string,
@@ -30,7 +27,6 @@ export const getBorrowableItems = async (
     }
 
     const data = await response.json();
-    console.log(data);
     return {
       data: data,
       status: "success",

FrontendV2/src/utils/i18n/index.ts

@@ -0,0 +1,34 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import Cookies from "js-cookie";
+
+import enLang from "./locales/en/en.json";
+import deLang from "./locales/de/de.json";
+
+// the translations
+// (tip move them in a JSON file and import them,
+// or even better, manage them separated from your code: https://react.i18next.com/guides/multiple-translation-files)
+const resources = {
+  en: {
+    translation: enLang,
+  },
+  de: {
+    translation: deLang,
+  },
+};
+
+i18n
+  .use(initReactI18next) // passes i18n down to react-i18next
+  .init({
+    resources,
+    fallbackLng: "en", // use en if detected lng is not available
+    lng: Cookies.get("language") || "en", // language to use, more information here: https://www.i18next.com/overview/configuration-options#languages-namespaces-resources
+    // you can use the i18n.changeLanguage function to change the language manually: https://www.i18next.com/overview/api#changelanguage
+    // if you're using a language detector, do not define the lng option
+
+    interpolation: {
+      escapeValue: false, // react already safes from xss
+    },
+  });
+
+export default i18n;

FrontendV2/src/utils/i18n/locales/de/de.json

@@ -0,0 +1,64 @@
+{
+    "greeting": "Willkommen zurück, ",
+    "err_pw_change": "Passwortänderung fehlgeschlagen",
+    "pw_mismatch": "Bitte überprüfen Sie Ihre Eingaben",
+    "pw_success": "Passwort erfolgreich geändert",
+    "pw_success_desc": "Ihr Passwort wurde erfolgreich geändert.",
+    "create-loan": "Ausleihe erstellen",
+    "my-loans": "Meine Ausleihen",
+    "change-password": "Passwort ändern",
+    "help": "Hilfe",
+    "source-code": "Quellcode",
+    "logout": "Abmelden",
+    "old-password": "Altes Passwort",
+    "new-password": "Neues Passwort",
+    "confirm-password": "Neues Passwort wiederholen",
+    "cancel": "Abbrechen",
+    "save": "Speichern",
+    "start-date": "Startdatum",
+    "end-date": "Enddatum",
+    "missing-fields": "Fehlende Eingaben",
+    "missing-fields-desc": "Bitte Start- und Enddatum angeben.",
+    "error": "Fehler",
+    "unknown-error": "Unbekannter Frontend Fehler",
+    "get-borrowable-items": "Verfügbare Gegenstände abrufen",
+    "loading": "Laden...",
+    "item": "Gegenstand",
+    "success": "Erfolg",
+    "loan-success": "Ausleihe erfolgreich erstellt",
+    "error-by-loading": "Fehler beim Laden",
+    "unexpected-date-format_loan": "Unerwartetes Datumsformat erhalten. (Ausleihen)",
+    "unexpected-date-format_device": "Unerwartetes Datumsformat erhalten. (Gerät)",
+    "error-fetching-loans": "Die Ausleihen konnten nicht abgerufen werden.",
+    "all-loans": "Alle Ausleihen",
+    "username": "Benutzername",
+    "rented-items": "Ausgeliehene Gegenstände",
+    "return-date": "Rückgabedatum",
+    "take-date": "Abholdatum",
+    "no-loans-found": "Keine Ausleihen vorhanden.",
+    "all-devices": "Alle Geräte",
+    "rent-role": "Ausleihrolle",
+    "legend": "Legende",
+    "in-locker": "Im Schließfach",
+    "not-in-locker": "Nicht im Schließfach",
+    "login-failed": "Anmeldung fehlgeschlagen",
+    "login": "Anmelden",
+    "enter-credentials": "Bitte unten Ihre Anmeldedaten eingeben.",
+    "password": "Passwort",
+    "logout-success": "Erfolgreich abgemeldet",
+    "logout-success-desc": "Sie wurden erfolgreich abgemeldet.",
+    "network-error-fetching-loans": "Netzwerkfehler beim Laden der Ausleihen.",
+    "error-deleting-loan": "Die Ausleihe konnte nicht gelöscht werden.",
+    "loan-deletion-success": "Die Ausleihe wurde erfolgreich gelöscht.",
+    "network-error-deleting-loan": "Netzwerkfehler beim Löschen der Ausleihe.",
+    "loan-code": "Ausleihcode",
+    "devices": "Geräte",
+    "actions": "Aktionen",
+    "sure": "Sind Sie sicher?",
+    "sure-delete-loan-0": "Möchten Sie die Ausleihe mit dem ",
+    "sure-delete-loan-1": " Ausleihcode wirklich löschen?",
+    "sure-delete-loan-2": "Für den Admin bleibt sie weiterhin sichtbar.",
+    "delete": "Löschen",
+    "change-language": "Sprache ändern",
+    "timezone-info": "Die angezeigten Daten und Uhrzeiten werden in deutscher Zeitzone dargestellt und müssen auch so eingegeben werden."
+}

FrontendV2/src/utils/i18n/locales/en/en.json

@@ -0,0 +1,64 @@
+{
+    "greeting": "Welcome back, ",
+    "err_pw_change": "Password change failed",
+    "pw_mismatch": "Please check your input",
+    "pw_success": "Password changed successfully",
+    "pw_success_desc": "Your password was changed successfully.",
+    "create-loan": "Create loan",
+    "my-loans": "My loans",
+    "change-password": "Change password",
+    "help": "Help",
+    "source-code": "Source code",
+    "logout": "Log out",
+    "old-password": "Old password",
+    "new-password": "New password",
+    "confirm-password": "Repeat new password",
+    "cancel": "Cancel",
+    "save": "Save",
+    "start-date": "Start date",
+    "end-date": "End date",
+    "missing-fields": "Missing fields",
+    "missing-fields-desc": "Please provide start and end date.",
+    "error": "Error",
+    "unknown-error": "Unknown frontend error",
+    "get-borrowable-items": "Fetch available items",
+    "loading": "Loading...",
+    "item": "Item",
+    "success": "Success",
+    "loan-success": "Loan created successfully",
+    "error-by-loading": "Error while loading",
+    "unexpected-date-format_loan": "Unexpected date format received. (Loans)",
+    "unexpected-date-format_device": "Unexpected date format received. (Device)",
+    "error-fetching-loans": "The loans could not be retrieved.",
+    "all-loans": "All loans",
+    "username": "Username",
+    "rented-items": "Borrowed items",
+    "return-date": "Return date",
+    "take-date": "Collection date",
+    "no-loans-found": "No loans found.",
+    "all-devices": "All devices",
+    "rent-role": "Loan role",
+    "legend": "Legend",
+    "in-locker": "In locker",
+    "not-in-locker": "Not in locker",
+    "login-failed": "Login failed",
+    "login": "Log in",
+    "enter-credentials": "Please enter your credentials below.",
+    "password": "Password",
+    "logout-success": "Successfully logged out",
+    "logout-success-desc": "You have been logged out successfully.",
+    "network-error-fetching-loans": "Network error while loading loans.",
+    "error-deleting-loan": "The loan could not be deleted.",
+    "loan-deletion-success": "The loan was deleted successfully.",
+    "network-error-deleting-loan": "Network error while deleting the loan.",
+    "loan-code": "Loan code",
+    "devices": "Devices",
+    "actions": "Actions",
+    "sure": "Are you sure?",
+    "sure-delete-loan-0": "Do you really want to delete the loan with the ",
+    "sure-delete-loan-1": " loan code?",
+    "sure-delete-loan-2": "It will remain visible to the admin.",
+    "delete": "Delete",
+    "change-language": "Change language",
+    "timezone-info": "The displayed dates and times are shown in Berlin timezone and must also be entered as such."
+}

admin/src/Layout/Layout.tsx

@@ -3,7 +3,6 @@ import { useEffect } from "react";
 import Dashboard from "./Dashboard";
 import Login from "./Login";
 import Cookies from "js-cookie";
-import Landingpage from "@/components/API/Landingpage";
 
 const API_BASE =
   (import.meta as any).env?.VITE_BACKEND_URL ||
@@ -12,16 +11,8 @@ const API_BASE =
 
 const Layout: React.FC = () => {
   const [isLoggedIn, setIsLoggedIn] = useState(false);
-  const [showAPI, setShowAPI] = useState(false);
 
   useEffect(() => {
-    const path = window.location.pathname.replace(/\/+$/, ""); // remove trailing slash
-    if (path === "/api") {
-      setShowAPI(true);
-      console.log("signal");
-      return;
-    }
-
     if (Cookies.get("token")) {
       const verifyToken = async () => {
         const response = await fetch(`${API_BASE}/api/verifyToken`, {
@@ -48,14 +39,6 @@ const Layout: React.FC = () => {
     setIsLoggedIn(false);
   };
 
-  if (showAPI) {
-    return (
-      <main>
-        <Landingpage />
-      </main>
-    );
-  }
-
   return (
     <main>
       {isLoggedIn ? (

admin/src/components/ItemTable.tsx

@@ -149,7 +149,7 @@ const ItemTable: React.FC = () => {
       </HStack>
       {/* End action toolbar */}
 
-      <Heading marginBottom={4} size="md">
+      <Heading marginBottom={4} size="2xl">
         Gegenstände
       </Heading>
       {isError && (

admin/src/components/LoanTable.tsx

@@ -54,6 +54,7 @@ const LoanTable: React.FC = () => {
     returned_date: string;
     created_at: string;
     loaned_items_name: string[];
+    deleted: boolean;
   };
 
   useEffect(() => {
@@ -108,9 +109,13 @@ const LoanTable: React.FC = () => {
       </HStack>
       {/* End action toolbar */}
 
-      <Heading marginBottom={4} size="md">
+      <Heading marginBottom={4} size="2xl">
         Ausleihen
       </Heading>
+      <Text>
+        Die Ausleihen die rot sind, wurden gelöscht und sind nur für den Admin
+        sichtbar.
+      </Text>
 
       {isError && (
         <MyAlert
@@ -163,7 +168,7 @@ const LoanTable: React.FC = () => {
           </Table.Header>
           <Table.Body>
             {items.map((item) => (
-              <Table.Row key={item.id}>
+              <Table.Row color={item.deleted ? "red" : "white"} key={item.id}>
                 <Table.Cell>{item.id}</Table.Cell>
                 <Table.Cell>{item.username}</Table.Cell>
                 <Table.Cell>

admin/src/components/UserTable.tsx

@@ -144,7 +144,7 @@ const UserTable: React.FC = () => {
       </HStack>
       {/* End action toolbar */}
 
-      <Heading marginBottom={4} size="md">
+      <Heading marginBottom={4} size="2xl">
         Benutzer
       </Heading>
       {changePWform && (

backend/info.json

@@ -0,0 +1,8 @@
+{
+    "backend-info": {
+        "version": "v2.0 (dev)"
+    },
+    "frontend-info": {
+        "version": "v2.0 (dev)"
+    }
+}

backend/scheme.sql

@@ -1,100 +0,0 @@
--- All necessary tables for the borrowing system
-
--- IMPORTANT: You need mySQL version 8.0 or newer!
-
-CREATE TABLE `users` (
-  `id` int NOT NULL AUTO_INCREMENT,
-  `username` varchar(100) NOT NULL,
-  `password` varchar(255) NOT NULL,
-  `role` int DEFAULT NULL,
-  `entry_created_at` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
-  PRIMARY KEY (`id`),
-  UNIQUE KEY `username` (`username`)
-);
-
-CREATE TABLE `admins` (
-  `id` int NOT NULL AUTO_INCREMENT,
-  `username` varchar(100) NOT NULL,
-  `password` varchar(255) NOT NULL,
-  `first_name` varchar(255) NOT NULL,
-  `last_name` varchar(255) NOT NULL,
-  `entry_created_at` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
-  PRIMARY KEY (`id`),
-  UNIQUE KEY `username` (`username`)
-);
-
-CREATE TABLE `loans` (
-  `id` int NOT NULL AUTO_INCREMENT,
-  `username` varchar(100) NOT NULL,
-  `loan_code` int NOT NULL,
-  `start_date` timestamp NOT NULL,
-  `end_date` timestamp NOT NULL,
-  `take_date` timestamp NULL DEFAULT NULL,
-  `returned_date` timestamp NULL DEFAULT NULL,
-  `created_at` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
-  `loaned_items_id` json NOT NULL DEFAULT ('[]'),
-  `loaned_items_name` json NOT NULL DEFAULT ('[]'),
-  `deleted` bool NOT NULL DEFAULT false,
-  PRIMARY KEY (`id`),
-  UNIQUE KEY `loan_code` (`loan_code`)
-);
-
-CREATE TABLE `items` (
-  `id` int NOT NULL AUTO_INCREMENT,
-  `item_name` varchar(255) NOT NULL,
-  `can_borrow_role` INT NOT NULL,
-  `inSafe` tinyint(1) NOT NULL DEFAULT '1',
-  `entry_created_at` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
-  PRIMARY KEY (`id`),
-  UNIQUE KEY `item_name` (`item_name`)
-);
-
-CREATE TABLE `lockers` (
-  `id` int NOT NULL AUTO_INCREMENT,
-  `item` varchar(255) NOT NULL,
-  `locker_number` int NOT NULL,
-  `entry_created_at` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
-  PRIMARY KEY (`id`),
-  UNIQUE KEY `item` (`item`),
-  UNIQUE KEY `locker_number` (`locker_number`)
-);
-
-CREATE TABLE `apiKeys` (
-  `id` int NOT NULL AUTO_INCREMENT,
-  `apiKey` int NOT NULL UNIQUE,
-  `user` VARCHAR(255) NOT NULL,
-  `entry_created_at` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
-  PRIMARY KEY (`id`)
-);
-
-INSERT INTO `items` (`item_name`, `can_borrow_role`, `inSafe`) VALUES
-('DJI 1er Mikro', 4, 1),
-('DJI 2er Mikro 1', 4, 1),
-('DJI 2er Mikro 2', 4, 1),
-('Rode Richt Mikrofon', 2, 1),
-('Kamera Stativ', 1, 0),
-('SONY Kamera - inkl. Akkus und Objektiv', 1, 1),
-('MacBook inkl. Adapter', 2, 0),
-('SD Karten', 3, 0),
-('Kameragimbal', 1, 0),
-('ATEM MINI PRO', 1, 1),
-('Handygimbal', 4, 0),
-('Kameralüfter', 1, 1),
-('Kleine Kamera 1 - inkl. Objektiv', 2, 1),
-('Kleine Kamera 2 - inkl. Objektiv', 2, 1);
-
-INSERT INTO `lockers` (`item`, `locker_number`) VALUES
-('DJI 1er Mikro', 1),
-('DJI 2er Mikro 1', 2),
-('DJI 2er Mikro 2', 3),
-('Rode Richt Mikrofon', 4),
-('Kamera Stativ', 5),
-('SONY Kamera - inkl. Akkus und Objektiv', 6),
-('MacBook inkl. Adapter', 7),
-('SD Karten', 8),
-('Kameragimbal', 9),
-('ATEM MINI PRO', 10),
-('Handygimbal', 11),
-('Kameralüfter', 12),
-('Kleine Kamera 1 - inkl. Objektiv', 13),
-('Kleine Kamera 2 - inkl. Objektiv', 14);

backend/server.js

@@ -6,6 +6,7 @@ import apiRouterV2 from "./routes/apiV2.js";
 env.config();
 const app = express();
 const port = 8002;
+import serverInfo from "./info.json" assert { type: "json" }
 
 app.use(cors());
 // Increase body size limits to support large CSV JSON payloads
@@ -20,6 +21,10 @@ app.get("/", (req, res) => {
   res.render("index.ejs");
 });
 
+app.get("/server-info", async (req, res) => {
+  res.status(200).json(serverInfo);
+});
+
 app.listen(port, () => {
   console.log(`Server is running on port: ${port}`);
 });

backend/services/database.js

@@ -179,6 +179,7 @@ export const getBorrowableItemsFromDatabase = async (
       FROM loans l
       JOIN JSON_TABLE(l.loaned_items_id, '$[*]' COLUMNS (item_id INT PATH '$')) jt
       WHERE jt.item_id = i.id
+        AND l.deleted = 0
         AND l.start_date < ?
         AND COALESCE(l.returned_date, l.end_date) > ?
     );
@@ -269,6 +270,7 @@ export const createLoanInDatabase = async (
       JOIN JSON_TABLE(l.loaned_items_id, '$[*]' COLUMNS (item_id INT PATH '$')) jt
         ON TRUE
       WHERE jt.item_id IN (?)
+        AND l.deleted = 0
         AND l.start_date < ?
         AND COALESCE(l.returned_date, l.end_date) > ?
       `,
@@ -349,7 +351,6 @@ export const createLoanInDatabase = async (
 };
 
 // These functions are only temporary, and will be deleted when the full bin is set up.
-
 export const onTake = async (loanId) => {
   const [items] = await pool.query(
     "SELECT loaned_items_id FROM loans WHERE id = ?",
@@ -405,6 +406,7 @@ export const onReturn = async (loanId) => {
   }
   return { success: false };
 };
+// Temporary functions end here.
 
 export const loginAdmin = async (username, password) => {
   const [result] = await pool.query(

backendV2/Dockerfile

@@ -1,12 +1,12 @@
 FROM node:20-alpine
 
-WORKDIR /app
+WORKDIR /backendV2
 
 COPY package*.json ./
 RUN npm install
 
 COPY . .
 
-EXPOSE 8001
+EXPOSE 8004
 
-CMD ["npm", "run", "dev"]
+CMD ["npm", "start"]

backendV2/info.json

@@ -0,0 +1,8 @@
+{
+    "backend-info": {
+        "version": "v2.0 (dev)"
+    },
+    "frontend-info": {
+        "version": "v2.0 (dev)"
+    }
+}

backendV2/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "backendv2",
+  "version": "1.0.0",
+  "main": "server.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "node server.js"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "dependencies": {
+    "cors": "^2.8.5",
+    "dotenv": "^17.2.1",
+    "ejs": "^3.1.10",
+    "express": "^5.1.0",
+    "jose": "^6.0.12",
+    "mysql2": "^3.14.3",
+    "nodemailer": "^7.0.6"
+  }
+}

backendV2/schemeV2.mock_data.sql

@@ -0,0 +1,91 @@
+-- MUST BE UPDATED BEFORE USE
+
+USE borrow_system_new;
+
+-- Optional: keep insert order predictable
+SET time_zone = '+00:00';
+
+-- Users
+INSERT INTO users (username, password, first_name, last_name, role, is_admin)
+VALUES
+  ('alice',  'password123', 'Alice',  'Andersen', 1, false),
+  ('bob',    'password123', 'Bob',    'Berg',     2, false),
+  ('carol',  'password123', 'Carol',  'Christie', 2, false),
+  ('dave',   'password123', 'Dave',   'Dawson',   1, false),
+  ('eve',    'password123', 'Eve',    'Evans',    1, false),
+  ('admin',  'password123', 'Admin',  'User',     3, true);
+
+-- Items
+INSERT INTO items (item_name, can_borrow_role, in_safe, last_borrowed_person, currently_borrowing)
+VALUES
+  ('Canon EOS 90D Camera',   1, false, 'bob',   'alice'),
+  ('Rode NT1 Microphone',    1, true,  'dave',  NULL),
+  ('MacBook Pro 13',         2, false, 'bob',   'carol'),
+  ('Tripod Manfrotto',       1, false, 'carol', 'alice'),
+  ('LED Panel Aputure',      1, true,  NULL,    NULL),
+  ('Zoom H6 Recorder',       1, true,  'dave',  NULL),
+  ('Wacom Intuos Tablet',    1, true,  NULL,    NULL),
+  ('DJI Ronin-S Gimbal',     2, true,  NULL,    NULL),
+  ('Sony A7 III Body',       2, false, 'carol', 'eve'),
+  ('Sigma 24-70mm Lens',     2, false, 'carol', 'eve');
+
+-- Capture item IDs for JSON arrays
+SET @id_canon    = (SELECT id FROM items WHERE item_name='Canon EOS 90D Camera');
+SET @id_rode     = (SELECT id FROM items WHERE item_name='Rode NT1 Microphone');
+SET @id_mac13    = (SELECT id FROM items WHERE item_name='MacBook Pro 13');
+SET @id_tripod   = (SELECT id FROM items WHERE item_name='Tripod Manfrotto');
+SET @id_led      = (SELECT id FROM items WHERE item_name='LED Panel Aputure');
+SET @id_zoom     = (SELECT id FROM items WHERE item_name='Zoom H6 Recorder');
+SET @id_tablet   = (SELECT id FROM items WHERE item_name='Wacom Intuos Tablet');
+SET @id_ronin    = (SELECT id FROM items WHERE item_name='DJI Ronin-S Gimbal');
+SET @id_sony     = (SELECT id FROM items WHERE item_name='Sony A7 III Body');
+SET @id_sigma    = (SELECT id FROM items WHERE item_name='Sigma 24-70mm Lens');
+
+-- Loans
+INSERT INTO loans (
+  username, loan_code, start_date, end_date, take_date, returned_date, loaned_items_id, loaned_items_name, deleted
+) VALUES
+  -- Ongoing loan: Alice has Canon + Tripod
+  ('alice', 100001, '2025-10-01 09:00:00', '2025-10-08 17:00:00', '2025-10-01 09:15:00', NULL,
+    JSON_ARRAY(@id_canon, @id_tripod),
+    JSON_ARRAY('Canon EOS 90D Camera','Tripod Manfrotto'),
+    false
+  ),
+  -- Ongoing loan: Carol has MacBook Pro 13
+  ('carol', 100002, '2025-10-03 10:00:00', '2025-10-10 16:00:00', '2025-10-03 10:05:00', NULL,
+    JSON_ARRAY(@id_mac13),
+    JSON_ARRAY('MacBook Pro 13'),
+    false
+  ),
+  -- Returned loan: Dave had Zoom + Rode
+  ('dave',  100003, '2025-09-10 08:30:00', '2025-09-12 16:00:00', '2025-09-10 08:45:00', '2025-09-12 15:40:00',
+    JSON_ARRAY(@id_zoom, @id_rode),
+    JSON_ARRAY('Zoom H6 Recorder','Rode NT1 Microphone'),
+    false
+  ),
+  -- Cancelled/deleted booking (never taken): Bob reserved Tablet
+  ('bob',   100004, '2025-10-05 09:00:00', '2025-10-06 09:00:00', NULL, NULL,
+    JSON_ARRAY(@id_tablet),
+    JSON_ARRAY('Wacom Intuos Tablet'),
+    true
+  ),
+  -- Ongoing loan, likely overdue: Eve has Sony + Sigma
+  ('eve',   100005, '2025-10-15 11:00:00', '2025-10-20 12:00:00', '2025-10-15 11:10:00', NULL,
+    JSON_ARRAY(@id_sony, @id_sigma),
+    JSON_ARRAY('Sony A7 III Body','Sigma 24-70mm Lens'),
+    false
+  ),
+  -- Completed single-day loan: Bob used LED panel
+  ('bob',   100006, '2025-09-20 13:00:00', '2025-09-20 18:00:00', '2025-09-20 13:05:00', '2025-09-20 17:30:00',
+    JSON_ARRAY(@id_led),
+    JSON_ARRAY('LED Panel Aputure'),
+    false
+  );
+
+-- API keys
+INSERT INTO apiKeys (api_key, username)
+VALUES
+  (71002123, 'alice'),
+  (71002124, 'bob'),
+  (71002125, 'carol'),
+  (99999999, 'admin');

backendV2/schemeV2.sql

@@ -0,0 +1,58 @@
+use borrow_system_new;
+
+CREATE TABLE users (
+  id int NOT NULL AUTO_INCREMENT,
+  username varchar(100) NOT NULL UNIQUE,
+  password varchar(255) NOT NULL,
+  first_name varchar(255) NOT NULL,
+  last_name varchar(255) NOT NULL,
+  role int NOT NULL,
+  is_admin bool NOT NULL DEFAULT false,
+  entry_created_at timestamp NULL DEFAULT CURRENT_TIMESTAMP,
+  entry_updated_at timestamp NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+  PRIMARY KEY (id)
+) ENGINE=InnoDB;
+
+CREATE TABLE loans (
+  id int NOT NULL AUTO_INCREMENT,
+  username varchar(100) NOT NULL,
+  loan_code int NOT NULL UNIQUE,
+  start_date timestamp NOT NULL,
+  end_date timestamp NOT NULL,
+  take_date timestamp NULL DEFAULT NULL,
+  returned_date timestamp NULL DEFAULT NULL,
+  created_at timestamp NULL DEFAULT CURRENT_TIMESTAMP,
+  loaned_items_id json NOT NULL DEFAULT ('[]'),
+  loaned_items_name json NOT NULL DEFAULT ('[]'),
+  deleted bool NOT NULL DEFAULT false,
+  note varchar(500) DEFAULT NULL,
+  PRIMARY KEY (id),
+  CONSTRAINT fk_loans_username
+    FOREIGN KEY (username) REFERENCES users(username)
+    ON UPDATE CASCADE
+    ON DELETE RESTRICT
+) ENGINE=InnoDB;
+
+CREATE TABLE items (
+  id int NOT NULL AUTO_INCREMENT,
+  item_name varchar(255) NOT NULL UNIQUE,
+  can_borrow_role INT NOT NULL,
+  in_safe bool NOT NULL DEFAULT true,
+  entry_created_at timestamp NULL DEFAULT CURRENT_TIMESTAMP,
+  entry_updated_at timestamp NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+  last_borrowed_person varchar(255) DEFAULT NULL,
+  currently_borrowing varchar(255) DEFAULT NULL,
+  PRIMARY KEY (id)
+);
+
+CREATE TABLE apiKeys (
+  id int NOT NULL AUTO_INCREMENT,
+  api_key int NOT NULL UNIQUE,
+  username VARCHAR(100) NOT NULL,
+  entry_created_at timestamp NULL DEFAULT CURRENT_TIMESTAMP,
+  PRIMARY KEY (id),
+  CONSTRAINT fk_apikeys_username
+    FOREIGN KEY (username) REFERENCES users(username)
+    ON UPDATE CASCADE
+    ON DELETE RESTRICT
+) ENGINE=InnoDB;

backendV2/server.js

@@ -0,0 +1,22 @@
+import express from "express";
+import cors from "cors";
+import env from "dotenv";
+env.config();
+const app = express();
+const port = 8002;
+
+app.use(cors());
+// Increase body size limits to support large CSV JSON payloads
+app.use(express.urlencoded({ extended: true, limit: "10mb" }));
+app.set("view engine", "ejs");
+app.use(express.json({ limit: "10mb" }));
+
+app.listen(port, () => {
+  console.log(`Server is running on port: ${port}`);
+});
+// error handling code
+app.use((err, req, res, next) => {
+  // Log the error stack and send a generic error response
+  console.error(err.stack);
+  res.status(500).send("Something broke!");
+});

backendV2/services/athentication.js

@@ -0,0 +1,65 @@
+import { SignJWT, jwtVerify } from "jose";
+import env from "dotenv";
+import { getAllApiKeys } from "./database";
+env.config();
+
+const secretKey = process.env.SECRET_KEY;
+if (!secretKey) {
+  throw new Error("Missing SECRET_KEY environment variable");
+}
+const secret = new TextEncoder().encode(secretKey);
+
+export async function generateToken(payload) {
+  return await new SignJWT(payload)
+    .setProtectedHeader({ alg: "HS256" })
+    .setIssuedAt()
+    .setExpirationTime("2h")
+    .sign(secret);
+}
+
+export async function authenticate(req, res, next) {
+  const authHeader = req.headers["authorization"];
+  const apiKey = req.params.apiKey;
+
+  if (authHeader) {
+    const parts = authHeader.split(" ");
+    const scheme = parts[0];
+    const token = parts[1];
+
+    if (!/^Bearer$/i.test(scheme) || !token) {
+      return res.status(401).json({ message: "Unauthorized" });
+    }
+
+    try {
+      const payload = await verifyToken(token);
+      req.user = payload;
+      return next();
+    } catch {
+      return res.sendStatus(403); // present token invalid
+    }
+  } else if (apiKey) {
+    try {
+      await verifyAPIKey(apiKey);
+      return next();
+    } catch {
+      return res.sendStatus(403); // API Key invalid
+    }
+  } else {
+    return res.status(401).json({ message: "Unauthorized" }); // no credentials
+  }
+}
+
+async function verifyAPIKey(apiKey) {
+  const apiKeys = await getAllApiKeys();
+  const validKey = apiKeys.find((k) => k.key === apiKey);
+  if (!validKey) {
+    throw new Error("Invalid API Key");
+  }
+}
+
+async function verifyToken(token) {
+  const { payload } = await jwtVerify(token, secret, {
+    algorithms: ["HS256"],
+  });
+  return payload;
+}

backendV2/services/database.js

@@ -0,0 +1,551 @@
+import mysql from "mysql2";
+import dotenv from "dotenv";
+dotenv.config();
+
+const pool = mysql
+  .createPool({
+    host: process.env.DB_HOST,
+    user: process.env.DB_USER,
+    password: process.env.DB_PASSWORD,
+    database: process.env.DB_NAME,
+  })
+  .promise();
+
+export const loginFunc = async (username, password) => {
+  const [result] = await pool.query(
+    "SELECT * FROM users WHERE username = ? AND password = ?",
+    [username, password]
+  );
+  if (result.length > 0) return { success: true, data: result[0] };
+  return { success: false };
+};
+
+export const getItemsFromDatabaseV2 = async () => {
+  const [rows] = await pool.query("SELECT * FROM items;");
+  if (rows.length > 0) {
+    return { success: true, data: rows };
+  }
+  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) => {
+  const [result] = await pool.query(
+    "UPDATE items SET inSafe = NOT inSafe WHERE id = ?",
+    [itemId]
+  );
+  if (result.affectedRows > 0) {
+    return { success: true };
+  }
+  return { success: false };
+};
+
+export const setReturnDateV2 = async (loanCode) => {
+  const [items] = await pool.query(
+    "SELECT loaned_items_id FROM loans WHERE loan_code = ?",
+    [loanCode]
+  );
+
+  if (items.length === 0) return { success: false };
+
+  const itemIds = Array.isArray(items[0].loaned_items_id)
+    ? items[0].loaned_items_id
+    : JSON.parse(items[0].loaned_items_id || "[]");
+
+  const [setItemStates] = await pool.query(
+    "UPDATE items SET inSafe = 1 WHERE id IN (?)",
+    [itemIds]
+  );
+
+  const [result] = await pool.query(
+    "UPDATE loans SET returned_date = NOW() WHERE loan_code = ?",
+    [loanCode]
+  );
+
+  if (result.affectedRows > 0 && setItemStates.affectedRows > 0) {
+    return { success: true };
+  }
+  return { success: false };
+};
+
+export const setTakeDateV2 = async (loanCode) => {
+  const [items] = await pool.query(
+    "SELECT loaned_items_id FROM loans WHERE loan_code = ?",
+    [loanCode]
+  );
+
+  if (items.length === 0) return { success: false };
+
+  const itemIds = Array.isArray(items[0].loaned_items_id)
+    ? items[0].loaned_items_id
+    : JSON.parse(items[0].loaned_items_id || "[]");
+
+  const [setItemStates] = await pool.query(
+    "UPDATE items SET inSafe = 0 WHERE id IN (?)",
+    [itemIds]
+  );
+
+  const [result] = await pool.query(
+    "UPDATE loans SET take_date = NOW() WHERE loan_code = ?",
+    [loanCode]
+  );
+
+  if (result.affectedRows > 0 && setItemStates.affectedRows > 0) {
+    return { success: true };
+  }
+  return { success: false };
+};
+
+export const getItemsFromDatabase = async (role) => {
+  const sql =
+    role == 0
+      ? "SELECT * FROM items;"
+      : "SELECT * FROM items WHERE can_borrow_role >= ?";
+  const params = role == 0 ? [] : [role];
+
+  const [rows] = await pool.query(sql, params);
+  if (rows.length > 0) {
+    return { success: true, data: rows };
+  }
+  return { success: false };
+};
+
+export const getLoansFromDatabase = async () => {
+  const [rows] = await pool.query("SELECT * FROM loans;");
+  return { success: true, data: rows.length > 0 ? rows : null };
+};
+
+export const getUserLoansFromDatabase = async (username) => {
+  const [result] = await pool.query(
+    "SELECT * FROM loans WHERE username = ? AND deleted = 0;",
+    [username]
+  );
+  if (result.length > 0) {
+    return { success: true, data: result };
+  } else if (result.length == 0) {
+    return { success: true, data: "No loans found for this user" };
+  } else {
+    return { success: false };
+  }
+};
+
+export const deleteLoanFromDatabase = async (loanId) => {
+  const [result] = await pool.query("DELETE FROM loans WHERE id = ?;", [
+    loanId,
+  ]);
+  if (result.affectedRows > 0) {
+    return { success: true };
+  } else {
+    return { success: false };
+  }
+};
+
+export const SETdeleteLoanFromDatabase = async (loanId) => {
+  const [result] = await pool.query(
+    "UPDATE loans SET deleted = 1 WHERE id = ?;",
+    [loanId]
+  );
+  if (result.affectedRows > 0) {
+    return { success: true };
+  } else {
+    return { success: false };
+  }
+};
+
+export const getBorrowableItemsFromDatabase = async (
+  startDate,
+  endDate,
+  role = 0
+) => {
+  // Overlap if: loan.start < end AND effective_end > start
+  // effective_end is returned_date if set, otherwise end_date
+  const hasRoleFilter = Number(role) > 0;
+
+  const sql = `
+    SELECT i.*
+    FROM items i
+    WHERE ${hasRoleFilter ? "i.can_borrow_role >= ? AND " : ""}NOT EXISTS (
+      SELECT 1
+      FROM loans l
+      JOIN JSON_TABLE(l.loaned_items_id, '$[*]' COLUMNS (item_id INT PATH '$')) jt
+      WHERE jt.item_id = i.id
+        AND l.deleted = 0
+        AND l.start_date < ?
+        AND COALESCE(l.returned_date, l.end_date) > ?
+    );
+  `;
+
+  const params = hasRoleFilter
+    ? [role, endDate, startDate]
+    : [endDate, startDate];
+
+  const [rows] = await pool.query(sql, params);
+  if (rows.length > 0) {
+    return { success: true, data: rows };
+  }
+  return { success: false };
+};
+
+export const getLoanInfoWithID = async (loanId) => {
+  const [rows] = await pool.query("SELECT * FROM loans WHERE id = ?;", [
+    loanId,
+  ]);
+  if (rows.length > 0) {
+    return { success: true, data: rows[0] };
+  }
+  return { success: false };
+};
+
+export const createLoanInDatabase = async (
+  username,
+  startDate,
+  endDate,
+  itemIds
+) => {
+  if (!username)
+    return { success: false, code: "BAD_REQUEST", message: "Missing username" };
+  if (!Array.isArray(itemIds) || itemIds.length === 0)
+    return {
+      success: false,
+      code: "BAD_REQUEST",
+      message: "No items provided",
+    };
+  if (!startDate || !endDate)
+    return { success: false, code: "BAD_REQUEST", message: "Missing dates" };
+
+  const start = new Date(startDate);
+  const end = new Date(endDate);
+  if (
+    !(start instanceof Date) ||
+    isNaN(start.getTime()) ||
+    !(end instanceof Date) ||
+    isNaN(end.getTime()) ||
+    start >= end
+  ) {
+    return {
+      success: false,
+      code: "BAD_REQUEST",
+      message: "Invalid date range",
+    };
+  }
+
+  const conn = await pool.getConnection();
+  try {
+    await conn.beginTransaction();
+
+    // Ensure all items exist and collect names
+    const [itemsRows] = await conn.query(
+      "SELECT id, item_name FROM items WHERE id IN (?)",
+      [itemIds]
+    );
+    if (!itemsRows || itemsRows.length !== itemIds.length) {
+      await conn.rollback();
+      return {
+        success: false,
+        code: "BAD_REQUEST",
+        message: "One or more items not found",
+      };
+    }
+    const itemNames = itemIds
+      .map(
+        (id) => itemsRows.find((r) => Number(r.id) === Number(id))?.item_name
+      )
+      .filter(Boolean);
+
+    // Check availability (no overlap with existing loans)
+    const [confRows] = await conn.query(
+      `
+      SELECT COUNT(*) AS conflicts
+      FROM loans l
+      JOIN JSON_TABLE(l.loaned_items_id, '$[*]' COLUMNS (item_id INT PATH '$')) jt
+        ON TRUE
+      WHERE jt.item_id IN (?)
+        AND l.deleted = 0
+        AND l.start_date < ?
+        AND COALESCE(l.returned_date, l.end_date) > ?
+      `,
+      [itemIds, end, start]
+    );
+    if (confRows?.[0]?.conflicts > 0) {
+      await conn.rollback();
+      return {
+        success: false,
+        code: "CONFLICT",
+        message: "One or more items are not available in the selected period",
+      };
+    }
+
+    // Generate unique loan_code (retry a few times)
+    let loanCode = null;
+    for (let i = 0; i < 6; i++) {
+      const candidate = Math.floor(100000 + Math.random() * 899999); // 6 digits
+      const [exists] = await conn.query(
+        "SELECT 1 FROM loans WHERE loan_code = ? LIMIT 1",
+        [candidate]
+      );
+      if (exists.length === 0) {
+        loanCode = candidate;
+        break;
+      }
+    }
+    if (!loanCode) {
+      await conn.rollback();
+      return {
+        success: false,
+        code: "SERVER_ERROR",
+        message: "Failed to generate unique loan code",
+      };
+    }
+
+    // Insert loan
+    const [insertRes] = await conn.query(
+      `
+      INSERT INTO loans (username, loan_code, start_date, end_date, loaned_items_id, loaned_items_name)
+      VALUES (?, ?, ?, ?, CAST(? AS JSON), CAST(? AS JSON))
+      `,
+      [
+        username,
+        loanCode,
+        // Use DATETIME/TIMESTAMP friendly format
+        new Date(start).toISOString().slice(0, 19).replace("T", " "),
+        new Date(end).toISOString().slice(0, 19).replace("T", " "),
+        JSON.stringify(itemIds.map((n) => Number(n))),
+        JSON.stringify(itemNames),
+      ]
+    );
+
+    await conn.commit();
+    return {
+      success: true,
+      data: {
+        id: insertRes.insertId,
+        loan_code: loanCode,
+        username,
+        start_date: start,
+        end_date: end,
+        items: itemIds,
+        item_names: itemNames,
+      },
+    };
+  } catch (err) {
+    await conn.rollback();
+    console.error("createLoanInDatabase error:", err);
+    return {
+      success: false,
+      code: "SERVER_ERROR",
+      message: "Failed to create loan",
+    };
+  } finally {
+    conn.release();
+  }
+};
+
+// These functions are only temporary, and will be deleted when the full bin is set up.
+export const onTake = async (loanId) => {
+  const [items] = await pool.query(
+    "SELECT loaned_items_id FROM loans WHERE id = ?",
+    [loanId]
+  );
+
+  if (items.length === 0) return { success: false };
+
+  const itemIds = Array.isArray(items[0].loaned_items_id)
+    ? items[0].loaned_items_id
+    : JSON.parse(items[0].loaned_items_id || "[]");
+
+  const [setItemStates] = await pool.query(
+    "UPDATE items SET inSafe = 0 WHERE id IN (?)",
+    [itemIds]
+  );
+
+  const [result] = await pool.query(
+    "UPDATE loans SET take_date = NOW() WHERE id = ?",
+    [loanId]
+  );
+
+  if (result.affectedRows > 0 && setItemStates.affectedRows > 0) {
+    return { success: true };
+  }
+  return { success: false };
+};
+
+export const onReturn = async (loanId) => {
+  const [items] = await pool.query(
+    "SELECT loaned_items_id FROM loans WHERE id = ?",
+    [loanId]
+  );
+
+  if (items.length === 0) return { success: false };
+
+  const itemIds = Array.isArray(items[0].loaned_items_id)
+    ? items[0].loaned_items_id
+    : JSON.parse(items[0].loaned_items_id || "[]");
+
+  const [setItemStates] = await pool.query(
+    "UPDATE items SET inSafe = 1 WHERE id IN (?)",
+    [itemIds]
+  );
+
+  const [result] = await pool.query(
+    "UPDATE loans SET returned_date = NOW() WHERE id = ?",
+    [loanId]
+  );
+
+  if (result.affectedRows > 0 && setItemStates.affectedRows > 0) {
+    return { success: true };
+  }
+  return { success: false };
+};
+// Temporary functions end here.
+
+export const loginAdmin = async (username, password) => {
+  const [result] = await pool.query(
+    "SELECT * FROM admins WHERE username = ? AND password = ?",
+    [username, password]
+  );
+  if (result.length > 0) return { success: true, data: result[0] };
+  return { success: false };
+};
+
+export const getAllUsers = async () => {
+  const [result] = await pool.query(
+    "SELECT id, username, role, entry_created_at FROM users"
+  );
+  if (result.length > 0) return { success: true, data: result };
+  return { success: false };
+};
+
+export const deleteUserID = async (userId) => {
+  const [result] = await pool.query("DELETE FROM users WHERE id = ?", [userId]);
+  if (result.affectedRows > 0) return { success: true };
+  return { success: false };
+};
+
+export const handleEdit = async (userId, username, role) => {
+  const [result] = await pool.query(
+    "UPDATE users SET username = ?, role = ? WHERE id = ?",
+    [username, role, userId]
+  );
+  if (result.affectedRows > 0) return { success: true };
+  return { success: false };
+};
+
+export const createUser = async (username, role, password) => {
+  const [result] = await pool.query(
+    "INSERT INTO users (username, role, password) VALUES (?, ?, ?)",
+    [username, role, password]
+  );
+  if (result.affectedRows > 0) return { success: true };
+  return { success: false };
+};
+
+export const getAllLoans = async () => {
+  const [result] = await pool.query("SELECT * FROM loans");
+  if (result.length > 0) return { success: true, data: result };
+  return { success: false };
+};
+
+export const getAllItems = async () => {
+  const [result] = await pool.query("SELECT * FROM items");
+  if (result.length > 0) return { success: true, data: result };
+  return { success: false };
+};
+
+export const deleteItemID = async (itemId) => {
+  const [result] = await pool.query("DELETE FROM items WHERE id = ?", [itemId]);
+  if (result.affectedRows > 0) return { success: true };
+  return { success: false };
+};
+
+export const createItem = async (item_name, can_borrow_role) => {
+  const [result] = await pool.query(
+    "INSERT INTO items (item_name, can_borrow_role) VALUES (?, ?)",
+    [item_name, can_borrow_role]
+  );
+  if (result.affectedRows > 0) return { success: true };
+  return { success: false };
+};
+
+export const changeUserPassword = async (username, newPassword) => {
+  const [result] = await pool.query(
+    "UPDATE users SET password = ? WHERE username = ?",
+    [newPassword, username]
+  );
+  if (result.affectedRows > 0) return { success: true };
+  return { success: false };
+};
+
+export const changeUserPasswordFRONTEND = async (
+  username,
+  oldPassword,
+  newPassword
+) => {
+  const [result] = await pool.query(
+    "UPDATE users SET password = ? WHERE username = ? AND password = ?",
+    [newPassword, username, oldPassword]
+  );
+  if (result.affectedRows > 0) return { success: true };
+  return { success: false };
+};
+
+export const updateItemByID = async (itemId, item_name, can_borrow_role) => {
+  const [result] = await pool.query(
+    "UPDATE items SET item_name = ?, can_borrow_role = ? WHERE id = ?",
+    [item_name, can_borrow_role, itemId]
+  );
+  if (result.affectedRows > 0) return { success: true };
+  return { success: false };
+};
+
+export const getAllLoansV2 = async () => {
+  const [rows] = await pool.query(
+    "SELECT id, username, start_date, end_date, loaned_items_name, returned_date, take_date FROM loans"
+  );
+  if (rows.length > 0) {
+    return { success: true, data: rows };
+  }
+  return { success: false };
+};
+
+export const getAllApiKeys = async () => {
+  const [rows] = await pool.query("SELECT * FROM apiKeys");
+  if (rows.length > 0) {
+    return { success: true, data: rows };
+  }
+  return { success: false };
+};
+
+export const createAPIentry = async (apiKey, user) => {
+  const [result] = await pool.query(
+    "INSERT INTO apiKeys (apiKey, user) VALUES (?, ?)",
+    [apiKey, user]
+  );
+  if (result.affectedRows > 0) return { success: true };
+  return { success: false };
+};
+
+export const deleteAPKey = async (apiKeyId) => {
+  const [result] = await pool.query("DELETE FROM apiKeys WHERE id = ?", [
+    apiKeyId,
+  ]);
+  if (result.affectedRows > 0) return { success: true };
+  return { success: false };
+};
+
+export const getAPIkey = async () => {
+  const [rows] = await pool.query("SELECT apiKey FROM apiKeys");
+  if (rows.length > 0) {
+    return { success: true, data: rows };
+  }
+  return { success: false };
+};

backendV2/views/index.ejs

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>backend</title>
+</head>
+<body>
+    backend
+</body>
+</html>

docker-compose.yml

@@ -53,5 +53,20 @@ services:
     ports:
       - "3309:3306"
 
+  mysql-new:
+    container_name: borrow_system-mysql-new
+    image: mysql:8.0
+    restart: unless-stopped
+    environment:
+      MYSQL_ROOT_PASSWORD: ${DB_PASSWORD}
+      MYSQL_DATABASE: borrow_system_new
+      TZ: Europe/Berlin
+    volumes:
+      - mysql-data-new:/var/lib/mysql
+      - ./mysql-timezone.cnf:/etc/mysql/conf.d/timezone.cnf:ro
+    ports:
+      - "3310:3306"
+
 volumes:
   mysql-data:
+  mysql-data-new:

frontend/.gitignore

@@ -1,24 +0,0 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-dist
-dist-ssr
-*.local
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?

frontend/README.md

@@ -1,69 +0,0 @@
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
-
-```js
-export default tseslint.config([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-
-      // Remove tseslint.configs.recommended and replace with this
-      ...tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      ...tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      ...tseslint.configs.stylisticTypeChecked,
-
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
-```
-
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default tseslint.config([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
-```

frontend/eslint.config.js

@@ -1,23 +0,0 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
-import { globalIgnores } from 'eslint/config'
-
-export default tseslint.config([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      js.configs.recommended,
-      tseslint.configs.recommended,
-      reactHooks.configs['recommended-latest'],
-      reactRefresh.configs.vite,
-    ],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-    },
-  },
-])

frontend/index.html

@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/shapes.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Ausleihsystem</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>

frontend/package.json

@@ -1,45 +0,0 @@
-{
-  "name": "frontend",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc -b && vite build",
-    "lint": "eslint .",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "@tailwindcss/vite": "^4.1.11",
-    "@tanstack/react-query": "^5.85.5",
-    "jotai": "^2.15.0",
-    "js-cookie": "^3.0.5",
-    "lucide-react": "^0.539.0",
-    "primeicons": "^7.0.0",
-    "primereact": "^10.9.6",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
-    "react-router-dom": "^7.8.0",
-    "react-toastify": "^11.0.5",
-    "split-lines": "^3.0.0",
-    "tailwind-merge": "^3.3.1",
-    "tailwindcss": "^4.1.11",
-    "tailwindcss-animate": "^1.0.7",
-    "tw-animate-css": "^1.3.5",
-    "vite-plugin-svgr": "^4.3.0"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.32.0",
-    "@types/js-cookie": "^3.0.6",
-    "@types/react": "^19.1.9",
-    "@types/react-dom": "^19.1.7",
-    "@vitejs/plugin-react": "^4.7.0",
-    "eslint": "^9.32.0",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.20",
-    "globals": "^16.3.0",
-    "typescript": "~5.8.3",
-    "typescript-eslint": "^8.39.0",
-    "vite": "^7.1.0"
-  }
-}

frontend/public/shapes.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shapes-icon lucide-shapes"><path d="M8.3 10a.7.7 0 0 1-.626-1.079L11.4 3a.7.7 0 0 1 1.198-.043L16.3 8.9a.7.7 0 0 1-.572 1.1Z"/><rect x="3" y="14" width="7" height="7" rx="1"/><circle cx="17.5" cy="17.5" r="3.5"/></svg>

frontend/src/App.css

@@ -1 +0,0 @@
-@import "tailwindcss";

frontend/src/App.tsx

@@ -1,54 +0,0 @@
-import "./App.css";
-import Layout from "./layout/Layout";
-import { useEffect, useState } from "react";
-import { AddLoan } from "./components/AddLoan";
-import LoginForm from "./components/LoginForm";
-import Cookies from "js-cookie";
-import {
-  fetchAllData,
-  ALL_ITEMS_UPDATED_EVENT,
-  AUTH_LOGOUT_EVENT,
-} from "./utils/fetchData";
-import { myToast } from "./utils/toastify";
-
-function App() {
-  const [isLoggedIn, setIsLoggedIn] = useState(false);
-
-  useEffect(() => {
-    const token = Cookies.get("token");
-    if (token) {
-      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");
-    localStorage.removeItem("allLoans");
-    localStorage.removeItem("userLoans");
-    localStorage.removeItem("borrowableItems");
-    window.dispatchEvent(new Event(ALL_ITEMS_UPDATED_EVENT));
-    myToast("Logged out successfully!", "success");
-    setIsLoggedIn(false);
-  };
-
-  return isLoggedIn ? (
-    <Layout onLogout={handleLogout}>
-      <AddLoan />
-    </Layout>
-  ) : (
-    <LoginForm onLogin={() => setIsLoggedIn(true)} />
-  );
-}
-
-export default App;

frontend/src/States/Atoms.tsx

@@ -1,6 +0,0 @@
-import { atom } from "jotai";
-
-// Atoms to store the start and end dates for loans
-export const startDate = atom<string | null>(null);
-export const endDate = atom<string | null>(null);
-export const getBorrowableItemsAtom = atom<string[] | boolean>(false);

frontend/src/States/README.md

@@ -1,36 +0,0 @@
-# How to use Atoms
-Atoms are the fundamental building blocks of state management in this system. They represent individual pieces of state that can be shared and manipulated across different components.
-
-You can also name it global state.
-
-## Creating an Atom
-to create an atom you have to declare an atom like this:
-
-```ts
-import { atom } from 'jotai';
-
-export const NAME_OF_YOUR_ATOM = atom<type_of_your_atom>(initial_value);
-```
-
-In this project we declare all atoms in the `States/Atoms.tsx`file. Which you can find above this README file.
-
-## Using an Atom
-To use an atom in your component, you can use the `useAtom` hook provided by Jotai. Here's an example of how to use an atom in a React component:
-
-```tsx
-import { useAtom } from 'jotai';
-import { NAME_OF_YOUR_ATOM } from '@/States/Atoms';
-
-const MyComponent = () => {
-  const [value, setValue] = useAtom(NAME_OF_YOUR_ATOM);
-
-  return (
-    <div>
-      <p>Current value: {value}</p>
-      <button onClick={() => setValue(newValue)}>Update Value</button>
-    </div>
-  );
-};
-```
-
-As you can see, you can use `useAtom` like `useState` but the state is global. In this example `value` is the current state of the atom, and `setValue` is a function to update the state, which is also known as the setter function.

frontend/src/assets/react.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

frontend/src/components/AddLoan.tsx

@@ -1,69 +0,0 @@
-import { getBorrowableItems } from "../utils/fetchData";
-import { useAtom } from "jotai";
-import { startDate, endDate } from "../States/Atoms";
-import Cookies from "js-cookie";
-
-export const AddLoan = () => {
-  const [start, setStart] = useAtom(startDate);
-  const [end, setEnd] = useAtom(endDate);
-
-  return (
-    <div className="space-y-4">
-      <h2 className="text-lg sm:text-xl font-bold text-slate-900">
-        1. Zeitraum wählen
-      </h2>
-      <form
-        className="space-y-3"
-        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) || "";
-          setStart(start);
-          setEnd(end);
-          Cookies.set("startDate", start);
-          Cookies.set("endDate", end);
-          getBorrowableItems();
-        }}
-      >
-        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-          <div>
-            <label
-              htmlFor="startDate"
-              className="block text-sm font-medium text-slate-700 mb-1"
-            >
-              Start
-            </label>
-            <input
-              type="datetime-local"
-              id="startDate"
-              name="startDate"
-              className="w-full border border-slate-300 rounded-lg px-3 py-2.5 focus:ring-2 focus:ring-indigo-500 focus:outline-none bg-white"
-            />
-          </div>
-          <div>
-            <label
-              htmlFor="endDate"
-              className="block text-sm font-medium text-slate-700 mb-1"
-            >
-              Ende
-            </label>
-            <input
-              type="datetime-local"
-              id="endDate"
-              name="endDate"
-              className="w-full border border-slate-300 rounded-lg px-3 py-2.5 focus:ring-2 focus:ring-indigo-500 focus:outline-none bg-white"
-            />
-          </div>
-        </div>
-        <button
-          type="submit"
-          className="w-full bg-indigo-600 text-white font-bold py-2.5 px-4 rounded-lg shadow hover:bg-indigo-700 transition"
-        >
-          Verfügbare Gegenstände anzeigen
-        </button>
-      </form>
-    </div>
-  );
-};

frontend/src/components/Footer.tsx

@@ -1,12 +0,0 @@
-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/Form1.tsx

@@ -1,65 +0,0 @@
-import React from "react";
-import Cookies from "js-cookie";
-import { getBorrowableItems } from "../utils/fetchData";
-
-const Form1: React.FC = () => {
-  return (
-    <div className="space-y-4">
-      <h2 className="text-lg sm:text-xl font-bold text-slate-900">
-        1. Zeitraum wählen
-      </h2>
-      <form
-        className="space-y-3"
-        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();
-        }}
-      >
-        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-          <div>
-            <label
-              htmlFor="startDate"
-              className="block text-sm font-medium text-slate-700 mb-1"
-            >
-              Start
-            </label>
-            <input
-              type="datetime-local"
-              id="startDate"
-              name="startDate"
-              className="w-full border border-slate-300 rounded-lg px-3 py-2.5 focus:ring-2 focus:ring-indigo-500 focus:outline-none bg-white"
-            />
-          </div>
-          <div>
-            <label
-              htmlFor="endDate"
-              className="block text-sm font-medium text-slate-700 mb-1"
-            >
-              Ende
-            </label>
-            <input
-              type="datetime-local"
-              id="endDate"
-              name="endDate"
-              className="w-full border border-slate-300 rounded-lg px-3 py-2.5 focus:ring-2 focus:ring-indigo-500 focus:outline-none bg-white"
-            />
-          </div>
-        </div>
-        <button
-          type="submit"
-          className="w-full bg-indigo-600 text-white font-bold py-2.5 px-4 rounded-lg shadow hover:bg-indigo-700 transition"
-        >
-          Verfügbare Gegenstände anzeigen
-        </button>
-      </form>
-    </div>
-  );
-};
-
-export default Form1;

frontend/src/components/Form2.tsx

@@ -1,186 +0,0 @@
-import React from "react";
-import Cookies from "js-cookie";
-import { createLoan, 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";
-
-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[];
-}
-
-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(() => {
-    readFromStorage();
-
-    const onStorage = (e: StorageEvent) => {
-      if (e.key === LOCAL_STORAGE_KEY) readFromStorage();
-    };
-    window.addEventListener("storage", onStorage);
-
-    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 = useBorrowableItems();
-
-  return (
-    <div className="space-y-4">
-      <h2 className="text-lg sm:text-xl font-bold text-slate-900">
-        2. Gegenstand auswählen
-      </h2>
-
-      {items.length === 0 ? (
-        <div className="text-slate-700 text-center bg-slate-100 border border-slate-200 rounded-xl p-4">
-          Keine Gegenstände verfügbar für diesen Zeitraum.
-        </div>
-      ) : (
-        <>
-          {/* Mobile: card list */}
-          <div className="sm:hidden space-y-2">
-            {items.map((item) => (
-              <label
-                key={item.id}
-                htmlFor={`item-${item.id}`}
-                className="flex items-center justify-between gap-3 p-3 rounded-lg border border-slate-200 bg-white shadow-sm"
-              >
-                <div className="min-w-0">
-                  <div className="text-sm font-medium text-slate-900 truncate">
-                    {item.item_name}
-                  </div>
-                  <div className="text-xs text-slate-500">
-                    {item.inSafe ? "Verfügbar" : "Nicht im Schließfach"}
-                  </div>
-                </div>
-                <input
-                  type="checkbox"
-                  id={`item-${item.id}`}
-                  onChange={(e) => {
-                    if (e.target.checked) addToRemove(item.id);
-                    else rmFromRemove(item.id);
-                  }}
-                  className="h-5 w-5 accent-indigo-600"
-                />
-              </label>
-            ))}
-          </div>
-
-          {/* Desktop: table */}
-          <div className="hidden sm:block overflow-x-auto rounded-xl border border-slate-200 shadow-sm bg-white">
-            <table className="min-w-full divide-y divide-slate-200">
-              <thead className="bg-slate-50">
-                <tr>
-                  <th className="px-4 py-2 text-left text-xs font-semibold text-slate-700">
-                    Gegenstand
-                  </th>
-                  <th className="px-4 py-2 text-left text-xs font-semibold text-slate-700">
-                    <input type="checkbox" className="invisible" />
-                  </th>
-                </tr>
-              </thead>
-              <tbody className="divide-y divide-slate-100">
-                {items.map((item) => (
-                  <tr key={item.id} className="hover:bg-slate-50">
-                    <td className="px-4 py-2 text-sm font-medium text-slate-900">
-                      {item.item_name}
-                    </td>
-                    <td className="px-4 py-2 text-sm text-slate-700 text-right">
-                      <input
-                        type="checkbox"
-                        onChange={(e) => {
-                          if (e.target.checked) addToRemove(item.id);
-                          else rmFromRemove(item.id);
-                        }}
-                        id={`item-${item.id}`}
-                        className="h-4 w-4 accent-indigo-600"
-                      />
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </>
-      )}
-
-      <div className="flex flex-col sm:flex-row gap-3 pt-1">
-        <button
-          onClick={() => {
-            createLoan(
-              Cookies.get("startDate") ?? "",
-              Cookies.get("endDate") ?? ""
-            );
-          }}
-          type="button"
-          className="w-full sm:w-44 bg-indigo-600 text-white font-bold py-2.5 px-4 rounded-lg shadow hover:bg-indigo-700 transition"
-        >
-          Ausleihen
-        </button>
-      </div>
-    </div>
-  );
-};
-
-export default Form2;

frontend/src/components/Form4.tsx

@@ -1,277 +0,0 @@
-import React from "react";
-import { Trash, ArrowLeftRight } from "lucide-react";
-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;
-  username: string;
-  loan_code: number;
-  start_date: string;
-  end_date: string;
-  take_date: string | null;
-  returned_date: string | null;
-  created_at: string;
-  loaned_items_id: number[];
-  loaned_items_name: string[];
-};
-
-const API_BASE =
-  (import.meta as any).env?.VITE_BACKEND_URL ||
-  import.meta.env.VITE_BACKEND_URL ||
-  "http://localhost:8002";
-
-const formatDate = (iso: string | null) => {
-  if (!iso) return "-";
-  const m = iso.match(/^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})/);
-  if (!m) return iso;
-  const [, y, M, d, h, min] = m;
-  return `${d}.${M}.${y} ${h}:${min}`;
-};
-
-async function fetchUserLoans(): Promise<Loan[]> {
-  const res = await fetch(`${API_BASE}/api/userLoans`, {
-    method: "GET",
-    headers: { Authorization: `Bearer ${Cookies.get("token") || ""}` },
-  });
-  if (!res.ok) throw new Error("Failed to fetch user loans");
-  const data = await res.json();
-  if (data === "No loans found for this user") return [];
-  return Array.isArray(data) ? (data as Loan[]) : [];
-}
-
-const Form4: React.FC = () => {
-  const { data: userLoans = [], isFetching } = useQuery({
-    queryKey: ["userLoans"],
-    queryFn: fetchUserLoans,
-  });
-
-  const deleteMutation = useMutation({
-    mutationFn: (loanID: number) => handleDeleteLoan(loanID),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["userLoans"] });
-    },
-  });
-
-  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) {
-    return (
-      <div className="rounded-xl border border-slate-200 bg-white p-6 text-center text-slate-600 shadow-sm">
-        <p>Lade Ausleihen…</p>
-      </div>
-    );
-  }
-
-  if (userLoans.length === 0) {
-    return (
-      <div className="rounded-xl border border-slate-200 bg-white p-6 text-center text-slate-600 shadow-sm">
-        <p>Keine Ausleihen gefunden.</p>
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-3">
-      <p className="text-lg font-semibold tracking-tight text-slate-900">
-        Meine Ausleihen
-      </p>
-      <p className="text-sm text-slate-600">
-        Tippe auf das Papierkorb-Symbol, um eine Ausleihe zu löschen.
-      </p>
-
-      {/* Mobile: cards */}
-      <div className="space-y-2 sm:hidden">
-        {userLoans.map((loan) => (
-          <div
-            key={loan.id}
-            className="rounded-xl border border-slate-200 bg-white p-3 shadow-sm"
-          >
-            <div className="flex items-start justify-between gap-3">
-              <div className="min-w-0">
-                <div className="text-sm font-semibold text-slate-900">
-                  Leihcode: <span className="font-mono">{loan.loan_code}</span>
-                </div>
-                <div className="mt-1 grid grid-cols-2 gap-x-4 gap-y-1 text-xs text-slate-700">
-                  <div>
-                    <span className="text-slate-500">Start:</span>{" "}
-                    {formatDate(loan.start_date)}
-                  </div>
-                  <div>
-                    <span className="text-slate-500">Ende:</span>{" "}
-                    {formatDate(loan.end_date)}
-                  </div>
-                  <div>
-                    <span className="text-slate-500">Abgeholt:</span>{" "}
-                    {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>{" "}
-                    {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">
-                  <span className="text-slate-500">Gegenstände:</span>{" "}
-                  {Array.isArray(loan.loaned_items_name)
-                    ? loan.loaned_items_name.join(", ")
-                    : "-"}
-                </div>
-              </div>
-              <button
-                onClick={() => onDelete(loan.id)}
-                aria-label="Ausleihe löschen"
-                className="flex items-center justify-center rounded-md p-2 text-slate-600 hover:bg-red-50 hover:text-red-600 focus:outline-none focus:ring-2 focus:ring-red-500/30"
-              >
-                <Trash className="h-5 w-5" />
-              </button>
-            </div>
-          </div>
-        ))}
-      </div>
-
-      {/* Desktop: table */}
-      <div className="hidden sm:block rounded-xl border border-slate-200 bg-white shadow-sm">
-        <div className="overflow-x-auto">
-          <table className="table-auto min-w-full text-sm text-slate-700">
-            <thead className="sticky top-0 z-10 bg-slate-50">
-              <tr className="border-b border-slate-200">
-                <th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-600">
-                  Leihcode
-                </th>
-                <th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-600">
-                  Start
-                </th>
-                <th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-600">
-                  Ende
-                </th>
-                <th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-600">
-                  Abgeholt
-                </th>
-                <th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-600">
-                  Zurückgegeben
-                </th>
-                <th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-600">
-                  Erstellt
-                </th>
-                <th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-600">
-                  Gegenstände
-                </th>
-                <th className="px-4 py-3 text-right text-xs font-semibold uppercase tracking-wider text-slate-600">
-                  Aktionen
-                </th>
-              </tr>
-            </thead>
-            <tbody className="divide-y divide-slate-100">
-              {userLoans.map((loan) => (
-                <tr key={loan.id} className="odd:bg-white even:bg-slate-50">
-                  <td className="px-4 py-3 whitespace-nowrap font-mono tabular-nums text-slate-900">
-                    {loan.loan_code}
-                  </td>
-                  <td className="px-4 py-3 whitespace-nowrap font-mono tabular-nums text-slate-900">
-                    {formatDate(loan.start_date)}
-                  </td>
-                  <td className="px-4 py-3 whitespace-nowrap font-mono tabular-nums text-slate-900">
-                    {formatDate(loan.end_date)}
-                  </td>
-                  <td className="px-4 py-3 whitespace-nowrap font-mono tabular-nums text-slate-900">
-                    {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">
-                    {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)}
-                  </td>
-                  <td className="px-4 py-3 whitespace-nowrap">
-                    <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">
-                    <button
-                      onClick={() => onDelete(loan.id)}
-                      aria-label="Ausleihe löschen"
-                      className="inline-flex items-center rounded-md p-2 text-slate-600 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/Header.tsx

@@ -1,76 +0,0 @@
-import React from "react";
-import { changePW } from "../utils/userHandler";
-import { myToast } from "../utils/toastify";
-
-type HeaderProps = {
-  onLogout: () => void;
-};
-
-const Header: React.FC<HeaderProps> = ({ onLogout }) => {
-  const passwordForm = () => {
-    const oldPW = window.prompt("Altes Passwort");
-    const newPW = window.prompt("Neues Passwort");
-    const repeatNewPW = window.prompt("Neues Passwort wiederholen");
-    if (oldPW && newPW && repeatNewPW) {
-      if (newPW === repeatNewPW) {
-        changePW(oldPW, newPW);
-      } else {
-        myToast("Die neuen Passwörter stimmen nicht überein.", "error");
-      }
-    } else {
-      myToast("Bitte alle Felder ausfüllen.", "error");
-    }
-  };
-
-  const btn =
-    "inline-flex items-center h-9 px-3 rounded-md text-sm font-medium border border-slate-300 bg-white text-slate-700 hover:bg-slate-100 active:bg-slate-200 transition focus:outline-none focus:ring-2 focus:ring-slate-400/50";
-
-  return (
-    <header className="mb-4 sm:mb-6">
-      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-        <div className="min-w-0">
-          <h1 className="text-2xl sm:text-3xl font-extrabold text-slate-900 tracking-tight">
-            Gegenstand ausleihen
-          </h1>
-          <p className="text-slate-600 mt-1 text-sm sm:text-base">
-            Schnell und unkompliziert Equipment reservieren
-          </p>
-        </div>
-
-        <nav
-          aria-label="Aktionen"
-          className="flex flex-wrap items-center gap-2"
-        >
-          <a
-            href="https://git.the1s.de/Matthias-Claudius-Schule/borrow-system/src/branch/dev/Docs/HELP.md"
-            target="_blank"
-            rel="noreferrer"
-            className={btn}
-          >
-            Hilfe
-          </a>
-          <a
-            href="https://git.the1s.de/Matthias-Claudius-Schule/borrow-system"
-            target="_blank"
-            rel="noreferrer"
-            className={btn}
-          >
-            Source Code
-          </a>
-          <button type="button" onClick={passwordForm} className={btn}>
-            Passwort ändern
-          </button>
-          <button
-            type="button"
-            onClick={onLogout}
-            className={`${btn} border-rose-300 hover:bg-rose-50`}
-          >
-            Logout
-          </button>
-        </nav>
-      </div>
-    </header>
-  );
-};
-
-export default Header;

frontend/src/components/LoginForm.tsx

@@ -1,75 +0,0 @@
-import React from "react";
-import Footer from "./Footer";
-import { useState } from "react";
-import { loginUser } from "../utils/fetchData";
-import { myToast } from "../utils/toastify";
-
-type LoginFormProps = {
-  onLogin: () => void;
-};
-
-const LoginForm: React.FC<LoginFormProps> = ({ onLogin }) => {
-  const [username, setUsername] = useState("");
-  const [password, setPassword] = useState("");
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    const result = await loginUser(username, password);
-    if (result.success) {
-      onLogin();
-    } else {
-      myToast("Login failed. Please check your credentials.", "error");
-    }
-  };
-
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-slate-100 p-4">
-      <div className="w-full max-w-sm bg-white rounded-2xl shadow-md p-6 sm:p-8 border border-slate-200">
-        <h2 className="text-2xl font-bold text-slate-900 mb-6 text-center">
-          Login
-        </h2>
-        <form onSubmit={handleSubmit} className="space-y-4">
-          <div>
-            <label
-              htmlFor="username"
-              className="block text-sm font-medium text-slate-700 mb-1"
-            >
-              Username
-            </label>
-            <input
-              type="text"
-              onChange={(e) => setUsername(e.target.value)}
-              id="username"
-              className="mt-1 block w-full border border-slate-300 rounded-md shadow-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 px-3 py-2.5 bg-white"
-              required
-            />
-          </div>
-          <div>
-            <label
-              htmlFor="password"
-              className="block text-sm font-medium text-slate-700 mb-1"
-            >
-              Password
-            </label>
-            <input
-              onChange={(e) => setPassword(e.target.value)}
-              type="password"
-              id="password"
-              className="mt-1 block w-full border border-slate-300 rounded-md shadow-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 px-3 py-2.5 bg-white"
-              required
-            />
-          </div>
-          <button
-            type="submit"
-            className="w-full bg-indigo-600 text-white font-bold py-2.5 px-4 rounded-md shadow hover:bg-indigo-700 transition"
-          >
-            Login
-          </button>
-        </form>
-      </div>
-      <Footer />
-    </div>
-  );
-};
-
-export default LoginForm;

frontend/src/components/Object.tsx

@@ -1,17 +0,0 @@
-import React from "react";
-
-type ObjectProps = {
-  title: string;
-  description: string;
-};
-
-const Object: React.FC<ObjectProps> = ({ title, description }) => {
-  return (
-    <div className="min-w-0">
-      <h3 className="text-sm font-semibold text-slate-900">{title}</h3>
-      <p className="text-xs text-slate-600 line-clamp-2">{description}</p>
-    </div>
-  );
-};
-
-export default Object;

frontend/src/components/Sidebar.tsx

@@ -1,98 +0,0 @@
-import React, { useEffect, useState } from "react";
-import Object from "./Object";
-import { MonitorSmartphone } from "lucide-react";
-import { ALL_ITEMS_UPDATED_EVENT } from "../utils/fetchData";
-
-const Sidebar: React.FC = () => {
-  const [items, setItems] = useState<any[]>(
-    JSON.parse(localStorage.getItem("allItems") || "[]")
-  );
-
-  useEffect(() => {
-    const handler = () => {
-      const next = JSON.parse(localStorage.getItem("allItems") || "[]");
-      setItems(next);
-    };
-    handler();
-    window.addEventListener(ALL_ITEMS_UPDATED_EVENT, handler);
-    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));
-
-  return (
-    <aside className="w-full md:w-72 md:h-full flex flex-col rounded-2xl pt-0 px-3 pb-3 sm:pt-0 sm:px-4 sm:pb-4 bg-gradient-to-b from-white to-slate-50 ring-1 ring-slate-200/70 shadow-md overflow-hidden">
-      <div className="sticky top-0 z-10 -mx-3 sm:-mx-4 px-3 sm:px-4 py-2.5 bg-white/85 backdrop-blur supports-[backdrop-filter]:backdrop-blur border-b border-slate-200/70 text-lg sm:text-xl font-bold mb-3 text-slate-900 tracking-tight flex items-center justify-between gap-2 rounded-t-2xl">
-        <span className="flex items-center gap-2 min-w-0 flex-1 truncate">
-          <MonitorSmartphone className="w-5 h-5 text-slate-700 shrink-0" />
-          <span className="truncate">Geräte</span>
-        </span>
-        {outCount > 0 && (
-          <span className="inline-flex items-center gap-1 whitespace-nowrap tabular-nums text-[10px] sm:text-xs px-2.5 py-1 rounded-full bg-amber-50 text-amber-700 ring-1 ring-amber-200/70 shadow-sm font-medium">
-            {outCount} außerhalb
-          </span>
-        )}
-      </div>
-
-      {/* Scroll area */}
-      <div className="flex-1 min-h-0 overflow-y-auto overflow-x-hidden">
-        <div className="flex flex-col gap-3 md:space-y-3">
-          {sorted.map((item: any) => (
-            <div
-              key={item.item_name}
-              className={`group relative w-full bg-white rounded-xl p-3 sm:p-4 ring-1 ring-slate-200/70 duration-200 hover:shadow-md focus-within:ring-slate-300 ${
-                item.inSafe
-                  ? "border-l-4 border-emerald-400"
-                  : "border-l-4 border-red-400 ring-red-200/60 bg-red-50/40"
-              }`}
-            >
-              <div className="flex items-start gap-3">
-                <span
-                  className="relative mt-0.5 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 ring-2 ring-white ${
-                      item.inSafe ? "bg-emerald-500" : "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
-                      ? "Aktuell im Schließfach"
-                      : "Aktuell nicht im Schließfach"
-                  }
-                />
-              </div>
-            </div>
-          ))}
-        </div>
-
-        <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>
-            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>
-            Außerhalb des Schließfachs
-          </span>
-        </div>
-      </div>
-    </aside>
-  );
-};
-
-export default Sidebar;

frontend/src/index.css

@@ -1,12 +0,0 @@
-/* Tailwind (v4) */
-@import "tailwindcss";
-
-/* Small touch target improvements */
-@layer base {
-  html:focus-within {
-    scroll-behavior: smooth;
-  }
-  :root {
-    color-scheme: light;
-  }
-}

frontend/src/layout/Layout.tsx

@@ -1,36 +0,0 @@
-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;
-  onLogout: () => void;
-};
-
-const Layout: React.FC<LayoutProps> = ({ children, onLogout }) => {
-  return (
-    <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 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} />
-            </div>
-            <div className="w-full bg-white shadow-md md:shadow-lg rounded-2xl p-4 sm:p-6 ring-1 ring-slate-200 flex-1 min-h-0 overflow-y-auto">
-              {children}
-            </div>
-          </div>
-        </div>
-      </main>
-      <Footer />
-    </div>
-  );
-};
-
-export default Layout;

frontend/src/main.tsx

@@ -1,29 +0,0 @@
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import "./index.css";
-import App from "./App.tsx";
-import { ToastContainer, Flip } from "react-toastify";
-import "react-toastify/dist/ReactToastify.css";
-import { QueryClientProvider } from "@tanstack/react-query";
-import { queryClient } from "./utils/queryClient";
-
-createRoot(document.getElementById("root")!).render(
-  <StrictMode>
-    <QueryClientProvider client={queryClient}>
-      <App />
-      <ToastContainer
-        position="top-right"
-        autoClose={3000}
-        hideProgressBar={false}
-        newestOnTop
-        closeOnClick
-        rtl={false}
-        pauseOnFocusLoss
-        draggable
-        pauseOnHover
-        theme="colored"
-        transition={Flip}
-      />
-    </QueryClientProvider>
-  </StrictMode>
-);

frontend/src/utils/fetchData.ts

@@ -1,201 +0,0 @@
-import Cookies from "js-cookie";
-import { myToast } from "./toastify";
-import { useAtom } from "jotai";
-import { getBorrowableItemsAtom } from "../States/Atoms";
-
-// 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";
-
-const API_BASE =
-  (import.meta as any).env?.VITE_BACKEND_URL ||
-  import.meta.env.VITE_BACKEND_URL ||
-  "http://localhost:8002";
-
-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;
-  // First we fetch all items that are potentially available for borrowing
-  try {
-    const response = await fetch(`${API_BASE}/api/items`, {
-      method: "GET",
-      headers: {
-        Authorization: `Bearer ${token}`,
-      },
-    });
-
-    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;
-    }
-
-    const data = await response.json();
-    localStorage.setItem("allItems", JSON.stringify(data));
-    // Notify listeners (e.g., Sidebar) that items have been updated
-    window.dispatchEvent(new Event(ALL_ITEMS_UPDATED_EVENT));
-  } catch (error) {
-    myToast("An error occurred", "error");
-  }
-
-  // get all loans
-  try {
-    const response = await fetch(`${API_BASE}/api/loans`, {
-      method: "GET",
-      headers: {
-        Authorization: `Bearer ${token}`,
-      },
-    });
-
-    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;
-    }
-
-    const data = await response.json();
-    localStorage.setItem("allLoans", JSON.stringify(data));
-    // Notify listeners (e.g., Sidebar) that loans have been updated
-    window.dispatchEvent(new Event(ALL_ITEMS_UPDATED_EVENT));
-  } catch (error) {
-    myToast("An error occurred", "error");
-  }
-
-  // get user loans
-  try {
-    const response = await fetch(`${API_BASE}/api/userLoans`, {
-      method: "GET",
-      headers: {
-        Authorization: `Bearer ${token}`,
-      },
-    });
-
-    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;
-    }
-
-    const data = await response.json();
-    localStorage.setItem("userLoans", JSON.stringify(data));
-    // Notify listeners (e.g., Sidebar) that loans have been updated
-    window.dispatchEvent(new Event(ALL_ITEMS_UPDATED_EVENT));
-  } catch (error) {
-    myToast("An error occurred", "error");
-  }
-};
-
-export const loginUser = async (username: string, password: string) => {
-  try {
-    const response = await fetch(`${API_BASE}/api/login`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({ username, password }),
-    });
-
-    if (!response.ok) {
-      return { success: false } as const;
-    }
-
-    const data = await response.json();
-    if (data?.token) {
-      Cookies.set("token", data.token);
-      myToast("Login successful!", "success");
-      fetchAllData(Cookies.get("token"));
-      return { success: true, token: data.token } as const;
-    }
-
-    return { success: false } as const;
-  } catch (e) {
-    return { success: false } as const;
-  }
-};
-
-export const getBorrowableItems = async () => {
-  const startDate = Cookies.get("startDate");
-  const endDate = Cookies.get("endDate");
-
-  if (!startDate || !endDate) {
-    myToast("Bitte wähle einen Zeitraum aus.", "error");
-    return;
-  }
-
-  try {
-    const response = await fetch(`${API_BASE}/api/borrowableItems`, {
-      method: "POST",
-      headers: {
-        Authorization: `Bearer ${Cookies.get("token") || ""}`,
-        "Content-Type": "application/json",
-        Accept: "application/json",
-      },
-      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;
-    }
-
-    const data = await response.json();
-    localStorage.setItem("borrowableItems", JSON.stringify(data));
-
-    window.dispatchEvent(new Event(BORROWABLE_ITEMS_UPDATED_EVENT)); // notify same-tab listeners
-    console.log("Borrowable items fetched successfully");
-  } catch (error) {
-    myToast("An error occurred", "error");
-  }
-};

frontend/src/utils/queryClient.ts

@@ -1,11 +0,0 @@
-import { QueryClient } from "@tanstack/react-query";
-
-// Central QueryClient instance so utilities (e.g. file upload) can invalidate queries.
-export const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      refetchOnWindowFocus: false,
-      retry: 1,
-    },
-  },
-});

frontend/src/utils/toastify.ts

@@ -1,18 +0,0 @@
-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: 3000,
-    hideProgressBar: false,
-    closeOnClick: true,
-    pauseOnHover: true,
-    draggable: true,
-    progress: undefined,
-    theme: "colored",
-    transition: Flip,
-  };
-  toast[msgType](message, config);
-};

frontend/src/utils/userHandler.ts

@@ -1,163 +0,0 @@
-import { myToast } from "./toastify";
-import Cookies from "js-cookie";
-import { queryClient } from "./queryClient";
-
-const API_BASE =
-  (import.meta as any).env?.VITE_BACKEND_URL ||
-  import.meta.env.VITE_BACKEND_URL ||
-  "http://localhost:8002";
-
-export const handleDeleteLoan = async (loanID: number): Promise<boolean> => {
-  try {
-    const response = await fetch(
-      `${API_BASE}/api/deleteLoan/${loanID}`,
-      {
-        method: "DELETE",
-        headers: {
-          Authorization: `Bearer ${Cookies.get("token") || ""}`,
-        },
-      }
-    );
-
-    if (!response.ok) {
-      myToast("Fehler beim Löschen der Ausleihe", "error");
-      return false;
-    }
-
-    const raw = localStorage.getItem("userLoans");
-    let current: Array<{ id: number }> = [];
-
-    try {
-      const parsed = raw ? JSON.parse(raw) : [];
-      current = Array.isArray(parsed) ? parsed : [];
-    } catch {
-      current = [];
-    }
-
-    const updated = current.filter(
-      (loan) => Number(loan.id) !== Number(loanID)
-    );
-    localStorage.setItem("userLoans", JSON.stringify(updated));
-
-    myToast("Ausleihe erfolgreich gelöscht!", "success");
-    return true;
-  } catch (error) {
-    console.error("Error deleting loan:", error);
-    myToast("Fehler beim löschen der Ausleihe", "error");
-    return false;
-  }
-};
-
-// Parse existing cookie and coerce to numbers
-let removeArr: number[] = (() => {
-  try {
-    const raw = Cookies.get("removeArr");
-    const parsed = raw ? JSON.parse(raw) : [];
-    return Array.isArray(parsed)
-      ? parsed.map((v) => Number(v)).filter((n) => Number.isFinite(n))
-      : [];
-  } catch {
-    return [];
-  }
-})();
-
-const rawCookies = Cookies.withConverter({
-  write: (value: string) => value, // store raw JSON
-});
-
-export const addToRemove = (itemID: number) => {
-  if (!Number.isFinite(itemID)) return;
-  if (!removeArr.includes(itemID)) {
-    removeArr.push(itemID);
-    rawCookies.set("removeArr", JSON.stringify(removeArr));
-  }
-};
-
-export const rmFromRemove = (itemID: number) => {
-  removeArr = removeArr.filter((item) => item !== itemID);
-  rawCookies.set("removeArr", JSON.stringify(removeArr));
-};
-
-export const createLoan = async (startDate: string, endDate: string) => {
-  const items = removeArr;
-  const response = await fetch(`${API_BASE}/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");
-    return false;
-  }
-
-  // Clear selection on success
-  removeArr = [];
-  Cookies.set("removeArr", "[]");
-  myToast("Ausleihe erfolgreich erstellt!", "success");
-
-  queryClient.invalidateQueries({ queryKey: ["userLoans"] });
-  queryClient.invalidateQueries({ queryKey: ["allLoans"] });
-  queryClient.invalidateQueries({ queryKey: ["borrowableItems"] });
-
-  return true;
-};
-
-export const onReturn = async (loanID: number) => {
-  const response = await fetch(
-    `${API_BASE}/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(`${API_BASE}/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;
-};
-
-export const changePW = async (oldPassword: string, newPassword: string) => {
-  const response = await fetch(`${API_BASE}/api/changePassword`, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      Authorization: `Bearer ${Cookies.get("token") || ""}`,
-    },
-    body: JSON.stringify({ oldPassword, newPassword }),
-  });
-
-  if (!response.ok) {
-    myToast("Fehler beim Ändern des Passworts", "error");
-    return false;
-  }
-
-  myToast("Passwort erfolgreich geändert!", "success");
-  return true;
-};

frontend/src/vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />

frontend/tailwind.config.js

@@ -1,11 +0,0 @@
-module.exports = {
-  content: [
-    "./index.html",
-    "./src/**/*.{js,jsx,ts,tsx}",
-    // add other paths if needed
-  ],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-};

frontend/tsconfig.app.json

@@ -1,27 +0,0 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "target": "ES2022",
-    "useDefineForClassFields": true,
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["src"]
-}

frontend/tsconfig.json

@@ -1,7 +0,0 @@
-{
-  "files": [],
-  "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
-  ]
-}

frontend/tsconfig.node.json

@@ -1,25 +0,0 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-    "target": "ES2023",
-    "lib": ["ES2023"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["vite.config.ts"]
-}

frontend/vite.config.ts

@@ -1,15 +0,0 @@
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-import svgr from "vite-plugin-svgr";
-import tailwindcss from "@tailwindcss/vite";
-
-export default defineConfig({
-  plugins: [react(), svgr(), tailwindcss()],
-  server: {
-    host: "0.0.0.0",
-    port: 8001,
-    watch: {
-      usePolling: true,
-    },
-  },
-});