Merge branch 'dev_v1-admin' into debian12_v1-admin

fix: update dependency reference for backend service in docker-compose

README.md

@@ -1,73 +1,7 @@
 # Borrow System
 
-![React](https://img.shields.io/badge/React-20232A?logo=react&logoColor=61DAFB)
+**You have reached the `debian12` branch.**
-![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?logo=typescript&logoColor=white)
-![Vite](https://img.shields.io/badge/Vite-646CFF?logo=vite&logoColor=white)
-![TailwindCSS](https://img.shields.io/badge/Tailwind_CSS-38B2AC?logo=tailwind-css&logoColor=white)
-![Node.js](https://img.shields.io/badge/Node.js-339933?logo=node.js&logoColor=white)
-![Express](https://img.shields.io/badge/Express-000000?logo=express&logoColor=white)
-![MySQL](https://img.shields.io/badge/MySQL-4479A1?logo=mysql&logoColor=white)
-![Docker](https://img.shields.io/badge/Docker-2496ED?logo=docker&logoColor=white)
-![JWT](https://img.shields.io/badge/JWT-000000?logo=jsonwebtokens&logoColor=white)
 
-A small full‑stack system to log in, view available items, reserve them for a time window, and manage personal loans.
+Here you will find the source code of exactly the application that I have hosted.
 
-- Frontend: React + TypeScript + Vite + Tailwind CSS
+The main branch or the branch that I am developing on, is the `dev` branch.
-- Backend: Node.js + Express + MySQL + JWT (jose)
-- Orchestration: Docker Compose (backend + MySQL)
-
-## Contents
-
-- Frontend: [frontend/](frontend)
-  - Vite/Tailwind config: [frontend/vite.config.ts](frontend/vite.config.ts), [frontend/tailwind.config.js](frontend/tailwind.config.js)
-  - App entry: [frontend/src/main.tsx](frontend/src/main.tsx), [frontend/src/App.tsx](frontend/src/App.tsx)
-  - UI: [frontend/src/layout/Layout.tsx](frontend/src/layout/Layout.tsx), [frontend/src/components](frontend/src/components)
-  - Data/utilities: [frontend/src/utils/fetchData.ts](frontend/src/utils/fetchData.ts), [frontend/src/utils/userHandler.ts](frontend/src/utils/userHandler.ts), [frontend/src/utils/toastify.ts](frontend/src/utils/toastify.ts)
-- Backend: [backend/](backend)
-  - Server: [backend/server.js](backend/server.js)
-  - Routes: [backend/routes/api.js](backend/routes/api.js), [backend/routes/apiV2.js](backend/routes/apiV2.js)
-  - DB + services: [backend/services/database.js](backend/services/database.js), [backend/services/tokenService.js](backend/services/tokenService.js)
-  - Schema/seed: [backend/scheme.sql](backend/scheme.sql)
-- Docs: [docs/](docs)
-  - API docs (see below): [docs/backend_API_docs/README.md](docs/backend_API_docs/README.md)
-
-## Features (high‑level)
-
-- Auth via JWT (login -> token cookie) using the backend route in [backend/routes/api.js](backend/routes/api.js).
-- After login, the app loads items, loans, and user loans and keeps them in localStorage.
-- Choose a date range to fetch borrowable items, select items, and create a loan.
-- Manage personal loans list (and delete a loan).
-
-Key frontend utilities:
-
-- [`utils.fetchData.fetchAllData`](frontend/src/utils/fetchData.ts): loads items, loans, and user loans after login.
-- [`utils.fetchData.getBorrowableItems`](frontend/src/utils/fetchData.ts): fetches borrowable items for the selected time range.
-- [`utils.userHandler.createLoan`](frontend/src/utils/userHandler.ts): creates a new loan for selected items.
-- [`utils.userHandler.handleDeleteLoan`](frontend/src/utils/userHandler.ts): deletes a loan and syncs local state.
-- [`utils.toastify.myToast`](frontend/src/utils/toastify.ts): toast notifications.
-
-UI flow (main screens):
-
-- Period selection: [frontend/src/components/Form1.tsx](frontend/src/components/Form1.tsx)
-- Borrowable items + selection: [frontend/src/components/Form2.tsx](frontend/src/components/Form2.tsx)
-- User loans table: [frontend/src/components/Form4.tsx](frontend/src/components/Form4.tsx)
-
-## Development
-
-- Scripts: see [frontend/package.json](frontend/package.json) and [backend/package.json](backend/package.json)
-  - Frontend: `npm run dev`, `npm run build`, `npm run preview`, `npm run lint`
-  - Backend: `npm start`
-- Linting: ESLint configured via [frontend/eslint.config.js](frontend/eslint.config.js)
-- TypeScript configs: [frontend/tsconfig.app.json](frontend/tsconfig.app.json), [frontend/tsconfig.node.json](frontend/tsconfig.node.json)
-
-## Configuration notes
-
-- Vite/Tailwind integration via [frontend/vite.config.ts](frontend/vite.config.ts) and `@tailwindcss/vite`; CSS entry uses `@import "tailwindcss"` in [frontend/src/index.css](frontend/src/index.css).
-- Toasts wired in [frontend/src/main.tsx](frontend/src/main.tsx) with `react-toastify`.
-- Local state is stored in `localStorage` keys: `allItems`, `allLoans`, `userLoans`, `borrowableItems`. Cross‑component updates are signaled via window events from [`utils.fetchData`](frontend/src/utils/fetchData.ts).
-
-## API documentation
-
-Refer to the dedicated API docs:
-
-`docs/backend_API_docs/README.md`

admin/package-lock.json

@@ -12,7 +12,6 @@
         "@emotion/react": "^11.14.0",
         "@tailwindcss/vite": "^4.1.11",
         "@tanstack/react-query": "^5.85.5",
-        "jotai": "^2.15.0",
         "js-cookie": "^3.0.5",
         "lucide-react": "^0.539.0",
         "next-themes": "^0.4.6",
@@ -4421,35 +4420,6 @@
         "jiti": "lib/jiti-cli.mjs"
       }
     },
-    "node_modules/jotai": {
-      "version": "2.15.0",
-      "resolved": "https://registry.npmjs.org/jotai/-/jotai-2.15.0.tgz",
-      "integrity": "sha512-nbp/6jN2Ftxgw0VwoVnOg0m5qYM1rVcfvij+MZx99Z5IK13eGve9FJoCwGv+17JvVthTjhSmNtT5e1coJnr6aw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=12.20.0"
-      },
-      "peerDependencies": {
-        "@babel/core": ">=7.0.0",
-        "@babel/template": ">=7.0.0",
-        "@types/react": ">=17.0.0",
-        "react": ">=17.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@babel/core": {
-          "optional": true
-        },
-        "@babel/template": {
-          "optional": true
-        },
-        "@types/react": {
-          "optional": true
-        },
-        "react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/js-cookie": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
@@ -5675,13 +5645,13 @@
       }
     },
     "node_modules/tinyglobby": {
-      "version": "0.2.15",
+      "version": "0.2.14",
-      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",
-      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
+      "integrity": "sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==",
       "license": "MIT",
       "dependencies": {
-        "fdir": "^6.5.0",
+        "fdir": "^6.4.4",
-        "picomatch": "^4.0.3"
+        "picomatch": "^4.0.2"
       },
       "engines": {
         "node": ">=12.0.0"
@@ -5879,9 +5849,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "7.1.11",
+      "version": "7.1.3",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.11.tgz",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.3.tgz",
-      "integrity": "sha512-uzcxnSDVjAopEUjljkWh8EIrg6tlzrjFUfMcR1EVsRDGwf/ccef0qQPRyOrROwhrTDaApueq+ja+KLPlzR/zdg==",
+      "integrity": "sha512-OOUi5zjkDxYrKhTV3V7iKsoS37VUM7v40+HuwEmcrsf11Cdx9y3DIr2Px6liIcZFwt3XSRpQvFpL3WVy7ApkGw==",
       "license": "MIT",
       "dependencies": {
         "esbuild": "^0.25.0",
@@ -5889,7 +5859,7 @@
         "picomatch": "^4.0.3",
         "postcss": "^8.5.6",
         "rollup": "^4.43.0",
-        "tinyglobby": "^0.2.15"
+        "tinyglobby": "^0.2.14"
       },
       "bin": {
         "vite": "bin/vite.js"

admin/package.json

@@ -14,7 +14,6 @@
     "@emotion/react": "^11.14.0",
     "@tailwindcss/vite": "^4.1.11",
     "@tanstack/react-query": "^5.85.5",
-    "jotai": "^2.15.0",
     "js-cookie": "^3.0.5",
     "lucide-react": "^0.539.0",
     "next-themes": "^0.4.6",

admin/src/Layout/Layout.tsx

@@ -5,11 +5,6 @@ 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 ||
-  import.meta.env.VITE_BACKEND_URL ||
-  "http://localhost:8002";
-
 const Layout: React.FC = () => {
   const [isLoggedIn, setIsLoggedIn] = useState(false);
   const [showAPI, setShowAPI] = useState(false);
@@ -24,7 +19,7 @@ const Layout: React.FC = () => {
 
     if (Cookies.get("token")) {
       const verifyToken = async () => {
-        const response = await fetch(`${API_BASE}/api/verifyToken`, {
+        const response = await fetch("https://backend.insta.the1s.de/api/verifyToken", {
           method: "GET",
           headers: {
             Authorization: `Bearer ${Cookies.get("token")}`,

admin/src/States/Atoms.tsx

@@ -1,3 +0,0 @@
-import { atom } from "jotai";
-
-export const testAtom = atom<number>(0);

admin/src/States/README.md

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

admin/src/components/API/Landingpage.tsx

@@ -14,11 +14,6 @@ import { Lock, LockOpen } from "lucide-react";
 import MyAlert from "../myChakra/MyAlert";
 import { formatDateTime } from "@/utils/userFuncs";
 
-const API_BASE =
-  (import.meta as any).env?.VITE_BACKEND_URL ||
-  import.meta.env.VITE_BACKEND_URL ||
-  "http://localhost:8002";
-
 type Loan = {
   id: number;
   username: string;
@@ -62,7 +57,9 @@ const Landingpage: React.FC = () => {
     const fetchData = async () => {
       setIsLoading(true);
       try {
-        const loanRes = await fetch(`${API_BASE}/apiV2/allLoans`);
+        const loanRes = await fetch(
+          "https://backend.insta.the1s.de/apiV2/allLoans"
+        );
         const loanData = await loanRes.json();
         if (Array.isArray(loanData)) {
           setLoans(loanData);
@@ -74,7 +71,9 @@ const Landingpage: React.FC = () => {
           );
         }
 
-        const deviceRes = await fetch(`${API_BASE}/apiV2/allItems`);
+        const deviceRes = await fetch(
+          "https://backend.insta.the1s.de/apiV2/allItems"
+        );
         const deviceData = await deviceRes.json();
         if (Array.isArray(deviceData)) {
           setDevices(deviceData);

admin/src/components/APIKeyTable.tsx

@@ -18,11 +18,6 @@ import { deleteAPKey } from "@/utils/userActions";
 import AddAPIKey from "./AddAPIKey";
 import { formatDateTime } from "@/utils/userFuncs";
 
-const API_BASE =
-  (import.meta as any).env?.VITE_BACKEND_URL ||
-  import.meta.env.VITE_BACKEND_URL ||
-  "http://localhost:8002";
-
 type Items = {
   id: number;
   apiKey: string;
@@ -56,7 +51,7 @@ const APIKeyTable: React.FC = () => {
     const fetchData = async () => {
       setIsLoading(true);
       try {
-        const response = await fetch(`${API_BASE}/api/apiKeys`, {
+        const response = await fetch("https://backend.insta.the1s.de/api/apiKeys", {
           method: "GET",
           headers: {
             Authorization: `Bearer ${Cookies.get("token")}`,

admin/src/components/AddItemForm.tsx

@@ -33,7 +33,7 @@ const AddItemForm: React.FC<AddItemFormProps> = ({ onClose, alert }) => {
               <Input
                 id="can_borrow_role"
                 type="number"
-                placeholder="Zahl (1 - 4)"
+                placeholder="Zahl (z.B. 2)"
               />
             </Field.Root>
           </Stack>

admin/src/components/ItemTable.tsx

@@ -31,11 +31,6 @@ import {
 import AddItemForm from "./AddItemForm";
 import { formatDateTime } from "@/utils/userFuncs";
 
-const API_BASE =
-  (import.meta as any).env?.VITE_BACKEND_URL ||
-  import.meta.env.VITE_BACKEND_URL ||
-  "http://localhost:8002";
-
 type Items = {
   id: number;
   item_name: string;
@@ -82,7 +77,7 @@ const ItemTable: React.FC = () => {
     const fetchData = async () => {
       setIsLoading(true);
       try {
-        const response = await fetch(`${API_BASE}/api/allItems`, {
+        const response = await fetch("https://backend.insta.the1s.de/api/allItems", {
           method: "GET",
           headers: {
             Authorization: `Bearer ${Cookies.get("token")}`,

admin/src/components/LoanTable.tsx

@@ -18,11 +18,6 @@ import { formatDateTime } from "@/utils/userFuncs";
 import { Trash2, RefreshCcwDot } from "lucide-react";
 import { deleteLoan } from "@/utils/userActions";
 
-const API_BASE =
-  (import.meta as any).env?.VITE_BACKEND_URL ||
-  import.meta.env.VITE_BACKEND_URL ||
-  "http://localhost:8002";
-
 const LoanTable: React.FC = () => {
   const [items, setItems] = useState<Loan[]>([]);
   const [errorStatus, setErrorStatus] = useState<"error" | "success">("error");
@@ -60,7 +55,7 @@ const LoanTable: React.FC = () => {
     const fetchData = async () => {
       setIsLoading(true);
       try {
-        const response = await fetch(`${API_BASE}/api/allLoans`, {
+        const response = await fetch("https://backend.insta.the1s.de/api/allLoans", {
           method: "GET",
           headers: {
             Authorization: `Bearer ${Cookies.get("token")}`,

admin/src/utils/fetcher.ts

@@ -1,12 +1,7 @@
 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";
-
 export const fetchUserData = async () => {
-  const response = await fetch(`${API_BASE}/api/allUsers`, {
+  const response = await fetch("https://backend.insta.the1s.de/api/allUsers", {
     headers: {
       Authorization: `Bearer ${Cookies.get("token")}`,
     },

admin/src/utils/loginUser.ts

@@ -1,10 +1,5 @@
 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";
-
 export type LoginSuccess = { success: true };
 export type LoginFailure = {
   success: false;
@@ -18,7 +13,7 @@ export const loginFunc = async (
   password: string
 ): Promise<LoginResult> => {
   try {
-    const response = await fetch(`${API_BASE}/api/loginAdmin`, {
+    const response = await fetch("https://backend.insta.the1s.de/api/loginAdmin", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({ username, password }),

admin/src/utils/userActions.ts

@@ -1,14 +1,9 @@
 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";
-
 export const handleDelete = async (userId: number) => {
   try {
     const response = await fetch(
-      `${API_BASE}/api/deleteUser/${userId}`,
+      `https://backend.insta.the1s.de/api/deleteUser/${userId}`,
       {
         method: "DELETE",
         headers: {
@@ -33,7 +28,7 @@ export const handleEdit = async (
 ) => {
   try {
     const response = await fetch(
-      `${API_BASE}/api/editUser/${userId}`,
+      `https://backend.insta.the1s.de/api/editUser/${userId}`,
       {
         method: "POST",
         headers: {
@@ -59,14 +54,17 @@ export const createUser = async (
   password: string
 ) => {
   try {
-    const response = await fetch(`${API_BASE}/api/createUser`, {
+    const response = await fetch(
-      method: "POST",
+      `https://backend.insta.the1s.de/api/createUser`,
-      headers: {
+      {
-        "Content-Type": "application/json",
+        method: "POST",
-        Authorization: `Bearer ${Cookies.get("token")}`,
+        headers: {
-      },
+          "Content-Type": "application/json",
-      body: JSON.stringify({ username, role, password }),
+          Authorization: `Bearer ${Cookies.get("token")}`,
-    });
+        },
+        body: JSON.stringify({ username, role, password }),
+      }
+    );
     if (!response.ok) {
       throw new Error("Failed to create user");
     }
@@ -79,14 +77,17 @@ export const createUser = async (
 
 export const changePW = async (newPassword: string, username: string) => {
   try {
-    const response = await fetch(`${API_BASE}/api/changePWadmin`, {
+    const response = await fetch(
-      method: "POST",
+      `https://backend.insta.the1s.de/api/changePWadmin`,
-      headers: {
+      {
-        "Content-Type": "application/json",
+        method: "POST",
-        Authorization: `Bearer ${Cookies.get("token")}`,
+        headers: {
-      },
+          "Content-Type": "application/json",
-      body: JSON.stringify({ newPassword, username }),
+          Authorization: `Bearer ${Cookies.get("token")}`,
-    });
+        },
+        body: JSON.stringify({ newPassword, username }),
+      }
+    );
     if (!response.ok) {
       throw new Error("Failed to change password");
     }
@@ -100,7 +101,7 @@ export const changePW = async (newPassword: string, username: string) => {
 export const deleteLoan = async (loanId: number) => {
   try {
     const response = await fetch(
-      `${API_BASE}/api/deleteLoan/${loanId}`,
+      `https://backend.insta.the1s.de/api/deleteLoan/${loanId}`,
       {
         method: "DELETE",
         headers: {
@@ -121,7 +122,7 @@ export const deleteLoan = async (loanId: number) => {
 export const deleteItem = async (itemId: number) => {
   try {
     const response = await fetch(
-      `${API_BASE}/api/deleteItem/${itemId}`,
+      `https://backend.insta.the1s.de/api/deleteItem/${itemId}`,
       {
         method: "DELETE",
         headers: {
@@ -144,14 +145,17 @@ export const createItem = async (
   can_borrow_role: number
 ) => {
   try {
-    const response = await fetch(`${API_BASE}/api/createItem`, {
+    const response = await fetch(
-      method: "POST",
+      `https://backend.insta.the1s.de/api/createItem`,
-      headers: {
+      {
-        "Content-Type": "application/json",
+        method: "POST",
-        Authorization: `Bearer ${Cookies.get("token")}`,
+        headers: {
-      },
+          "Content-Type": "application/json",
-      body: JSON.stringify({ item_name, can_borrow_role }),
+          Authorization: `Bearer ${Cookies.get("token")}`,
-    });
+        },
+        body: JSON.stringify({ item_name, can_borrow_role }),
+      }
+    );
     if (!response.ok) {
       return {
         success: false,
@@ -172,14 +176,17 @@ export const handleEditItems = async (
   can_borrow_role: string
 ) => {
   try {
-    const response = await fetch(`${API_BASE}/api/updateItemByID`, {
+    const response = await fetch(
-      method: "POST",
+      "https://backend.insta.the1s.de/api/updateItemByID",
-      headers: {
+      {
-        "Content-Type": "application/json",
+        method: "POST",
-        Authorization: `Bearer ${Cookies.get("token")}`,
+        headers: {
-      },
+          "Content-Type": "application/json",
-      body: JSON.stringify({ itemId, item_name, can_borrow_role }),
+          Authorization: `Bearer ${Cookies.get("token")}`,
-    });
+        },
+        body: JSON.stringify({ itemId, item_name, can_borrow_role }),
+      }
+    );
     if (!response.ok) {
       throw new Error("Failed to edit item");
     }
@@ -193,7 +200,7 @@ export const handleEditItems = async (
 export const changeSafeState = async (itemId: number) => {
   try {
     const response = await fetch(
-      `${API_BASE}/api/changeSafeState/${itemId}`,
+      `https://backend.insta.the1s.de/api/changeSafeState/${itemId}`,
       {
         method: "PUT",
         headers: {
@@ -213,7 +220,7 @@ export const changeSafeState = async (itemId: number) => {
 
 export const createAPIentry = async (apiKey: string, user: string) => {
   try {
-    const response = await fetch(`${API_BASE}/api/createAPIentry`, {
+    const response = await fetch(`https://backend.insta.the1s.de/api/createAPIentry`, {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
@@ -238,7 +245,7 @@ export const createAPIentry = async (apiKey: string, user: string) => {
 export const deleteAPKey = async (apiKeyId: number) => {
   try {
     const response = await fetch(
-      `${API_BASE}/api/deleteAPKey/${apiKeyId}`,
+      `https://backend.insta.the1s.de/api/deleteAPKey/${apiKeyId}`,
       {
         method: "DELETE",
         headers: {

admin/vite.config.ts

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

backend/Dockerfile

@@ -7,6 +7,6 @@ RUN npm install
 
 COPY . .
 
-EXPOSE 8002
+EXPOSE 8102
 
 CMD ["npm", "start"]

backend/routes/api.js

@@ -38,99 +38,65 @@ function buildLoanEmail({ user, items, startDate, endDate, createdDate }) {
   const brand = process.env.MAIL_BRAND_COLOR || "#0ea5e9";
   const itemsList =
     Array.isArray(items) && items.length
-      ? `<ul style="margin:4px 0 0 18px; padding:0;">${items
+      ? `<ul style="margin:8px 0 0 16px; padding:0;">${items
-          .map(
+          .map((i) => `<li style="margin:4px 0;">${i}</li>`)
-            (i) =>
-              `<li style="margin:2px 0; color:#111827; line-height:1.3;">${i}</li>`
-          )
           .join("")}</ul>`
-      : "<span style='color:#111827;'>N/A</span>";
+      : "<span>N/A</span>";
 
   return `<!doctype html>
 <html lang="de">
-<head>
+  <head>
-  <meta charset="utf-8">
+    <meta charset="utf-8">
-  <meta name="color-scheme" content="light">
+    <meta name="color-scheme" content="light dark">
-  <meta name="supported-color-schemes" content="light">
+    <meta name="supported-color-schemes" content="light dark">
-  <meta name="x-apple-disable-message-reformatting">
+  </head>
-  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <body style="margin:0; padding:0; background:#f6f9fc; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; color:#111827;">
-  <style>
+    <div style="padding:24px;">
-    :root { color-scheme: light; supported-color-schemes: light; }
+      <table role="presentation" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px; margin:0 auto; background:#ffffff; border:1px solid #e5e7eb; border-radius:12px; overflow:hidden;">
-    body { margin:0; padding:0; }
+        <tr>
-    /* Mobile stacking */
+          <td style="padding:20px 24px; background:${brand}; color:#ffffff;">
-    @media (max-width:480px) {
+            <h1 style="margin:0; font-size:18px;">Neue Ausleihe erstellt</h1>
-      .outer { width:100% !important; }
+          </td>
-      .pad-sm { padding:16px !important; }
+        </tr>
-      .w-label { width:120px !important; }
+        <tr>
-    }
+          <td style="padding:20px 24px;">
-    /* Dark-mode override safety */
+            <p style="margin:0 0 12px 0;">Es wurde eine neue Ausleihe angelegt. Hier sind die Details:</p>
-    @media (prefers-color-scheme: dark) {
+            <table role="presentation" cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse;">
-      body, table, td, p, a, h1, h2, h3 { background:#ffffff !important; color:#111827 !important; }
-      .brand-header { background:${brand} !important; color:#ffffff !important; }
-      a { color:${brand} !important; }
-    }
-  </style>
-</head>
-<body bgcolor="#ffffff" style="background:#ffffff; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; color:#111827; -webkit-text-size-adjust:100%;">
-  <!-- Preheader (hidden) -->
-  <div style="display:none; max-height:0; overflow:hidden; opacity:0; mso-hide:all;">
-    Neue Ausleihe erstellt – Übersicht der Buchung.
-  </div>
-  <div role="article" aria-roledescription="email" lang="de" style="padding:24px; background:#f2f4f7;">
-    <table role="presentation" cellpadding="0" cellspacing="0" width="100%" class="outer" style="max-width:600px; margin:0 auto; background:#ffffff; border:1px solid #e5e7eb; border-radius:14px; overflow:hidden;">
-      <tr>
-        <td class="brand-header" style="padding:22px 26px; background:${brand}; color:#ffffff;">
-          <h1 style="margin:0; font-size:18px; line-height:1.35; font-weight:600;">Neue Ausleihe erstellt</h1>
-        </td>
-      </tr>
-      <tr>
-        <td class="pad-sm" style="padding:24px 26px; color:#111827;">
-          <p style="margin:0 0 14px 0; line-height:1.4;">Es wurde eine neue Ausleihe angelegt. Hier sind die Details:</p>
-          <table role="presentation" cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse; font-size:14px; line-height:1.3; background:#fcfcfd; border:1px solid #e5e7eb; border-radius:10px; overflow:hidden;">
-            <tbody>
               <tr>
-                <td class="w-label" style="padding:10px 14px; color:#6b7280; width:170px; border-bottom:1px solid #ececec;">Benutzer</td>
+                <td style="padding:8px 0; color:#6b7280; width:180px;">Benutzer</td>
-                <td style="padding:10px 14px; font-weight:600; border-bottom:1px solid #ececec; color:#111827;">${
+                <td style="padding:8px 0; font-weight:600;">${
                   user || "N/A"
                 }</td>
               </tr>
               <tr>
-                <td style="padding:10px 14px; color:#6b7280; vertical-align:top; border-bottom:1px solid #ececec;">Ausgeliehene Gegenstände</td>
+                <td style="padding:8px 0; color:#6b7280; vertical-align:top;">Ausgeliehene Gegenstände</td>
-                <td style="padding:10px 14px; font-weight:600; border-bottom:1px solid #ececec; color:#111827;">${itemsList}</td>
+                <td style="padding:8px 0; font-weight:600;">${itemsList}</td>
               </tr>
               <tr>
-                <td style="padding:10px 14px; color:#6b7280; border-bottom:1px solid #ececec;">Startdatum</td>
+                <td style="padding:8px 0; color:#6b7280;">Startdatum</td>
-                <td style="padding:10px 14px; font-weight:600; border-bottom:1px solid #ececec; color:#111827;">${formatDateTime(
+                <td style="padding:8px 0; font-weight:600;">${formatDateTime(
                   startDate
                 )}</td>
               </tr>
               <tr>
-                <td style="padding:10px 14px; color:#6b7280; border-bottom:1px solid #ececec;">Enddatum</td>
+                <td style="padding:8px 0; color:#6b7280;">Enddatum</td>
-                <td style="padding:10px 14px; font-weight:600; border-bottom:1px solid #ececec; color:#111827;">${formatDateTime(
+                <td style="padding:8px 0; font-weight:600;">${formatDateTime(
                   endDate
                 )}</td>
               </tr>
               <tr>
-                <td style="padding:10px 14px; color:#6b7280;">Erstellt am</td>
+                <td style="padding:8px 0; color:#6b7280;">Erstellt am</td>
-                <td style="padding:10px 14px; font-weight:600; color:#111827;">${formatDateTime(
+                <td style="padding:8px 0; font-weight:600;">${formatDateTime(
                   createdDate
                 )}</td>
               </tr>
-            </tbody>
+            </table>
-          </table>
+            <p style="margin:16px 0 0 0; font-size:12px; color:#6b7280;">Diese E-Mail wurde automatisch vom Ausleihsystem gesendet. Bitte nicht antworten.</p>
-          <p style="margin:22px 0 0 0; font-size:14px;">
+          </td>
-            <a href="https://admin.insta.the1s.de/api" style="display:inline-block; background:${brand}; color:#ffffff; text-decoration:none; padding:10px 16px; border-radius:6px; font-weight:600; font-size:14px;" target="_blank" rel="noopener noreferrer">
+        </tr>
-              Übersicht öffnen
+      </table>
-            </a>
+    </div>
-          </p>
+  </body>
-          <p style="margin:18px 0 0 0; font-size:12px; color:#6b7280; line-height:1.4;">
-            Diese E-Mail wurde automatisch vom Ausleihsystem gesendet. Bitte nicht antworten.
-          </p>
-        </td>
-      </tr>
-    </table>
-  </div>
-</body>
 </html>`;
 }
 
@@ -179,6 +145,7 @@ function sendMailLoan(user, items, startDate, endDate, createdDate) {
   console.log("sendMailLoan called");
 }
 
+// ...existing code...
 const formatDateTime = (value) => {
   if (value == null) return "N/A";
 
@@ -210,6 +177,7 @@ const formatDateTime = (value) => {
 
   return "N/A";
 };
+// ...existing code...
 
 router.post("/login", async (req, res) => {
   const result = await loginFunc(req.body.username, req.body.password);
@@ -225,6 +193,7 @@ router.post("/login", async (req, res) => {
 });
 
 router.get("/items", authenticate, async (req, res) => {
+  console.log(req);
   const result = await getItemsFromDatabase(req.user.role);
   if (result.success) {
     res.status(200).json(result.data);

backend/server.js

@@ -5,7 +5,7 @@ import apiRouter from "./routes/api.js";
 import apiRouterV2 from "./routes/apiV2.js";
 env.config();
 const app = express();
-const port = 8002;
+const port = 8102;
 
 app.use(cors());
 // Increase body size limits to support large CSV JSON payloads

backend/services/database.js

@@ -8,6 +8,7 @@ const pool = mysql
     user: process.env.DB_USER,
     password: process.env.DB_PASSWORD,
     database: process.env.DB_NAME,
+    port: process.env.DB_PORT,
   })
   .promise();
 

backend/services/tokenService.js

@@ -9,6 +9,7 @@ export async function generateToken(payload) {
     .setIssuedAt()
     .setExpirationTime("2h") // Token valid for 2 hours
     .sign(secret);
+  console.log("Generated token: ", newToken);
   return newToken;
 }
 

docker-compose.yml

@@ -1,35 +1,45 @@
 services:
-  #  borrow_system-frontend:
+  borrow_system-frontend:
-  #    container_name: borrow_system-frontend
+    container_name: borrow_system-frontend
-  #    build: ./frontend
+    build: ./frontend
-  #    ports:
+    ports:
-  #      - "8001:8001"
+      - "8101:8101"
-  #    environment:
+    networks:
-  #      - CHOKIDAR_USEPOLLING=true
+      - proxynet
-  #    volumes:
+      - borrow_system-internal
-  #      - ./frontend:/app
+    environment:
-  #      - /app/node_modules
+      - CHOKIDAR_USEPOLLING=true
-  #    restart: unless-stopped
+    volumes:
+      - ./frontend:/app
+      - /app/node_modules
+    restart: unless-stopped
 
-  #  admin-frontend:
+  admin-frontend:
-  #    container_name: admin-frontend
+    container_name: admin-frontend
-  #    build: ./admin
+    build: ./admin
-  #    ports:
+    networks:
-  #      - "8003:8003"
+      - proxynet
-  #    environment:
+      - borrow_system-internal
-  #      - CHOKIDAR_USEPOLLING=true
+    ports:
-  #    volumes:
+      - "8103:8103"
-  #      - ./admin:/app
+    environment:
-  #      - /app/node_modules
+      - CHOKIDAR_USEPOLLING=true
-  #    restart: unless-stopped
+    volumes:
+      - ./admin:/app
+      - /app/node_modules
+    restart: unless-stopped
 
   borrow_system-backend:
     container_name: borrow_system-backend
     build: ./backend
     ports:
-      - "8002:8002"
+      - "8102:8102"
+    networks:
+      - proxynet
+      - borrow_system-internal
     environment:
       DB_HOST: mysql
+      DB_PORT: 3306
       DB_USER: root
       DB_PASSWORD: ${DB_PASSWORD}
       DB_NAME: borrow_system
@@ -52,6 +62,14 @@ services:
       - ./mysql-timezone.cnf:/etc/mysql/conf.d/timezone.cnf:ro
     ports:
       - "3309:3306"
+    networks:
+      - borrow_system-internal
 
 volumes:
   mysql-data:
+
+networks:
+  proxynet:
+    external: true
+  borrow_system-internal:
+    external: false

frontend/Dockerfile

@@ -7,6 +7,6 @@ RUN npm install
 
 COPY . .
 
-EXPOSE 8001
+EXPOSE 8101
 
 CMD ["npm", "run", "dev"]

frontend/package-lock.json

@@ -10,7 +10,6 @@
       "dependencies": {
         "@tailwindcss/vite": "^4.1.11",
         "@tanstack/react-query": "^5.85.5",
-        "jotai": "^2.15.0",
         "js-cookie": "^3.0.5",
         "lucide-react": "^0.539.0",
         "primeicons": "^7.0.0",
@@ -3165,35 +3164,6 @@
         "jiti": "lib/jiti-cli.mjs"
       }
     },
-    "node_modules/jotai": {
-      "version": "2.15.0",
-      "resolved": "https://registry.npmjs.org/jotai/-/jotai-2.15.0.tgz",
-      "integrity": "sha512-nbp/6jN2Ftxgw0VwoVnOg0m5qYM1rVcfvij+MZx99Z5IK13eGve9FJoCwGv+17JvVthTjhSmNtT5e1coJnr6aw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=12.20.0"
-      },
-      "peerDependencies": {
-        "@babel/core": ">=7.0.0",
-        "@babel/template": ">=7.0.0",
-        "@types/react": ">=17.0.0",
-        "react": ">=17.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@babel/core": {
-          "optional": true
-        },
-        "@babel/template": {
-          "optional": true
-        },
-        "@types/react": {
-          "optional": true
-        },
-        "react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/js-cookie": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",

frontend/package.json

@@ -12,7 +12,6 @@
   "dependencies": {
     "@tailwindcss/vite": "^4.1.11",
     "@tanstack/react-query": "^5.85.5",
-    "jotai": "^2.15.0",
     "js-cookie": "^3.0.5",
     "lucide-react": "^0.539.0",
     "primeicons": "^7.0.0",

frontend/src/components/Form4.tsx

@@ -19,11 +19,6 @@ type Loan = {
   loaned_items_name: string[];
 };
 
-const API_BASE =
-  (import.meta as any).env?.VITE_BACKEND_URL ||
-  import.meta.env.VITE_BACKEND_URL ||
-  "http://localhost:8002";
-
 const formatDate = (iso: string | null) => {
   if (!iso) return "-";
   const m = iso.match(/^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})/);
@@ -33,7 +28,7 @@ const formatDate = (iso: string | null) => {
 };
 
 async function fetchUserLoans(): Promise<Loan[]> {
-  const res = await fetch(`${API_BASE}/api/userLoans`, {
+  const res = await fetch("https://backend.insta.the1s.de/api/userLoans", {
     method: "GET",
     headers: { Authorization: `Bearer ${Cookies.get("token") || ""}` },
   });

frontend/src/utils/fetchData.ts

@@ -6,11 +6,6 @@ export const ALL_ITEMS_UPDATED_EVENT = "allItemsUpdated";
 export const BORROWABLE_ITEMS_UPDATED_EVENT = "borrowableItemsUpdated";
 export const AUTH_LOGOUT_EVENT = "authLogout";
 
-const API_BASE =
-  (import.meta as any).env?.VITE_BACKEND_URL ||
-  import.meta.env.VITE_BACKEND_URL ||
-  "http://localhost:8002";
-
 let sendError = false;
 
 function logout() {
@@ -30,7 +25,7 @@ export const fetchAllData = async (token: string | undefined) => {
   if (!token) return;
   // First we fetch all items that are potentially available for borrowing
   try {
-    const response = await fetch(`${API_BASE}/api/items`, {
+    const response = await fetch("https://backend.insta.the1s.de/api/items", {
       method: "GET",
       headers: {
         Authorization: `Bearer ${token}`,
@@ -62,7 +57,7 @@ export const fetchAllData = async (token: string | undefined) => {
 
   // get all loans
   try {
-    const response = await fetch(`${API_BASE}/api/loans`, {
+    const response = await fetch("https://backend.insta.the1s.de/api/loans", {
       method: "GET",
       headers: {
         Authorization: `Bearer ${token}`,
@@ -94,7 +89,7 @@ export const fetchAllData = async (token: string | undefined) => {
 
   // get user loans
   try {
-    const response = await fetch(`${API_BASE}/api/userLoans`, {
+    const response = await fetch("https://backend.insta.the1s.de/api/userLoans", {
       method: "GET",
       headers: {
         Authorization: `Bearer ${token}`,
@@ -127,7 +122,7 @@ export const fetchAllData = async (token: string | undefined) => {
 
 export const loginUser = async (username: string, password: string) => {
   try {
-    const response = await fetch(`${API_BASE}/api/login`, {
+    const response = await fetch("https://backend.insta.the1s.de/api/login", {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
@@ -163,7 +158,7 @@ export const getBorrowableItems = async () => {
   }
 
   try {
-    const response = await fetch(`${API_BASE}/api/borrowableItems`, {
+    const response = await fetch("https://backend.insta.the1s.de/api/borrowableItems", {
       method: "POST",
       headers: {
         Authorization: `Bearer ${Cookies.get("token") || ""}`,

frontend/src/utils/userHandler.ts

@@ -2,15 +2,10 @@ import { myToast } from "./toastify";
 import Cookies from "js-cookie";
 import { queryClient } from "./queryClient";
 
-const API_BASE =
-  (import.meta as any).env?.VITE_BACKEND_URL ||
-  import.meta.env.VITE_BACKEND_URL ||
-  "http://localhost:8002";
-
 export const handleDeleteLoan = async (loanID: number): Promise<boolean> => {
   try {
     const response = await fetch(
-      `${API_BASE}/api/deleteLoan/${loanID}`,
+      `https://backend.insta.the1s.de/api/deleteLoan/${loanID}`,
       {
         method: "DELETE",
         headers: {
@@ -80,14 +75,17 @@ export const rmFromRemove = (itemID: number) => {
 
 export const createLoan = async (startDate: string, endDate: string) => {
   const items = removeArr;
-  const response = await fetch(`${API_BASE}/api/createLoan`, {
+  const response = await fetch(
-    method: "POST",
+    "https://backend.insta.the1s.de/api/createLoan",
-    headers: {
+    {
-      "Content-Type": "application/json",
+      method: "POST",
-      Authorization: `Bearer ${Cookies.get("token") || ""}`,
+      headers: {
-    },
+        "Content-Type": "application/json",
-    body: JSON.stringify({ items, startDate, endDate }),
+        Authorization: `Bearer ${Cookies.get("token") || ""}`,
-  });
+      },
+      body: JSON.stringify({ items, startDate, endDate }),
+    }
+  );
 
   if (!response.ok) {
     myToast("Fehler beim Erstellen der Ausleihe", "error");
@@ -108,7 +106,7 @@ export const createLoan = async (startDate: string, endDate: string) => {
 
 export const onReturn = async (loanID: number) => {
   const response = await fetch(
-    `${API_BASE}/api/returnLoan/${loanID}`,
+    `https://backend.insta.the1s.de/api/returnLoan/${loanID}`,
     {
       method: "POST",
       headers: {
@@ -127,12 +125,15 @@ export const onReturn = async (loanID: number) => {
 };
 
 export const onTake = async (loanID: number) => {
-  const response = await fetch(`${API_BASE}/api/takeLoan/${loanID}`, {
+  const response = await fetch(
-    method: "POST",
+    `https://backend.insta.the1s.de/api/takeLoan/${loanID}`,
-    headers: {
+    {
-      Authorization: `Bearer ${Cookies.get("token") || ""}`,
+      method: "POST",
-    },
+      headers: {
-  });
+        Authorization: `Bearer ${Cookies.get("token") || ""}`,
+      },
+    }
+  );
 
   if (!response.ok) {
     myToast("Fehler beim Ausleihen der Ausleihe", "error");
@@ -144,14 +145,17 @@ export const onTake = async (loanID: number) => {
 };
 
 export const changePW = async (oldPassword: string, newPassword: string) => {
-  const response = await fetch(`${API_BASE}/api/changePassword`, {
+  const response = await fetch(
-    method: "POST",
+    "https://backend.insta.the1s.de/api/changePassword",
-    headers: {
+    {
-      "Content-Type": "application/json",
+      method: "POST",
-      Authorization: `Bearer ${Cookies.get("token") || ""}`,
+      headers: {
-    },
+        "Content-Type": "application/json",
-    body: JSON.stringify({ oldPassword, newPassword }),
+        Authorization: `Bearer ${Cookies.get("token") || ""}`,
-  });
+      },
+      body: JSON.stringify({ oldPassword, newPassword }),
+    }
+  );
 
   if (!response.ok) {
     myToast("Fehler beim Ändern des Passworts", "error");

frontend/vite.config.ts

@@ -1,15 +1,17 @@
 import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-import svgr from "vite-plugin-svgr";
 import tailwindcss from "@tailwindcss/vite";
 
 export default defineConfig({
-  plugins: [react(), svgr(), tailwindcss()],
+  plugins: [tailwindcss()],
   server: {
     host: "0.0.0.0",
-    port: 8001,
+    allowedHosts: ["insta.the1s.de"],
-    watch: {
+    port: 8101,
-      usePolling: true,
+    watch: { usePolling: true },
+    hmr: {
+      host: "insta.the1s.de",
+      port: 8101,
+      protocol: "wss",
     },
   },
 });