Merge branch 'dev' into host

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/src/pages/MyLoansPage.tsx

@@ -121,10 +121,28 @@ export const MyLoansPage = () => {
 
   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}`;
+    const date = new Date(iso);
+    if (isNaN(date.getTime())) return iso;
+    return date.toLocaleString("de-DE", {
+      timeZone: "Europe/Berlin",
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+  };
+
+  const dateAndTime = (isISO: boolean) => {
+    const date = new Date();
+
+    if (isISO) {
+      return date.toISOString();
+    }
+
+    if (!isISO) {
+      return date;
+    }
   };
 
   const handleTakeAction = async (loanCode: string) => {
@@ -151,7 +169,7 @@ export const MyLoansPage = () => {
       setLoans((prev) =>
         prev.map((loan) =>
           loan.loan_code === loanCode
-            ? { ...loan, take_date: new Date().toISOString() }
+            ? { ...loan, take_date: dateAndTime(true) }
             : loan,
         ),
       );
@@ -191,7 +209,7 @@ export const MyLoansPage = () => {
       setLoans((prev) =>
         prev.map((loan) =>
           loan.loan_code === loanCode
-            ? { ...loan, returned_date: new Date().toISOString() }
+            ? { ...loan, returned_date: dateAndTime(true) }
             : loan,
         ),
       );

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

@@ -60,7 +60,7 @@
     "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.",
+    "timezone-info": "Die angezeigten Daten und Uhrzeiten werden in deutscher Zeitzone dargestellt und müssen auch so eingegeben werden. Das gesamte System ist auf die deutsche Zeitzone eingestellt.",
     "optional-note": "Optionale Notiz",
     "note": "Notiz",
     "user-info-desc": "Hier können Sie Ihre persönlichen Informationen einsehen und das Passwort ändern. Falls Sie weitere Änderungen benötigen, wenden Sie sich bitte an einen Administrator.",

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

@@ -60,7 +60,7 @@
     "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.",
+    "timezone-info": "The displayed dates and times are shown in Berlin timezone and must also be entered as such. The entire system is set to Berlin timezone.",
     "optional-note": "Optional note",
     "note": "Note",
     "user-info-desc": "Here you can view your personal information and change your password. If you need to make further changes, please contact an administrator.",

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,11 +193,50 @@ const ItemTable: React.FC = () => {
 
       {/* make table fill available width, like UserTable */}
       {!isLoading && (
+        <Table.ScrollArea flex="1" minH={0} rounded="md" mt={4}>
           <Table.Root
             size="sm"
             striped
-          w="100%"
-          style={{ tableLayout: "auto" }} // Spalten nach Content
+            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>
@@ -315,8 +354,12 @@ const ItemTable: React.FC = () => {
                       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>
+                    {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">
@@ -327,7 +370,7 @@ const ItemTable: React.FC = () => {
                           item.item_name,
                           item.safe_nr,
                           item.door_key,
-                        item.can_borrow_role
+                          item.can_borrow_role,
                         ).then((response) => {
                           if (response.success) {
                             setError(
@@ -338,7 +381,7 @@ const ItemTable: React.FC = () => {
                                 item.item_name +
                                 '" mit ID ' +
                                 item.id +
-                              " bearbeitet."
+                                " bearbeitet.",
                             );
                           }
                         })
@@ -356,7 +399,7 @@ const ItemTable: React.FC = () => {
                             setError(
                               "success",
                               "Gegenstand gelöscht",
-                            "Der Gegenstand wurde erfolgreich gelöscht."
+                              "Der Gegenstand wurde erfolgreich gelöscht.",
                             );
                           }
                         })
@@ -372,6 +415,7 @@ const ItemTable: React.FC = () => {
               ))}
             </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,7 +132,51 @@ const LoanTable: React.FC = () => {
         </VStack>
       )}
       {!isLoading && (
-        <Table.Root size="sm" striped>
+        <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>
@@ -141,7 +186,7 @@ const LoanTable: React.FC = () => {
                   <strong>Besitzer</strong>
                 </Table.ColumnHeader>
                 <Table.ColumnHeader>
-                <strong>Ausleih code</strong>
+                  <strong>Ausleihcode</strong>
                 </Table.ColumnHeader>
                 <Table.ColumnHeader>
                   <strong>Startdatum</strong>
@@ -193,7 +238,7 @@ const LoanTable: React.FC = () => {
                             setError(
                               "success",
                               "Loan deleted",
-                            "The loan has been successfully deleted."
+                              "The loan has been successfully deleted.",
                             );
                           }
                         })
@@ -209,8 +254,9 @@ const LoanTable: React.FC = () => {
               ))}
             </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",
     },
   },
 });

backendV2/info.json

@@ -1,11 +1,11 @@
 {
     "backend-info": {
-        "version": "v2.2 (dev)"
+        "version": "v2.2"
     },
     "frontend-info": {
-        "version": "v2.2 (dev)"
+        "version": "v2.2"
     },
     "admin-panel-info": {
-        "version": "v1.4(dev)"
+        "version": "v1.4"
     }
 }

changelog.md

@@ -1,36 +1,28 @@
-# Changelog for upcoming version: v2.2
+# Changelog for upcoming version: vX.X
 
-This update provides some new features for the design. It also contains some improvements and I have also fixed some bugs.
+Introduction
 
 ## New features
 
-- **Deactivatable services:** I have added the ability to deactivate services, which can be useful for maintenance or other purposes. The admin can activate and deactivate services in the admin panel. If a service is deactivated, it will not be available for users and they will get an error message if they try to use it. They will also get an warning banner on the homepage.
-- **New Animations:** I have added some new animations to the frontend, which make the user experience more enjoyable.
-- **New Icon:** I have added a new icon for the frontend, which is now also used in the header and the favicon. It is a dark version of the old icon, which fits better to the overall design. I have made it with Icon Composer. The old icon is still used for the admin panel, which has a light design. (Maybe I will change the admin panel design in the future...)
-- **New Button:** When you go to your user card (over the user icon in the header) you have a new button "Click me". If you click it, you will get an message... _I am just saying: I have implemented the no-as-a-service code in to my Backend._
+- 
 
 ## Improvements
 
-- The overview page now shows the note column and is overall better organised.
-- 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.
+- 
 
 ## Fixed bugs
 
-- Fixed bug: #13
-- Fixed bug for messaging when server has an error
-- Fixed footer height
+- 
 
 ---
 
 ## New version numbers
 
-**Backend:** v2.2
+**Backend:** vX.X
 
-**Frontend:** v2.2
+**Frontend:** vX.X
 
-**Admin panel:** v1.4
+**Admin panel:** vX.X
 
 ---
 

docker-compose.yml

@@ -1,23 +1,23 @@
 services:
-  #  usr-frontend_v2:
-  #    container_name: borrow_system-usr-frontend
-  #    build: ./FrontendV2
-  #    ports:
-  #      - "8001:80"
-  #    restart: always
+  usr-frontend_v2:
+    container_name: borrow_system-usr-frontend
+    networks:
+      - proxynet
+    build: ./FrontendV2
+    restart: unless-stopped
 
-  #  admin-frontend:
-  #    container_name: borrow_system-admin-frontend
-  #    build: ./admin
-  #    ports:
-  #      - "8003:80"
-  #    restart: always
+  admin-frontend:
+    container_name: borrow_system-admin-frontend
+    networks:
+      - proxynet
+    build: ./admin
+    restart: unless-stopped
 
   backend_v2:
     container_name: borrow_system-backend_v2
+    networks:
+      - proxynet
     build: ./backendV2
-    ports:
-      - "8004:8004"
     environment:
       NODE_ENV: production
       DB_HOST: mysql_v2
@@ -26,12 +26,14 @@ services:
       DB_NAME: borrow_system_new
     depends_on:
       - mysql_v2
-    restart: always
+    restart: unless-stopped
 
   mysql_v2:
     container_name: borrow_system-mysql-v2
+    networks:
+      - proxynet
     image: mysql:8.0
-    restart: always
+    restart: unless-stopped
     environment:
       MYSQL_ROOT_PASSWORD: ${DB_PASSWORD_V2}
       MYSQL_DATABASE: borrow_system_new
@@ -39,13 +41,11 @@ services:
     volumes:
       - mysql-v2-data:/var/lib/mysql
       - ./mysql-timezone.cnf:/etc/mysql/conf.d/timezone.cnf:ro
-    ports:
-      - "3310:3306"
 
   no-as-a-service:
     container_name: borrow_system-naas
-    ports:
-      - "3000:3000"
+    networks:
+      - proxynet
     build:
       context: ./no-as-a-service
       dockerfile: Dockerfile
@@ -54,3 +54,7 @@ services:
 volumes:
   mysql-data:
   mysql-v2-data:
+
+networks:
+  proxynet:
+    external: true