Merge branch 'dev' into host

FrontendV2/nginx.conf

@@ -14,7 +14,7 @@ server {
   }
 
   location /backend/ {
-    proxy_pass http://borrow_system-backend_v2:8004/;
+    proxy_pass http://borrow_system-backend_v2:8102/;
   }
 
   location ~* \.(?:js|mjs|css|png|jpg|jpeg|gif|ico|svg|woff2?)$ {

FrontendV2/src/components/ui/provider.tsx

@@ -1,15 +1,23 @@
-"use client"
+"use client";
 
-import { ChakraProvider, defaultSystem } from "@chakra-ui/react"
-import {
-  ColorModeProvider,
-  type ColorModeProviderProps,
-} from "./color-mode"
+import { ChakraProvider, defaultSystem } from "@chakra-ui/react";
+import * as React from "react";
+import type { ReactNode } from "react";
+import { ColorModeProvider as ThemeColorModeProvider } from "./color-mode";
 
-export function Provider(props: ColorModeProviderProps) {
+export interface ColorModeProviderProps {
+  children: React.ReactNode;
+}
+
+export function ColorModeProvider({ children }: ColorModeProviderProps) {
+  // Wrap children with the real color-mode provider
+  return <ThemeColorModeProvider>{children}</ThemeColorModeProvider>;
+}
+
+export function Provider({ children }: { children: ReactNode }) {
   return (
     <ChakraProvider value={defaultSystem}>
-      <ColorModeProvider {...props} />
+      <ColorModeProvider>{children}</ColorModeProvider>
     </ChakraProvider>
-  )
+  );
 }

FrontendV2/vite.config.ts

@@ -1,16 +1,23 @@
 import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-import svgr from "vite-plugin-svgr";
 import tailwindcss from "@tailwindcss/vite";
-import tsconfigPaths from "vite-tsconfig-paths";
+import path from "node:path";
 
 export default defineConfig({
-  plugins: [react(), svgr(), tailwindcss(), tsconfigPaths()],
+  plugins: [tailwindcss()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "src"),
+    },
+  },
   server: {
     host: "0.0.0.0",
-    port: 8001,
-    watch: {
-      usePolling: true,
+    allowedHosts: ["insta.the1s.de"],
+    port: 8101,
+    watch: { usePolling: true },
+    hmr: {
+      host: "insta.the1s.de",
+      port: 8101,
+      protocol: "wss",
     },
   },
 });

admin/nginx.conf

@@ -14,7 +14,7 @@ server {
   }
 
   location /backend/ {
-    proxy_pass http://borrow_system-backend_v2:8004/;
+    proxy_pass http://borrow_system-backend_v2:8102/;
   }
 
   location ~* \.(?:js|mjs|css|png|jpg|jpeg|gif|ico|svg|woff2?)$ {

admin/src/Layout/Dashboard.tsx

@@ -47,7 +47,7 @@ const Dashboard: React.FC<DashboardProps> = ({ onLogout }) => {
         viewAPI={() => setActiveView("API")}
         viewConfig={() => setActiveView("Server Konfiguration")}
       />
-      <Box flex="1" display="flex" flexDirection="column">
+      <Box flex="1" display="flex" flexDirection="column" minH={0}>
         <Flex
           as="header"
           align="center"
@@ -68,7 +68,7 @@ const Dashboard: React.FC<DashboardProps> = ({ onLogout }) => {
             </Button>
           </Flex>
         </Flex>
-        <Box as="main" flex="1" p={6}>
+        <Box as="main" flex="1" p={6} minH={0} overflow="hidden">
           {activeView === "" && (
             <Flex
               align="center"

admin/src/components/ItemTable.tsx

@@ -57,32 +57,32 @@ const ItemTable: React.FC = () => {
 
   const handleItemNameChange = (id: number, value: string) => {
     setItems((prev) =>
-      prev.map((it) => (it.id === id ? { ...it, item_name: value } : it))
+      prev.map((it) => (it.id === id ? { ...it, item_name: value } : it)),
     );
   };
 
   const handleCanBorrowRoleChange = (id: number, value: string) => {
     setItems((prev) =>
-      prev.map((it) => (it.id === id ? { ...it, can_borrow_role: value } : it))
+      prev.map((it) => (it.id === id ? { ...it, can_borrow_role: value } : it)),
     );
   };
 
   const handleLockerNumberChange = (id: number, value: string) => {
     setItems((prev) =>
-      prev.map((it) => (it.id === id ? { ...it, safe_nr: value } : it))
+      prev.map((it) => (it.id === id ? { ...it, safe_nr: value } : it)),
     );
   };
 
   const handleDoorKeyChange = (id: number, value: string) => {
     setItems((prev) =>
-      prev.map((it) => (it.id === id ? { ...it, door_key: value } : it))
+      prev.map((it) => (it.id === id ? { ...it, door_key: value } : it)),
     );
   };
 
   const setError = (
     status: "error" | "success",
     message: string,
-    description: string
+    description: string,
   ) => {
     setIsError(false);
     setErrorStatus(status);
@@ -102,7 +102,7 @@ const ItemTable: React.FC = () => {
             headers: {
               Authorization: `Bearer ${Cookies.get("token")}`,
             },
-          }
+          },
         );
         const data = await response.json();
         return data;
@@ -193,185 +193,229 @@ const ItemTable: React.FC = () => {
 
       {/* make table fill available width, like UserTable */}
       {!isLoading && (
-        <Table.Root
-          size="sm"
-          striped
-          w="100%"
-          style={{ tableLayout: "auto" }} // Spalten nach Content
-        >
-          <Table.Header>
-            <Table.Row>
-              <Table.ColumnHeader>
-                <strong>#</strong>
-              </Table.ColumnHeader>
-              <Table.ColumnHeader>
-                <strong>Gegenstand</strong>
-              </Table.ColumnHeader>
-              <Table.ColumnHeader>
-                <strong>Ausleih Berechtigung</strong>
-              </Table.ColumnHeader>
-              <Table.ColumnHeader>
-                <strong>Im Schließfach</strong>
-              </Table.ColumnHeader>
-              <Table.ColumnHeader width="1%" whiteSpace="nowrap">
-                <strong>Schließfachnummer</strong>
-              </Table.ColumnHeader>
-              <Table.ColumnHeader width="1%" whiteSpace="nowrap">
-                <strong>Schlüssel</strong>
-              </Table.ColumnHeader>
-              <Table.ColumnHeader>
-                <strong>Eintrag erstellt am</strong>
-              </Table.ColumnHeader>
-              <Table.ColumnHeader>
-                <strong>Eintrag aktualisiert am</strong>
-              </Table.ColumnHeader>
-              <Table.ColumnHeader>
-                <strong>LaP *</strong>
-              </Table.ColumnHeader>
-              <Table.ColumnHeader>
-                <strong>Dav **</strong>
-              </Table.ColumnHeader>
-              <Table.ColumnHeader width="1%" whiteSpace="nowrap">
-                <strong>Aktionen</strong>
-              </Table.ColumnHeader>
-            </Table.Row>
-          </Table.Header>
-          <Table.Body>
-            {items.map((item) => (
-              <Table.Row key={item.id}>
-                <Table.Cell>{item.id}</Table.Cell>
-                <Table.Cell>
-                  <Input
-                    size="sm"
-                    w="max-content"
-                    onChange={(e) =>
-                      handleItemNameChange(item.id, e.target.value)
-                    }
-                    value={item.item_name}
-                  />
-                </Table.Cell>
-                <Table.Cell>
-                  <Input
-                    size="sm"
-                    w="max-content"
-                    onChange={(e) =>
-                      handleCanBorrowRoleChange(item.id, e.target.value)
-                    }
-                    value={item.can_borrow_role}
-                  />
-                </Table.Cell>
-                <Table.Cell>
-                  <Button
-                    onClick={() =>
-                      changeSafeState(item.id).then(() => setReload(!reload))
-                    }
-                    size="xs"
-                    rounded="full"
-                    px={3}
-                    py={1}
-                    gap={2}
-                    variant="ghost"
-                    color={item.in_safe ? "green.600" : "red.600"}
-                    borderWidth="1px"
-                    borderColor={item.in_safe ? "green.300" : "red.300"}
-                    _hover={{
-                      bg: item.in_safe ? "green.50" : "red.50",
-                      borderColor: item.in_safe ? "green.400" : "red.400",
-                      transform: "translateY(-1px)",
-                      shadow: "sm",
-                    }}
-                    _active={{ transform: "translateY(0)" }}
-                    aria-label={
-                      item.in_safe ? "Mark as not in safe" : "Mark as in safe"
-                    }
-                  >
-                    <Icon
-                      as={item.in_safe ? CheckCircle2 : XCircle}
-                      boxSize={3.5}
-                      mr={2}
-                    />
-                    <Text as="span" fontSize="xs" fontWeight="semibold">
-                      {item.in_safe ? "Yes" : "No"}
-                    </Text>
-                  </Button>
-                </Table.Cell>
-                <Table.Cell>
-                  <Input
-                    size="sm"
-                    w="max-content"
-                    onChange={(e) =>
-                      handleLockerNumberChange(item.id, e.target.value)
-                    }
-                    value={item.safe_nr}
-                  />
-                </Table.Cell>
-                <Table.Cell>
-                  <Input
-                    size="sm"
-                    w="max-content"
-                    onChange={(e) =>
-                      handleDoorKeyChange(item.id, e.target.value)
-                    }
-                    value={item.door_key}
-                  />
-                </Table.Cell>
-                <Table.Cell>{formatDateTime(item.entry_created_at)}</Table.Cell>
-                <Table.Cell>{formatDateTime(item.entry_updated_at)}</Table.Cell>
-                <Table.Cell>{item.last_borrowed_person}</Table.Cell>
-                <Table.Cell>{item.currently_borrowing}</Table.Cell>
-                <Table.Cell whiteSpace="nowrap">
-                  <Button
-                    onClick={() =>
-                      handleEditItems(
-                        item.id,
-                        item.item_name,
-                        item.safe_nr,
-                        item.door_key,
-                        item.can_borrow_role
-                      ).then((response) => {
-                        if (response.success) {
-                          setError(
-                            "success",
-                            "Gegenstand erfolgreich bearbeitet!",
-                            "Gegenstand " +
-                              '"' +
-                              item.item_name +
-                              '" mit ID ' +
-                              item.id +
-                              " bearbeitet."
-                          );
-                        }
-                      })
-                    }
-                    colorPalette="teal"
-                    size="sm"
-                  >
-                    <Save />
-                  </Button>
-                  <Button
-                    onClick={() =>
-                      deleteItem(item.id).then((response) => {
-                        if (response.success) {
-                          setItems(items.filter((i) => i.id !== item.id));
-                          setError(
-                            "success",
-                            "Gegenstand gelöscht",
-                            "Der Gegenstand wurde erfolgreich gelöscht."
-                          );
-                        }
-                      })
-                    }
-                    colorPalette="red"
-                    size="sm"
-                    ml={2}
-                  >
-                    <Trash2 />
-                  </Button>
-                </Table.Cell>
+        <Table.ScrollArea flex="1" minH={0} rounded="md" mt={4}>
+          <Table.Root
+            size="sm"
+            striped
+            stickyHeader
+            css={{
+              "& [data-sticky]": {
+                position: "sticky",
+                zIndex: 1,
+                bg: "bg",
+
+                _after: {
+                  content: '""',
+                  position: "absolute",
+                  pointerEvents: "none",
+                  top: "0",
+                  bottom: "-1px",
+                  width: "32px",
+                },
+              },
+
+              "& [data-sticky=end]": {
+                _after: {
+                  insetInlineEnd: "0",
+                  translate: "100% 0",
+                  shadow: "inset 8px 0px 8px -8px rgba(0, 0, 0, 0.16)",
+                },
+              },
+
+              "& [data-sticky=start]": {
+                _after: {
+                  insetInlineStart: "0",
+                  translate: "-100% 0",
+                  shadow: "inset -8px 0px 8px -8px rgba(0, 0, 0, 0.16)",
+                },
+              },
+
+              "& thead tr": {
+                shadow: "0 1px 0 0 {colors.border}",
+                "&:has(th[data-sticky])": {
+                  zIndex: 2,
+                },
+              },
+            }}
+          >
+            <Table.Header>
+              <Table.Row>
+                <Table.ColumnHeader>
+                  <strong>#</strong>
+                </Table.ColumnHeader>
+                <Table.ColumnHeader>
+                  <strong>Gegenstand</strong>
+                </Table.ColumnHeader>
+                <Table.ColumnHeader>
+                  <strong>Ausleih Berechtigung</strong>
+                </Table.ColumnHeader>
+                <Table.ColumnHeader>
+                  <strong>Im Schließfach</strong>
+                </Table.ColumnHeader>
+                <Table.ColumnHeader width="1%" whiteSpace="nowrap">
+                  <strong>Schließfachnummer</strong>
+                </Table.ColumnHeader>
+                <Table.ColumnHeader width="1%" whiteSpace="nowrap">
+                  <strong>Schlüssel</strong>
+                </Table.ColumnHeader>
+                <Table.ColumnHeader>
+                  <strong>Eintrag erstellt am</strong>
+                </Table.ColumnHeader>
+                <Table.ColumnHeader>
+                  <strong>Eintrag aktualisiert am</strong>
+                </Table.ColumnHeader>
+                <Table.ColumnHeader>
+                  <strong>LaP *</strong>
+                </Table.ColumnHeader>
+                <Table.ColumnHeader>
+                  <strong>Dav **</strong>
+                </Table.ColumnHeader>
+                <Table.ColumnHeader width="1%" whiteSpace="nowrap">
+                  <strong>Aktionen</strong>
+                </Table.ColumnHeader>
               </Table.Row>
-            ))}
-          </Table.Body>
-        </Table.Root>
+            </Table.Header>
+            <Table.Body>
+              {items.map((item) => (
+                <Table.Row key={item.id}>
+                  <Table.Cell>{item.id}</Table.Cell>
+                  <Table.Cell>
+                    <Input
+                      size="sm"
+                      w="max-content"
+                      onChange={(e) =>
+                        handleItemNameChange(item.id, e.target.value)
+                      }
+                      value={item.item_name}
+                    />
+                  </Table.Cell>
+                  <Table.Cell>
+                    <Input
+                      size="sm"
+                      w="max-content"
+                      onChange={(e) =>
+                        handleCanBorrowRoleChange(item.id, e.target.value)
+                      }
+                      value={item.can_borrow_role}
+                    />
+                  </Table.Cell>
+                  <Table.Cell>
+                    <Button
+                      onClick={() =>
+                        changeSafeState(item.id).then(() => setReload(!reload))
+                      }
+                      size="xs"
+                      rounded="full"
+                      px={3}
+                      py={1}
+                      gap={2}
+                      variant="ghost"
+                      color={item.in_safe ? "green.600" : "red.600"}
+                      borderWidth="1px"
+                      borderColor={item.in_safe ? "green.300" : "red.300"}
+                      _hover={{
+                        bg: item.in_safe ? "green.50" : "red.50",
+                        borderColor: item.in_safe ? "green.400" : "red.400",
+                        transform: "translateY(-1px)",
+                        shadow: "sm",
+                      }}
+                      _active={{ transform: "translateY(0)" }}
+                      aria-label={
+                        item.in_safe ? "Mark as not in safe" : "Mark as in safe"
+                      }
+                    >
+                      <Icon
+                        as={item.in_safe ? CheckCircle2 : XCircle}
+                        boxSize={3.5}
+                        mr={2}
+                      />
+                      <Text as="span" fontSize="xs" fontWeight="semibold">
+                        {item.in_safe ? "Yes" : "No"}
+                      </Text>
+                    </Button>
+                  </Table.Cell>
+                  <Table.Cell>
+                    <Input
+                      size="sm"
+                      w="max-content"
+                      onChange={(e) =>
+                        handleLockerNumberChange(item.id, e.target.value)
+                      }
+                      value={item.safe_nr}
+                    />
+                  </Table.Cell>
+                  <Table.Cell>
+                    <Input
+                      size="sm"
+                      w="max-content"
+                      onChange={(e) =>
+                        handleDoorKeyChange(item.id, e.target.value)
+                      }
+                      value={item.door_key}
+                    />
+                  </Table.Cell>
+                  <Table.Cell>
+                    {formatDateTime(item.entry_created_at)}
+                  </Table.Cell>
+                  <Table.Cell>
+                    {formatDateTime(item.entry_updated_at)}
+                  </Table.Cell>
+                  <Table.Cell>{item.last_borrowed_person}</Table.Cell>
+                  <Table.Cell>{item.currently_borrowing}</Table.Cell>
+                  <Table.Cell whiteSpace="nowrap">
+                    <Button
+                      onClick={() =>
+                        handleEditItems(
+                          item.id,
+                          item.item_name,
+                          item.safe_nr,
+                          item.door_key,
+                          item.can_borrow_role,
+                        ).then((response) => {
+                          if (response.success) {
+                            setError(
+                              "success",
+                              "Gegenstand erfolgreich bearbeitet!",
+                              "Gegenstand " +
+                                '"' +
+                                item.item_name +
+                                '" mit ID ' +
+                                item.id +
+                                " bearbeitet.",
+                            );
+                          }
+                        })
+                      }
+                      colorPalette="teal"
+                      size="sm"
+                    >
+                      <Save />
+                    </Button>
+                    <Button
+                      onClick={() =>
+                        deleteItem(item.id).then((response) => {
+                          if (response.success) {
+                            setItems(items.filter((i) => i.id !== item.id));
+                            setError(
+                              "success",
+                              "Gegenstand gelöscht",
+                              "Der Gegenstand wurde erfolgreich gelöscht.",
+                            );
+                          }
+                        })
+                      }
+                      colorPalette="red"
+                      size="sm"
+                      ml={2}
+                    >
+                      <Trash2 />
+                    </Button>
+                  </Table.Cell>
+                </Table.Row>
+              ))}
+            </Table.Body>
+          </Table.Root>
+        </Table.ScrollArea>
       )}
       <Text>* LaP = Letzte ausleihende Person</Text>
       <Text>** Dav = Derzeit ausgeliehen von</Text>

admin/src/components/LoanTable.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import {
+  Box,
   Table,
   Spinner,
   Text,
@@ -31,7 +32,7 @@ const LoanTable: React.FC = () => {
   const setError = (
     status: "error" | "success",
     message: string,
-    description: string
+    description: string,
   ) => {
     setIsError(false);
     setErrorStatus(status);
@@ -65,7 +66,7 @@ const LoanTable: React.FC = () => {
             headers: {
               Authorization: `Bearer ${Cookies.get("token")}`,
             },
-          }
+          },
         );
         const data = await response.json();
         return data;
@@ -83,7 +84,7 @@ const LoanTable: React.FC = () => {
   }, [reload]);
 
   return (
-    <>
+    <Box h="full" display="flex" flexDirection="column" minH={0}>
       {/* Action toolbar */}
       <HStack
         mb={4}
@@ -131,86 +132,131 @@ const LoanTable: React.FC = () => {
         </VStack>
       )}
       {!isLoading && (
-        <Table.Root size="sm" striped>
-          <Table.Header>
-            <Table.Row>
-              <Table.ColumnHeader>
-                <strong>#</strong>
-              </Table.ColumnHeader>
-              <Table.ColumnHeader>
-                <strong>Besitzer</strong>
-              </Table.ColumnHeader>
-              <Table.ColumnHeader>
-                <strong>Ausleih code</strong>
-              </Table.ColumnHeader>
-              <Table.ColumnHeader>
-                <strong>Startdatum</strong>
-              </Table.ColumnHeader>
-              <Table.ColumnHeader>
-                <strong>Enddatum</strong>
-              </Table.ColumnHeader>
-              <Table.ColumnHeader>
-                <strong>Ausleihdatum</strong>
-              </Table.ColumnHeader>
-              <Table.ColumnHeader>
-                <strong>Rückgabedatum</strong>
-              </Table.ColumnHeader>
-              <Table.ColumnHeader>
-                <strong>Erstellt am</strong>
-              </Table.ColumnHeader>
-              <Table.ColumnHeader>
-                <strong>Ausgeliehene Artikel</strong>
-              </Table.ColumnHeader>
-              <Table.ColumnHeader>
-                <strong>Notiz</strong>
-              </Table.ColumnHeader>
-              <Table.ColumnHeader>
-                <strong>Aktionen</strong>
-              </Table.ColumnHeader>
-            </Table.Row>
-          </Table.Header>
-          <Table.Body>
-            {items.map((item) => (
-              <Table.Row color={item.deleted ? "red" : "white"} key={item.id}>
-                <Table.Cell>{item.id}</Table.Cell>
-                <Table.Cell>{item.username}</Table.Cell>
-                <Table.Cell>
-                  <Code>{item.loan_code}</Code>
-                </Table.Cell>
-                <Table.Cell>{formatDateTime(item.start_date)}</Table.Cell>
-                <Table.Cell>{formatDateTime(item.end_date)}</Table.Cell>
-                <Table.Cell>{formatDateTime(item.take_date)}</Table.Cell>
-                <Table.Cell>{formatDateTime(item.returned_date)}</Table.Cell>
-                <Table.Cell>{formatDateTime(item.created_at)}</Table.Cell>
-                <Table.Cell>{item.loaned_items_name.join(", ")}</Table.Cell>
-                <Table.Cell>{item.note}</Table.Cell>
-                <Table.Cell>
-                  <Button
-                    onClick={() =>
-                      deleteLoan(item.id).then((response) => {
-                        if (response.success) {
-                          setItems(items.filter((i) => i.id !== item.id));
-                          setError(
-                            "success",
-                            "Loan deleted",
-                            "The loan has been successfully deleted."
-                          );
-                        }
-                      })
-                    }
-                    colorPalette="red"
-                    size="sm"
-                    ml={2}
-                  >
-                    <Trash2 />
-                  </Button>
-                </Table.Cell>
+        <Table.ScrollArea flex="1" minH={0} rounded="md" mt={4}>
+          <Table.Root
+            size="sm"
+            striped
+            stickyHeader
+            css={{
+              "& [data-sticky]": {
+                position: "sticky",
+                zIndex: 1,
+                bg: "bg",
+
+                _after: {
+                  content: '""',
+                  position: "absolute",
+                  pointerEvents: "none",
+                  top: "0",
+                  bottom: "-1px",
+                  width: "32px",
+                },
+              },
+
+              "& [data-sticky=end]": {
+                _after: {
+                  insetInlineEnd: "0",
+                  translate: "100% 0",
+                  shadow: "inset 8px 0px 8px -8px rgba(0, 0, 0, 0.16)",
+                },
+              },
+
+              "& [data-sticky=start]": {
+                _after: {
+                  insetInlineStart: "0",
+                  translate: "-100% 0",
+                  shadow: "inset -8px 0px 8px -8px rgba(0, 0, 0, 0.16)",
+                },
+              },
+
+              "& thead tr": {
+                shadow: "0 1px 0 0 {colors.border}",
+                "&:has(th[data-sticky])": {
+                  zIndex: 2,
+                },
+              },
+            }}
+          >
+            <Table.Header>
+              <Table.Row>
+                <Table.ColumnHeader>
+                  <strong>#</strong>
+                </Table.ColumnHeader>
+                <Table.ColumnHeader>
+                  <strong>Besitzer</strong>
+                </Table.ColumnHeader>
+                <Table.ColumnHeader>
+                  <strong>Ausleihcode</strong>
+                </Table.ColumnHeader>
+                <Table.ColumnHeader>
+                  <strong>Startdatum</strong>
+                </Table.ColumnHeader>
+                <Table.ColumnHeader>
+                  <strong>Enddatum</strong>
+                </Table.ColumnHeader>
+                <Table.ColumnHeader>
+                  <strong>Ausleihdatum</strong>
+                </Table.ColumnHeader>
+                <Table.ColumnHeader>
+                  <strong>Rückgabedatum</strong>
+                </Table.ColumnHeader>
+                <Table.ColumnHeader>
+                  <strong>Erstellt am</strong>
+                </Table.ColumnHeader>
+                <Table.ColumnHeader>
+                  <strong>Ausgeliehene Artikel</strong>
+                </Table.ColumnHeader>
+                <Table.ColumnHeader>
+                  <strong>Notiz</strong>
+                </Table.ColumnHeader>
+                <Table.ColumnHeader>
+                  <strong>Aktionen</strong>
+                </Table.ColumnHeader>
               </Table.Row>
-            ))}
-          </Table.Body>
-        </Table.Root>
+            </Table.Header>
+            <Table.Body>
+              {items.map((item) => (
+                <Table.Row color={item.deleted ? "red" : "white"} key={item.id}>
+                  <Table.Cell>{item.id}</Table.Cell>
+                  <Table.Cell>{item.username}</Table.Cell>
+                  <Table.Cell>
+                    <Code>{item.loan_code}</Code>
+                  </Table.Cell>
+                  <Table.Cell>{formatDateTime(item.start_date)}</Table.Cell>
+                  <Table.Cell>{formatDateTime(item.end_date)}</Table.Cell>
+                  <Table.Cell>{formatDateTime(item.take_date)}</Table.Cell>
+                  <Table.Cell>{formatDateTime(item.returned_date)}</Table.Cell>
+                  <Table.Cell>{formatDateTime(item.created_at)}</Table.Cell>
+                  <Table.Cell>{item.loaned_items_name.join(", ")}</Table.Cell>
+                  <Table.Cell>{item.note}</Table.Cell>
+                  <Table.Cell>
+                    <Button
+                      onClick={() =>
+                        deleteLoan(item.id).then((response) => {
+                          if (response.success) {
+                            setItems(items.filter((i) => i.id !== item.id));
+                            setError(
+                              "success",
+                              "Loan deleted",
+                              "The loan has been successfully deleted.",
+                            );
+                          }
+                        })
+                      }
+                      colorPalette="red"
+                      size="sm"
+                      ml={2}
+                    >
+                      <Trash2 />
+                    </Button>
+                  </Table.Cell>
+                </Table.Row>
+              ))}
+            </Table.Body>
+          </Table.Root>
+        </Table.ScrollArea>
       )}
-    </>
+    </Box>
   );
 };
 

admin/vite.config.ts

@@ -8,9 +8,13 @@ export default defineConfig({
   plugins: [react(), svgr(), tailwindcss(), tsconfigPaths()],
   server: {
     host: "0.0.0.0",
-    port: 8003,
-    watch: {
-      usePolling: true,
+    allowedHosts: ["admin.insta.the1s.de"],
+    port: 8103,
+    watch: { usePolling: true },
+    hmr: {
+      host: "admin.insta.the1s.de",
+      port: 8103,
+      protocol: "wss",
     },
   },
 });

changelog.md

@@ -15,6 +15,7 @@ This update provides some new features for the design. It also contains some imp
 - Improved error logging
 - If you try to delete a loan that has not been returned yet, you will get an 507 error code.
 - When the admin deletes a loan, the loan will be still visible in the database, but it will be marked as deleted. This is to prevent data loss and to keep track of deleted loans.
+- Mailer improvements: The mailer is now more clearly organised. Two large code files are now split into five smaller code files which are easier to maintain. Also the design of the mails has improved.
 
 ## Fixed bugs
 

docker-compose.yml

@@ -15,9 +15,9 @@ services:
 
   backend_v2:
     container_name: borrow_system-backend_v2
+    networks:
+      - proxynet
     build: ./backendV2
-    ports:
-      - "8004:8004"
     environment:
       NODE_ENV: production
       DB_HOST: mysql_v2
@@ -30,6 +30,8 @@ services:
 
   mysql_v2:
     container_name: borrow_system-mysql-v2
+    networks:
+      - proxynet
     image: mysql:8.0
     restart: always
     environment:
@@ -54,3 +56,7 @@ services:
 volumes:
   mysql-data:
   mysql-v2-data:
+
+networks:
+  proxynet:
+    external: true