refactor: update heading sizes in ItemTable, LoanTable, and UserTable components

FrontendV2/package-lock.json

@@ -12,6 +12,7 @@
         "@emotion/react": "^11.14.0",
         "@tailwindcss/vite": "^4.1.11",
         "@tanstack/react-query": "^5.85.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

@@ -14,6 +14,7 @@
     "@emotion/react": "^11.14.0",
     "@tailwindcss/vite": "^4.1.11",
     "@tanstack/react-query": "^5.85.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/src/components/Header.tsx

@@ -30,6 +30,7 @@ import {
 import { useUserContext } from "@/states/Context";
 import { useState } from "react";
 import MyAlert from "./myChakra/MyAlert";
+import { useTranslation } from "react-i18next";
 
 const API_BASE =
   (import.meta as any).env?.VITE_BACKEND_URL ||
@@ -39,6 +40,7 @@ const API_BASE =
 export const Header = () => {
   const navigate = useNavigate();
   const userData = useUserContext();
+  const { t } = useTranslation();
 
   // Error handling states
   const [isMsg, setIsMsg] = useState(false);
@@ -58,8 +60,8 @@ export const Header = () => {
 
   const changePassword = async () => {
     if (newPassword !== confirmPassword) {
-      setMsgTitle("Passwortänderung fehlgeschlagen");
-      setMsgDescription("Passwörter stimmen nicht überein");
+      setMsgTitle(t("err_pw_change"));
+      setMsgDescription(t("pw_mismatch"));
       setMsgStatus("error");
       setIsMsg(true);
       return;
@@ -75,15 +77,15 @@ export const Header = () => {
     });
 
     if (!response.ok) {
-      setMsgTitle("Passwortänderung fehlgeschlagen");
-      setMsgDescription("Bitte überprüfen Sie Ihre Eingaben");
+      setMsgTitle(t("err_pw_change"));
+      setMsgDescription(t("pw_mismatch"));
       setMsgStatus("error");
       setIsMsg(true);
       return;
     }
 
-    setMsgTitle("Passwort erfolgreich geändert");
-    setMsgDescription("Ihr Passwort wurde erfolgreich geändert");
+    setMsgTitle(t("pw_success"));
+    setMsgDescription(t("pw_success_desc"));
     setMsgStatus("success");
     setIsMsg(true);
 
@@ -140,7 +142,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 +152,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 +162,7 @@ export const Header = () => {
                 children={
                   <HStack gap={3}>
                     <RotateCcwKey size={16} />
-                    <Text as="span">Passwort ändern</Text>
+                    <Text as="span">{t("change-password")}</Text>
                   </HStack>
                 }
               />
@@ -176,7 +178,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 +194,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 +205,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 +234,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 +258,21 @@ 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>
 
@@ -280,7 +283,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 +295,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 +303,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 +316,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 +329,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 +354,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/main.tsx

@@ -3,6 +3,7 @@ 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
 
 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("");
@@ -54,21 +57,21 @@ export const HomePage = () => {
       )}
       <Stack as="main">
         <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 +81,8 @@ export const HomePage = () => {
             setIsLoadingA(true);
             if (!startDate || !endDate) {
               setMsgStatus("error");
-              setMsgTitle("Fehlende Eingaben");
-              setMsgDescription("Bitte Start- und Enddatum angeben.");
+              setMsgTitle(t("missing-fields"));
+              setMsgDescription(t("missing-fields-desc"));
               setIsMsg(true);
               setIsLoadingA(false);
               return;
@@ -88,9 +91,9 @@ export const HomePage = () => {
               setIsLoadingA(false);
               if (response && response.status === "error") {
                 setMsgStatus("error");
-                setMsgTitle(response.title || "Fehler");
+                setMsgTitle(response.title || t("error"));
                 setMsgDescription(
-                  response.description || "Unbekannter Frontend Fehler"
+                  response.description || t("unknown-error")
                 );
                 setIsMsg(true);
                 return;
@@ -101,12 +104,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 +118,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 +146,21 @@ 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(
-                    response.description || "Unbekannter Frontend Fehler"
+                    response.description || t("unknown-error")
                   );
                   setIsMsg(true);
                   return;
                 }
                 setMsgStatus("success");
-                setMsgTitle("Erfolg");
-                setMsgDescription("Gegenstände erfolgreich ausgeliehen.");
+                setMsgTitle(t("success"));
+                setMsgDescription(t("loan-success")) ;
                 setIsMsg(true);
               })
             }
           >
-            Gegenstände ausleihen
+            {t("create-loan")}
           </Button>
         )}
       </Stack>

FrontendV2/src/pages/Landingpage.tsx

@@ -12,6 +12,7 @@ import {
 } from "@chakra-ui/react";
 import { Lock, LockOpen } from "lucide-react";
 import MyAlert from "@/components/myChakra/MyAlert";
+import { useTranslation } from "react-i18next";
 
 export const formatDateTime = (value: string | null | undefined) => {
   if (!value) return "N/A";
@@ -45,6 +46,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 +79,8 @@ const Landingpage: React.FC = () => {
         } else {
           setError(
             "error",
-            "Fehler beim Laden",
-            "Unerwartetes Datenformat erhalten. (Ausleihen)"
+            t("error-by-loading"),
+            t("unexpected-date-format_loan")
           );
         }
 
@@ -88,16 +91,12 @@ const Landingpage: React.FC = () => {
         } else {
           setError(
             "error",
-            "Fehler beim Laden",
-            "Unerwartetes Datenformat erhalten. (Geräte)"
+            t("error-by-loading"),
+            t("unexpected-date-format_device")
           );
         }
       } catch (e) {
-        setError(
-          "error",
-          "Fehler beim Laden",
-          "Die Ausleihen konnten nicht geladen werden."
-        );
+        setError("error", t("error-by-loading"), t("error-fetching-loans"));
       } finally {
         setIsLoading(false);
       }
@@ -112,7 +111,7 @@ const Landingpage: React.FC = () => {
       </Heading>
 
       <Heading as="h2" size="md" mb={4}>
-        Alle Ausleihen
+        {t("all-loans")}
       </Heading>
 
       {isError && (
@@ -126,7 +125,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 +137,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 +178,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 +201,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 +222,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 +235,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,6 +6,7 @@ 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.meta as any).env?.VITE_BACKEND_URL ||
@@ -13,6 +14,8 @@ const API_BASE =
   "http://localhost:8002";
 
 export const LoginPage = () => {
+  const { t } = useTranslation();
+
   const [isLoggedIn, setIsLoggedIn] = useAtom(setIsLoggedInAtom);
   const [triggerLogout, setTriggerLogout] = useAtom(triggerLogoutAtom);
   const navigate = useNavigate();
@@ -35,7 +38,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 +75,20 @@ export const LoginPage = () => {
       <form onSubmit={(e) => e.preventDefault()}>
         <Card.Root maxW="sm">
           <Card.Header>
-            <Card.Title>Login</Card.Title>
-            <Card.Description>
-              Bitte unten Ihre Zugangsdaten eingeben.
-            </Card.Description>
+            <Card.Title>{t("login")}</Card.Title>
+            <Card.Description>{t("enter-credentials")}</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,8 +108,8 @@ export const LoginPage = () => {
             {triggerLogout && (
               <MyAlert
                 status="success"
-                title={"Logout erfolgreich!"}
-                description={"Sie wurden erfolgreich abgemeldet."}
+                title={t("logout-success")}
+                description={t("logout-success-desc")}
               />
             )}
           </Card.Footer>

FrontendV2/src/pages/MyLoansPage.tsx

@@ -16,6 +16,7 @@ import {
 } from "@chakra-ui/react";
 import { Header } from "@/components/Header";
 import { Trash2 } from "lucide-react";
+import { useTranslation } from "react-i18next";
 
 const API_BASE =
   (import.meta as any).env?.VITE_BACKEND_URL ||
@@ -23,6 +24,7 @@ const API_BASE =
   "http://localhost:8002";
 
 export const MyLoansPage = () => {
+  const { t } = useTranslation();
   const navigate = useNavigate();
 
   const [loans, setLoans] = useState<any[]>([]);
@@ -54,21 +56,18 @@ export const MyLoansPage = () => {
 
         if (!res.ok) {
           setMsgStatus("error");
-          setMsgTitle("Fehler");
-          setMsgDescription(
-            "Beim Laden der Ausleihen ist ein Fehler aufgetreten."
-          );
+          setMsgTitle(t("error"));
+          setMsgDescription(t("error-fetching-loans"));
           setIsMsg(true);
           return;
         }
 
         const data = await res.json();
         setLoans(data);
-        console.log("Fetched loans:", data);
       } catch (e) {
         setMsgStatus("error");
-        setMsgTitle("Fehler");
-        setMsgDescription("Netzwerkfehler beim Laden der Ausleihen.");
+        setMsgTitle(t("error"));
+        setMsgDescription(t("network-error-fetching-loans"));
         setIsMsg(true);
       } finally {
         setIsLoading(false);
@@ -89,23 +88,21 @@ export const MyLoansPage = () => {
 
       if (!res.ok) {
         setMsgStatus("error");
-        setMsgTitle("Fehler");
-        setMsgDescription(
-          "Beim Löschen der Ausleihe ist ein Fehler aufgetreten."
-        );
+        setMsgTitle(t("error"));
+        setMsgDescription(t("error-deleting-loan"));
         setIsMsg(true);
         return;
       }
 
       setLoans((prev) => prev.filter((loan) => loan.id !== loanId));
       setMsgStatus("success");
-      setMsgTitle("Erfolg");
-      setMsgDescription("Ausleihe erfolgreich gelöscht.");
+      setMsgTitle(t("success"));
+      setMsgDescription(t("loan-deletion-success"));
       setIsMsg(true);
     } catch (e) {
       setMsgStatus("error");
-      setMsgTitle("Fehler");
-      setMsgDescription("Netzwerkfehler beim Löschen der Ausleihe.");
+      setMsgTitle(t("error"));
+      setMsgDescription(t("network-error-deleting-loan"));
       setIsMsg(true);
     }
   };
@@ -132,7 +129,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 +156,13 @@ export const MyLoansPage = () => {
             </Table.ColumnGroup>
             <Table.Header>
               <Table.Row>
-                <Table.ColumnHeader>Ausleihcode</Table.ColumnHeader>
-                <Table.ColumnHeader>Startdatum</Table.ColumnHeader>
-                <Table.ColumnHeader>Enddatum</Table.ColumnHeader>
-                <Table.ColumnHeader>Geräte</Table.ColumnHeader>
-                <Table.ColumnHeader>Ausleihdatum</Table.ColumnHeader>
-                <Table.ColumnHeader>Rückgabedatum</Table.ColumnHeader>
-                <Table.ColumnHeader>Aktionen</Table.ColumnHeader>
+                <Table.ColumnHeader>{t("loan-code")}</Table.ColumnHeader>
+                <Table.ColumnHeader>{t("start-date")}</Table.ColumnHeader>
+                <Table.ColumnHeader>{t("end-date")}</Table.ColumnHeader>
+                <Table.ColumnHeader>{t("devices")}</Table.ColumnHeader>
+                <Table.ColumnHeader>{t("take-date")}</Table.ColumnHeader>
+                <Table.ColumnHeader>{t("return-date")}</Table.ColumnHeader>
+                <Table.ColumnHeader>{t("actions")}</Table.ColumnHeader>
               </Table.Row>
             </Table.Header>
             <Table.Body>
@@ -204,26 +201,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{" "}
-                                <strong><Code>{delLoanCode}</Code></strong> Code wirklich
-                                löschen?
+                                {t("sure-delete-loan-0")}
+                                <strong>
+                                  <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/utils/i18n/index.ts

@@ -0,0 +1,33 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+
+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: "de", // 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,62 @@
+{
+    "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"
+}

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

@@ -0,0 +1,3 @@
+{
+    "greeting": "Welcome back, "
+}

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/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(