Refactor loan and user management components and backend routes

- Updated LoanTable component to fetch loan data from new API endpoint and display notes.
- Enhanced UserTable component to include additional user fields (first name, last name, email, admin status) and updated input handling.
- Modified fetcher utility to use new user data API endpoint.
- Adjusted login functionality to point to the new admin login endpoint and handle unauthorized access.
- Refactored user actions utility to align with updated API endpoints for user management.
- Updated backend routes for user and loan data management to reflect new structure and naming conventions.
- Revised SQL schema and mock data to accommodate new fields and constraints.
- Changed Docker configuration to use the new database name.

admin/src/Layout/Layout.tsx

@@ -3,11 +3,7 @@ import { useEffect } from "react";
 import Dashboard from "./Dashboard";
 import Login from "./Login";
 import Cookies from "js-cookie";
-
-const API_BASE =
-  (import.meta as any).env?.VITE_BACKEND_URL ||
-  import.meta.env.VITE_BACKEND_URL ||
-  "http://localhost:8002";
+import { API_BASE } from "@/config/api.config";
 
 const Layout: React.FC = () => {
   const [isLoggedIn, setIsLoggedIn] = useState(false);
@@ -15,12 +11,15 @@ const Layout: React.FC = () => {
   useEffect(() => {
     if (Cookies.get("token")) {
       const verifyToken = async () => {
-        const response = await fetch(`${API_BASE}/api/verifyToken`, {
-          method: "GET",
-          headers: {
-            Authorization: `Bearer ${Cookies.get("token")}`,
-          },
-        });
+        const response = await fetch(
+          `${API_BASE}/api/admin/user-mgmt/verify-token`,
+          {
+            method: "GET",
+            headers: {
+              Authorization: `Bearer ${Cookies.get("token")}`,
+            },
+          }
+        );
         if (response.ok) {
           setIsLoggedIn(true);
         } else {

admin/src/Layout/Sidebar.tsx

@@ -1,5 +1,7 @@
 import React from "react";
+import { useEffect, useState } from "react";
 import { Box, Flex, VStack, Heading, Text, Link } from "@chakra-ui/react";
+import { API_BASE } from "@/config/api.config";
 
 type SidebarProps = {
   viewAusleihen: () => void;
@@ -15,10 +17,22 @@ const Sidebar: React.FC<SidebarProps> = ({
   viewUser,
   viewAPI,
 }) => {
+  const [info, setInfo] = useState<any>(null);
+
+  const fetchInfo = async () => {
+    const response = await fetch(`${API_BASE}/`);
+    const data = await response.json();
+    setInfo(data);
+  };
+
+  useEffect(() => {
+    fetchInfo();
+  }, []);
+
   return (
     <Box
       as="aside"
-      w="260px"
+      w="180px"
       minH="100vh"
       bg="gray.800"
       color="gray.100"
@@ -72,7 +86,33 @@ const Sidebar: React.FC<SidebarProps> = ({
         </VStack>
 
         <Box mt="auto" pt={8} fontSize="xs" color="gray.500">
-          <Text>&copy; Made with ❤️ by Theis Gaedigk</Text>
+          <Text mb={2}>&copy; Made with ❤️ by Theis Gaedigk</Text>
+          {info ? (
+            <Flex gap={2} wrap="wrap">
+              <Box
+                as="span"
+                px={2}
+                py={0.5}
+                rounded="full"
+                bg="gray.700"
+                color="gray.200"
+              >
+                Panel {info?.["admin-panel-info"]?.version ?? "—"}
+              </Box>
+              <Box
+                as="span"
+                px={2}
+                py={0.5}
+                rounded="full"
+                bg="gray.700"
+                color="gray.200"
+              >
+                Backend {info?.["backend-info"]?.version ?? "—"}
+              </Box>
+            </Flex>
+          ) : (
+            <Text color="gray.600">Lade Versionsinfos…</Text>
+          )}
         </Box>
       </Flex>
     </Box>