improved design of email

README.md

@@ -1,7 +1,73 @@
 # Borrow System
 
-**You have reached the `debian12` branch.**
+![React](https://img.shields.io/badge/React-20232A?logo=react&logoColor=61DAFB)
+![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)
 
-Here you will find the source code of exactly the application that I have hosted.
+A small full‑stack system to log in, view available items, reserve them for a time window, and manage personal loans.
 
-The main branch or the branch that I am developing on, is the `dev` branch.
+- Frontend: React + TypeScript + Vite + Tailwind CSS
+- 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/vite.config.ts

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

backend/Dockerfile

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

backend/routes/api.js

@@ -38,70 +38,99 @@ 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:8px 0 0 16px; padding:0;">${items
+      ? `<ul style="margin:4px 0 0 18px; padding:0;">${items
-          .map((i) => `<li style="margin:4px 0;">${i}</li>`)
+          .map(
+            (i) =>
+              `<li style="margin:2px 0; color:#111827; line-height:1.3;">${i}</li>`
+          )
           .join("")}</ul>`
-      : "<span>N/A</span>";
+      : "<span style='color:#111827;'>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 dark">
+  <meta name="color-scheme" content="light">
-    <meta name="supported-color-schemes" content="light dark">
+  <meta name="supported-color-schemes" content="light">
-  </head>
+  <meta name="x-apple-disable-message-reformatting">
-  <body style="margin:0; padding:0; background:#f6f9fc; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; color:#111827;">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
-    <div style="padding:24px;">
+  <style>
-      <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;">
+    :root { color-scheme: light; supported-color-schemes: light; }
-        <tr>
+    body { margin:0; padding:0; }
-          <td style="padding:20px 24px; background:${brand}; color:#ffffff;">
+    /* Mobile stacking */
-            <h1 style="margin:0; font-size:18px;">Neue Ausleihe erstellt</h1>
+    @media (max-width:480px) {
-          </td>
+      .outer { width:100% !important; }
-        </tr>
+      .pad-sm { padding:16px !important; }
-        <tr>
+      .w-label { width:120px !important; }
-          <td style="padding:20px 24px;">
+    }
-            <p style="margin:0 0 12px 0;">Es wurde eine neue Ausleihe angelegt. Hier sind die Details:</p>
+    /* Dark-mode override safety */
-            <table role="presentation" cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse;">
+    @media (prefers-color-scheme: dark) {
+      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 style="padding:8px 0; color:#6b7280; width:180px;">Benutzer</td>
+                <td class="w-label" style="padding:10px 14px; color:#6b7280; width:170px; border-bottom:1px solid #ececec;">Benutzer</td>
-                <td style="padding:8px 0; font-weight:600;">${
+                <td style="padding:10px 14px; font-weight:600; border-bottom:1px solid #ececec; color:#111827;">${
                   user || "N/A"
                 }</td>
               </tr>
               <tr>
-                <td style="padding:8px 0; color:#6b7280; vertical-align:top;">Ausgeliehene Gegenstände</td>
+                <td style="padding:10px 14px; color:#6b7280; vertical-align:top; border-bottom:1px solid #ececec;">Ausgeliehene Gegenstände</td>
-                <td style="padding:8px 0; font-weight:600;">${itemsList}</td>
+                <td style="padding:10px 14px; font-weight:600; border-bottom:1px solid #ececec; color:#111827;">${itemsList}</td>
               </tr>
               <tr>
-                <td style="padding:8px 0; color:#6b7280;">Startdatum</td>
+                <td style="padding:10px 14px; color:#6b7280; border-bottom:1px solid #ececec;">Startdatum</td>
-                <td style="padding:8px 0; font-weight:600;">${formatDateTime(
+                <td style="padding:10px 14px; font-weight:600; border-bottom:1px solid #ececec; color:#111827;">${formatDateTime(
                   startDate
                 )}</td>
               </tr>
               <tr>
-                <td style="padding:8px 0; color:#6b7280;">Enddatum</td>
+                <td style="padding:10px 14px; color:#6b7280; border-bottom:1px solid #ececec;">Enddatum</td>
-                <td style="padding:8px 0; font-weight:600;">${formatDateTime(
+                <td style="padding:10px 14px; font-weight:600; border-bottom:1px solid #ececec; color:#111827;">${formatDateTime(
                   endDate
                 )}</td>
               </tr>
               <tr>
-                <td style="padding:8px 0; color:#6b7280;">Erstellt am</td>
+                <td style="padding:10px 14px; color:#6b7280;">Erstellt am</td>
-                <td style="padding:8px 0; font-weight:600;">${formatDateTime(
+                <td style="padding:10px 14px; font-weight:600; color:#111827;">${formatDateTime(
                   createdDate
                 )}</td>
               </tr>
-            </table>
+            </tbody>
-            <p style="margin:20px 0 0 0; font-size:14px;">
+          </table>
-              <a href="https://admin.insta.the1s.de/api" style="color:${brand}; text-decoration:underline;" target="_blank" rel="noopener noreferrer">
+          <p style="margin:22px 0 0 0; font-size:14px;">
-                Zur Übersicht aller Ausleihen
+            <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">
-              </a>
+              Übersicht öffnen
-            </p>
+            </a>
-            <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>
-          </td>
+          <p style="margin:18px 0 0 0; font-size:12px; color:#6b7280; line-height:1.4;">
-        </tr>
+            Diese E-Mail wurde automatisch vom Ausleihsystem gesendet. Bitte nicht antworten.
-      </table>
+          </p>
-    </div>
+        </td>
-  </body>
+      </tr>
+    </table>
+  </div>
+</body>
 </html>`;
 }
 
@@ -196,7 +225,6 @@ 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 = 8102;
+const port = 8002;
 
 app.use(cors());
 // Increase body size limits to support large CSV JSON payloads

backend/services/database.js

@@ -8,7 +8,6 @@ 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,7 +9,6 @@ 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,45 +1,35 @@
 services:
-  borrow_system-frontend:
+  #  borrow_system-frontend:
-    container_name: borrow_system-frontend
+  #    container_name: borrow_system-frontend
-    build: ./frontend
+  #    build: ./frontend
-    ports:
+  #    ports:
-      - "8101:8101"
+  #      - "8001:8001"
-    networks:
+  #    environment:
-      - proxynet
+  #      - CHOKIDAR_USEPOLLING=true
-      - borrow_system-internal
+  #    volumes:
-    environment:
+  #      - ./frontend:/app
-      - CHOKIDAR_USEPOLLING=true
+  #      - /app/node_modules
-    volumes:
+  #    restart: unless-stopped
-      - ./frontend:/app
-      - /app/node_modules
-    restart: unless-stopped
 
-  admin-frontend:
+  #  admin-frontend:
-    container_name: admin-frontend
+  #    container_name: admin-frontend
-    build: ./admin
+  #    build: ./admin
-    networks:
+  #    ports:
-      - proxynet
+  #      - "8003:8003"
-      - borrow_system-internal
+  #    environment:
-    ports:
+  #      - CHOKIDAR_USEPOLLING=true
-      - "8103:8103"
+  #    volumes:
-    environment:
+  #      - ./admin:/app
-      - CHOKIDAR_USEPOLLING=true
+  #      - /app/node_modules
-    volumes:
+  #    restart: unless-stopped
-      - ./admin:/app
-      - /app/node_modules
-    restart: unless-stopped
 
   borrow_system-backend:
     container_name: borrow_system-backend
     build: ./backend
     ports:
-      - "8102:8102"
+      - "8002:8002"
-    networks:
-      - proxynet
-      - borrow_system-internal
     environment:
       DB_HOST: mysql
-      DB_PORT: 3306
       DB_USER: root
       DB_PASSWORD: ${DB_PASSWORD}
       DB_NAME: borrow_system
@@ -62,14 +52,6 @@ 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 8101
+EXPOSE 8001
 
 CMD ["npm", "run", "dev"]

frontend/vite.config.ts

@@ -1,17 +1,15 @@
 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: [tailwindcss()],
+  plugins: [react(), svgr(), tailwindcss()],
   server: {
     host: "0.0.0.0",
-    allowedHosts: ["insta.the1s.de"],
+    port: 8001,
-    port: 8101,
+    watch: {
-    watch: { usePolling: true },
+      usePolling: true,
-    hmr: {
-      host: "insta.the1s.de",
-      port: 8101,
-      protocol: "wss",
     },
   },
 });