edited code design

noted out public web-ui port
edited ip adresses
2026-05-09 21:46:01 +02:00 · 2026-05-09 21:45:19 +02:00 · 2026-05-09 21:43:12 +02:00 · 2026-05-09 21:38:56 +02:00 · 2026-05-09 21:30:59 +02:00 · 2026-05-09 21:27:47 +02:00
42 changed files with 2734 additions and 2552 deletions
@@ -155,9 +155,8 @@ backend/public/uploads/
 secrets/
 keys/

-# Own files
 ToDo.txt
-PayPal-QR-Code.png
+

 # only in development branch
 next-env.d.ts
@@ -1,3 +0,0 @@
-[submodule "wg-easy-ca-lose"]
-	path = wg-easy-ca-lose
-	url = https://git.the1s.de/theis.gaedigk/wg-easy-ca-lose.git
@@ -1,98 +1,164 @@
-# LuckySign
+# CA-Lose

-Ticket intake and validation app with a React frontend and an Express + MySQL backend.
+CA-Lose is a small full-stack app for collecting ticket-sale/order form entries.

-## Tech Stack
+## Tech stack

-![React](https://img.shields.io/badge/React-61DAFB?logo=react&logoColor=000&style=flat)
-![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?logo=typescript&logoColor=fff&style=flat)
-![Vite](https://img.shields.io/badge/Vite-646CFF?logo=vite&logoColor=fff&style=flat)
-![Tailwind%20CSS](https://img.shields.io/badge/Tailwind%20CSS-38B2AC?logo=tailwindcss&logoColor=fff&style=flat)
-![MUI](https://img.shields.io/badge/MUI-007FFF?logo=mui&logoColor=fff&style=flat)
-![TanStack%20Query](https://img.shields.io/badge/TanStack%20Query-FF4154?logo=reactquery&logoColor=fff&style=flat)
-![React%20Router](https://img.shields.io/badge/React%20Router-CA4245?logo=reactrouter&logoColor=fff&style=flat)
-[![TanStack%20Form](https://img.shields.io/badge/TanStack%20Form-EC5990?logo=reacthookform&logoColor=fff)](#)
-![Node.js](https://img.shields.io/badge/Node.js-339933?logo=nodedotjs&logoColor=fff&style=flat)
-![Express](https://img.shields.io/badge/Express-000000?logo=express&logoColor=fff&style=flat)
-![MySQL](https://img.shields.io/badge/MySQL-4479A1?logo=mysql&logoColor=fff&style=flat)
-![Docker](https://img.shields.io/badge/Docker-2496ED?logo=docker&logoColor=fff&style=flat)
-![Nginx](https://img.shields.io/badge/Nginx-009639?logo=nginx&logoColor=fff&style=flat)
+![React](https://img.shields.io/badge/React-20232A?logo=react&logoColor=61DAFB)
+![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?logo=typescript&logoColor=fff)
+![Vite](https://img.shields.io/badge/Vite-646CFF?logo=vite&logoColor=fff)
+![Tailwind CSS](https://img.shields.io/badge/Tailwind%20CSS-06B6D4?logo=tailwindcss&logoColor=fff)
+![MUI](https://img.shields.io/badge/MUI-007FFF?logo=mui&logoColor=fff)
+![i18next](https://img.shields.io/badge/i18next-26A69A?logo=i18next&logoColor=fff)

-### Production Tech Stack
+![Node.js](https://img.shields.io/badge/Node.js-339933?logo=node.js&logoColor=fff)
+![Express](https://img.shields.io/badge/Express-000000?logo=express&logoColor=fff)
+![MySQL](https://img.shields.io/badge/MySQL-4479A1?logo=mysql&logoColor=fff)

-> **Note** For production, check the [prod branch](https://git.the1s.de/theis.gaedigk/ca-lose/src/branch/prod/) which contains an VPN git submodule of wg-easy to run the app securely on a private network. It also contains a dnsmasq container to resolve the backend service name from the frontend container. The main branch is meant for local development and testing, so it doesn't include those components to keep things simple.
+![Docker](https://img.shields.io/badge/Docker-2496ED?logo=docker&logoColor=fff)
+![Nginx](https://img.shields.io/badge/Nginx-009639?logo=nginx&logoColor=fff)

-![dnsmasq](https://img.shields.io/badge/dnsmasq-314B5F?logo=isc&logoColor=fff&style=flat)
-![WireGuard](https://img.shields.io/badge/WireGuard-88171A?logo=wireguard&logoColor=fff&style=flat)
+## Architecture

-## Project Structure
+- **Frontend**: React + TypeScript + Vite (UI uses MUI + Tailwind, i18n via i18next)
+- **Backend**: Node.js + Express (also renders a minimal EJS page at `/`)
+- **Database**: MySQL 8

- Frontend (Vite + React + Tailwind + MUI): [frontend](frontend)
- Backend (Express): [backend](backend)
- Database schema: [backend/scheme.sql](backend/scheme.sql)
- Docker compose stack: [docker-compose.yml](docker-compose.yml)
+In production, the frontend is served by **Nginx** and proxies `/backend/*` to the backend container.

-## Quick Start (Docker)
+## Repos & folders

-1. Set the database password env var used by Docker Compose:
-
-```bash
-DB_PASSWORD=your_password
+```
+backend/   # Express API + EJS views
+frontend/  # React app (Vite) + Nginx container
+docker-compose.yml
+docker-compose.prod.yml
 ```

-2. Start MySQL and the backend:
+## API overview
+
+The backend router is mounted at `/default`:
+
+- `GET /default/users` → returns `{ users: string[] }`
+- `GET /default/confirm-user?username=<name>` → validates user and returns metadata (e.g. next id)
+- `POST /default/new-entry?username=<name>` → stores a new entry in MySQL
+
+## Configuration
+
+### Backend environment variables
+
+The backend reads configuration from environment variables (and can also load a `backend/.env` file via `dotenv`).
+
+- `PORT` (e.g. `8004`)
+- `DB_HOST` (e.g. `ca-lose-mysql` when using Docker Compose)
+- `DB_USER` (e.g. `root`)
+- `DB_PASSWORD`
+- `DB_NAME` (e.g. `ca_lose`)
+
+### Docker Compose environment
+
+Both compose files expect `DB_PASSWORD` to be present in your shell environment or a root `.env` file.
+
+Create a root `.env` (not committed) like:
+
+```env
+DB_PASSWORD=change-me
+```
+
+## Local development
+
+### Option A: Docker Compose (backend + database)
+
+This is the quickest way to get the API + MySQL running.

 ```bash
-docker compose up -d
+docker compose up --build
+```
+
+What you get:
+
+- Backend: http://localhost:8004
+- MySQL: localhost:3311 (container port 3306)
+
+Note: In `docker-compose.yml` the `frontend` service is currently commented out.
+
+### Option B: Run frontend locally (Vite) + run backend & DB
+
+1. Start DB + backend (Docker):
+
+```bash
+docker compose up --build database backend
+```
+
+2. Start frontend (local Node):
+
+```bash
+cd frontend
+npm ci
+npm run dev
+```
+
+Open the Vite dev server URL (usually http://localhost:5173).
+
+Important:
+
+- During local development (Vite), the frontend currently calls the backend via a hard-coded URL (`http://localhost:8004`).
+- When the frontend is served by the Nginx container, requests are expected to go through the Nginx proxy at `/backend/*` (see `frontend/nginx.conf`). In that setup the frontend should use `/backend/default/...` instead of `http://localhost:8004/...`.
+
+## Database setup
+
+The schema file is in `backend/scheme.sql`.
+
+- The `users` table is required for the user dropdown.
+- The backend creates an entry table dynamically per user and date when calling `GET /default/confirm-user`.
+
+Example (inside MySQL):
+
+```sql
+INSERT INTO users (username, first_name, last_name)
+VALUES ('demo', 'Demo', 'User');
+```
+
+## Production / Deployment
+
+The production compose file builds and runs:
+
+- `frontend` (Nginx)
+- `backend` (Express)
+- `database` (MySQL)
+- optional infrastructure: `dnsmasq` and `wireguard` (wg-easy)
+
+Start it:
+
+```bash
+docker compose -f docker-compose.prod.yml up -d --build
 ```

 Notes:

- The frontend service is commented out in [docker-compose.yml](docker-compose.yml). If you want the frontend container, uncomment that block and rebuild.
- The frontend container uses Nginx and proxies /backend to the backend service (see [frontend/nginx.conf](frontend/nginx.conf)).
- In order to use the database properly, run the scheme and create some users in the users table.
+- `docker-compose.prod.yml` uses an **external** network called `proxynet`. Create it if it does not exist:

-## Local Development
+  ```bash
+  docker network create proxynet
+  ```

-### Backend
+- The production file assigns static IPs; adjust the subnets/IPs if they conflict with your environment.

-1. Create a .env file in the backend folder with:
+## Lint / build

-```env
-PORT=8004
-DB_HOST=127.0.0.1
-DB_USER=root
-DB_PASSWORD=your_password
-DB_NAME=ca_lose
-```
-
-2. Install deps and run:
-
-```bash
-cd backend
-npm install
-node server.js
-```
-
-Backend listens on http://localhost:8004 and exposes routes under /default.
-
-### Frontend
+Frontend:

 ```bash
 cd frontend
-npm install
-npm run dev
+npm run lint
+npm run build
 ```

-Vite runs the app on the default dev port and talks to the backend using the API helpers in [frontend/src/utils/api](frontend/src/utils/api).
+## Troubleshooting

-## API Endpoints
+- **Backend does not start / ESM imports**: The backend code uses ESM `import` syntax. Node must treat the backend as an ESM project (commonly by adding `"type": "module"` to `backend/package.json`). Without that, the backend will fail to start (including in Docker).
+- **MySQL timezone mount**: The compose files mount `./mysql-timezone.cnf` to `/etc/mysql/conf.d/timezone.cnf`. Ensure `mysql-timezone.cnf` is a file (not a directory) with valid MySQL config, or remove/adjust the mount.

- GET /default/users
- GET /default/confirm-user?username={name}
- POST /default/new-entry?username={name}
+## License

-## Database Notes
-
- The base users table is defined in [backend/scheme.sql](backend/scheme.sql).
- Per-user ticket tables are created on demand by the backend (see [backend/routes/default/frontend.data.js](backend/routes/default/frontend.data.js)).
+Licensed under the Apache License 2.0. See [LICENSE](LICENSE).
@@ -28,9 +28,6 @@ export const confirmUser = async (username) => {
  ]);

  if (rows.length > 0) {
-    const { first_name, last_name } = rows[0];
-    const fullname = first_name + " " + last_name;
-
    // creating userTicketTable
    const d = new Date();

@@ -40,6 +37,8 @@ export const confirmUser = async (username) => {
    const date = `${day}_${month}_${year}`;
    const tableName = `${username}_${date}`;

+    console.log(tableName);
+
    const [createTable] = await pool.query(
      `CREATE TABLE IF NOT EXISTS ?? (
        id INT AUTO_INCREMENT PRIMARY KEY,
@@ -71,9 +70,9 @@ export const confirmUser = async (username) => {
        nextID = rows.length > 0 ? rows[0].id + 1 : 1;
      };
      await getNextID();
-      return { success: true, nextID, tableName, fullname };
+      return { success: true, nextID, tableName };
    } else {
-      return { success: false, message: "Table creation failed", fullname };
+      return { success: false, message: "Table creation failed" };
    }
  } else {
    return null;
@@ -11,6 +11,8 @@ router.post("/new-entry", async (req, res) => {
  if (!result.success) {
    return res.status(500).json({ message: "Form Data Invalid" });
  }
+  console.log(req.body);
+  console.log(username);
  res.sendStatus(204);
 });

@@ -1,16 +1,19 @@
 services:
-  #  frontend:
-  #    container_name: ca-lose-frontend
-  #    build: ./frontend
-  #    ports:
-  #      - "8002:80"
-  #    restart: unless-stopped
+  frontend:
+    container_name: ca-lose-frontend
+    hostname: lose-verkaufen
+    build: ./frontend
+    depends_on:
+      - backend
+    networks:
+      ca-lose-internal:
+        ipv4_address: 172.25.0.2
+    restart: unless-stopped

  backend:
    container_name: ca-lose-backend
+    hostname: backend
    build: ./backend
-    ports:
-      - "8004:8004"
    environment:
      NODE_ENV: production
      DB_HOST: ca-lose-mysql
@@ -19,21 +22,80 @@ services:
      DB_NAME: ca_lose
    depends_on:
      - database
+    networks:
+      ca-lose-internal:
+        ipv4_address: 172.25.0.3
    restart: unless-stopped

  database:
    container_name: ca-lose-mysql
+    hostname: database
    image: mysql:8.0
    restart: unless-stopped
-    ports:
-      - "3311:3306"
    environment:
      MYSQL_ROOT_PASSWORD: ${DB_PASSWORD}
      MYSQL_DATABASE: ca_lose
      TZ: Europe/Berlin
    volumes:
-      - ca-lose_mysql:/var/lib/mysql
+      - ../docker/volumes/ca-lose_mysql:/var/lib/mysql
      - ./mysql-timezone.cnf:/etc/mysql/conf.d/timezone.cnf:ro
+    networks:
+      ca-lose-internal:
+        ipv4_address: 172.25.0.4

-volumes:
-  ca-lose_mysql:
+  # DNS Server für Hostname-Auflösung innerhalb des VPN
+  dnsmasq:
+    container_name: ca-lose-dns
+    image: andyshinn/dnsmasq:latest
+    restart: unless-stopped
+    cap_add:
+      - NET_ADMIN
+    command: >
+      --no-daemon
+      --log-queries
+      --address=/lose-verkaufen/172.25.0.2
+      --address=/frontend/172.25.0.2
+      --address=/backend/172.25.0.3
+      --address=/database/172.25.0.4
+      --address=/wireguard/172.25.0.6
+    networks:
+      ca-lose-internal:
+        ipv4_address: 172.25.0.5
+
+  # WireGuard VPN mit Web-UI (wg-easy)
+  wireguard:
+    image: ghcr.io/wg-easy/wg-easy:latest
+    container_name: ca-lose-wireguard
+    cap_add:
+      - NET_ADMIN
+      - SYS_MODULE
+    environment:
+      LANG: de
+      WG_HOST: dus3.the1s.de
+      WG_PORT: "51830"
+      WG_DEFAULT_DNS: "172.25.0.5"
+      PORT: "80" # Web-UI Port
+      PASSWORD_HASH: ${WIREGUARD_PASSWORD_HASH}
+    volumes:
+      - ../docker/volumes/ca-lose-wireguard:/etc/wireguard
+      - /lib/modules:/lib/modules:ro
+    ports:
+      - "51830:51830/udp"
+    # - "51831:80/tcp" # only for short configuration access - remove in production - external: 51831 internal: 80
+    sysctls:
+      - net.ipv4.ip_forward=1
+      - net.ipv4.conf.all.src_valid_mark=1
+    restart: unless-stopped
+    depends_on:
+      - dnsmasq
+    networks:
+      ca-lose-internal:
+        ipv4_address: 172.25.0.6
+
+networks:
+  ca-lose-internal:
+    driver: bridge
+    ipam:
+      config:
+        - subnet: 172.25.0.0/24
+          gateway: 172.25.0.1
@@ -4,8 +4,8 @@ This template provides a minimal setup to get React working in Vite with HMR and

 Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

 ## React Compiler

@@ -16,6 +16,7 @@ export default defineConfig([
      reactRefresh.configs.vite,
    ],
    languageOptions: {
+      ecmaVersion: 2020,
      globals: globals.browser,
    },
  },
@@ -2,20 +2,9 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <link
-      rel="icon"
-      type="image/png"
-      href="/favicon-light.png"
-      media="(prefers-color-scheme: light)"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      href="/favicon-dark.png"
-      media="(prefers-color-scheme: dark)"
-    />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Lose Verkaufen</title>
+    <title>Lose verkaufen</title>
  </head>
  <body>
    <div id="root"></div>
@@ -12,44 +12,37 @@
  "dependencies": {
    "@emotion/react": "^11.14.0",
    "@emotion/styled": "^11.14.1",
-    "@fontsource-variable/inter": "^5.2.8",
-    "@fontsource/inter": "^5.2.8",
-    "@mui/icons-material": "^9.0.1",
-    "@mui/joy": "^5.0.0-beta.52",
-    "@mui/material": "^9.0.1",
-    "@tailwindcss/vite": "^4.3.0",
-    "@tanstack/react-form": "^1.32.0",
-    "@tanstack/react-query": "^5.100.10",
-    "i18next": "^26.0.10",
+    "@fontsource/roboto": "^5.2.9",
+    "@mui/icons-material": "^7.3.6",
+    "@mui/material": "^7.3.6",
+    "@mui/styled-engine-sc": "^7.3.6",
+    "@tailwindcss/vite": "^4.1.11",
+    "i18next": "^25.7.4",
    "js-cookie": "^3.0.5",
-    "k6": "^0.0.0",
-    "lucide-react": "^1.14.0",
-    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
-    "react-i18next": "^17.0.7",
-    "react-router-dom": "^7.15.0",
-    "tailwindcss": "^4.3.0",
-    "validator": "^13.15.35",
-    "zod": "^4.4.3"
-  },
-  "peerDependencies": {
-    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+    "lucide": "^0.562.0",
+    "lucide-react": "^0.562.0",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.0",
+    "react-i18next": "^16.5.3",
+    "react-router-dom": "^7.11.0",
+    "styled-components": "^6.1.19",
+    "tailwind-merge": "^3.3.1",
+    "tailwindcss": "^4.1.11",
+    "tailwindcss-animate": "^1.0.7"
  },
  "devDependencies": {
-    "@eslint/js": "^10.0.1",
+    "@eslint/js": "^9.39.1",
    "@types/js-cookie": "^3.0.6",
-    "@types/node": "^24.12.2",
-    "@types/react": "^19.2.14",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
    "@types/react-dom": "^19.2.3",
-    "@types/validator": "^13.15.10",
-    "@vitejs/plugin-react": "^6.0.1",
-    "eslint": "^10.2.1",
-    "eslint-plugin-react-hooks": "^7.1.1",
-    "eslint-plugin-react-refresh": "^0.5.2",
-    "globals": "^17.5.0",
-    "typescript": "~6.0.2",
-    "typescript-eslint": "^8.58.2",
-    "vite": "^8.0.10"
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.4"
  }
 }
@@ -1,48 +0,0 @@
-{
-  "fill" : {
-    "automatic-gradient" : "extended-srgb:0.00000,0.53333,1.00000,1.00000"
-  },
-  "groups" : [
-    {
-      "layers" : [
-        {
-          "blend-mode" : "normal",
-          "fill-specializations" : [
-            {
-              "value" : "automatic"
-            },
-            {
-              "appearance" : "dark",
-              "value" : {
-                "solid" : "extended-srgb:0.00000,0.53333,1.00000,1.00000"
-              }
-            }
-          ],
-          "image-name" : "Unbenannt.png",
-          "name" : "Unbenannt",
-          "position" : {
-            "scale" : 0.9,
-            "translation-in-points" : [
-              0,
-              0
-            ]
-          }
-        }
-      ],
-      "shadow" : {
-        "kind" : "neutral",
-        "opacity" : 0.5
-      },
-      "translucency" : {
-        "enabled" : true,
-        "value" : 0.5
-      }
-    }
-  ],
-  "supported-platforms" : {
-    "circles" : [
-      "watchOS"
-    ],
-    "squares" : "shared"
-  }
-}
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
@@ -1,12 +1 @@
-@import "tailwindcss";
-
-html,
-body,
-#root {
-  height: 100%;
-  margin: 0;
-}
-
-body.success-bg {
-  background: linear-gradient(135deg, #0f172a, #111827);
-}
+@import "tailwindcss";
@@ -2,21 +2,15 @@ import "./App.css";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import { MainForm } from "./pages/MainForm";
 import { SuccessPage } from "./pages/SuccessPage";
-import { PageFooter } from "./components/PageFooter";

 function App() {
  return (
-    <div className="min-h-screen flex flex-col">
-      <BrowserRouter>
-        <main className="flex-1 flex">
-          <Routes>
-            <Route path="/" element={<MainForm />} />
-            <Route path="/success" element={<SuccessPage />} />
-          </Routes>
-        </main>
-      </BrowserRouter>
-      <PageFooter />
-    </div>
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<MainForm />} />
+        <Route path="/success" element={<SuccessPage />} />
+      </Routes>
+    </BrowserRouter>
  );
 }

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
@@ -1,42 +0,0 @@
-import { Link, Sheet, Typography } from "@mui/joy";
-import { useTranslation } from "react-i18next";
-import qrCode from "../assets/Portfolio-QR-Code.png";
-
-export const PageFooter = () => {
-  const { t } = useTranslation();
-
-  return (
-    <footer className="w-full mt-auto px-3 pb-3">
-      <Sheet
-        variant="soft"
-        className="mx-auto w-full max-w-3xl rounded-2xl border border-slate-200/70 bg-white/80 backdrop-blur"
-      >
-        <div className="flex flex-col gap-2 p-2.5 sm:p-3">
-          <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-            <Typography
-              level="title-sm"
-              className="text-slate-800 tracking-wide sm:pr-4"
-            >
-              {t("footer-headline")}
-              <Link
-                href="https://portfolio-theis.de/"
-                target="_blank"
-                rel="noreferrer"
-                className="ml-2 inline-flex items-center text-slate-700 underline decoration-slate-300 underline-offset-4 hover:text-slate-900"
-              >
-                portfolio-theis.de
-              </Link>
-            </Typography>
-            <div className="flex items-center justify-center sm:justify-end sm:flex-none">
-              <img
-                src={qrCode}
-                alt="https://portfolio-theis.de/"
-                className="h-20 w-20 shrink-0 rounded-md border border-slate-200 object-contain"
-              />
-            </div>
-          </div>
-        </div>
-      </Sheet>
-    </footer>
-  );
-};
@@ -1,31 +0,0 @@
-import type { TextFieldProps } from "../config/interfaces.config";
-import { FormControl, FormLabel, Input } from "@mui/joy";
-
-export const TextField = ({
-  label,
-  type = "text",
-  required,
-  errors,
-  value,
-  onBlur,
-  onChange,
-  slotProps,
-  afterInput,
-}: TextFieldProps) => (
-  <FormControl required={required}>
-    <FormLabel>{label}</FormLabel>
-    <Input
-      value={value ?? ""}
-      onBlur={onBlur}
-      onChange={(e) => onChange(e.target.value)}
-      type={type}
-      variant="soft"
-      sx={{ borderRadius: "10px" }}
-      slotProps={slotProps}
-    />
-    {afterInput}
-    {errors[0] ? (
-      <span className="text-red-500 text-sm">{errors[0]}</span>
-    ) : null}
-  </FormControl>
-);
@@ -1,31 +0,0 @@
-import { Modal, ModalDialog, Typography, ModalClose } from "@mui/joy";
-import { useTranslation } from "react-i18next";
-import qrCode from "../../assets/PayPal-QR-Code.png";
-
-interface QRcodeModalProps {
-  QRmodal: boolean;
-  setQRmodal: (value: boolean) => void;
-}
-
-export const QRcodeModal = (props: QRcodeModalProps) => {
-  const { t } = useTranslation();
-
-  return (
-    <Modal open={props.QRmodal}>
-      <ModalDialog color="primary" layout="center" size="lg">
-        <ModalClose onClick={() => props.setQRmodal(false)} />
-        <Typography>{t("qr-text")}</Typography>
-        <img
-          src={qrCode}
-          alt="PayPal QR Code"
-          style={{
-            width: "100%",
-            height: "auto",
-            maxHeight: "70vh",
-            objectFit: "contain",
-          }}
-        />
-      </ModalDialog>
-    </Modal>
-  );
-};
@@ -1,40 +0,0 @@
-import {
-  Modal,
-  ModalDialog,
-  Typography,
-  ModalClose,
-  Autocomplete,
-} from "@mui/joy";
-import { useTranslation } from "react-i18next";
-
-interface SelectUserModalProps {
-  showSelectUser: boolean;
-  setShowSelectUser: (value: boolean) => void;
-  usernameData: { users: string[] };
-  usernameDataIsLoading: boolean;
-  selectedUser: string | null;
-  handleUserSelection: (value: string | null) => void;
-}
-
-export const SelectUserModal = (props: SelectUserModalProps) => {
-  const { t } = useTranslation();
-  return (
-    <Modal open={props.showSelectUser}>
-      <ModalDialog color="primary" layout="center" size="lg">
-        <ModalClose onClick={() => props.setShowSelectUser(false)} />
-        <Typography>{t("user")}</Typography>
-        {/* User selection */}
-        <Autocomplete
-          options={props.usernameData?.users ?? []}
-          loading={props.usernameDataIsLoading}
-          loadingText={t("loading")}
-          value={props.selectedUser}
-          onChange={(_, value) => props.handleUserSelection(value)}
-          placeholder={t("user")}
-          variant="soft"
-          sx={{ borderRadius: "10px" }}
-        />
-      </ModalDialog>
-    </Modal>
-  );
-};
@@ -1,69 +0,0 @@
-import z from "zod";
-import validator from "validator";
-import type { ReactNode } from "react";
-
-export interface FormData {
-  firstName: string;
-  lastName: string;
-  email: string;
-  phoneNumber: string;
-  tickets: number;
-  companyName: string;
-  cmpFirstName: string;
-  cpmLastName: string;
-  cpmEmail: string;
-  cpmPhoneNumber: string;
-  street: string;
-  postalCode: string;
-  paymentMethod: string;
-}
-
-export interface Message {
-  type: "primary" | "neutral" | "danger" | "success" | "warning";
-  headline: string;
-  text: string;
-}
-
-export type TextFieldProps = {
-  label: string;
-  type?: "text" | "email" | "tel" | "number";
-  required?: boolean;
-  errors: string[];
-  onBlur: () => void;
-  onChange: (value: string) => void;
-  value: string | number | null | undefined;
-  slotProps?: { input?: Record<string, unknown> };
-  afterInput?: ReactNode;
-};
-
-export const createFormSchema = (
-  t: (key: string) => string,
-  invoice: boolean,
-) =>
-  z.object({
-    firstName: z.string().min(1, t("name-error")),
-    lastName: z.string().min(1, t("name-error")),
-    email: z.email(t("email-error")),
-    phoneNumber: z.string(t("phone-error")).refine(validator.isMobilePhone),
-    tickets: z.number(t("ticket-error")).min(1),
-    companyName: invoice
-      ? z.string().min(1, t("name-error"))
-      : z.string().optional(),
-    cmpFirstName: invoice
-      ? z.string().min(1, t("name-error"))
-      : z.string().optional(),
-    cpmLastName: invoice
-      ? z.string().min(1, t("name-error"))
-      : z.string().optional(),
-    cpmEmail: invoice ? z.email(t("email-error")) : z.string().optional(),
-    cpmPhoneNumber: invoice
-      ? z.string(t("phone-error")).refine(validator.isMobilePhone)
-      : z.string().optional(),
-    street: invoice
-      ? z.string().min(1, t("name-error"))
-      : z.string().optional(),
-    postalCode: invoice
-      ? z.string().min(1, t("name-error"))
-      : z.string().optional(),
-    paymentMethod: z.string().min(1, t("name-error")),
-  });
@@ -1,12 +1 @@
-@import "tailwindcss";
-
-html,
-body,
-#root {
-  height: 100%;
-  margin: 0;
-}
-
-html {
-  font-size: large;
-}
+@import "tailwindcss";
@@ -1,16 +1,11 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import "./utils/i18n/index.ts";
 import "./index.css";
+import "./utils/i18n";
 import App from "./App.tsx";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-
-const queryClient = new QueryClient();

 createRoot(document.getElementById("root")!).render(
  <StrictMode>
-    <QueryClientProvider client={queryClient}>
-      <App />
-    </QueryClientProvider>
-  </StrictMode>,
+    <App />
+  </StrictMode>
 );
@@ -1,26 +1,24 @@
+import { Box, Paper, Typography, Chip, Button } from "@mui/material";
 import { useEffect, useState } from "react";
 import { CircleCheck } from "lucide-react";
 import { useTranslation } from "react-i18next";
-import { Sheet, Typography, Chip, Button } from "@mui/joy";

 export const SuccessPage = () => {
-  const { t } = useTranslation();
  const [orderId, setOrderId] = useState<string | null>(null);
-  const [tickets, setTickets] = useState<number>(0);
+  const [tickets, setNumberOfTickets] = useState<number>(0);
  const [animate, setAnimate] = useState(false);
+  const { t } = useTranslation();
  const [seconds, setSeconds] = useState(30);

  useEffect(() => {
    const params = new URLSearchParams(window.location.search);
-    setOrderId(params.get("id"));
-    setTickets(parseInt(params.get("tickets") ?? "0", 10));
-    // Small delay so the CSS transition actually plays
-    setTimeout(() => setAnimate(true), 100);
+    const id = params.get("id");
+    const numberOfTickets = params.get("tickets");

-    document.body.classList.add("success-bg");
-    return () => {
-      document.body.classList.remove("success-bg");
-    };
+    setOrderId(id);
+    setNumberOfTickets(numberOfTickets ? parseInt(numberOfTickets, 10) : 0);
+
+    setTimeout(() => setAnimate(true), 100);
  }, []);

  useEffect(() => {
@@ -28,153 +26,185 @@ export const SuccessPage = () => {
      window.location.href = "/";
      return;
    }
-    const timer = setTimeout(() => setSeconds((s) => s - 1), 1000);
+
+    const timer = setTimeout(() => setSeconds(seconds - 1), 1000);
+
    return () => clearTimeout(timer);
  }, [seconds]);

-  // Returns a style object that slides the element up + fades it in.
-  // Each section gets a slightly later delay for a staggered entrance.
-  const fadeUp = (delay: string): React.CSSProperties => ({
-    transition: `opacity 0.5s ease-in-out ${delay}, transform 0.5s ease-in-out ${delay}`,
-    transform: animate ? "translateY(0)" : "translateY(20px)",
-    opacity: animate ? 1 : 0,
-  });
-
  return (
-    <div className="flex-1 w-full flex items-center justify-center p-4">
-      <Sheet
-        variant="plain"
+    <Box className="min-h-screen bg-gray-800 flex items-center justify-center p-4">
+      <Paper
+        elevation={3}
+        className="w-full max-w-md p-8 rounded-lg"
        sx={{
-          position: "relative",
-          width: "100%",
-          maxWidth: 440,
-          borderRadius: "24px",
-          p: { xs: "2rem", sm: "2.5rem" },
-          boxShadow: "0 24px 64px -12px rgba(0,0,0,0.4)",
-          background: "#fff",
+          backgroundColor: "#fff",
          textAlign: "center",
+          position: "relative",
          overflow: "hidden",
        }}
      >
-        {/* Green accent bar at the top */}
-        <div
-          style={{
-            position: "absolute",
-            top: 0,
-            left: 0,
-            right: 0,
-            height: "4px",
-            background: "linear-gradient(90deg, #22c55e, #86efac)",
-            transition: "transform 0.8s ease-in-out 0.6s",
-            transform: animate ? "scaleX(1)" : "scaleX(0)",
-            transformOrigin: "left",
-          }}
-        />
-
-        {/* Animated success icon */}
-        <div
-          style={{
+        {/* Animated Success Icon */}
+        <Box
+          sx={{
            display: "flex",
            justifyContent: "center",
-            marginBottom: "1.5rem",
+            mb: 3,
            transition: "all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1)",
            transform: animate ? "scale(1)" : "scale(0)",
            opacity: animate ? 1 : 0,
          }}
        >
-          <CircleCheck size={80} color="#22c55e" strokeWidth={2.5} />
-        </div>
+          <CircleCheck size={80} className="text-green-500" strokeWidth={2.5} />
+        </Box>

-        {/* Headline */}
-        <div style={fadeUp("0.2s")}>
-          <Typography
-            level="h3"
-            sx={{ fontWeight: 700, color: "#15803d", mb: 1 }}
-          >
-            {t("form-submitted-successfully")}
-          </Typography>
-        </div>
+        {/* Success Message */}
+        <Typography
+          variant="h4"
+          component="h1"
+          gutterBottom
+          sx={{
+            fontWeight: "bold",
+            color: "#2e7d32",
+            mb: 2,
+            transition: "all 0.5s ease-in-out 0.2s",
+            transform: animate ? "translateY(0)" : "translateY(20px)",
+            opacity: animate ? 1 : 0,
+          }}
+        >
+          {t("form-submitted-successfully")}
+        </Typography>

-        {/* Subtitle */}
-        <div style={fadeUp("0.3s")}>
-          <Typography level="body-md" sx={{ color: "#6b7280", mb: 3 }}>
-            {t("ticket-payment", { count: tickets })}
-          </Typography>
-        </div>
+        <Typography
+          variant="body1"
+          sx={{
+            color: "#666",
+            mb: 3,
+            transition: "all 0.5s ease-in-out 0.3s",
+            transform: animate ? "translateY(0)" : "translateY(20px)",
+            opacity: animate ? 1 : 0,
+          }}
+        >
+          {t("ticket-payment", { count: tickets })}
+        </Typography>

-        {/* Tickets chip */}
+        {/* Tickets Display */}
        {tickets > 0 && (
-          <div style={fadeUp("0.35s")} className="flex justify-center mb-3">
+          <Box
+            sx={{
+              mb: 2,
+              transition: "all 0.5s ease-in-out 0.35s",
+              transform: animate ? "translateY(0)" : "translateY(20px)",
+              opacity: animate ? 1 : 0,
+            }}
+          >
            <Chip
-              size="lg"
-              variant="soft"
-              color="success"
-              sx={{ fontWeight: 700, fontSize: "1rem", px: 2, py: 1 }}
-            >
-              {tickets} {tickets === 1 ? t("ticket") : t("tickets")}
-            </Chip>
-          </div>
+              label={`${tickets} ${tickets === 1 ? t("ticket") : t("tickets")}`}
+              color="secondary"
+              sx={{
+                fontWeight: "bold",
+                fontSize: "1rem",
+                py: 2.5,
+                px: 2,
+              }}
+            />
+          </Box>
        )}

-        {/* Order ID chip */}
+        {/* Order ID Display */}
        {orderId && (
-          <div
-            style={fadeUp("0.4s")}
-            className="flex flex-col items-center gap-1 mb-4"
+          <Box
+            sx={{
+              mb: 3,
+              transition: "all 0.5s ease-in-out 0.4s",
+              transform: animate ? "translateY(0)" : "translateY(20px)",
+              opacity: animate ? 1 : 0,
+            }}
          >
            <Typography
-              level="body-xs"
+              variant="body2"
              sx={{
-                color: "#9ca3af",
-                textTransform: "uppercase",
-                letterSpacing: "0.08em",
+                color: "#888",
+                mb: 1,
+                fontSize: "0.875rem",
              }}
            >
              {t("entry-id")}
            </Typography>
            <Chip
-              size="lg"
-              variant="solid"
+              label={`#${orderId}`}
              color="primary"
-              sx={{ fontWeight: 700, fontSize: "1.25rem", px: 3, py: 1.5 }}
-            >
-              #{orderId}
-            </Chip>
-          </div>
+              sx={{
+                fontWeight: "bold",
+                fontSize: "1.25rem",
+                py: 3,
+                px: 2,
+              }}
+            />
+          </Box>
        )}

-        {/* Return button with countdown */}
-        <div style={fadeUp("0.45s")} className="mb-4">
+        {/* Return button */}
+        <Box
+          sx={{
+            mb: 3,
+            transition: "all 0.5s ease-in-out 0.4s",
+            transform: animate ? "translateY(0)" : "translateY(20px)",
+            opacity: animate ? 1 : 0,
+          }}
+        >
          <Button
-            component="a"
            href="/"
-            size="lg"
+            variant="contained"
            color="primary"
-            variant="solid"
-            fullWidth
            sx={{
-              borderRadius: "12px",
-              fontWeight: 700,
-              background: "linear-gradient(135deg, #2563eb, #1d4ed8)",
-              "&:hover": {
-                background: "linear-gradient(135deg, #1d4ed8, #1e40af)",
-              },
+              fontWeight: "bold",
+              fontSize: "1.25rem",
+              py: 3,
+              px: 2,
            }}
          >
-            {seconds}s &mdash; {t("return-to-homepage")}
+            {seconds + " " + t("return-to-homepage")}
          </Button>
-        </div>
+        </Box>

-        {/* Thank-you note */}
-        <div style={fadeUp("0.5s")} className="pt-4 border-t border-slate-100">
+        {/* Additional Info */}
+        <Box
+          sx={{
+            mt: 4,
+            pt: 3,
+            borderTop: "1px solid #e0e0e0",
+            transition: "all 0.5s ease-in-out 0.5s",
+            transform: animate ? "translateY(0)" : "translateY(20px)",
+            opacity: animate ? 1 : 0,
+          }}
+        >
          <Typography
-            level="body-sm"
-            sx={{ color: "#9ca3af", lineHeight: 1.6 }}
+            variant="body2"
+            sx={{
+              color: "#666",
+              lineHeight: 1.6,
+            }}
          >
            {t("thank-you")}
          </Typography>
-        </div>
-      </Sheet>
-    </div>
+        </Box>
+
+        {/* Decorative Elements */}
+        <Box
+          sx={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            height: "4px",
+            background: "linear-gradient(90deg, #4caf50 0%, #81c784 100%)",
+            transition: "all 0.8s ease-in-out 0.6s",
+            transform: animate ? "scaleX(1)" : "scaleX(0)",
+            transformOrigin: "left",
+          }}
+        />
+      </Paper>
+    </Box>
  );
 };
@@ -1,29 +0,0 @@
-import { API_BASE } from "../../config/api.config";
-import type { FormData } from "../../config/interfaces.config";
-
-export const submitFormData = async (
-  data: FormData,
-  username: string | null,
-) => {
-  console.warn("submitFormData is fetching!");
-
-  // await new Promise((resolve) => setTimeout(resolve, 3000)); // Wait 3 seconds
-
-  const response = await fetch(
-    `${API_BASE}/default/new-entry?username=${username}`,
-    {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(data),
-    },
-  );
-
-  if (!response.ok) {
-    const error = await response.text();
-    throw new Error(error || "Form submission failed");
-  }
-
-  return;
-};
@@ -1,25 +0,0 @@
-import { API_BASE } from "../../config/api.config";
-import Cookies from "js-cookie";
-
-export const fetchUsers = async () => {
-  console.warn("fetchUsers is fetching!");
-
-  const response = await fetch(`${API_BASE}/default/users`);
-  const data = await response.json();
-
-  return data;
-};
-
-export const confirmUser = async (username: string | null) => {
-  if (!username) {
-    return;
-  }
-
-  console.warn("confirmUser is fetching!");
-  const response = await fetch(
-    `${API_BASE}/default/confirm-user?username=${username}`,
-  );
-  const data = await response.json();
-  Cookies.set("selectedUser", username);
-  return data;
-};
@@ -4,7 +4,6 @@
    "phone-number": "Telefonnummer",
    "tickets": "Lose",
    "invoice": "Rechnung",
-    "invoice-details": "Rechnungsdetails",
    "company-name": "Firmenname",
    "street": "Straße + Haus Nr.",
    "postal-code": "Plz + Stadt",
@@ -14,7 +13,7 @@
    "user": "Benutzer",
    "next-id": "Nächste Eintragsnummer: ",
    "form-submitted-successfully": "Formular erfolgreich übermittelt!",
-    "form-submission-failed": "Formularübermittlung fehlgeschlagen.",
+    "orm-submission-failed": "Formularübermittlung fehlgeschlagen.",
    "success": "Erfolg",
    "error": "Fehler",
    "cash": "Bar",
@@ -25,14 +24,5 @@
    "entry-id": "Eintrags-ID",
    "thank-you": "Vielen Dank für Ihre Unterstützung der Claudius Akademie! Wir wünschen Ihnen viel Glück mit dem Los.",
    "select-payment-method": "Zahlungsmethode auswählen",
-    "return-to-homepage": "Zurück",
-    "qr-text": "PayPal QR-Code der Claudius Akademie",
-    "loading": "Lädt...",
-    "greeting": "Hallo,",
-    "set-username-headline": "Keinen Benutzer ausgewählt",
-    "set-username-text": "Um mit dem Losverkauf zu beginnen, musst du einen Benutzer oben links auswählen.",
-    "name-error": "Sie müssen einen Namen eingeben!",
-    "email-error": "Sie müssen eine gültige E-Mail Adresse eingeben!",
-    "phone-error": "Sie müssen eine gültige Telefonnummer eingeben!",
-    "footer-headline": "Dieses System wurde vollständig konzipiert und entwickelt von Theis Gaedigk. - Portfolio: "
+    "return-to-homepage": "Zurück"
 }
@@ -3,7 +3,6 @@
    "last-name": "Last Name",
    "phone-number": "Phone Number",
    "invoice": "Invoice",
-    "invoice-details": "Invoice Details",
    "company-name": "Company Name",
    "street": "Street + House No.",
    "postal-code": "Postal Code + City",
@@ -26,14 +25,5 @@
    "entry-id": "Entry ID",
    "thank-you": "Thank you for supporting the Claudius Akademie! We wish you the best of luck with your ticket.",
    "select-payment-method": "Select Payment Method",
-    "return-to-homepage": "Return",
-    "qr-text": "PayPal QR-Code from the Claudius Akademie",
-    "loading": "Loading...",
-    "greeting": "Hello,",
-    "set-username-headline": "No user selected",
-    "set-username-text": "To start the ticket sale, you must select a user first from the top left.",
-    "name-error": "You have to enter a name!",
-    "email-error": "You have to enter a valid E-Mail adress!",
-    "phone-error": "You have to enter a vaild phone number!",
-    "footer-headline": "This system was fully designed and developed by Theis Gaedigk. - Portfolio: "
+    "return-to-homepage": "Return"
 }
@@ -0,0 +1,42 @@
+import { API_BASE } from "../config/api.config";
+
+interface FormData {
+  firstName: string;
+  lastName: string;
+  email: string;
+  phoneNumber: string;
+  tickets: number;
+  companyName: string;
+  cmpFirstName: string;
+  cpmLastName: string;
+  cpmEmail: string;
+  cpmPhoneNumber: string;
+  street: string;
+  postalCode: string;
+  paymentMethod: string;
+}
+
+export const submitFormData = async (data: FormData, username: string) => {
+  console.log(data);
+  try {
+    const response = await fetch(
+      `${API_BASE}/default/new-entry?username=${username}`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(data),
+      },
+    );
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      return { success: false, error: `Server error: ${errorText}` };
+    }
+
+    return { success: true };
+  } catch (error) {
+    return { success: false, error: (error as Error).message };
+  }
+};
@@ -1,16 +0,0 @@
-import i18n from "./i18n";
-import Cookies from "js-cookie";
-
-export const changeTranslation = () => {
-  const clientLng = i18n.language;
-
-  if (clientLng === "en") {
-    i18n.changeLanguage("de");
-    Cookies.set("language", "de");
-  } else if (clientLng === "de") {
-    i18n.changeLanguage("en");
-    Cookies.set("language", "en");
-  } else {
-    alert("Cannot change language.");
-  }
-};
@@ -0,0 +1,11 @@
+module.exports = {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,jsx,ts,tsx}",
+    // add other paths if needed
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
@@ -1,13 +0,0 @@
-import http from "k6/http";
-import { sleep } from "k6";
-
-export const options = {
-  vus: 100, // amount of users
-  duration: "60s", // duration of the test
-};
-
-export default function () {
-  http.get("http://localhost:8004/default/confirm-user?username=TheisGaedigk");
-  http.get("http://localhost:8004/default/users");
-  sleep(1);
-}
@@ -1,15 +0,0 @@
-// Before running: Establish VPN connection first
-
-import http from "k6/http";
-import { sleep } from "k6";
-
-export const options = {
-  vus: 100, // amount of users
-  duration: "60s", // duration of the test
-};
-
-export default function () {
-  http.get("http://backend:8004/default/confirm-user?username=TheisGaedigk");
-  http.get("http://backend:8004/default/users");
-  sleep(0.5);
-}
@@ -1,9 +1,10 @@
 {
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "target": "es2023",
-    "lib": ["ES2023", "DOM"],
-    "module": "esnext",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
    "types": ["vite/client"],
    "skipLibCheck": true,

@@ -16,10 +17,12 @@
    "jsx": "react-jsx",

    /* Linting */
+    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
  },
  "include": ["src"]
 }
@@ -1,9 +1,9 @@
 {
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-    "target": "es2023",
+    "target": "ES2023",
    "lib": ["ES2023"],
-    "module": "esnext",
+    "module": "ESNext",
    "types": ["node"],
    "skipLibCheck": true,

@@ -15,10 +15,12 @@
    "noEmit": true,

    /* Linting */
+    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
  },
  "include": ["vite.config.ts"]
 }
@@ -1,6 +1,7 @@
-import { defineConfig } from "vite";
-import tailwindcss from "@tailwindcss/vite";
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'

+// https://vite.dev/config/
 export default defineConfig({
-  plugins: [tailwindcss()],
-});
+  plugins: [react()],
+})
Author	SHA1	Message	Date
theis.gaedigk	cf2df0aaac	edited code design	2026-05-09 21:46:01 +02:00
theis.gaedigk	1199d6468f	noted out public web-ui port	2026-05-09 21:45:19 +02:00
theis.gaedigk	7cd958c31e	edited ip adresses	2026-05-09 21:43:12 +02:00
theis.gaedigk	f89cf84a38	edited docker config	2026-05-09 21:38:56 +02:00
theis.gaedigk	e3fc1d8659	edited again	2026-05-09 21:30:59 +02:00
theis.gaedigk	060f8d01c6	edited again	2026-05-09 21:27:47 +02:00
theis.gaedigk	667609d70c	fixed docker config	2026-05-09 21:24:42 +02:00
theis.gaedigk	b05f19acd9	edited docker compose	2026-05-09 21:22:28 +02:00
theis.gaedigk	2aa9a968f5	Merge branch 'dev' into prod	2026-05-04 22:40:33 +02:00
theis.gaedigk	e42a2f510a	edited docker compose	2026-05-04 22:05:18 +02:00
theis.gaedigk	d2b22fc71f	Merge branch 'dev' into prod	2026-05-04 22:04:26 +02:00
theis.gaedigk	471c0c7a49	Merge branch 'dev' into prod	2026-01-21 16:33:03 +01:00
theis.gaedigk	75ff65e76b	Merge branch 'dev' into prod	2026-01-21 16:28:23 +01:00
theis.gaedigk	7cf1245ef6	Merge branch 'dev' into prod	2026-01-21 14:27:37 +01:00
theis.gaedigk	2adbfa75a5	Merge branch 'dev' into prod	2026-01-21 14:07:26 +01:00
theis.gaedigk	216a1cb1d4	Merge branch 'dev' into prod	2026-01-20 20:43:59 +01:00
theis.gaedigk	7fc98d6c9f	Merge branch 'dev' into prod	2026-01-20 20:34:52 +01:00
theis.gaedigk	e346cf9445	e	2026-01-20 20:33:41 +01:00
theis.gaedigk	c030b6dbe6	Merge branch 'dev' into prod	2026-01-20 20:33:31 +01:00
theis.gaedigk	6f26b9bbc3	e	2026-01-20 20:22:59 +01:00
theis.gaedigk	a34a70572f	edited	2026-01-20 20:19:12 +01:00
theis.gaedigk	4b3c8a2424	edited compose file	2026-01-20 20:17:53 +01:00
theis.gaedigk	568b3bf495	edited	2026-01-20 20:08:14 +01:00
theis.gaedigk	5653d32857	fix: update WireGuard PASSWORD_HASH to a static value	2026-01-20 20:06:44 +01:00
theis.gaedigk	7cf5b8df48	Merge branch 'dev' into prod	2026-01-20 20:03:51 +01:00
theis.gaedigk	65c5fc0f8f	Merge branch 'dev' into prod	2026-01-20 19:59:27 +01:00
theis.gaedigk	b626a67907	Merge branch 'dev' into prod	2026-01-20 19:46:56 +01:00
theis.gaedigk	6643a176a6	Merge branch 'dev' into prod	2026-01-20 19:43:53 +01:00
theis.gaedigk	89803754a7	Merge branch 'dev' into prod	2026-01-20 19:38:27 +01:00
theis.gaedigk	5052b3e83a	changed fetch urls	2026-01-20 19:23:53 +01:00
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>