2. Zwischenstand

This reverts commit 6c3c318f86.

README.md

@@ -1,109 +1,439 @@
+# FEDEO Hosting Guide
 
+Diese Anleitung beschreibt ein produktionsnahes Self-Hosting von FEDEO mit Docker Compose, Traefik, PostgreSQL und optionalem S3-kompatiblem Objektspeicher via MinIO.
 
+## Architektur
 
-# Docker Compose Setup
+Der Stack besteht aus:
 
-## ENV Vars
+- `frontend`: Nuxt-Frontend auf Port `3000`
+- `backend`: Node/Fastify-API auf Port `3100`
+- `db`: PostgreSQL
+- `traefik`: Reverse Proxy mit automatischen Let's-Encrypt-Zertifikaten
+- optional `minio`: S3-kompatibler Objektspeicher fur Dateiuploads
 
-- DOMAIN
-- PDF_LICENSE
-- DB_PASS
-- DB_USER
-- CONTACT_EMAIL
+Die Konfiguration erfolgt uber Umgebungsvariablen beziehungsweise eine `.env`-Datei im Deploy-Verzeichnis.
 
-## Docker Compose File
-~~~
+## Voraussetzungen
+
+Vor dem Deployment sollten folgende Punkte erfullt sein:
+
+- Ein Linux-Server oder VPS mit offentlichen Ports `80` und `443`
+- Docker Engine inkl. Compose Plugin
+- Eine Domain, die auf den Server zeigt, z. B. `app.example.com`
+- Optional: SMTP-Zugang fur E-Mails
+- Optional: S3-Bucket oder MinIO fur Dateispeicher
+
+Empfohlen:
+
+- mindestens 2 vCPU
+- mindestens 4 GB RAM
+- SSD-Speicher fur PostgreSQL und Dateiuploads
+
+## DNS und Netzwerk
+
+Lege mindestens einen A- oder AAAA-Record an:
+
+- `app.example.com -> <SERVER-IP>`
+
+Traefik terminiert TLS direkt im Compose-Stack. Es ist kein zusatzlicher Reverse Proxy davor erforderlich.
+
+## Benotigte Backend-Umgebungsvariablen
+
+Das Backend erwartet mindestens diese Umgebungsvariablen:
+
+- `COOKIE_SECRET`
+- `JWT_SECRET`
+- `PORT`
+- `HOST`
+- `DATABASE_URL`
+- `S3_BUCKET`
+- `ENCRYPTION_KEY`
+- `MAILER_SMTP_HOST`
+- `MAILER_SMTP_PORT`
+- `MAILER_SMTP_SSL`
+- `MAILER_SMTP_USER`
+- `MAILER_SMTP_PASS`
+- `MAILER_FROM`
+- `S3_ENDPOINT`
+- `S3_REGION`
+- `S3_ACCESS_KEY`
+- `S3_SECRET_KEY`
+- `M2M_API_KEY`
+- `API_BASE_URL`
+- `GOCARDLESS_BASE_URL`
+- `GOCARDLESS_SECRET_ID`
+- `GOCARDLESS_SECRET_KEY`
+- `DOKUBOX_IMAP_HOST`
+- `DOKUBOX_IMAP_PORT`
+- `DOKUBOX_IMAP_SECURE`
+- `DOKUBOX_IMAP_USER`
+- `DOKUBOX_IMAP_PASSWORD`
+- `OPENAI_API_KEY`
+- `STIRLING_API_KEY`
+
+Minimal wichtige Werte fur den ersten Start:
+
+- `HOST=0.0.0.0`
+- `PORT=3100`
+- `DATABASE_URL=postgres://fedeo:<starkes-passwort>@db:5432/fedeo`
+- `API_BASE_URL=https://app.example.com/backend`
+
+Wenn du MinIO verwendest, setze zusatzlich:
+
+- `S3_ENDPOINT=http://minio:9000`
+- `S3_REGION=eu-central-1`
+- `S3_ACCESS_KEY=<MINIO_ROOT_USER>`
+- `S3_SECRET_KEY=<MINIO_ROOT_PASSWORD>`
+- `S3_BUCKET=fedeo`
+
+## Deploy-Struktur
+
+Deploye den Stack direkt aus einem geklonten Checkout dieses Repositories, weil die Compose-Datei die lokalen Build-Kontexte `./frontend` und `./backend` verwendet.
+
+Beispiel:
+
+```bash
+git clone <DEIN-REPO-URL> /opt/fedeo
+cd /opt/fedeo
+```
+
+Die Verzeichnisstruktur sollte dann mindestens so aussehen:
+
+```text
+/opt/fedeo/
+  docker-compose.yml
+  .env
+  backend/
+  frontend/
+  traefik/
+    letsencrypt/
+    logs/
+  postgres/
+  minio/
+```
+
+Danach:
+
+```bash
+mkdir -p /opt/fedeo/traefik/letsencrypt
+mkdir -p /opt/fedeo/traefik/logs
+mkdir -p /opt/fedeo/postgres
+mkdir -p /opt/fedeo/minio
+touch /opt/fedeo/traefik/letsencrypt/acme.json
+chmod 600 /opt/fedeo/traefik/letsencrypt/acme.json
+```
+
+## Beispiel `.env`
+
+Diese Datei liegt neben der `docker-compose.yml`:
+
+```env
+DOMAIN=app.example.com
+CONTACT_EMAIL=admin@example.com
+
+DB_NAME=fedeo
+DB_USER=fedeo
+DB_PASSWORD=change-this-db-password
+DATABASE_URL=postgres://fedeo:change-this-db-password@db:5432/fedeo
+
+MINIO_ROOT_USER=fedeo-minio
+MINIO_ROOT_PASSWORD=change-this-minio-password
+MINIO_BUCKET=fedeo
+
+HOST=0.0.0.0
+PORT=3100
+COOKIE_SECRET=change-this-cookie-secret
+JWT_SECRET=change-this-jwt-secret
+ENCRYPTION_KEY=change-this-encryption-key
+
+MAILER_SMTP_HOST=smtp.example.com
+MAILER_SMTP_PORT=587
+MAILER_SMTP_SSL=false
+MAILER_SMTP_USER=mailer@example.com
+MAILER_SMTP_PASS=change-this-mail-password
+MAILER_FROM=FEDEO <no-reply@example.com>
+
+S3_ENDPOINT=http://minio:9000
+S3_REGION=eu-central-1
+S3_ACCESS_KEY=fedeo-minio
+S3_SECRET_KEY=change-this-minio-password
+S3_BUCKET=fedeo
+
+M2M_API_KEY=change-this-m2m-key
+API_BASE_URL=https://app.example.com/backend
+GOCARDLESS_BASE_URL=https://api.gocardless.com
+GOCARDLESS_SECRET_ID=replace-this
+GOCARDLESS_SECRET_KEY=replace-this
+
+DOKUBOX_IMAP_HOST=imap.example.com
+DOKUBOX_IMAP_PORT=993
+DOKUBOX_IMAP_SECURE=true
+DOKUBOX_IMAP_USER=dokubox@example.com
+DOKUBOX_IMAP_PASSWORD=change-this-imap-password
+
+OPENAI_API_KEY=replace-this
+STIRLING_API_KEY=replace-this
+
+NUXT_PUBLIC_PDF_LICENSE=replace-with-your-pdf-license
+```
+
+## Vollstandiges Docker Compose mit optionaler S3-MinIO-Option
+
+Hinweis: Der Stack unten startet MinIO standardmassig mit. Wenn du stattdessen AWS S3, Hetzner Object Storage, Backblaze B2 S3 oder einen anderen externen S3-Dienst nutzen willst, kannst du die Services `minio` und `createbuckets` entfernen und nur die entsprechenden S3-Umgebungsvariablen auf den externen Anbieter zeigen lassen.
+
+```yaml
 services:
-    frontend:
-        image: git.federspiel.tech/flfeders/fedeo/frontend:main
-        restart: always
-        environment:
-            - NUXT_PUBLIC_API_BASE=https://${DOMAIN}/backend
-            - NUXT_PUBLIC_PDF_LICENSE=${PDF_LICENSE}
-        networks:
-            - traefik
-        labels:
-            - "traefik.enable=true"
-            - "traefik.docker.network=traefik"
-            - "traefik.port=3000"
-            # Middlewares
-            - "traefik.http.middlewares.fedeo-frontend-redirect-web-secure.redirectscheme.scheme=https"
-            # Web Entrypoint
-            - "traefik.http.routers.fedeo-frontend.middlewares=fedeo-frontend-redirect-web-secure"
-            - "traefik.http.routers.fedeo-frontend.rule=Host(`${DOMAIN}`) && PathPrefix(`/`)"
-            - "traefik.http.routers.fedeo-frontend.entrypoints=web"
-            # Web Secure Entrypoint
-            - "traefik.http.routers.fedeo-frontend-secure.rule=Host(`${DOMAIN}`) && PathPrefix(`/`)"
-            - "traefik.http.routers.fedeo-frontend-secure.entrypoints=web-secured" #
-            - "traefik.http.routers.fedeo-frontend-secure.tls.certresolver=mytlschallenge"
-    backend:
-        image: git.federspiel.tech/flfeders/fedeo/backend:main
-        restart: always
-        environment:
-            - INFISICAL_CLIENT_ID=
-            - INFISICAL_CLIENT_SECRET=
-            - NODE_ENV=production
-        networks:
-            - traefik
-        labels:
-            - "traefik.enable=true"
-            - "traefik.docker.network=traefik"
-            - "traefik.port=3100"
-            # Middlewares
-            - "traefik.http.middlewares.fedeo-backend-redirect-web-secure.redirectscheme.scheme=https"
-            - "traefik.http.middlewares.fedeo-backend-strip.stripprefix.prefixes=/backend"
-            # Web Entrypoint
-            - "traefik.http.routers.fedeo-backend.middlewares=fedeo-backend-redirect-web-secure"
-            - "traefik.http.routers.fedeo-backend.rule=Host(`${DOMAIN}`) && PathPrefix(`/backend`)"
-            - "traefik.http.routers.fedeo-backend.entrypoints=web"
-            # Web Secure Entrypoint
-            - "traefik.http.routers.fedeo-backend-secure.rule=Host(`${DOMAIN}`) && PathPrefix(`/backend`)"
-            - "traefik.http.routers.fedeo-backend-secure.entrypoints=web-secured" #
-            - "traefik.http.routers.fedeo-backend-secure.tls.certresolver=mytlschallenge"
-            - "traefik.http.routers.fedeo-backend-secure.middlewares=fedeo-backend-strip"
-    #  db:
-    #    image: postgres
-    #    restart: always
-    #    shm_size: 128mb
-    #    environment:
-    #      POSTGRES_PASSWORD: 
-    #      POSTGRES_USER: 
-    #      POSTGRES_DB: 
-    #    volumes:
-    #      - ./pg-data:/var/lib/postgresql/data
-    #    ports:
-    #      - "5432:5432"
-    traefik:
-        image: traefik:v2.11
-        restart: unless-stopped
-        container_name: traefik
-        command:
-            - "--api.insecure=false"
-            - "--api.dashboard=false"
-            - "--api.debug=false"
-            - "--providers.docker=true"
-            - "--providers.docker.exposedbydefault=false"
-            - "--providers.docker.network=traefik"
-            - "--entrypoints.web.address=:80"
-            - "--entrypoints.web-secured.address=:443"
-            - "--accesslog=true"
-            - "--accesslog.filepath=/logs/access.log"
-            - "--accesslog.bufferingsize=5000"
-            - "--accesslog.fields.defaultMode=keep"
-            - "--accesslog.fields.headers.defaultMode=keep"
-            - "--certificatesresolvers.mytlschallenge.acme.tlschallenge=true" #
-            - "--certificatesresolvers.mytlschallenge.acme.email=${CONTACT_EMAIL}"
-            - "--certificatesresolvers.mytlschallenge.acme.storage=/letsencrypt/acme.json"
-        ports:
-            - 80:80
-            - 443:443
-        volumes:
-            - "./traefik/letsencrypt:/letsencrypt" # <== Volume for certs (TLS)
-            - "/var/run/docker.sock:/var/run/docker.sock:ro"
-            - "./traefik/logs:/logs"
-        networks:
-            - traefik
+  traefik:
+    image: traefik:v2.11
+    container_name: fedeo-traefik
+    restart: unless-stopped
+    command:
+      - --api.insecure=false
+      - --api.dashboard=false
+      - --providers.docker=true
+      - --providers.docker.exposedbydefault=false
+      - --entrypoints.web.address=:80
+      - --entrypoints.websecure.address=:443
+      - --entrypoints.web.http.redirections.entrypoint.to=websecure
+      - --entrypoints.web.http.redirections.entrypoint.scheme=https
+      - --certificatesresolvers.letsencrypt.acme.tlschallenge=true
+      - --certificatesresolvers.letsencrypt.acme.email=${CONTACT_EMAIL}
+      - --certificatesresolvers.letsencrypt.acme.storage=/letsencrypt/acme.json
+      - --accesslog=true
+      - --accesslog.filepath=/logs/access.log
+    ports:
+      - "80:80"
+      - "443:443"
+    volumes:
+      - ./traefik/letsencrypt:/letsencrypt
+      - ./traefik/logs:/logs
+      - /var/run/docker.sock:/var/run/docker.sock:ro
+    networks:
+      - web
+
+  db:
+    image: postgres:16
+    container_name: fedeo-db
+    restart: unless-stopped
+    environment:
+      POSTGRES_DB: ${DB_NAME}
+      POSTGRES_USER: ${DB_USER}
+      POSTGRES_PASSWORD: ${DB_PASSWORD}
+    volumes:
+      - ./postgres:/var/lib/postgresql/data
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U ${DB_USER} -d ${DB_NAME}"]
+      interval: 10s
+      timeout: 5s
+      retries: 10
+    networks:
+      - internal
+
+  minio:
+    image: minio/minio:latest
+    container_name: fedeo-minio
+    restart: unless-stopped
+    command: server /data --console-address ":9001"
+    environment:
+      MINIO_ROOT_USER: ${MINIO_ROOT_USER}
+      MINIO_ROOT_PASSWORD: ${MINIO_ROOT_PASSWORD}
+    volumes:
+      - ./minio:/data
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:9000/minio/health/live"]
+      interval: 10s
+      timeout: 5s
+      retries: 10
+    networks:
+      - internal
+
+  createbuckets:
+    image: minio/mc:latest
+    container_name: fedeo-minio-init
+    depends_on:
+      minio:
+        condition: service_healthy
+    entrypoint: >
+      /bin/sh -c "
+      mc alias set local http://minio:9000 ${MINIO_ROOT_USER} ${MINIO_ROOT_PASSWORD};
+      mc mb --ignore-existing local/${MINIO_BUCKET};
+      mc anonymous set private local/${MINIO_BUCKET};
+      exit 0;
+      "
+    restart: "no"
+    networks:
+      - internal
+
+  backend:
+    build:
+      context: ./backend
+    container_name: fedeo-backend
+    restart: unless-stopped
+    depends_on:
+      db:
+        condition: service_healthy
+      minio:
+        condition: service_healthy
+      createbuckets:
+        condition: service_completed_successfully
+    environment:
+      NODE_ENV: production
+      HOST: ${HOST}
+      PORT: ${PORT}
+      COOKIE_SECRET: ${COOKIE_SECRET}
+      JWT_SECRET: ${JWT_SECRET}
+      ENCRYPTION_KEY: ${ENCRYPTION_KEY}
+      DATABASE_URL: ${DATABASE_URL}
+      MAILER_SMTP_HOST: ${MAILER_SMTP_HOST}
+      MAILER_SMTP_PORT: ${MAILER_SMTP_PORT}
+      MAILER_SMTP_SSL: ${MAILER_SMTP_SSL}
+      MAILER_SMTP_USER: ${MAILER_SMTP_USER}
+      MAILER_SMTP_PASS: ${MAILER_SMTP_PASS}
+      MAILER_FROM: ${MAILER_FROM}
+      S3_ENDPOINT: ${S3_ENDPOINT}
+      S3_REGION: ${S3_REGION}
+      S3_ACCESS_KEY: ${S3_ACCESS_KEY}
+      S3_SECRET_KEY: ${S3_SECRET_KEY}
+      S3_BUCKET: ${S3_BUCKET}
+      M2M_API_KEY: ${M2M_API_KEY}
+      API_BASE_URL: ${API_BASE_URL}
+      GOCARDLESS_BASE_URL: ${GOCARDLESS_BASE_URL}
+      GOCARDLESS_SECRET_ID: ${GOCARDLESS_SECRET_ID}
+      GOCARDLESS_SECRET_KEY: ${GOCARDLESS_SECRET_KEY}
+      DOKUBOX_IMAP_HOST: ${DOKUBOX_IMAP_HOST}
+      DOKUBOX_IMAP_PORT: ${DOKUBOX_IMAP_PORT}
+      DOKUBOX_IMAP_SECURE: ${DOKUBOX_IMAP_SECURE}
+      DOKUBOX_IMAP_USER: ${DOKUBOX_IMAP_USER}
+      DOKUBOX_IMAP_PASSWORD: ${DOKUBOX_IMAP_PASSWORD}
+      OPENAI_API_KEY: ${OPENAI_API_KEY}
+      STIRLING_API_KEY: ${STIRLING_API_KEY}
+    labels:
+      - traefik.enable=true
+      - traefik.http.routers.fedeo-backend.rule=Host(`${DOMAIN}`) && PathPrefix(`/backend`)
+      - traefik.http.routers.fedeo-backend.entrypoints=websecure
+      - traefik.http.routers.fedeo-backend.tls.certresolver=letsencrypt
+      - traefik.http.middlewares.fedeo-backend-strip.stripprefix.prefixes=/backend
+      - traefik.http.routers.fedeo-backend.middlewares=fedeo-backend-strip
+      - traefik.http.services.fedeo-backend.loadbalancer.server.port=3100
+    networks:
+      - web
+      - internal
+
+  frontend:
+    build:
+      context: ./frontend
+    container_name: fedeo-frontend
+    restart: unless-stopped
+    depends_on:
+      - backend
+    environment:
+      NODE_ENV: production
+      NUXT_PUBLIC_API_BASE: https://${DOMAIN}/backend
+      NUXT_PUBLIC_PDF_LICENSE: ${NUXT_PUBLIC_PDF_LICENSE}
+    labels:
+      - traefik.enable=true
+      - traefik.http.routers.fedeo-frontend.rule=Host(`${DOMAIN}`)
+      - traefik.http.routers.fedeo-frontend.entrypoints=websecure
+      - traefik.http.routers.fedeo-frontend.tls.certresolver=letsencrypt
+      - traefik.http.services.fedeo-frontend.loadbalancer.server.port=3000
+    networks:
+      - web
+
 networks:
-    traefik:
-        external: false
-~~~
+  web:
+    driver: bridge
+  internal:
+    driver: bridge
+```
+
+## Externe S3-Provider statt MinIO
+
+Wenn du keinen lokalen MinIO-Container betreiben willst:
+
+1. Entferne die Services `minio` und `createbuckets` aus der Compose-Datei.
+2. Entferne im Backend `depends_on` fur `minio` und `createbuckets`.
+3. Trage in `.env` die Zugangsdaten des externen S3-Dienstes ein.
+
+Beispiel fur die relevanten Werte:
+
+```env
+S3_ENDPOINT=https://s3.eu-central-1.amazonaws.com
+S3_REGION=eu-central-1
+S3_ACCESS_KEY=...
+S3_SECRET_KEY=...
+S3_BUCKET=fedeo
+```
+
+Hinweis: Das Backend nutzt `forcePathStyle: true`. Das funktioniert sauber mit MinIO und vielen S3-kompatiblen Providern. Bei reinem AWS S3 kann je nach Endpoint-Setup ein abweichendes Verhalten sinnvoll sein. Falls du AWS S3 einsetzen willst, sollte die S3-Initialisierung im Backend gegen den konkreten Zielprovider getestet werden.
+
+## Start des Stacks
+
+Im Deploy-Verzeichnis:
+
+```bash
+docker compose build
+docker compose up -d
+```
+
+Danach Status prufen:
+
+```bash
+docker compose ps
+docker compose logs -f traefik
+docker compose logs -f backend
+```
+
+## Funktionsprufung
+
+Nach dem ersten Start sollten mindestens diese Checks erfolgreich sein:
+
+```bash
+curl -I https://app.example.com
+curl https://app.example.com/backend/health
+```
+
+Erwartung:
+
+- Frontend liefert `200` oder `302`
+- Backend liefert JSON wie `{"status":"ok"}`
+
+## Updates
+
+Bei neuen Versionen:
+
+```bash
+git pull
+docker compose build
+docker compose up -d
+```
+
+Falls du statt lokaler Builds vorgebaute Images verwenden willst, kannst du in der Compose-Datei `build:` durch passende `image:`-Eintrage ersetzen. Erst dann ist ein vorgelagertes `docker compose pull` sinnvoll.
+
+## Backup-Empfehlung
+
+Regelmassig sichern:
+
+- `./postgres`
+- `./minio` falls MinIO lokal genutzt wird
+- `./traefik/letsencrypt/acme.json`
+- deine `.env`
+- deine dokumentierten Secret-Werte aus der `.env` oder deinem Secret-Management
+
+## Bekannte Betriebsbesonderheiten
+
+- Das Backend startet nur sauber, wenn alle Pflichtvariablen gesetzt sind.
+- Ohne korrekt gesetzte S3-Secrets funktionieren Dateiuploads und dateibasierte Funktionen nicht.
+- Fur die Frontend-PDF-Funktion wird eine gueltige `NUXT_PUBLIC_PDF_LICENSE` benotigt.
+- PostgreSQL ist im Projekt vorgesehen; andere SQL-Datenbanken sind in dieser Compose-Datei nicht berucksichtigt.
+
+## Optional: Nur mit bestehender externer Infrastruktur
+
+Wenn bereits vorhanden:
+
+- externer Reverse Proxy
+- externer PostgreSQL-Server
+- externer S3-Speicher
+- externe Zertifikatsverwaltung
+
+dann konnen `traefik`, `db` und `minio` aus dem Stack entfernt werden. In diesem Fall mussen die zugehorigen Hostnamen und Zugangsdaten in der `.env` beziehungsweise im Frontend-Environment auf die externe Infrastruktur zeigen.

backend/db/migrations/0021_admin_user_flag.sql

@@ -0,0 +1,2 @@
+ALTER TABLE "auth_users"
+ADD COLUMN "is_admin" boolean NOT NULL DEFAULT false;

backend/db/migrations/0022_task_dependencies.sql

@@ -0,0 +1,2 @@
+ALTER TABLE "tasks"
+ADD COLUMN "dependency_ids" jsonb NOT NULL DEFAULT '[]'::jsonb;

backend/db/migrations/0023_tax_evaluation_period.sql

@@ -0,0 +1,2 @@
+ALTER TABLE "tenants"
+ADD COLUMN "taxEvaluationPeriod" text DEFAULT 'monthly' NOT NULL;

backend/db/migrations/meta/_journal.json

@@ -141,6 +141,27 @@
       "when": 1773572400000,
       "tag": "0020_file_extracted_text",
       "breakpoints": true
+    },
+    {
+      "idx": 20,
+      "version": "7",
+      "when": 1773835200000,
+      "tag": "0021_admin_user_flag",
+      "breakpoints": true
+    },
+    {
+      "idx": 21,
+      "version": "7",
+      "when": 1773925200000,
+      "tag": "0022_task_dependencies",
+      "breakpoints": true
+    },
+    {
+      "idx": 22,
+      "version": "7",
+      "when": 1774080000000,
+      "tag": "0023_tax_evaluation_period",
+      "breakpoints": true
     }
   ]
 }

backend/db/schema/auth_users.ts

@@ -12,6 +12,7 @@ export const authUsers = pgTable("auth_users", {
 
     multiTenant: boolean("multi_tenant").notNull().default(true),
     must_change_password: boolean("must_change_password").notNull().default(false),
+    is_admin: boolean("is_admin").notNull().default(false),
 
     updatedAt: timestamp("updated_at", { withTimezone: true }),
 

backend/db/schema/tenants.ts

@@ -161,6 +161,10 @@ export const tenants = pgTable(
             .notNull()
             .default(14),
 
+        taxEvaluationPeriod: text("taxEvaluationPeriod")
+            .notNull()
+            .default("monthly"),
+
         dokuboxEmailAddresses: jsonb("dokuboxEmailAddresses").default([]),
 
         dokuboxkey: uuid("dokuboxkey").notNull().defaultRandom(),

backend/src/modules/cron/dokuboximport.service.ts

@@ -27,6 +27,10 @@ export function syncDokuboxService (server: FastifyInstance)  {
     let client: ImapFlow | null = null
 
     async function initDokuboxClient() {
+        if (client?.usable) {
+            return client
+        }
+
         client = new ImapFlow({
             host: secrets.DOKUBOX_IMAP_HOST,
             port: secrets.DOKUBOX_IMAP_PORT,
@@ -41,6 +45,7 @@ export function syncDokuboxService (server: FastifyInstance)  {
         console.log("Dokubox E-Mail Client Initialized")
 
         await client.connect()
+        return client
     }
 
     const syncDokubox = async () => {
@@ -92,7 +97,8 @@ export function syncDokuboxService (server: FastifyInstance)  {
                         if (!badMessageMessageSent) {
                             badMessageMessageSent = true
                         }
-                        return
+                        server.log.warn({ messageId: message.id, subject: message.subject }, "Dokubox message could not be mapped to a tenant")
+                        continue
                     }
 
                     if (message.attachments.length > 0) {
@@ -248,7 +254,6 @@ export function syncDokuboxService (server: FastifyInstance)  {
 
     return {
         run: async () => {
-            await initDokuboxClient()
             await syncDokubox()
             console.log("Service: Dokubox sync finished")
         }

backend/src/modules/cron/prepareIncomingInvoices.ts

@@ -12,6 +12,18 @@ import {
 
 import { eq, and, isNull, not } from "drizzle-orm"
 
+const formatInvoiceItemDescription = (item: any) => {
+    const parts = [
+        typeof item.description === "string" ? item.description.trim() : "",
+        item.quantity !== null && item.quantity !== undefined
+            ? [item.quantity, item.unit].filter(Boolean).join(" ")
+            : (typeof item.unit === "string" ? item.unit.trim() : ""),
+        typeof item.total === "number" ? `${item.total.toFixed(2)} EUR` : "",
+    ].filter(Boolean)
+
+    return parts.join(" - ")
+}
+
 export function prepareIncomingInvoices(server: FastifyInstance) {
     const processInvoices = async (tenantId:number) => {
         console.log("▶ Starting Incoming Invoice Preparation")
@@ -137,7 +149,8 @@ export function prepareIncomingInvoices(server: FastifyInstance) {
                 if (data.reference) description += `Referenz: ${data.reference}\n`
                 if (data.invoice_items) {
                     for (const item of data.invoice_items) {
-                        description += `${item.description} - ${item.quantity} ${item.unit} - ${item.total}\n`
+                        const line = formatInvoiceItemDescription(item)
+                        if (line) description += `${line}\n`
                     }
                 }
                 itemInfo.description = description.trim()

backend/src/modules/serialexecution.service.ts

@@ -1,6 +1,5 @@
 import dayjs from "dayjs";
 import quarterOfYear from "dayjs/plugin/quarterOfYear";
-import Handlebars from "handlebars";
 import axios from "axios";
 import { eq, inArray, and } from "drizzle-orm"; // Drizzle Operatoren
 
@@ -10,6 +9,7 @@ import { saveFile } from "../utils/files";
 import {FastifyInstance} from "fastify";
 import {useNextNumberRangeNumber} from "../utils/functions";
 import {createInvoicePDF} from "../utils/pdf"; // Achtung: Muss Node.js Buffer unterstützen!
+import { documentTemplateHandlebars } from "../utils/handlebars";
 
 dayjs.extend(quarterOfYear);
 
@@ -609,8 +609,8 @@ export function getDocumentDataBackend(
         };
     };
 
-    const templateStartText = Handlebars.compile(itemInfo.startText || "");
-    const templateEndText = Handlebars.compile(itemInfo.endText || "");
+    const templateStartText = documentTemplateHandlebars.compile(itemInfo.startText || "");
+    const templateEndText = documentTemplateHandlebars.compile(itemInfo.endText || "");
 
     // --- 6. Title Sums Formatting ---
     let returnTitleSums: Record<string, string> = {};

backend/src/plugins/auth.ts

@@ -6,6 +6,7 @@ import { secrets } from "../utils/secrets"
 import {
     authUserRoles,
     authRolePermissions,
+    authUsers,
 } from "../../db/schema"
 
 import { eq, and } from "drizzle-orm"
@@ -43,6 +44,16 @@ export default fp(async (server: FastifyInstance) => {
             // Payload an Request hängen
             req.user = payload
 
+            const [currentUser] = await server.db
+                .select({
+                    is_admin: authUsers.is_admin,
+                })
+                .from(authUsers)
+                .where(eq(authUsers.id, payload.user_id))
+                .limit(1)
+
+            req.user.is_admin = Boolean(currentUser?.is_admin)
+
             // Multi-Tenant Modus ohne ausgewählten Tenant → keine Rollenprüfung
             if (!req.user.tenant_id) {
                 return
@@ -66,6 +77,13 @@ export default fp(async (server: FastifyInstance) => {
                 .limit(1)
 
             if (roleRows.length === 0) {
+                if (req.user.is_admin) {
+                    req.role = ""
+                    req.permissions = []
+                    req.hasPermission = () => false
+                    return
+                }
+
                 return reply
                     .code(403)
                     .send({ error: "No role assigned for this tenant" })
@@ -107,6 +125,7 @@ declare module "fastify" {
             user_id: string
             email: string
             tenant_id: number | null
+            is_admin?: boolean
         }
         role: string
         permissions: string[]

backend/src/routes/admin.ts

@@ -1,19 +1,761 @@
-import { FastifyInstance } from "fastify";
-import { eq } from "drizzle-orm";
+import { FastifyInstance, FastifyReply, FastifyRequest } from "fastify";
+import { and, eq, inArray, isNull } from "drizzle-orm";
 
 import {
     authTenantUsers,
+    authProfiles,
+    authRoles,
+    authUserRoles,
     authUsers,
+    filetags,
+    folders,
     tenants,
 } from "../../db/schema";
+import { generateRandomPassword, hashPassword } from "../utils/password";
 
 export default async function adminRoutes(server: FastifyInstance) {
+    const deriveNameFromEmail = (email: string) => {
+        const localPart = email.split("@")[0] || "Benutzer";
+        const normalized = localPart.replace(/[._-]+/g, " ").trim();
+        const parts = normalized.split(/\s+/).filter(Boolean);
+        const firstName = parts[0]
+            ? parts[0].charAt(0).toUpperCase() + parts[0].slice(1)
+            : "Neuer";
+        const lastName = parts.length > 1
+            ? parts.slice(1).map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join(" ")
+            : "Benutzer";
+
+        return { first_name: firstName, last_name: lastName };
+    };
+
+    const createTenantSeeds = async (tenantId: number, createdBy: string) => {
+        const currentYear = new Date().getFullYear();
+        const timestamp = new Date();
+
+        const insertedTags = await server.db
+            .insert(filetags)
+            .values([
+                {
+                    tenant: tenantId,
+                    name: "Rechnungen",
+                    color: "#16a34a",
+                    createdDocumentType: "invoices",
+                },
+                {
+                    tenant: tenantId,
+                    name: "Angebote",
+                    color: "#2563eb",
+                    createdDocumentType: "quotes",
+                },
+                {
+                    tenant: tenantId,
+                    name: "Auftragsbestätigungen",
+                    color: "#7c3aed",
+                    createdDocumentType: "confirmationOrders",
+                },
+                {
+                    tenant: tenantId,
+                    name: "Lieferscheine",
+                    color: "#ea580c",
+                    createdDocumentType: "deliveryNotes",
+                },
+                {
+                    tenant: tenantId,
+                    name: "Eingangsrechnungen",
+                    color: "#dc2626",
+                    incomingDocumentType: "invoices",
+                },
+                {
+                    tenant: tenantId,
+                    name: "Mahnungen",
+                    color: "#b91c1c",
+                    incomingDocumentType: "reminders",
+                },
+            ])
+            .returning({
+                id: filetags.id,
+                name: filetags.name,
+                createdDocumentType: filetags.createdDocumentType,
+                incomingDocumentType: filetags.incomingDocumentType,
+            });
+
+        const invoiceTag = insertedTags.find((tag) => tag.createdDocumentType === "invoices");
+        const quoteTag = insertedTags.find((tag) => tag.createdDocumentType === "quotes");
+        const confirmationTag = insertedTags.find((tag) => tag.createdDocumentType === "confirmationOrders");
+        const deliveryTag = insertedTags.find((tag) => tag.createdDocumentType === "deliveryNotes");
+        const incomingInvoiceTag = insertedTags.find((tag) => tag.incomingDocumentType === "invoices");
+
+        const insertedFolders = await server.db
+            .insert(folders)
+            .values([
+                {
+                    tenant: tenantId,
+                    name: "Ausgangsrechnungen",
+                    function: "yearSubCategory",
+                    icon: "i-heroicons-document-text",
+                    isSystemUsed: true,
+                    updatedAt: timestamp,
+                    updatedBy: createdBy,
+                },
+                {
+                    tenant: tenantId,
+                    name: "Angebote",
+                    function: "yearSubCategory",
+                    icon: "i-heroicons-document-duplicate",
+                    isSystemUsed: true,
+                    updatedAt: timestamp,
+                    updatedBy: createdBy,
+                },
+                {
+                    tenant: tenantId,
+                    name: "Auftragsbestätigungen",
+                    function: "yearSubCategory",
+                    icon: "i-heroicons-clipboard-document-check",
+                    isSystemUsed: true,
+                    updatedAt: timestamp,
+                    updatedBy: createdBy,
+                },
+                {
+                    tenant: tenantId,
+                    name: "Lieferscheine",
+                    function: "yearSubCategory",
+                    icon: "i-heroicons-truck",
+                    isSystemUsed: true,
+                    updatedAt: timestamp,
+                    updatedBy: createdBy,
+                },
+                {
+                    tenant: tenantId,
+                    name: "Eingangsrechnungen",
+                    function: "yearSubCategory",
+                    icon: "i-heroicons-inbox-arrow-down",
+                    isSystemUsed: true,
+                    updatedAt: timestamp,
+                    updatedBy: createdBy,
+                },
+                {
+                    tenant: tenantId,
+                    name: "Belege Bankeinzahlung",
+                    function: "yearSubCategory",
+                    icon: "i-heroicons-banknotes",
+                    isSystemUsed: true,
+                    updatedAt: timestamp,
+                    updatedBy: createdBy,
+                },
+            ])
+            .returning({
+                id: folders.id,
+                name: folders.name,
+            });
+
+        const folderByName = new Map(insertedFolders.map((folder) => [folder.name, folder.id]));
+
+        await server.db
+            .insert(folders)
+            .values([
+                {
+                    tenant: tenantId,
+                    name: String(currentYear),
+                    parent: folderByName.get("Ausgangsrechnungen"),
+                    function: "invoices",
+                    year: currentYear,
+                    icon: "i-heroicons-document-text",
+                    standardFiletype: invoiceTag?.id,
+                    standardFiletypeIsOptional: false,
+                    isSystemUsed: true,
+                    updatedAt: timestamp,
+                    updatedBy: createdBy,
+                },
+                {
+                    tenant: tenantId,
+                    name: String(currentYear),
+                    parent: folderByName.get("Angebote"),
+                    function: "quotes",
+                    year: currentYear,
+                    icon: "i-heroicons-document-duplicate",
+                    standardFiletype: quoteTag?.id,
+                    standardFiletypeIsOptional: false,
+                    isSystemUsed: true,
+                    updatedAt: timestamp,
+                    updatedBy: createdBy,
+                },
+                {
+                    tenant: tenantId,
+                    name: String(currentYear),
+                    parent: folderByName.get("Auftragsbestätigungen"),
+                    function: "confirmationOrders",
+                    year: currentYear,
+                    icon: "i-heroicons-clipboard-document-check",
+                    standardFiletype: confirmationTag?.id,
+                    standardFiletypeIsOptional: false,
+                    isSystemUsed: true,
+                    updatedAt: timestamp,
+                    updatedBy: createdBy,
+                },
+                {
+                    tenant: tenantId,
+                    name: String(currentYear),
+                    parent: folderByName.get("Lieferscheine"),
+                    function: "deliveryNotes",
+                    year: currentYear,
+                    icon: "i-heroicons-truck",
+                    standardFiletype: deliveryTag?.id,
+                    standardFiletypeIsOptional: false,
+                    isSystemUsed: true,
+                    updatedAt: timestamp,
+                    updatedBy: createdBy,
+                },
+                {
+                    tenant: tenantId,
+                    name: String(currentYear),
+                    parent: folderByName.get("Eingangsrechnungen"),
+                    function: "incomingInvoices",
+                    year: currentYear,
+                    icon: "i-heroicons-inbox-arrow-down",
+                    standardFiletype: incomingInvoiceTag?.id,
+                    standardFiletypeIsOptional: false,
+                    isSystemUsed: true,
+                    updatedAt: timestamp,
+                    updatedBy: createdBy,
+                },
+                {
+                    tenant: tenantId,
+                    name: String(currentYear),
+                    parent: folderByName.get("Belege Bankeinzahlung"),
+                    function: "deposit",
+                    year: currentYear,
+                    icon: "i-heroicons-banknotes",
+                    isSystemUsed: true,
+                    updatedAt: timestamp,
+                    updatedBy: createdBy,
+                },
+            ]);
+    };
+
+    const requireAdmin = async (req: FastifyRequest, reply: FastifyReply) => {
+        if (!req.user?.user_id) {
+            reply.code(401).send({ error: "Unauthorized" });
+            return null;
+        }
+
+        const [currentUser] = await server.db
+            .select({
+                id: authUsers.id,
+                is_admin: authUsers.is_admin,
+            })
+            .from(authUsers)
+            .where(eq(authUsers.id, req.user.user_id))
+            .limit(1);
+
+        if (!currentUser?.is_admin) {
+            reply.code(403).send({ error: "Admin access required" });
+            return null;
+        }
+
+        return currentUser;
+    };
+
+    // -------------------------------------------------------------
+    // GET /admin/overview
+    // -------------------------------------------------------------
+    server.get("/admin/overview", async (req, reply) => {
+        try {
+            const currentUser = await requireAdmin(req, reply);
+            if (!currentUser) return;
+
+            const [tenantRows, userRows, profileRows, membershipRows, roleRows, roleAssignmentRows] = await Promise.all([
+                server.db
+                    .select({
+                        id: tenants.id,
+                        name: tenants.name,
+                        short: tenants.short,
+                        createdAt: tenants.createdAt,
+                        locked: tenants.locked,
+                    })
+                    .from(tenants),
+                server.db
+                    .select({
+                        id: authUsers.id,
+                        email: authUsers.email,
+                        created_at: authUsers.created_at,
+                        multiTenant: authUsers.multiTenant,
+                        must_change_password: authUsers.must_change_password,
+                        is_admin: authUsers.is_admin,
+                    })
+                    .from(authUsers),
+                server.db
+                    .select({
+                        id: authProfiles.id,
+                        user_id: authProfiles.user_id,
+                        tenant_id: authProfiles.tenant_id,
+                        first_name: authProfiles.first_name,
+                        last_name: authProfiles.last_name,
+                        full_name: authProfiles.full_name,
+                        email: authProfiles.email,
+                        active: authProfiles.active,
+                    })
+                    .from(authProfiles),
+                server.db
+                    .select()
+                    .from(authTenantUsers),
+                server.db
+                    .select({
+                        id: authRoles.id,
+                        name: authRoles.name,
+                        description: authRoles.description,
+                        tenant_id: authRoles.tenant_id,
+                    })
+                    .from(authRoles),
+                server.db
+                    .select({
+                        user_id: authUserRoles.user_id,
+                        role_id: authUserRoles.role_id,
+                        tenant_id: authUserRoles.tenant_id,
+                    })
+                    .from(authUserRoles),
+            ]);
+
+            const users = userRows.map((user) => {
+                const profiles = profileRows.filter((profile) => profile.user_id === user.id);
+                const memberships = membershipRows.filter((membership) => membership.user_id === user.id);
+                const roleAssignments = roleAssignmentRows.filter((assignment) => assignment.user_id === user.id);
+                const preferredProfile = profiles.find((profile) => profile.active) || profiles[0];
+                const fallbackName = deriveNameFromEmail(user.email);
+
+                return {
+                    ...user,
+                    display_name: preferredProfile?.full_name || user.email,
+                    profile_defaults: {
+                        first_name: preferredProfile?.first_name || fallbackName.first_name,
+                        last_name: preferredProfile?.last_name || fallbackName.last_name,
+                    },
+                    profiles,
+                    tenant_ids: memberships.map((membership) => membership.tenant_id),
+                    role_assignments: roleAssignments,
+                };
+            });
+
+            const tenantsWithCounts = tenantRows.map((tenant) => ({
+                ...tenant,
+                user_count: membershipRows.filter((membership) => membership.tenant_id === tenant.id).length,
+            }));
+
+            return {
+                users,
+                tenants: tenantsWithCounts,
+                roles: roleRows,
+                unassignedProfiles: profileRows.filter((profile) => !profile.user_id),
+                memberships: membershipRows,
+                roleAssignments: roleAssignmentRows,
+            };
+        } catch (err) {
+            console.error("ERROR /admin/overview:", err);
+            return reply.code(500).send({ error: "Internal Server Error" });
+        }
+    });
+
+    // -------------------------------------------------------------
+    // POST /admin/users
+    // -------------------------------------------------------------
+    server.post("/admin/users", async (req, reply) => {
+        try {
+            const currentUser = await requireAdmin(req, reply);
+            if (!currentUser) return;
+
+            const body = req.body as {
+                email?: string;
+                password?: string;
+                is_admin?: boolean;
+                multiTenant?: boolean;
+                first_name?: string;
+                last_name?: string;
+            };
+
+            const email = body.email?.trim().toLowerCase();
+            if (!email) {
+                return reply.code(400).send({ error: "email required" });
+            }
+
+            const existingUsers = await server.db
+                .select({ id: authUsers.id })
+                .from(authUsers)
+                .where(eq(authUsers.email, email))
+                .limit(1);
+
+            if (existingUsers.length) {
+                return reply.code(409).send({ error: "User with this email already exists" });
+            }
+
+            const initialPassword = body.password?.trim() || generateRandomPassword(14);
+            const passwordHash = await hashPassword(initialPassword);
+
+            const [createdUser] = await server.db
+                .insert(authUsers)
+                .values({
+                    email,
+                    passwordHash,
+                    is_admin: Boolean(body.is_admin),
+                    multiTenant: typeof body.multiTenant === "boolean" ? body.multiTenant : true,
+                    must_change_password: true,
+                    updatedAt: new Date(),
+                })
+                .returning({
+                    id: authUsers.id,
+                    email: authUsers.email,
+                    created_at: authUsers.created_at,
+                    multiTenant: authUsers.multiTenant,
+                    must_change_password: authUsers.must_change_password,
+                    is_admin: authUsers.is_admin,
+                });
+
+            return {
+                user: createdUser,
+                initialPassword,
+                profile_defaults: {
+                    first_name: body.first_name?.trim() || deriveNameFromEmail(email).first_name,
+                    last_name: body.last_name?.trim() || deriveNameFromEmail(email).last_name,
+                },
+            };
+        } catch (err) {
+            console.error("ERROR /admin/users:", err);
+            return reply.code(500).send({ error: "Internal Server Error" });
+        }
+    });
+
+    // -------------------------------------------------------------
+    // POST /admin/tenants
+    // -------------------------------------------------------------
+    server.post("/admin/tenants", async (req, reply) => {
+        try {
+            const currentUser = await requireAdmin(req, reply);
+            if (!currentUser) return;
+
+            const body = req.body as {
+                name?: string;
+                short?: string;
+            };
+
+            const name = body.name?.trim();
+            const short = body.short?.trim();
+
+            if (!name || !short) {
+                return reply.code(400).send({ error: "name and short required" });
+            }
+
+            const [createdTenant] = await server.db
+                .insert(tenants)
+                .values({
+                    name,
+                    short,
+                    updatedAt: new Date(),
+                    updatedBy: currentUser.id,
+                })
+                .returning({
+                    id: tenants.id,
+                    name: tenants.name,
+                    short: tenants.short,
+                    createdAt: tenants.createdAt,
+                    locked: tenants.locked,
+                });
+
+            await createTenantSeeds(createdTenant.id, currentUser.id);
+
+            return { tenant: createdTenant };
+        } catch (err) {
+            console.error("ERROR /admin/tenants:", err);
+            return reply.code(500).send({ error: "Internal Server Error" });
+        }
+    });
+
+    // -------------------------------------------------------------
+    // PUT /admin/users/:user_id
+    // -------------------------------------------------------------
+    server.put("/admin/users/:user_id", async (req, reply) => {
+        try {
+            const currentUser = await requireAdmin(req, reply);
+            if (!currentUser) return;
+
+            const { user_id } = req.params as { user_id: string };
+            const body = req.body as {
+                email?: string;
+                multiTenant?: boolean;
+                must_change_password?: boolean;
+                is_admin?: boolean;
+            };
+
+            const updateData: Record<string, any> = {
+                updatedAt: new Date(),
+            };
+
+            if (typeof body.email === "string") updateData.email = body.email.trim().toLowerCase();
+            if (typeof body.multiTenant === "boolean") updateData.multiTenant = body.multiTenant;
+            if (typeof body.must_change_password === "boolean") updateData.must_change_password = body.must_change_password;
+            if (typeof body.is_admin === "boolean") updateData.is_admin = body.is_admin;
+
+            const [updatedUser] = await server.db
+                .update(authUsers)
+                .set(updateData)
+                .where(eq(authUsers.id, user_id))
+                .returning({
+                    id: authUsers.id,
+                    email: authUsers.email,
+                    created_at: authUsers.created_at,
+                    multiTenant: authUsers.multiTenant,
+                    must_change_password: authUsers.must_change_password,
+                    is_admin: authUsers.is_admin,
+                });
+
+            if (!updatedUser) {
+                return reply.code(404).send({ error: "User not found" });
+            }
+
+            return { user: updatedUser };
+        } catch (err) {
+            console.error("ERROR /admin/users/:user_id:", err);
+            return reply.code(500).send({ error: "Internal Server Error" });
+        }
+    });
+
+    // -------------------------------------------------------------
+    // PUT /admin/tenants/:tenant_id
+    // -------------------------------------------------------------
+    server.put("/admin/tenants/:tenant_id", async (req, reply) => {
+        try {
+            const currentUser = await requireAdmin(req, reply);
+            if (!currentUser) return;
+
+            const { tenant_id } = req.params as { tenant_id: string };
+            const body = req.body as {
+                name?: string;
+                short?: string;
+            };
+
+            const updateData: Record<string, any> = {
+                updatedAt: new Date(),
+                updatedBy: currentUser.id,
+            };
+
+            if (typeof body.name === "string") updateData.name = body.name.trim();
+            if (typeof body.short === "string") updateData.short = body.short.trim();
+
+            const [updatedTenant] = await server.db
+                .update(tenants)
+                .set(updateData)
+                .where(eq(tenants.id, Number(tenant_id)))
+                .returning({
+                    id: tenants.id,
+                    name: tenants.name,
+                    short: tenants.short,
+                    createdAt: tenants.createdAt,
+                    locked: tenants.locked,
+                });
+
+            if (!updatedTenant) {
+                return reply.code(404).send({ error: "Tenant not found" });
+            }
+
+            return { tenant: updatedTenant };
+        } catch (err) {
+            console.error("ERROR /admin/tenants/:tenant_id:", err);
+            return reply.code(500).send({ error: "Internal Server Error" });
+        }
+    });
+
+    // -------------------------------------------------------------
+    // PUT /admin/users/:user_id/access
+    // -------------------------------------------------------------
+    server.put("/admin/users/:user_id/access", async (req, reply) => {
+        try {
+            const currentUser = await requireAdmin(req, reply);
+            if (!currentUser) return;
+
+            const { user_id } = req.params as { user_id: string };
+            const body = req.body as {
+                tenant_ids?: number[];
+                role_assignments?: { tenant_id: number; role_id: string }[];
+                profile_defaults?: { first_name?: string; last_name?: string };
+                profile_assignments?: { tenant_id: number; profile_id?: string | null }[];
+            };
+
+            const tenantIds = Array.from(new Set((body.tenant_ids || []).map((tenantId) => Number(tenantId)).filter(Boolean)));
+            const requestedAssignments = (body.role_assignments || [])
+                .map((assignment) => ({
+                    tenant_id: Number(assignment.tenant_id),
+                    role_id: assignment.role_id,
+                }))
+                .filter((assignment) => assignment.tenant_id && assignment.role_id && tenantIds.includes(assignment.tenant_id));
+
+            const [targetUser] = await server.db
+                .select({ id: authUsers.id, email: authUsers.email })
+                .from(authUsers)
+                .where(eq(authUsers.id, user_id))
+                .limit(1);
+
+            if (!targetUser) {
+                return reply.code(404).send({ error: "User not found" });
+            }
+
+            const availableRoles = requestedAssignments.length
+                ? await server.db
+                    .select({
+                        id: authRoles.id,
+                        tenant_id: authRoles.tenant_id,
+                    })
+                    .from(authRoles)
+                    .where(
+                        inArray(
+                            authRoles.id,
+                            requestedAssignments.map((assignment) => assignment.role_id)
+                        )
+                    )
+                : [];
+
+            const validRoleIds = new Set(
+                availableRoles
+                    .filter((role) =>
+                        role.tenant_id === null ||
+                        requestedAssignments.some((assignment) => assignment.role_id === role.id && assignment.tenant_id === role.tenant_id)
+                    )
+                    .map((role) => role.id)
+            );
+
+            const validAssignments = requestedAssignments.filter((assignment) => validRoleIds.has(assignment.role_id));
+            const existingMemberships = await server.db
+                .select()
+                .from(authTenantUsers)
+                .where(eq(authTenantUsers.user_id, user_id));
+            const removedTenantIds = existingMemberships
+                .map((membership) => membership.tenant_id)
+                .filter((tenantId) => !tenantIds.includes(tenantId));
+
+            const existingUserProfiles = await server.db
+                .select({
+                    id: authProfiles.id,
+                    tenant_id: authProfiles.tenant_id,
+                })
+                .from(authProfiles)
+                .where(eq(authProfiles.user_id, user_id));
+
+            const unassignedProfiles = tenantIds.length
+                ? await server.db
+                    .select({
+                        id: authProfiles.id,
+                        tenant_id: authProfiles.tenant_id,
+                    })
+                    .from(authProfiles)
+                    .where(
+                        and(
+                            inArray(authProfiles.tenant_id, tenantIds),
+                            isNull(authProfiles.user_id)
+                        )
+                    )
+                : [];
+
+            const fallbackName = deriveNameFromEmail(targetUser.email);
+            const profileDefaults = {
+                first_name: body.profile_defaults?.first_name?.trim() || fallbackName.first_name,
+                last_name: body.profile_defaults?.last_name?.trim() || fallbackName.last_name,
+            };
+            const requestedProfileAssignments = new Map<number, string>(
+                (body.profile_assignments || [])
+                    .filter((assignment) => assignment?.tenant_id && assignment.profile_id)
+                    .map((assignment) => [Number(assignment.tenant_id), String(assignment.profile_id)])
+            );
+
+            await server.db
+                .delete(authUserRoles)
+                .where(eq(authUserRoles.user_id, user_id));
+
+            await server.db
+                .delete(authTenantUsers)
+                .where(eq(authTenantUsers.user_id, user_id));
+
+            if (tenantIds.length) {
+                await server.db
+                    .insert(authTenantUsers)
+                    .values(
+                        tenantIds.map((tenantId) => ({
+                            tenant_id: tenantId,
+                            user_id,
+                            created_by: currentUser.id,
+                        }))
+                    );
+            }
+
+            if (validAssignments.length) {
+                await server.db
+                    .insert(authUserRoles)
+                    .values(
+                        validAssignments.map((assignment) => ({
+                            user_id,
+                            tenant_id: assignment.tenant_id,
+                            role_id: assignment.role_id,
+                            created_by: currentUser.id,
+                        }))
+                    );
+            }
+
+            if (removedTenantIds.length) {
+                await server.db
+                    .update(authProfiles)
+                    .set({ user_id: null })
+                    .where(
+                        and(
+                            eq(authProfiles.user_id, user_id),
+                            inArray(authProfiles.tenant_id, removedTenantIds)
+                        )
+                    );
+            }
+
+            const existingProfileTenantIds = new Set(existingUserProfiles.map((profile) => profile.tenant_id));
+
+            for (const tenantId of tenantIds) {
+                if (existingProfileTenantIds.has(tenantId)) continue;
+
+                const requestedProfileId = requestedProfileAssignments.get(tenantId);
+                const freeProfile = requestedProfileId
+                    ? unassignedProfiles.find((profile) => profile.id === requestedProfileId && profile.tenant_id === tenantId)
+                    : null;
+
+                if (freeProfile) {
+                    await server.db
+                        .update(authProfiles)
+                        .set({ user_id })
+                        .where(eq(authProfiles.id, freeProfile.id));
+                    continue;
+                }
+
+                await server.db
+                    .insert(authProfiles)
+                    .values({
+                        user_id,
+                        tenant_id: tenantId,
+                        first_name: profileDefaults.first_name,
+                        last_name: profileDefaults.last_name,
+                        email: targetUser.email,
+                        active: true,
+                    });
+            }
+
+            return {
+                success: true,
+                tenant_ids: tenantIds,
+                role_assignments: validAssignments,
+            };
+        } catch (err) {
+            console.error("ERROR /admin/users/:user_id/access:", err);
+            return reply.code(500).send({ error: "Internal Server Error" });
+        }
+    });
 
     // -------------------------------------------------------------
     // POST /admin/add-user-to-tenant
     // -------------------------------------------------------------
     server.post("/admin/add-user-to-tenant", async (req, reply) => {
         try {
+            const currentUser = await requireAdmin(req, reply);
+            if (!currentUser) return;
+
             const body = req.body as {
                 user_id: string;
                 tenant_id: number;
@@ -44,11 +786,10 @@ export default async function adminRoutes(server: FastifyInstance) {
 
             await server.db
                 .insert(authTenantUsers)
-                // @ts-ignore
                 .values({
                     user_id: body.user_id,
-                    tenantId: body.tenant_id,
-                    role: body.role ?? "member",
+                    tenant_id: body.tenant_id,
+                    created_by: currentUser.id,
                 });
 
             return { success: true, mode };
@@ -65,6 +806,9 @@ export default async function adminRoutes(server: FastifyInstance) {
     // -------------------------------------------------------------
     server.get("/admin/user-tenants/:user_id", async (req, reply) => {
         try {
+            const currentUser = await requireAdmin(req, reply);
+            if (!currentUser) return;
+
             const { user_id } = req.params as { user_id: string };
 
             if (!user_id) {

backend/src/routes/auth/me.ts

@@ -31,6 +31,7 @@ export default async function meRoutes(server: FastifyInstance) {
                     email: authUsers.email,
                     created_at: authUsers.created_at,
                     must_change_password: authUsers.must_change_password,
+                    is_admin: authUsers.is_admin,
                 })
                 .from(authUsers)
                 .where(eq(authUsers.id, userId))
@@ -56,6 +57,7 @@ export default async function meRoutes(server: FastifyInstance) {
                     businessInfo: tenants.businessInfo,
                     numberRanges: tenants.numberRanges,
                     accountChart: tenants.accountChart,
+                    taxEvaluationPeriod: tenants.taxEvaluationPeriod,
                     dokuboxkey: tenants.dokuboxkey,
                     standardEmailForInvoices: tenants.standardEmailForInvoices,
                     standardPaymentDays: tenants.standardPaymentDays,

backend/src/routes/banking.ts

@@ -29,6 +29,13 @@ export default async function bankingRoutes(server: FastifyInstance) {
     const normalizeIban = (value?: string | null) =>
         String(value || "").replace(/\s+/g, "").toUpperCase()
 
+    const normalizeName = (value?: string | null) =>
+        String(value || "")
+            .toLowerCase()
+            .replace(/[^a-z0-9äöüß]+/gi, " ")
+            .replace(/\s+/g, " ")
+            .trim()
+
     const pickPartnerBankData = (statement: any, partnerType: "customer" | "vendor") => {
         if (!statement) return null
 
@@ -60,6 +67,26 @@ export default async function bankingRoutes(server: FastifyInstance) {
         return null
     }
 
+    const pickPartnerReference = (statement: any, partnerType: "customer" | "vendor") => {
+        if (!statement) return null
+
+        const prefersDebit = partnerType === "customer"
+            ? Number(statement.amount) >= 0
+            : Number(statement.amount) > 0
+
+        const primary = prefersDebit
+            ? { iban: statement.debIban, name: statement.debName }
+            : { iban: statement.credIban, name: statement.credName }
+        const fallback = prefersDebit
+            ? { iban: statement.credIban, name: statement.credName }
+            : { iban: statement.debIban, name: statement.debName }
+
+        return {
+            iban: normalizeIban(primary.iban) || normalizeIban(fallback.iban) || null,
+            name: String(primary.name || fallback.name || "").trim() || null,
+        }
+    }
+
     const mergePartnerIban = (infoData: Record<string, any>, iban: string, bankAccountId?: number | null) => {
         if (!iban && !bankAccountId) return infoData || {}
         const info = infoData && typeof infoData === "object" ? { ...infoData } : {}
@@ -239,6 +266,177 @@ export default async function bankingRoutes(server: FastifyInstance) {
         }
     })
 
+    server.get("/banking/statements/:id/suggestions", async (req, reply) => {
+        try {
+            if (!req.user) return reply.code(401).send({ error: "Unauthorized" })
+
+            const { id } = req.params as { id: string }
+            const statementId = Number(id)
+            if (!statementId) return reply.code(400).send({ error: "Invalid statement id" })
+
+            const [statement] = await server.db
+                .select()
+                .from(bankstatements)
+                .where(and(eq(bankstatements.id, statementId), eq(bankstatements.tenant, req.user.tenant_id)))
+                .limit(1)
+
+            if (!statement) return reply.code(404).send({ error: "Statement not found" })
+
+            const partnerType: "customer" | "vendor" = Number(statement.amount) >= 0 ? "customer" : "vendor"
+            const partnerRef = pickPartnerReference(statement, partnerType)
+
+            const suggestions: Array<Record<string, any>> = []
+            let matchedBankAccountId: number | null = null
+
+            if (partnerRef?.iban) {
+                const allAccounts = await server.db
+                    .select({
+                        id: entitybankaccounts.id,
+                        ibanEncrypted: entitybankaccounts.ibanEncrypted,
+                    })
+                    .from(entitybankaccounts)
+                    .where(eq(entitybankaccounts.tenant, req.user.tenant_id))
+
+                const matchingAccount = allAccounts.find((row) => {
+                    if (!row.ibanEncrypted) return false
+                    try {
+                        return normalizeIban(decrypt(row.ibanEncrypted as any)) === partnerRef.iban
+                    } catch {
+                        return false
+                    }
+                })
+
+                matchedBankAccountId = matchingAccount?.id ? Number(matchingAccount.id) : null
+            }
+
+            if (partnerType === "customer") {
+                const customerRows = await server.db
+                    .select({
+                        id: customers.id,
+                        name: customers.name,
+                        customerNumber: customers.customerNumber,
+                        infoData: customers.infoData,
+                    })
+                    .from(customers)
+                    .where(and(eq(customers.tenant, req.user.tenant_id), eq(customers.archived, false)))
+
+                for (const row of customerRows) {
+                    const infoData = row.infoData && typeof row.infoData === "object" ? row.infoData as Record<string, any> : {}
+                    const bankAccountIds = Array.isArray(infoData.bankAccountIds) ? infoData.bankAccountIds.map(Number) : []
+                    const bankingIbans = Array.isArray(infoData.bankingIbans) ? infoData.bankingIbans.map((iban) => normalizeIban(String(iban))) : []
+                    const normalizedEntityName = normalizeName(row.name)
+                    const normalizedStatementName = normalizeName(partnerRef?.name)
+
+                    const matchesBankAccountId = matchedBankAccountId ? bankAccountIds.includes(matchedBankAccountId) : false
+                    const matchesIban = partnerRef?.iban ? bankingIbans.includes(partnerRef.iban) : false
+                    const exactNameMatch = normalizedEntityName && normalizedStatementName && normalizedEntityName === normalizedStatementName
+                    const partialNameMatch = normalizedEntityName && normalizedStatementName
+                        ? normalizedEntityName.includes(normalizedStatementName) || normalizedStatementName.includes(normalizedEntityName)
+                        : false
+
+                    let score = 0
+                    let reason = ""
+
+                    if (matchesBankAccountId && matchesIban) {
+                        score = 100
+                        reason = "IBAN und hinterlegte Bankverbindung stimmen ueberein"
+                    } else if (matchesBankAccountId) {
+                        score = 95
+                        reason = "Hinterlegte Bankverbindung passt zur IBAN"
+                    } else if (matchesIban) {
+                        score = 90
+                        reason = "IBAN wurde bereits bei diesem Kunden verwendet"
+                    } else if (exactNameMatch) {
+                        score = 60
+                        reason = "Name passt exakt zur Buchung"
+                    } else if (partialNameMatch) {
+                        score = 45
+                        reason = "Name aehnelt der Buchung"
+                    }
+
+                    if (!score) continue
+
+                    suggestions.push({
+                        type: "customer",
+                        id: row.id,
+                        name: row.name,
+                        number: row.customerNumber,
+                        score,
+                        reason,
+                    })
+                }
+            } else {
+                const vendorRows = await server.db
+                    .select({
+                        id: vendors.id,
+                        name: vendors.name,
+                        vendorNumber: vendors.vendorNumber,
+                        infoData: vendors.infoData,
+                    })
+                    .from(vendors)
+                    .where(and(eq(vendors.tenant, req.user.tenant_id), eq(vendors.archived, false)))
+
+                for (const row of vendorRows) {
+                    const infoData = row.infoData && typeof row.infoData === "object" ? row.infoData as Record<string, any> : {}
+                    const bankAccountIds = Array.isArray(infoData.bankAccountIds) ? infoData.bankAccountIds.map(Number) : []
+                    const bankingIbans = Array.isArray(infoData.bankingIbans) ? infoData.bankingIbans.map((iban) => normalizeIban(String(iban))) : []
+                    const normalizedEntityName = normalizeName(row.name)
+                    const normalizedStatementName = normalizeName(partnerRef?.name)
+
+                    const matchesBankAccountId = matchedBankAccountId ? bankAccountIds.includes(matchedBankAccountId) : false
+                    const matchesIban = partnerRef?.iban ? bankingIbans.includes(partnerRef.iban) : false
+                    const exactNameMatch = normalizedEntityName && normalizedStatementName && normalizedEntityName === normalizedStatementName
+                    const partialNameMatch = normalizedEntityName && normalizedStatementName
+                        ? normalizedEntityName.includes(normalizedStatementName) || normalizedStatementName.includes(normalizedEntityName)
+                        : false
+
+                    let score = 0
+                    let reason = ""
+
+                    if (matchesBankAccountId && matchesIban) {
+                        score = 100
+                        reason = "IBAN und hinterlegte Bankverbindung stimmen ueberein"
+                    } else if (matchesBankAccountId) {
+                        score = 95
+                        reason = "Hinterlegte Bankverbindung passt zur IBAN"
+                    } else if (matchesIban) {
+                        score = 90
+                        reason = "IBAN wurde bereits bei diesem Lieferanten verwendet"
+                    } else if (exactNameMatch) {
+                        score = 60
+                        reason = "Name passt exakt zur Buchung"
+                    } else if (partialNameMatch) {
+                        score = 45
+                        reason = "Name aehnelt der Buchung"
+                    }
+
+                    if (!score) continue
+
+                    suggestions.push({
+                        type: "vendor",
+                        id: row.id,
+                        name: row.name,
+                        number: row.vendorNumber,
+                        score,
+                        reason,
+                    })
+                }
+            }
+
+            suggestions.sort((a, b) => b.score - a.score || String(a.name).localeCompare(String(b.name), "de"))
+
+            return reply.send({
+                partnerType,
+                partnerName: partnerRef?.name || null,
+                partnerIban: partnerRef?.iban || null,
+                suggestions: suggestions.slice(0, 5),
+            })
+        } catch (err) {
+            server.log.error(err)
+            return reply.code(500).send({ error: "Failed to load statement suggestions" })
+        }
+    })
+
     const assignIbanFromStatementToCustomer = async (tenantId: number, userId: string, statementId: number, createdDocumentId?: number) => {
         if (!createdDocumentId) return
 

backend/src/routes/files.ts

@@ -60,7 +60,7 @@ export default async function fileRoutes(server: FastifyInstance) {
 
             return {
                 id: created.id,
-                filename: data.filename,
+                filename: created.filename,
                 path: created.key
             }
         } catch (err) {
@@ -237,7 +237,7 @@ export default async function fileRoutes(server: FastifyInstance) {
                 // MULTIPLE PRESIGNED URLs
                 // -------------------------------------------------
                 if (!ids || !Array.isArray(ids) || ids.length === 0) {
-                    return reply.code(400).send({ error: "No ids provided" })
+                    return { files: [] }
                 }
 
                 const rows = await server.db

backend/src/routes/functions.ts

@@ -2,6 +2,10 @@ import { FastifyInstance } from "fastify";
 import {createInvoicePDF, createTimeSheetPDF} from "../utils/pdf";
 import {encodeBase64ToNiimbot, generateLabel, useNextNumberRangeNumber} from "../utils/functions";
 import { GetObjectCommand } from "@aws-sdk/client-s3";
+import { execFile } from "node:child_process";
+import { existsSync } from "node:fs";
+import path from "node:path";
+import { promisify } from "node:util";
 import dayjs from "dayjs";
 //import { ready as zplReady } from 'zpl-renderer-js'
 //import { renderZPL } from "zpl-image";
@@ -28,6 +32,31 @@ dayjs.extend(isSameOrBefore)
 dayjs.extend(duration)
 dayjs.extend(timezone)
 
+const execFileAsync = promisify(execFile)
+
+function resolveGitRoot() {
+    const searchRoots = [
+        process.cwd(),
+        path.resolve(process.cwd(), ".."),
+        path.resolve(__dirname, "../../.."),
+        path.resolve(__dirname, "../../../.."),
+    ]
+
+    for (const startDir of searchRoots) {
+        let currentDir = startDir
+
+        while (currentDir && currentDir !== path.dirname(currentDir)) {
+            if (existsSync(path.join(currentDir, ".git"))) {
+                return currentDir
+            }
+
+            currentDir = path.dirname(currentDir)
+        }
+    }
+
+    return null
+}
+
 export default async function functionRoutes(server: FastifyInstance) {
     const streamToBuffer = async (stream: any): Promise<Buffer> =>
         new Promise((resolve, reject) => {
@@ -162,6 +191,55 @@ export default async function functionRoutes(server: FastifyInstance) {
         }
     })
 
+    server.get('/functions/changelog', async (req, reply) => {
+        const { limit } = req.query as { limit?: string | number }
+        const parsedLimit = Number(limit)
+        const safeLimit = Number.isFinite(parsedLimit)
+            ? Math.min(Math.max(parsedLimit, 1), 50)
+            : 15
+
+        const gitRoot = resolveGitRoot()
+
+        if (!gitRoot) {
+            return reply.code(500).send({ error: 'Git repository not found' })
+        }
+
+        try {
+            const { stdout } = await execFileAsync('git', [
+                '-C',
+                gitRoot,
+                'log',
+                `--max-count=${safeLimit}`,
+                '--date=iso-strict',
+                '--pretty=format:%H%x1f%h%x1f%s%x1f%an%x1f%aI%x1e'
+            ])
+
+            const entries = stdout
+                .split('\x1e')
+                .map(entry => entry.trim())
+                .filter(Boolean)
+                .map(entry => {
+                    const [hash, shortHash, subject, authorName, committedAt] = entry.split('\x1f')
+
+                    return {
+                        hash,
+                        shortHash,
+                        subject,
+                        authorName,
+                        committedAt
+                    }
+                })
+
+            return reply.send({
+                repositoryRoot: gitRoot,
+                entries
+            })
+        } catch (err) {
+            req.log.error(err)
+            return reply.code(500).send({ error: 'Failed to load changelog' })
+        }
+    })
+
     server.post('/functions/serial/start', async (req, reply) => {
         console.log(req.body)
         const {executionDate,templateIds,tenantId} = req.body as {executionDate:string,templateIds:Number[],tenantId:Number}

backend/src/routes/resources/main.ts

@@ -130,6 +130,12 @@ function applyResourceWhereFilters(resource: string, table: any, whereCond: any)
     return whereCond
 }
 
+function getTenantColumn(resource: string, table: any) {
+    const config = resourceConfig[resource]
+    const tenantKey = config?.tenantKey || "tenant"
+    return table[tenantKey]
+}
+
 function isDateLikeField(key: string) {
     if (key === "deliveryDateType") return false
     if (key.includes("_at") || key.endsWith("At")) return true
@@ -241,9 +247,13 @@ export default async function resourceRoutes(server: FastifyInstance) {
 
             const { resource } = req.params as { resource: string }
             const config = resourceConfig[resource]
+            if (!config) {
+                return reply.code(404).send({ error: "Unknown resource" })
+            }
             const table = config.table
 
-            let whereCond: any = eq(table.tenant, tenantId)
+            const tenantColumn = getTenantColumn(resource, table)
+            let whereCond: any = tenantColumn ? eq(tenantColumn, tenantId) : undefined
             whereCond = applyResourceWhereFilters(resource, table, whereCond)
             let q = server.db.select().from(table).$dynamic()
 
@@ -345,13 +355,17 @@ export default async function resourceRoutes(server: FastifyInstance) {
 
             const { resource } = req.params as { resource: string };
             const config = resourceConfig[resource];
+            if (!config) {
+                return reply.code(404).send({ error: "Unknown resource" });
+            }
             const table = config.table;
 
             const { queryConfig } = req;
             const { pagination, sort, filters } = queryConfig;
             const { search, distinctColumns } = req.query as { search?: string; distinctColumns?: string; };
 
-            let whereCond: any = eq(table.tenant, tenantId);
+            const tenantColumn = getTenantColumn(resource, table);
+            let whereCond: any = tenantColumn ? eq(tenantColumn, tenantId) : undefined;
             whereCond = applyResourceWhereFilters(resource, table, whereCond)
             const searchCols: any[] = (config.searchColumns || []).map(c => table[c]);
             const debugSearchColumnNames: string[] = [...(config.searchColumns || [])];
@@ -451,7 +465,7 @@ export default async function resourceRoutes(server: FastifyInstance) {
                             }
                         });
                     }
-                    let distinctWhereCond: any = eq(table.tenant, tenantId)
+                    let distinctWhereCond: any = tenantColumn ? eq(tenantColumn, tenantId) : undefined
                     distinctWhereCond = applyResourceWhereFilters(resource, table, distinctWhereCond)
 
                     if (search) {

backend/src/utils/diffTranslations.ts

@@ -217,6 +217,7 @@ export const diffTranslations: Record<
     web: { label: "Webseite" },
     email: { label: "E-Mail" },
     tel: { label: "Telefon" },
+    mobileTel: { label: "Mobilnummer" },
     ustid: { label: "USt-ID" },
     role: { label: "Rolle" },
     phoneHome: { label: "Festnetz" },

backend/src/utils/filename.ts

@@ -0,0 +1,53 @@
+const UMLAUT_REPLACEMENTS: Record<string, string> = {
+    Ae: "Ae",
+    Oe: "Oe",
+    Ue: "Ue",
+    ae: "ae",
+    oe: "oe",
+    ue: "ue",
+    ss: "ss",
+    Ä: "Ae",
+    Ö: "Oe",
+    Ü: "Ue",
+    ä: "ae",
+    ö: "oe",
+    ü: "ue",
+    ß: "ss"
+}
+
+function replaceGermanCharacters(value: string) {
+    return value.replace(/[ÄÖÜäöüß]/g, (char) => UMLAUT_REPLACEMENTS[char] || char)
+}
+
+function sanitizeFileNamePart(value: string) {
+    return value
+        .normalize("NFKD")
+        .replace(/[\u0300-\u036f]/g, "")
+        .replace(/[^A-Za-z0-9._-]+/g, "-")
+        .replace(/-+/g, "-")
+        .replace(/[._-]{2,}/g, (match) => match[0])
+        .replace(/^[._-]+|[._-]+$/g, "")
+}
+
+export function sanitizeFilename(filename?: string | null, fallback = "file") {
+    const rawName = (filename || "").trim()
+
+    if (!rawName) {
+        return fallback
+    }
+
+    const normalized = replaceGermanCharacters(rawName)
+        .replace(/[\u0000-\u001f\u007f]/g, "")
+        .replace(/[\\/]/g, "-")
+
+    const lastDotIndex = normalized.lastIndexOf(".")
+    const hasExtension = lastDotIndex > 0 && lastDotIndex < normalized.length - 1
+
+    const basename = hasExtension ? normalized.slice(0, lastDotIndex) : normalized
+    const extension = hasExtension ? normalized.slice(lastDotIndex + 1) : ""
+
+    const safeBasename = sanitizeFileNamePart(basename) || fallback
+    const safeExtension = extension ? sanitizeFileNamePart(extension).toLowerCase() : ""
+
+    return safeExtension ? `${safeBasename}.${safeExtension}` : safeBasename
+}

backend/src/utils/files.ts

@@ -7,6 +7,7 @@ import { files } from "../../db/schema"
 import { eq } from "drizzle-orm"
 import { FastifyInstance } from "fastify"
 import { storeExtractedTextForFile } from "./documentText"
+import { sanitizeFilename } from "./filename"
 
 export const saveFile = async (
     server: FastifyInstance,
@@ -46,7 +47,10 @@ export const saveFile = async (
 
         // Name ermitteln (Fallback Logik)
         // Wenn attachment ein Buffer ist, muss der Name in 'other' stehen oder generiert werden
-        const filename = attachment.filename || providedFilename || `${created.id}.pdf`
+        const filename = sanitizeFilename(
+            attachment.filename || providedFilename || `${created.id}.pdf`,
+            `${created.id}.pdf`
+        )
 
         // ---------------------------------------------------
         // 2️⃣ BODY & CONTENT TYPE ERMITTELN
@@ -108,7 +112,7 @@ export const saveFile = async (
         )
 
         console.log(`File saved: ${key}`)
-        return { id: created.id, key }
+        return { id: created.id, key, filename }
     } catch (err) {
         console.error("saveFile error:", err)
         return null

backend/src/utils/handlebars.ts

@@ -0,0 +1,26 @@
+import Handlebars from "handlebars";
+
+const createDocumentTemplateHandlebars = () => {
+    const instance = Handlebars.create();
+
+    instance.registerHelper("eq", (left, right) => left === right);
+    instance.registerHelper("ne", (left, right) => left !== right);
+    instance.registerHelper("gt", (left, right) => left > right);
+    instance.registerHelper("gte", (left, right) => left >= right);
+    instance.registerHelper("lt", (left, right) => left < right);
+    instance.registerHelper("lte", (left, right) => left <= right);
+    instance.registerHelper("and", (...args) => args.slice(0, -1).every(Boolean));
+    instance.registerHelper("or", (...args) => args.slice(0, -1).some(Boolean));
+    instance.registerHelper("not", (value) => !value);
+    instance.registerHelper("includes", (collection, value) => {
+        if (Array.isArray(collection) || typeof collection === "string") {
+            return collection.includes(value);
+        }
+
+        return false;
+    });
+
+    return instance;
+};
+
+export const documentTemplateHandlebars = createDocumentTemplateHandlebars();

backend/src/utils/resource.config.ts

@@ -1,9 +1,11 @@
 import {
     accounts,
+    authProfiles,
     bankaccounts,
     bankrequisitions,
     bankstatements,
     entitybankaccounts,
+    events,
     contacts,
     contracts,
     contracttypes,
@@ -166,6 +168,16 @@ export const resourceConfig = {
     tasks: {
         table: tasks,
     },
+    events: {
+        table: events,
+        mtoLoad: ["project", "customer"],
+        searchColumns: ["name", "notes", "link", "eventtype"],
+    },
+    profiles: {
+        table: authProfiles,
+        tenantKey: "tenant_id",
+        searchColumns: ["first_name", "last_name", "full_name", "email", "employee_number"],
+    },
     letterheads: {
         table: letterheads,
 

frontend/app.config.ts

@@ -1,7 +1,9 @@
 export default defineAppConfig({
     ui: {
-        primary: 'green',
-        gray: 'slate',
+        colors: {
+            primary: 'green',
+            neutral: 'slate'
+        },
         tooltip: {
             background: '!bg-background'
         },
@@ -35,4 +37,4 @@ export default defineAppConfig({
             }
         }
     }
-})
+})

frontend/app.vue

@@ -47,14 +47,16 @@ useSeoMeta({
 </script>
 
 <template>
-  <div class="safearea">
-    <NuxtLayout>
-      <NuxtPage/>
-    </NuxtLayout>
-    <UNotifications/>
-    <USlideovers />
-    <UModals/>
-  </div>
+  <UApp>
+    <div class="safearea">
+      <NuxtLayout>
+        <NuxtPage/>
+      </NuxtLayout>
+      <UNotifications/>
+      <USlideovers />
+      <UModals/>
+    </div>
+  </UApp>
 
 
 
@@ -136,4 +138,4 @@ useSeoMeta({
 .scroll {
   overflow-y: scroll;
 }
-</style>
+</style>

frontend/assets/css/main.css

@@ -0,0 +1,26 @@
+@import "tailwindcss";
+@import "@nuxt/ui-pro";
+
+@theme static {
+  --font-sans: "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --font-mono: "SF Mono", "Cascadia Code", "JetBrains Mono", Consolas, "Liberation Mono", Menlo, monospace;
+  --color-green-50: #f4fbf2;
+  --color-green-100: #e7f7e1;
+  --color-green-200: #cdeec4;
+  --color-green-300: #a6e095;
+  --color-green-400: #69c350;
+  --color-green-500: #53ad3a;
+  --color-green-600: #418e2b;
+  --color-green-700: #357025;
+  --color-green-800: #2d5922;
+  --color-green-900: #254a1d;
+  --color-green-950: #10280b;
+}
+
+:root {
+  --ui-container: 90rem;
+}
+
+body {
+  font-family: var(--font-sans);
+}

frontend/components/ArchiveButton.vue

@@ -38,37 +38,39 @@ const emitConfirm = () => {
   >
     Archivieren
   </UButton>
-  <UModal v-model="showModal">
-    <UCard>
-      <template #header>
-        <span class="text-md font-bold">Archivieren bestätigen</span>
-      </template>
-      Möchten Sie diese/-s/-n {{dataType.labelSingle}} wirklich archivieren?
+  <UModal v-model:open="showModal">
+    <template #content>
+      <UCard>
+        <template #header>
+          <span class="text-md font-bold">Archivieren bestätigen</span>
+        </template>
+        Möchten Sie diese/-s/-n {{dataType.labelSingle}} wirklich archivieren?
 
-      <template #footer>
-        <div class="text-right">
-          <UButtonGroup>
-            <UButton
-                variant="outline"
-                @click="showModal = false"
-            >
-              Abbrechen
-            </UButton>
-            <UButton
-                @click="emitConfirm"
-                class="ml-2"
-                color="rose"
-            >
-              Archivieren
-            </UButton>
-          </UButtonGroup>
+        <template #footer>
+          <div class="text-right">
+            <UButtonGroup>
+              <UButton
+                  variant="outline"
+                  @click="showModal = false"
+              >
+                Abbrechen
+              </UButton>
+              <UButton
+                  @click="emitConfirm"
+                  class="ml-2"
+                  color="error"
+              >
+                Archivieren
+              </UButton>
+            </UButtonGroup>
 
-        </div>
-      </template>
-    </UCard>
+          </div>
+        </template>
+      </UCard>
+    </template>
   </UModal>
 </template>
 
 <style scoped>
 
-</style>
+</style>

frontend/components/BankAccountAssignInput.vue

@@ -49,7 +49,7 @@ const assignByIban = async () => {
 
   const match = accounts.value.find((a) => normalizeIban(a.iban) === search)
   if (!match) {
-    toast.add({ title: "Kein Bankkonto mit dieser IBAN gefunden.", color: "rose" })
+    toast.add({ title: "Kein Bankkonto mit dieser IBAN gefunden.", color: "error" })
     return
   }
 
@@ -68,7 +68,7 @@ const removeAssigned = (id) => {
 
 const createAndAssign = async () => {
   if (!createPayload.value.iban || !createPayload.value.bic || !createPayload.value.bankName) {
-    toast.add({ title: "IBAN, BIC und Bankinstitut sind Pflichtfelder.", color: "rose" })
+    toast.add({ title: "IBAN, BIC und Bankinstitut sind Pflichtfelder.", color: "error" })
     return
   }
 
@@ -140,43 +140,45 @@ loadAccounts()
     </InputGroup>
   </div>
 
-  <UModal v-model="showCreate">
-    <UCard>
-      <template #header>Neue Bankverbindung erstellen</template>
-      <div class="space-y-3">
-        <UFormGroup label="IBAN">
-          <InputGroup>
-            <UInput
-                v-model="createPayload.iban"
-                @blur="resolveCreatePayloadFromIban"
-                @keydown.enter.prevent="resolveCreatePayloadFromIban"
-            />
-            <UButton
-                color="gray"
-                variant="outline"
-                :loading="resolvingIban"
-                @click="resolveCreatePayloadFromIban"
-            >
-              Ermitteln
-            </UButton>
-          </InputGroup>
-        </UFormGroup>
-        <UFormGroup label="BIC">
-          <UInput v-model="createPayload.bic" />
-        </UFormGroup>
-        <UFormGroup label="Bankinstitut">
-          <UInput v-model="createPayload.bankName" />
-        </UFormGroup>
-        <UFormGroup label="Beschreibung (optional)">
-          <UInput v-model="createPayload.description" />
-        </UFormGroup>
-      </div>
-      <template #footer>
-        <div class="flex justify-end gap-2">
-          <UButton color="gray" variant="outline" @click="showCreate = false">Abbrechen</UButton>
-          <UButton @click="createAndAssign">Erstellen und zuweisen</UButton>
+  <UModal v-model:open="showCreate">
+    <template #content>
+      <UCard>
+        <template #header>Neue Bankverbindung erstellen</template>
+        <div class="space-y-3">
+          <UFormField label="IBAN">
+            <InputGroup>
+              <UInput
+                  v-model="createPayload.iban"
+                  @blur="resolveCreatePayloadFromIban"
+                  @keydown.enter.prevent="resolveCreatePayloadFromIban"
+              />
+              <UButton
+                  color="gray"
+                  variant="outline"
+                  :loading="resolvingIban"
+                  @click="resolveCreatePayloadFromIban"
+              >
+                Ermitteln
+              </UButton>
+            </InputGroup>
+          </UFormField>
+          <UFormField label="BIC">
+            <UInput v-model="createPayload.bic" />
+          </UFormField>
+          <UFormField label="Bankinstitut">
+            <UInput v-model="createPayload.bankName" />
+          </UFormField>
+          <UFormField label="Beschreibung (optional)">
+            <UInput v-model="createPayload.description" />
+          </UFormField>
         </div>
-      </template>
-    </UCard>
+        <template #footer>
+          <div class="flex justify-end gap-2">
+            <UButton color="gray" variant="outline" @click="showCreate = false">Abbrechen</UButton>
+            <UButton @click="createAndAssign">Erstellen und zuweisen</UButton>
+          </div>
+        </template>
+      </UCard>
+    </template>
   </UModal>
 </template>

frontend/components/ButtonWithConfirm.vue

@@ -31,36 +31,38 @@ const emitConfirm = () => {
   >
     <slot name="button"></slot>
   </UButton>
-  <UModal v-model="showModal">
-    <UCard>
-      <template #header>
-        <slot name="header"></slot>
-      </template>
-      <slot/>
-      <template #footer>
-        <div class="text-right">
-          <UButtonGroup>
-            <UButton
-                variant="outline"
-                @click="showModal = false"
-            >
-              Abbrechen
-            </UButton>
-            <UButton
-                @click="emitConfirm"
-                class="ml-2"
-                color="rose"
-            >
-              Archivieren
-            </UButton>
-          </UButtonGroup>
+  <UModal v-model:open="showModal">
+    <template #content>
+      <UCard>
+        <template #header>
+          <slot name="header"></slot>
+        </template>
+        <slot/>
+        <template #footer>
+          <div class="text-right">
+            <UButtonGroup>
+              <UButton
+                  variant="outline"
+                  @click="showModal = false"
+              >
+                Abbrechen
+              </UButton>
+              <UButton
+                  @click="emitConfirm"
+                  class="ml-2"
+                  color="error"
+              >
+                Archivieren
+              </UButton>
+            </UButtonGroup>
 
-        </div>
-      </template>
-    </UCard>
+          </div>
+        </template>
+      </UCard>
+    </template>
   </UModal>
 </template>
 
 <style scoped>
 
-</style>
+</style>

frontend/components/Calculator.vue

@@ -51,8 +51,8 @@
       <div class="grid grid-cols-4 gap-2">
         <UTooltip text="Brutto (+19%)"><UButton color="green" variant="soft" block size="xs" @click="applyTax(19)">+19%</UButton></UTooltip>
         <UTooltip text="Brutto (+7%)"><UButton color="green" variant="soft" block size="xs" @click="applyTax(7)">+7%</UButton></UTooltip>
-        <UTooltip text="Netto (-19%)"><UButton color="rose" variant="soft" block size="xs" @click="removeTax(19)">-19%</UButton></UTooltip>
-        <UTooltip text="Netto (-7%)"><UButton color="rose" variant="soft" block size="xs" @click="removeTax(7)">-7%</UButton></UTooltip>
+        <UTooltip text="Netto (-19%)"><UButton color="error" variant="soft" block size="xs" @click="removeTax(19)">-19%</UButton></UTooltip>
+        <UTooltip text="Netto (-7%)"><UButton color="error" variant="soft" block size="xs" @click="removeTax(7)">-7%</UButton></UTooltip>
 
         <UTooltip text="Löschen"><UButton color="gray" variant="ghost" block @click="clear">C</UButton></UTooltip>
         <UTooltip text="Speicher +"><UButton color="gray" variant="ghost" block @click="addToSum">M+</UButton></UTooltip>
@@ -227,9 +227,14 @@ defineShortcuts({
   width: 4px;
 }
 .custom-scrollbar::-webkit-scrollbar-track {
-  @apply bg-transparent;
+  background: transparent;
 }
 .custom-scrollbar::-webkit-scrollbar-thumb {
-  @apply bg-gray-200 dark:bg-gray-700 rounded-full;
+  background: #e5e7eb;
+  border-radius: 9999px;
 }
-</style>
+
+:global(.dark) .custom-scrollbar::-webkit-scrollbar-thumb {
+  background: #374151;
+}
+</style>

frontend/components/DatePicker.vue

@@ -27,6 +27,11 @@ const date = computed({
   }
 })
 
+const selectToday = () => {
+  emit('update:model-value', new Date())
+  emit('close')
+}
+
 const attrs = [{
   key: 'today',
   highlight: {
@@ -37,18 +42,31 @@ const attrs = [{
 </script>
 
 <template>
-  <VCalendarDatePicker
-      show-weeknumbers
-      v-model="date"
-      :mode="props.mode"
-      is24hr
-      transparent
-      borderless
-      color="green"
-      :attributes="attrs"
-      :is-dark="isDark"
-      title-position="left"
-      trim-weeks
-      :first-day-of-week="2"
-  />
-</template>
+  <div class="space-y-3">
+    <VCalendarDatePicker
+        show-weeknumbers
+        v-model="date"
+        :mode="props.mode"
+        is24hr
+        transparent
+        borderless
+        color="green"
+        :attributes="attrs"
+        :is-dark="isDark"
+        title-position="left"
+        trim-weeks
+        :first-day-of-week="2"
+    />
+
+    <div class="flex justify-end px-2 pb-2">
+      <UButton
+          size="xs"
+          color="gray"
+          variant="soft"
+          icon="i-heroicons-calendar-days"
+          label="Heute"
+          @click="selectToday"
+      />
+    </div>
+  </div>
+</template>

frontend/components/DocumentDisplayModal.vue

@@ -156,7 +156,8 @@ const moveFile = async () => {
 
 <template>
   <UModal fullscreen >
-    <UCard :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }" class="h-full">
+    <template #content>
+      <UCard :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }" class="h-full">
       <template #header>
         <div class="flex flex-row justify-between">
           <div class="flex items-center gap-2">
@@ -186,7 +187,7 @@ const moveFile = async () => {
         <div class="w-2/3 p-5" v-if="!false">
           <UButtonGroup>
             <ArchiveButton
-                color="rose"
+                color="error"
                 variant="outline"
                 type="files"
                 @confirmed="archiveDocument"
@@ -202,7 +203,7 @@ const moveFile = async () => {
             </UButton>
           </UButtonGroup>
 
-          <UDivider>Zuweisungen</UDivider>
+          <USeparator label="Zuweisungen"/>
           <table class="w-full">
             <tr v-if="props.documentData.project">
               <td>Projekt</td>
@@ -278,44 +279,44 @@ const moveFile = async () => {
             </tr>
           </table>
 
-          <UDivider class="my-3">Datei zuweisen</UDivider>
+          <USeparator class="my-3" label="Datei zuweisen"/>
 
-          <UFormGroup
+          <UFormField
               label="Resource auswählen"
           >
             <USelectMenu
-                :options="resourceOptions"
+                :items="resourceOptions"
                 v-model="resourceToAssign"
-                value-attribute="value"
-                option-attribute="label"
+                value-key="value"
+                label-key="label"
                 @change="getItemsBySelectedResource"
             >
 
             </USelectMenu>
-          </UFormGroup>
-          <UFormGroup
+          </UFormField>
+          <UFormField
               label="Eintrag auswählen:"
           >
             <USelectMenu
-                :options="itemOptions"
+                :items="itemOptions"
                 v-model="idToAssign"
-                :option-attribute="resourceOptions.find(i => i.value === resourceToAssign)? resourceOptions.find(i => i.value === resourceToAssign).optionAttr : 'name'"
-                value-attribute="id"
+                :label-key="resourceOptions.find(i => i.value === resourceToAssign)? resourceOptions.find(i => i.value === resourceToAssign).optionAttr : 'name'"
+                value-key="id"
                 @change="updateDocumentAssignment"
             ></USelectMenu>
-          </UFormGroup>
+          </UFormField>
 
 
 
-          <UDivider class="my-5">Datei verschieben</UDivider>
+          <USeparator class="my-5" label="Datei verschieben"/>
 
           <InputGroup class="w-full">
             <USelectMenu
                 class="flex-auto"
                 v-model="folderToMoveTo"
-                value-attribute="id"
-                option-attribute="name"
-                :options="folders"
+                value-key="id"
+                label-key="name"
+                :items="folders"
             />
             <UButton
               @click="moveFile"
@@ -324,34 +325,35 @@ const moveFile = async () => {
             >Verschieben</UButton>
           </InputGroup>
 
-          <UDivider class="my-5">Dateityp</UDivider>
+          <USeparator class="my-5" label="Dateityp"/>
 
           <InputGroup class="w-full">
             <USelectMenu
                 class="flex-auto"
                 v-model="props.documentData.type"
-                value-attribute="id"
-                option-attribute="name"
-                :options="filetypes"
+                value-key="id"
+                label-key="name"
+                :items="filetypes"
                 @change="updateDocument"
             />
           </InputGroup>
-          <UDivider class="my-5">Dokumentenbox</UDivider>
+          <USeparator class="my-5" label="Dokumentenbox" />
 
           <InputGroup class="w-full">
             <USelectMenu
                 class="flex-auto"
                 v-model="props.documentData.documentbox"
-                value-attribute="id"
-                option-attribute="key"
-                :options="documentboxes"
+                value-key="id"
+                label-key="key"
+                :items="documentboxes"
                 @change="updateDocument"
             />
           </InputGroup>
 
         </div>
       </div>
-    </UCard>
+      </UCard>
+    </template>
   </UModal>
 </template>
 
@@ -362,4 +364,4 @@ const moveFile = async () => {
   aspect-ratio: 1/ 1.414;
 }
 
-</style>
+</style>

frontend/components/DocumentUploadModal.vue

@@ -78,84 +78,86 @@ const fileNames = computed(() => {
 
 <template>
   <UModal>
-    <div ref="dropZoneRef" class="relative h-full flex flex-col">
+    <template #content>
+      <div ref="dropZoneRef" class="relative h-full flex flex-col">
 
-      <div
-          v-if="isOverDropZone"
-          class="absolute inset-0 z-50 flex items-center justify-center bg-primary-500/10 border-2 border-primary-500 border-dashed rounded-lg backdrop-blur-sm transition-all"
-      >
-        <span class="text-xl font-bold text-primary-600 bg-white/80 px-4 py-2 rounded shadow-sm">
-          Dateien hier ablegen
-        </span>
-      </div>
-
-      <UCard :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
-        <template #header>
-          <div class="flex items-center justify-between">
-            <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
-              Datei hochladen
-            </h3>
-            <UButton
-                color="gray"
-                variant="ghost"
-                icon="i-heroicons-x-mark-20-solid"
-                class="-my-1"
-                @click="modal.close()"
-                :disabled="uploadInProgress"
-            />
-          </div>
-        </template>
-
-        <UFormGroup
-            label="Datei:"
-            :help="selectedFiles.length > 0 ? `${selectedFiles.length} Datei(en) ausgewählt` : 'Ziehen Sie Dateien hierher oder klicken Sie'"
+        <div
+            v-if="isOverDropZone"
+            class="absolute inset-0 z-50 flex items-center justify-center bg-primary-500/10 border-2 border-primary-500 border-dashed rounded-lg backdrop-blur-sm transition-all"
         >
-          <UInput
-              v-if="selectedFiles.length === 0"
-              type="file"
-              id="fileUploadInput"
-              multiple
-              accept="image/jpeg, image/png, image/gif, application/pdf"
-              @change="onFileInputChange"
-          />
+          <span class="text-xl font-bold text-primary-600 bg-white/80 px-4 py-2 rounded shadow-sm">
+            Dateien hier ablegen
+          </span>
+        </div>
 
-          <div v-if="selectedFiles.length > 0" class="mt-2 text-sm text-gray-500">
-            Ausgewählt: <span class="font-medium text-gray-700 dark:text-gray-300">{{ fileNames }}</span>
-          </div>
-        </UFormGroup>
+        <UCard :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+          <template #header>
+            <div class="flex items-center justify-between">
+              <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+                Datei hochladen
+              </h3>
+              <UButton
+                  color="gray"
+                  variant="ghost"
+                  icon="i-heroicons-x-mark-20-solid"
+                  class="-my-1"
+                  @click="modal.close()"
+                  :disabled="uploadInProgress"
+              />
+            </div>
+          </template>
 
-        <UFormGroup
-            label="Typ:"
-            class="mt-3"
-        >
-          <USelectMenu
-              option-attribute="name"
-              value-attribute="id"
-              searchable
-              searchable-placeholder="Suchen..."
-              :options="availableFiletypes"
-              v-model="props.fileData.type"
-              :disabled="!props.fileData.typeEnabled"
+          <UFormField
+              label="Datei:"
+              :help="selectedFiles.length > 0 ? `${selectedFiles.length} Datei(en) ausgewählt` : 'Ziehen Sie Dateien hierher oder klicken Sie'"
           >
-            <template #label>
-              <span v-if="availableFiletypes.find(x => x.id === props.fileData.type)">{{availableFiletypes.find(x => x.id === props.fileData.type).name}}</span>
-              <span v-else>Kein Typ ausgewählt</span>
-            </template>
-          </USelectMenu>
-        </UFormGroup>
+            <UInput
+                v-if="selectedFiles.length === 0"
+                type="file"
+                id="fileUploadInput"
+                multiple
+                accept="image/jpeg, image/png, image/gif, application/pdf"
+                @change="onFileInputChange"
+            />
 
-        <template #footer>
-          <UButton
-              @click="uploadFiles"
-              :loading="uploadInProgress"
-              :disabled="uploadInProgress || selectedFiles.length === 0"
-          >Hochladen</UButton>
-        </template>
-      </UCard>
-    </div>
+            <div v-if="selectedFiles.length > 0" class="mt-2 text-sm text-gray-500">
+              Ausgewählt: <span class="font-medium text-gray-700 dark:text-gray-300">{{ fileNames }}</span>
+            </div>
+          </UFormField>
+
+          <UFormField
+              label="Typ:"
+              class="mt-3"
+          >
+            <USelectMenu
+                option-attribute="name"
+                value-attribute="id"
+                searchable
+                searchable-placeholder="Suchen..."
+                :options="availableFiletypes"
+                v-model="props.fileData.type"
+                :disabled="!props.fileData.typeEnabled"
+            >
+              <template #label>
+                <span v-if="availableFiletypes.find(x => x.id === props.fileData.type)">{{availableFiletypes.find(x => x.id === props.fileData.type).name}}</span>
+                <span v-else>Kein Typ ausgewählt</span>
+              </template>
+            </USelectMenu>
+          </UFormField>
+
+          <template #footer>
+            <UButton
+                @click="uploadFiles"
+                :loading="uploadInProgress"
+                :disabled="uploadInProgress || selectedFiles.length === 0"
+            >Hochladen</UButton>
+          </template>
+        </UCard>
+      </div>
+    </template>
   </UModal>
 </template>
 
 <style scoped>
 /* Optional: Animationen für das Overlay */
-</style>
+</style>

frontend/components/EntityEdit.vue

@@ -211,6 +211,22 @@ const contentChanged = (content, datapoint) => {
   }
 }
 
+const getSelectItems = (datapoint) => {
+  return datapoint.selectManualOptions || loadedOptions.value[datapoint.selectDataType] || []
+}
+
+const getSelectValueKey = (datapoint) => {
+  return datapoint.selectValueAttribute || 'id'
+}
+
+const getSelectLabelKey = (datapoint) => {
+  return datapoint.selectOptionAttribute || 'label'
+}
+
+const getSelectSearchInput = (datapoint) => {
+  return datapoint.selectSearchAttributes ? { placeholder: 'Suche...' } : false
+}
+
 
 const createItem = async () => {
   let ret = null
@@ -264,7 +280,7 @@ const updateItem = async () => {
     </template>
     <template #right>
       <ArchiveButton
-          color="rose"
+          color="error"
           v-if="platform !== 'mobile'"
           variant="outline"
           :type="type"
@@ -336,12 +352,12 @@ const updateItem = async () => {
             v-for="(columnName,index) in dataType.inputColumns"
             :class="platform === 'mobile' ? ['w-full'] : [`w-1/${dataType.inputColumns.length}`, ... index < dataType.inputColumns.length -1 ? ['mr-5'] : []]"
         >
-          <UDivider>{{ columnName }}</UDivider>
+          <USeparator :label="columnName"/>
 
           <div
               v-for="datapoint in dataType.templateColumns.filter(i => i.inputType && i.inputColumn === columnName)"
           >
-            <UFormGroup
+            <UFormField
                 v-if="(datapoint.showFunction ? datapoint.showFunction(item) : true)"
                 :label="datapoint.label"
             >
@@ -354,7 +370,7 @@ const updateItem = async () => {
               </template>
               <InputGroup class="w-full" v-if="datapoint.key.includes('.')">
                 <UInput
-                    :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
+                    :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'white'"
                     class="flex-auto"
                     @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                     v-if="['text','number'].includes(datapoint.inputType)"
@@ -367,25 +383,25 @@ const updateItem = async () => {
                     <span class="text-gray-500 dark:text-gray-400 text-xs">{{ datapoint.inputTrailing }}</span>
                   </template>
                 </UInput>
-                <UToggle
-                    :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'primary'"
+                <USwitch
+                    :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'primary'"
                     @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                     v-else-if="datapoint.inputType === 'bool'"
                     v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
                     :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                 />
                 <USelectMenu
-                    :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
+                    :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'white'"
                     class="flex-auto"
                     @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                     v-else-if="datapoint.inputType === 'select'"
                     v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
                     :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
-                    :option-attribute="datapoint.selectOptionAttribute"
-                    :value-attribute="datapoint.selectValueAttribute || 'id'"
-                    :options="datapoint.selectManualOptions || loadedOptions[datapoint.selectDataType]"
-                    :searchable="datapoint.selectSearchAttributes"
-                    :search-attributes="datapoint.selectSearchAttributes"
+                    :items="getSelectItems(datapoint)"
+                    :label-key="getSelectLabelKey(datapoint)"
+                    :value-key="getSelectValueKey(datapoint)"
+                    :search-input="getSelectSearchInput(datapoint)"
+                    :filter-fields="datapoint.selectSearchAttributes"
                     :multiple="datapoint.selectMultiple"
                 >
                   <template #empty>
@@ -393,7 +409,7 @@ const updateItem = async () => {
                   </template>
                 </USelectMenu>
                 <UTextarea
-                    :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
+                    :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'white'"
                     class="flex-auto"
                     @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                     v-else-if="datapoint.inputType === 'textarea'"
@@ -401,9 +417,9 @@ const updateItem = async () => {
                     :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                     rows="4"
                 />
-                <UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'date'">
+                <UPopover :content="{ side: 'bottom', align: 'start' }" v-else-if="datapoint.inputType === 'date'">
                   <UButton
-                      :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
+                      :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'white'"
                       icon="i-heroicons-calendar-days-20-solid"
                       :label="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? dayjs(item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]).format('DD.MM.YYYY') : 'Datum auswählen'"
                       variant="outline"
@@ -411,17 +427,17 @@ const updateItem = async () => {
 
                   />
 
-                  <template #panel="{ close }">
+                  <template #content>
                     <LazyDatePicker
                         @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
-                        v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]" @close="close"
+                        v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
                         :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                     />
                   </template>
                 </UPopover>
-                <UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'datetime'">
+                <UPopover :content="{ side: 'bottom', align: 'start' }" v-else-if="datapoint.inputType === 'datetime'">
                   <UButton
-                      :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
+                      :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'white'"
                       icon="i-heroicons-calendar-days-20-solid"
                       :label="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? dayjs(item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]).format('DD.MM.YY HH:mm') : 'Datum auswählen'"
                       variant="outline"
@@ -429,10 +445,10 @@ const updateItem = async () => {
 
                   />
 
-                  <template #panel="{ close }">
+                  <template #content>
                     <LazyDatePicker
                         @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
-                        v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]" @close="close"
+                        v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
                         :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                         mode="datetime"
                     />
@@ -460,7 +476,7 @@ const updateItem = async () => {
               <InputGroup class="w-full" v-else>
                 <UInput
                     class="flex-auto"
-                    :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
+                    :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'white'"
                     @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                     v-if="['text','number'].includes(datapoint.inputType)"
                     v-model="item[datapoint.key]"
@@ -472,34 +488,33 @@ const updateItem = async () => {
                     {{ datapoint.inputTrailing }}
                   </template>
                 </UInput>
-                <UToggle
-                    :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'primary'"
+                <USwitch
+                    :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'primary'"
                     @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                     v-else-if="datapoint.inputType === 'bool'"
                     v-model="item[datapoint.key]"
                     :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                 />
                 <USelectMenu
-                    :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
+                    :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'white'"
                     class="flex-auto"
                     @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                     v-else-if="datapoint.inputType === 'select'"
                     v-model="item[datapoint.key]"
                     :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
-                    :option-attribute="datapoint.selectOptionAttribute"
-                    :value-attribute="datapoint.selectValueAttribute || 'id'"
-                    :options="datapoint.selectManualOptions || loadedOptions[datapoint.selectDataType]"
-                    :searchable="datapoint.selectSearchAttributes"
-                    :search-attributes="datapoint.selectSearchAttributes"
+                    :items="getSelectItems(datapoint)"
+                    :label-key="getSelectLabelKey(datapoint)"
+                    :value-key="getSelectValueKey(datapoint)"
+                    :search-input="getSelectSearchInput(datapoint)"
+                    :filter-fields="datapoint.selectSearchAttributes"
                     :multiple="datapoint.selectMultiple"
-                    searchable-placeholder="Suche..."
                 >
                   <template #empty>
                     Keine Optionen verfügbar
                   </template>
                 </USelectMenu>
                 <UTextarea
-                    :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
+                    :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'white'"
                     class="flex-auto"
                     @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                     v-else-if="datapoint.inputType === 'textarea'"
@@ -507,37 +522,36 @@ const updateItem = async () => {
                     :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                     rows="4"
                 />
-                <UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'date'">
+                <UPopover :content="{ side: 'bottom', align: 'start' }" v-else-if="datapoint.inputType === 'date'">
                   <UButton
-                      :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
+                      :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'white'"
                       icon="i-heroicons-calendar-days-20-solid"
                       :label="item[datapoint.key] ? dayjs(item[datapoint.key]).format('DD.MM.YYYY') : 'Datum auswählen'"
                       variant="outline"
                       :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                   />
 
-                  <template #panel="{ close }">
+                  <template #content>
                     <LazyDatePicker
                         @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
-                        v-model="item[datapoint.key]" @close="close"
+                        v-model="item[datapoint.key]"
                         :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                     />
                   </template>
                 </UPopover>
-                <UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'datetime'">
+                <UPopover :content="{ side: 'bottom', align: 'start' }" v-else-if="datapoint.inputType === 'datetime'">
                   <UButton
-                      :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
+                      :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'white'"
                       icon="i-heroicons-calendar-days-20-solid"
                       :label="item[datapoint.key] ? dayjs(item[datapoint.key]).format('DD.MM.YY HH:mm') : 'Datum auswählen'"
                       variant="outline"
                       :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                   />
 
-                  <template #panel="{ close }">
+                  <template #content>
                     <LazyDatePicker
                         @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                         v-model="item[datapoint.key]"
-                        @close="close"
                         :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                         mode="datetime"
                     />
@@ -572,11 +586,11 @@ const updateItem = async () => {
                     icon="i-heroicons-x-mark"
                 />
               </InputGroup>
-            </UFormGroup>
+            </UFormField>
           </div>
         </div>
       </div>
-      <UFormGroup
+      <UFormField
           v-for="datapoint in dataType.templateColumns.filter(i => i.inputType && !i.inputColumn)"
           :label="datapoint.label"
       >
@@ -589,7 +603,7 @@ const updateItem = async () => {
         </template>
         <InputGroup class="w-full" v-if="datapoint.key.includes('.')">
           <UInput
-              :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
+              :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'white'"
               class="flex-auto"
               @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
               v-if="['text','number'].includes(datapoint.inputType)"
@@ -602,25 +616,25 @@ const updateItem = async () => {
               <span class="text-gray-500 dark:text-gray-400 text-xs">{{ datapoint.inputTrailing }}</span>
             </template>
           </UInput>
-          <UToggle
-              :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'primary'"
+          <USwitch
+              :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'primary'"
               @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
               v-else-if="datapoint.inputType === 'bool'"
               v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
               :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
           />
           <USelectMenu
-              :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
+              :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'white'"
               class="flex-auto"
               @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
               v-else-if="datapoint.inputType === 'select'"
               v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
               :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
-              :option-attribute="datapoint.selectOptionAttribute"
-              :value-attribute="datapoint.selectValueAttribute || 'id'"
-              :options="datapoint.selectManualOptions || loadedOptions[datapoint.selectDataType]"
-              :searchable="datapoint.selectSearchAttributes"
-              :search-attributes="datapoint.selectSearchAttributes"
+              :items="getSelectItems(datapoint)"
+              :label-key="getSelectLabelKey(datapoint)"
+              :value-key="getSelectValueKey(datapoint)"
+              :search-input="getSelectSearchInput(datapoint)"
+              :filter-fields="datapoint.selectSearchAttributes"
               :multiple="datapoint.selectMultiple"
           >
             <template #empty>
@@ -628,7 +642,7 @@ const updateItem = async () => {
             </template>
           </USelectMenu>
           <UTextarea
-              :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
+              :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'white'"
               class="flex-auto"
               @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
               v-else-if="datapoint.inputType === 'textarea'"
@@ -636,9 +650,9 @@ const updateItem = async () => {
               :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
               rows="4"
           />
-          <UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'date'">
+          <UPopover :content="{ side: 'bottom', align: 'start' }" v-else-if="datapoint.inputType === 'date'">
             <UButton
-                :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
+                :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'white'"
                 icon="i-heroicons-calendar-days-20-solid"
                 :label="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? dayjs(item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]).format('DD.MM.YYYY') : 'Datum auswählen'"
                 variant="outline"
@@ -646,17 +660,17 @@ const updateItem = async () => {
 
             />
 
-            <template #panel="{ close }">
+            <template #content>
               <LazyDatePicker
                   @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
-                  v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]" @close="close"
+                  v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
                   :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
               />
             </template>
           </UPopover>
-          <UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'datetime'">
+          <UPopover :content="{ side: 'bottom', align: 'start' }" v-else-if="datapoint.inputType === 'datetime'">
             <UButton
-                :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
+                :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'white'"
                 icon="i-heroicons-calendar-days-20-solid"
                 :label="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? dayjs(item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]).format('DD.MM.YY HH:mm') : 'Datum auswählen'"
                 variant="outline"
@@ -664,10 +678,10 @@ const updateItem = async () => {
 
             />
 
-            <template #panel="{ close }">
+            <template #content>
               <LazyDatePicker
                   @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
-                  v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]" @close="close"
+                  v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
                   :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                   mode="datetime"
               />
@@ -695,7 +709,7 @@ const updateItem = async () => {
         <InputGroup class="w-full" v-else>
           <UInput
               class="flex-auto"
-              :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
+              :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'white'"
               @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
               v-if="['text','number'].includes(datapoint.inputType)"
               v-model="item[datapoint.key]"
@@ -707,34 +721,33 @@ const updateItem = async () => {
               {{ datapoint.inputTrailing }}
             </template>
           </UInput>
-          <UToggle
-              :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'primary'"
+          <USwitch
+              :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'primary'"
               @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
               v-else-if="datapoint.inputType === 'bool'"
               v-model="item[datapoint.key]"
               :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
           />
           <USelectMenu
-              :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
+              :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'white'"
               class="flex-auto"
               @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
               v-else-if="datapoint.inputType === 'select'"
               v-model="item[datapoint.key]"
               :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
-              :option-attribute="datapoint.selectOptionAttribute"
-              :value-attribute="datapoint.selectValueAttribute || 'id'"
-              :options="datapoint.selectManualOptions || loadedOptions[datapoint.selectDataType]"
-              :searchable="datapoint.selectSearchAttributes"
-              :search-attributes="datapoint.selectSearchAttributes"
+              :items="getSelectItems(datapoint)"
+              :label-key="getSelectLabelKey(datapoint)"
+              :value-key="getSelectValueKey(datapoint)"
+              :search-input="getSelectSearchInput(datapoint)"
+              :filter-fields="datapoint.selectSearchAttributes"
               :multiple="datapoint.selectMultiple"
-              searchable-placeholder="Suche..."
           >
             <template #empty>
               Keine Optionen verfügbar
             </template>
           </USelectMenu>
           <UTextarea
-              :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
+              :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'white'"
               class="flex-auto"
               @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
               v-else-if="datapoint.inputType === 'textarea'"
@@ -742,37 +755,36 @@ const updateItem = async () => {
               :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
               rows="4"
           />
-          <UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'date'">
+          <UPopover :content="{ side: 'bottom', align: 'start' }" v-else-if="datapoint.inputType === 'date'">
             <UButton
-                :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
+                :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'white'"
                 icon="i-heroicons-calendar-days-20-solid"
                 :label="item[datapoint.key] ? dayjs(item[datapoint.key]).format('DD.MM.YYYY') : 'Datum auswählen'"
                 variant="outline"
                 :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
             />
 
-            <template #panel="{ close }">
+            <template #content>
               <LazyDatePicker
                   @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
-                  v-model="item[datapoint.key]" @close="close"
+                  v-model="item[datapoint.key]"
                   :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
               />
             </template>
           </UPopover>
-          <UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'datetime'">
+          <UPopover :content="{ side: 'bottom', align: 'start' }" v-else-if="datapoint.inputType === 'datetime'">
             <UButton
-                :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
+                :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'white'"
                 icon="i-heroicons-calendar-days-20-solid"
                 :label="item[datapoint.key] ? dayjs(item[datapoint.key]).format('DD.MM.YY HH:mm') : 'Datum auswählen'"
                 variant="outline"
                 :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
             />
 
-            <template #panel="{ close }">
+            <template #content>
               <LazyDatePicker
                   @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                   v-model="item[datapoint.key]"
-                  @close="close"
                   :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                   mode="datetime"
               />
@@ -807,7 +819,7 @@ const updateItem = async () => {
               icon="i-heroicons-x-mark"
           />
         </InputGroup>
-      </UFormGroup>
+      </UFormField>
     </UForm>
   </UDashboardPanelContent>
 </template>

frontend/components/EntityList.vue

@@ -110,12 +110,6 @@ const filteredRows = computed(() => {
 </script>
 
 <template>
-  <FloatingActionButton
-   :label="`+ ${dataType.labelSingle}`"
-   variant="outline"
-   v-if="platform === 'mobile'"
-   @click="router.push(`/standardEntity/${type}/create`)"
-  />
   <UDashboardNavbar :title="dataType.label" :badge="filteredRows.length">
     <template #toggle>
       <div v-if="platform === 'mobile'"></div>
@@ -138,7 +132,7 @@ const filteredRows = computed(() => {
       <UButton
         icon="i-heroicons-x-mark"
         variant="outline"
-        color="rose"
+        color="error"
         @click="clearSearchString()"
         v-if="searchString.length > 0"
       />
@@ -161,15 +155,15 @@ const filteredRows = computed(() => {
       <USelectMenu
           v-model="selectedColumns"
           icon="i-heroicons-adjustments-horizontal-solid"
-          :options="dataType.templateColumns.filter(i => !i.disabledInTable)"
+          :items="dataType.templateColumns.filter(i => !i.disabledInTable)"
           multiple
           class="hidden lg:block"
           by="key"
           :color="selectedColumns.length !== dataType.templateColumns.filter(i => !i.disabledInTable).length ? 'primary' : 'white'"
-          :ui-menu="{ width: 'min-w-max' }"
+          :content="{ width: 'min-w-max' }"
           @change="tempStore.modifyColumns(type,selectedColumns)"
       >
-        <template #label>
+        <template #default>
           Spalten
         </template>
       </USelectMenu>
@@ -178,11 +172,11 @@ const filteredRows = computed(() => {
           icon="i-heroicons-adjustments-horizontal-solid"
           multiple
           v-model="selectedFilters"
-          :options="selectableFilters"
+          :items="selectableFilters"
           :color="selectedFilters.length > 0 ? 'primary' : 'white'"
-          :ui-menu="{ width: 'min-w-max' }"
+          :content="{ width: 'min-w-max' }"
       >
-        <template #label>
+        <template #default>
           Filter
         </template>
       </USelectMenu>
@@ -191,14 +185,14 @@ const filteredRows = computed(() => {
   <EntityTableMobile
     v-if="platform === 'mobile'"
     :type="props.type"
-    :columns="columns"
+    :columns="normalizeTableColumns(columns)"
     :rows="filteredRows"
   />
   <EntityTable
     v-else
     @sort="(i) => emit('sort',i)"
     :type="props.type"
-    :columns="columns"
+    :columns="normalizeTableColumns(columns)"
     :rows="filteredRows"
     :loading="props.loading"
   />

frontend/components/EntityShow.vue

@@ -28,14 +28,16 @@ defineShortcuts({
     router.back()
   },
   'arrowleft': () => {
-    if(openTab.value > 0){
-      openTab.value -= 1
+    const currentIndex = Number(openTab.value)
+    if(currentIndex > 0){
+      openTab.value = String(currentIndex - 1)
       router.push(`${router.currentRoute.value.path}?tabIndex=${openTab.value}`)
     }
   },
   'arrowright': () => {
-    if(openTab.value < dataType.showTabs.length - 1) {
-      openTab.value += 1
+    const currentIndex = Number(openTab.value)
+    if(currentIndex < dataType.showTabs.length - 1) {
+      openTab.value = String(currentIndex + 1)
       router.push(`${router.currentRoute.value.path}?tabIndex=${openTab.value}`)
     }
   },
@@ -51,7 +53,7 @@ const auth = useAuthStore()
 
 const dataType = dataStore.dataTypes[type]
 
-const openTab = ref(route.query.tabIndex || 0)
+const openTab = ref(String(route.query.tabIndex || 0))
 
 
 
@@ -97,7 +99,8 @@ const getAvailableQueryStringData = (keys) => {
 }
 
 const onTabChange = (index) => {
-  router.push(`${router.currentRoute.value.path}?tabIndex=${index}`)
+  openTab.value = String(index)
+  router.push(`${router.currentRoute.value.path}?tabIndex=${openTab.value}`)
 }
 
 const changePinned = async () => {
@@ -255,9 +258,9 @@ const openCustomerInventoryLabelPrint = () => {
       v-if="props.item.id && platform !== 'mobile'"
       class="p-5"
       v-model="openTab"
-      @change="onTabChange"
+      @update:model-value="onTabChange"
   >
-    <template #item="{item:tab}">
+    <template #content="{item:tab}">
       <div v-if="tab.label === 'Informationen'" class="flex flex-row">
 
         <EntityShowSubInformation

frontend/components/EntityShowSub.vue

@@ -96,15 +96,15 @@ setup()
         <USelectMenu
             v-model="selectedColumns"
             icon="i-heroicons-adjustments-horizontal-solid"
-            :options="dataType.templateColumns.filter(i => !i.disabledInTable)"
+            :items="dataType.templateColumns.filter(i => !i.disabledInTable)"
             multiple
             class="hidden lg:block"
             by="key"
             :color="selectedColumns.length !== dataType.templateColumns.filter(i => !i.disabledInTable).length ? 'primary' : 'white'"
-            :ui-menu="{ width: 'min-w-max' }"
+            :content="{ width: 'min-w-max' }"
             @change="tempStore.modifyColumns(type,selectedColumns)"
         >
-          <template #label>
+          <template #default>
             Spalten
           </template>
         </USelectMenu>
@@ -114,7 +114,7 @@ setup()
     <div class="scroll" style="height: 70vh">
       <EntityTable
           :type="type"
-          :columns="columns"
+          :columns="normalizeTableColumns(columns)"
           :rows="props.item[type]"
           style
       />

frontend/components/EntityShowSubCreatedDocuments.vue

@@ -181,49 +181,51 @@ const selectItem = (item) => {
       </UButton>
       <UModal
           prevent-close
-          v-model="showFinalInvoiceConfig"
+          v-model:open="showFinalInvoiceConfig"
       >
-        <UCard>
-          <template #header>
-            <div class="flex items-center justify-between">
-              <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
-                Schlussrechnung konfigurieren
-              </h3>
-              <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isOpen = false" />
-            </div>
-          </template>
+        <template #content>
+          <UCard>
+            <template #header>
+              <div class="flex items-center justify-between">
+                <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+                  Schlussrechnung konfigurieren
+                </h3>
+                <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="showFinalInvoiceConfig = false" />
+              </div>
+            </template>
 
-          <UFormGroup
-              label="Rechnungsvorlage"
-          >
-            <USelectMenu
-                :options="props.item.createddocuments.filter(i => ['confirmationOrders','quotes'].includes(i.type))"
-                value-attribute="id"
-                option-attribute="documentNumber"
-                v-model="referenceDocument"
-            />
-          </UFormGroup>
-
-          <UFormGroup
-              label="Abschlagsrechnungen"
-          >
-            <USelectMenu
-                :options="props.item.createddocuments.filter(i => ['advanceInvoices'].includes(i.type))"
-                multiple
-                value-attribute="id"
-                option-attribute="documentNumber"
-                v-model="advanceInvoicesToAdd"
-            />
-          </UFormGroup>
-
-          <template #footer>
-            <UButton
-                @click="invoiceAdvanceInvoices"
+            <UFormField
+                label="Rechnungsvorlage"
             >
-              Weiter
-            </UButton>
-          </template>
-        </UCard>
+              <USelectMenu
+                  :items="props.item.createddocuments.filter(i => ['confirmationOrders','quotes'].includes(i.type))"
+                  value-key="id"
+                  label-key="documentNumber"
+                  v-model="referenceDocument"
+              />
+            </UFormField>
+
+            <UFormField
+                label="Abschlagsrechnungen"
+            >
+              <USelectMenu
+                  :items="props.item.createddocuments.filter(i => ['advanceInvoices'].includes(i.type))"
+                  multiple
+                  value-key="id"
+                  label-key="documentNumber"
+                  v-model="advanceInvoicesToAdd"
+              />
+            </UFormField>
+
+            <template #footer>
+              <UButton
+                  @click="invoiceAdvanceInvoices"
+              >
+                Weiter
+              </UButton>
+            </template>
+          </UCard>
+        </template>
       </UModal>
       <UButton
           @click="router.push(`/createDocument/edit/?${getAvailableQueryStringData({type: 'invoices'})}`)"
@@ -235,48 +237,48 @@ const selectItem = (item) => {
         <USelectMenu
             v-model="selectedColumns"
             icon="i-heroicons-adjustments-horizontal-solid"
-            :options="templateColumns"
+            :items="templateColumns"
             multiple
             class="hidden lg:block"
             by="key"
             @change="tempStore.modifyColumns('createddocuments',selectedColumns)"
         >
-          <template #label>
+          <template #default>
             Spalten
           </template>
         </USelectMenu>
       </template>
     </Toolbar>
     <UTable
-        :rows="props.item.createddocuments.filter(i => !i.archived)"
-        :columns="columns"
+        :data="props.item.createddocuments.filter(i => !i.archived)"
+        :columns="normalizeTableColumns(columns)"
         class="w-full"
         :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
-        @select="selectItem"
-        :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
+        :on-select="(row) => selectItem(row.original)"
+        :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
         style="height: 70vh"
     >
-      <template #type-data="{row}">
-        {{dataStore.documentTypesForCreation[row.type].labelSingle}}
+      <template #type-cell="{ row }">
+        {{ dataStore.documentTypesForCreation[row.original.type].labelSingle }}
       </template>
-      <template #state-data="{row}">
+      <template #state-cell="{ row }">
         <span
-            v-if="row.state === 'Entwurf'"
-            class="text-rose-500"
+            v-if="row.original.state === 'Entwurf'"
+            class="text-error-500"
         >
-          {{row.state}}
+          {{ row.original.state }}
         </span>
         <span
-            v-if="row.state === 'Gebucht'"
+            v-if="row.original.state === 'Gebucht'"
             class="text-cyan-500"
         >
-          {{row.state}}
+          {{ row.original.state }}
         </span>
         <span
-            v-if="row.state === 'Abgeschlossen'"
+            v-if="row.original.state === 'Abgeschlossen'"
             class="text-primary-500"
         >
-          {{row.state}}
+          {{ row.original.state }}
         </span>
       </template>
 <!--      <template #paid-data="{row}">
@@ -285,19 +287,19 @@ const selectItem = (item) => {
           <span v-else class="text-rose-600">Offen</span>
         </div>
       </template>-->
-      <template #reference-data="{row}">
-        <span v-if="row === props.item.createddocuments[selectedItem]" class="text-primary-500 font-bold">{{row.documentNumber}}</span>
-        <span v-else>{{row.documentNumber}}</span>
+      <template #reference-cell="{ row }">
+        <span v-if="row.original === props.item.createddocuments[selectedItem]" class="text-primary-500 font-bold">{{ row.original.documentNumber }}</span>
+        <span v-else>{{ row.original.documentNumber }}</span>
       </template>
-      <template #date-data="{row}">
-        <span v-if="row.date">{{row.date ? dayjs(row.date).format("DD.MM.YY") : ''}}</span>
-        <span v-if="row.documentDate">{{row.documentDate ? dayjs(row.documentDate).format("DD.MM.YY") : ''}}</span>
+      <template #date-cell="{ row }">
+        <span v-if="row.original.date">{{ row.original.date ? dayjs(row.original.date).format("DD.MM.YY") : '' }}</span>
+        <span v-if="row.original.documentDate">{{ row.original.documentDate ? dayjs(row.original.documentDate).format("DD.MM.YY") : '' }}</span>
       </template>
-      <template #dueDate-data="{row}">
-        <span v-if="row.paymentDays && ['invoices','advanceInvoices'].includes(row.type)" >{{row.documentDate ? dayjs(row.documentDate).add(row.paymentDays,'day').format("DD.MM.YY") : ''}}</span>
+      <template #dueDate-cell="{ row }">
+        <span v-if="row.original.paymentDays && ['invoices','advanceInvoices'].includes(row.original.type)">{{ row.original.documentDate ? dayjs(row.original.documentDate).add(row.original.paymentDays,'day').format("DD.MM.YY") : '' }}</span>
       </template>
-      <template #amount-data="{row}">
-        <span v-if="row.type !== 'deliveryNotes'">{{useCurrency(useSum().getCreatedDocumentSum(row, createddocuments))}}</span>
+      <template #amount-cell="{ row }">
+        <span v-if="row.original.type !== 'deliveryNotes'">{{ useCurrency(useSum().getCreatedDocumentSum(row.original, createddocuments)) }}</span>
       </template>
     </UTable>
 

frontend/components/EntityShowSubFiles.vue

@@ -94,41 +94,43 @@ function isImage(file) {
   </UCard>
 
   <!-- 📱 PDF / IMG Viewer Slideover -->
-  <UModal v-model="showViewer" side="bottom" class="h-[100dvh]" fullscreen>
-    <!-- Header -->
-    <div class="p-4 border-b flex justify-between items-center flex-shrink-0">
-      <h3 class="font-bold truncate max-w-[70vw]">{{ activeFile?.path?.split("/").pop() }}</h3>
-      <UButton icon="i-heroicons-x-mark" variant="ghost" @click="closeViewer" />
-    </div>
-
-    <!-- Content -->
-    <div class="flex-1 overflow-y-auto m-2">
-      <!-- PDF -->
-      <div v-if="activeFile && isPdf(activeFile)" class="h-full">
-        <PDFViewer
-            :no-controls="true"
-            :file-id="activeFile.id"
-            location="fileviewer-mobile"
-            class="h-full"
-        />
+  <UModal v-model:open="showViewer" side="bottom" class="h-[100dvh]" fullscreen>
+    <template #content>
+      <!-- Header -->
+      <div class="p-4 border-b flex justify-between items-center flex-shrink-0">
+        <h3 class="font-bold truncate max-w-[70vw]">{{ activeFile?.path?.split("/").pop() }}</h3>
+        <UButton icon="i-heroicons-x-mark" variant="ghost" @click="closeViewer" />
       </div>
 
-      <!-- IMAGE -->
-      <div
-          v-else-if="activeFile && isImage(activeFile)"
-          class="p-4 flex justify-center"
-      >
-        <img
-            :src="activeFile.url"
-            class="max-w-full max-h-[80vh] rounded-lg shadow"
+      <!-- Content -->
+      <div class="flex-1 overflow-y-auto m-2">
+        <!-- PDF -->
+        <div v-if="activeFile && isPdf(activeFile)" class="h-full">
+          <PDFViewer
+              :no-controls="true"
+              :file-id="activeFile.id"
+              location="fileviewer-mobile"
+              class="h-full"
+          />
+        </div>
+
+        <!-- IMAGE -->
+        <div
+            v-else-if="activeFile && isImage(activeFile)"
+            class="p-4 flex justify-center"
+        >
+          <img
+              :src="activeFile.url"
+              class="max-w-full max-h-[80vh] rounded-lg shadow"
+          />
+        </div>
+
+        <UAlert
+            v-else
+            title="Nicht unterstützter Dateityp"
+            icon="i-heroicons-exclamation-triangle"
         />
       </div>
-
-      <UAlert
-          v-else
-          title="Nicht unterstützter Dateityp"
-          icon="i-heroicons-exclamation-triangle"
-      />
-    </div>
+    </template>
   </UModal>
 </template>

frontend/components/EntityShowSubInformation.vue

@@ -65,7 +65,7 @@ const renderDatapointValue = (datapoint) => {
     </template>
     <UAlert
         v-if="props.item.archived"
-        color="rose"
+        color="error"
         variant="outline"
         :title="`${dataType.labelSingle} archiviert`"
         icon="i-heroicons-archive-box"

frontend/components/EntityShowSubOwnAccountsStatements.vue

@@ -77,21 +77,21 @@ const renderedAllocations = computed(() => {
   <UCard class="mt-5">
     <UTable
         v-if="props.item.statementallocations"
-        :rows="renderedAllocations"
-        :columns="[{key:'amount', label:'Betrag'},{key:'date', label:'Datum'},{key:'partner', label:'Partner'},{key:'description', label:'Beschreibung'}]"
-        @select="(i) => selectAllocation(i)"
-        :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Buchungen anzuzeigen' }"
+        :data="renderedAllocations"
+        :columns="normalizeTableColumns([{key:'amount', label:'Betrag'},{key:'date', label:'Datum'},{key:'partner', label:'Partner'},{key:'description', label:'Beschreibung'}])"
+        :on-select="(i) => selectAllocation(i)"
+        :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Buchungen anzuzeigen' }"
     >
-      <template #amount-data="{row}">
-        <span class="text-right text-rose-600" v-if="row.amount < 0 || row.color === 'red'">{{useCurrency(row.amount)}}</span>
-        <span class="text-right text-primary-500" v-else-if="row.amount > 0 || row.color === 'green'">{{useCurrency(row.amount)}}</span>
-        <span v-else>{{useCurrency(row.amount)}}</span>
+      <template #amount-cell="{row}">
+        <span class="text-right text-rose-600" v-if="row.original.amount < 0 || row.original.color === 'red'">{{useCurrency(row.original.amount)}}</span>
+        <span class="text-right text-primary-500" v-else-if="row.original.amount > 0 || row.original.color === 'green'">{{useCurrency(row.original.amount)}}</span>
+        <span v-else>{{useCurrency(row.original.amount)}}</span>
       </template>
-      <template #date-data="{row}">
-        {{row.date ? dayjs(row.date).format('DD.MM.YYYY') : ''}}
+      <template #date-cell="{row}">
+        {{row.original.date ? dayjs(row.original.date).format('DD.MM.YYYY') : ''}}
       </template>
-      <template #description-data="{row}">
-        {{row.description ? row.description : ''}}
+      <template #description-cell="{row}">
+        {{row.original.description ? row.original.description : ''}}
       </template>
     </UTable>
   </UCard>

frontend/components/EntityShowSubPhases.vue

@@ -95,26 +95,26 @@ const changeActivePhase = async (key) => {
     <UAccordion
         :items="renderedPhases"
     >
-      <template #default="{item,index,open}">
+      <template #default="slotProps">
         <UButton
             variant="ghost"
-            :color="item.active ? 'primary' : 'white'"
+            :color="slotProps.item.active ? 'primary' : 'white'"
             class="mb-1"
             :disabled="true"
         >
           <template #leading>
             <div class="w-6 h-6  flex items-center justify-center -my-1">
-              <UIcon :name="item.icon" class="w-4 h-4 " />
+              <UIcon :name="slotProps.item.icon" class="w-4 h-4 " />
             </div>
           </template>
 
-          <span class="truncate"> {{item.label}}</span>
+          <span class="truncate"> {{ slotProps.item.label }}</span>
 
           <template #trailing>
             <UIcon
                 name="i-heroicons-chevron-right-20-solid"
                 class="w-5 h-5 ms-auto transform transition-transform duration-200"
-                :class="[open && 'rotate-90']"
+                :class="[slotProps?.open && 'rotate-90']"
             />
           </template>
 

frontend/components/EntityShowSubTimes.vue

@@ -67,40 +67,40 @@ const columns = [
   <UCard class="mt-5">
     <UTable
         class="mt-3"
-        :columns="columns"
-        :rows="props.item.times"
-        :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
+        :columns="normalizeTableColumns(columns)"
+        :data="props.item.times"
+        :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
     >
-      <template #state-data="{row}">
+      <template #state-cell="{ row }">
                 <span
-                    v-if="row.state === 'Entwurf'"
-                    class="text-rose-500"
-                >{{row.state}}</span>
+                    v-if="row.original.state === 'Entwurf'"
+                    class="text-error-500"
+                >{{ row.original.state }}</span>
         <span
-            v-if="row.state === 'Eingereicht'"
+            v-if="row.original.state === 'Eingereicht'"
             class="text-cyan-500"
-        >{{row.state}}</span>
+        >{{ row.original.state }}</span>
         <span
-            v-if="row.state === 'Bestätigt'"
+            v-if="row.original.state === 'Bestätigt'"
             class="text-primary-500"
-        >{{row.state}}</span>
+        >{{ row.original.state }}</span>
       </template>
-      <template #user-data="{row}">
-        {{row.profile ? row.profile.fullName : "" }}
+      <template #user-cell="{ row }">
+        {{ row.original.profile ? row.original.profile.fullName : "" }}
       </template>
 
-      <template #startDate-data="{row}">
-        {{dayjs(row.startDate).format("DD.MM.YY HH:mm")}}
+      <template #startDate-cell="{ row }">
+        {{ dayjs(row.original.startDate).format("DD.MM.YY HH:mm") }}
       </template>
-      <template #endDate-data="{row}">
-        {{dayjs(row.endDate).format("DD.MM.YY HH:mm")}}
+      <template #endDate-cell="{ row }">
+        {{ dayjs(row.original.endDate).format("DD.MM.YY HH:mm") }}
       </template>
-      <template #duration-data="{row}">
-        {{Math.floor(dayjs(row.endDate).diff(row.startDate, "minutes")/60)}}:{{String(dayjs(row.endDate).diff(row.startDate, "minutes") % 60).padStart(2,"0")}} h
+      <template #duration-cell="{ row }">
+        {{ Math.floor(dayjs(row.original.endDate).diff(row.original.startDate, "minutes") / 60) }}:{{ String(dayjs(row.original.endDate).diff(row.original.startDate, "minutes") % 60).padStart(2,"0") }} h
 
       </template>
-      <template #project-data="{row}">
-        {{row.project ? row.project.name : "" }}
+      <template #project-cell="{ row }">
+        {{ row.original.project ? row.original.project.name : "" }}
       </template>
     </UTable>
   </UCard>

frontend/components/EntityTable.vue

@@ -58,76 +58,101 @@
   const dataType = dataStore.dataTypes[props.type]
 
   const selectedItem = ref(0)
-  const sort = ref({
-    column: dataType.sortColumn || "date",
-    direction: 'desc'
-  })
+  const sorting = ref([{
+    id: dataType.sortColumn || "date",
+    desc: true
+  }])
+  const normalizedColumns = computed(() => normalizeTableColumns(props.columns))
+  const truncateValue = (value, maxLength) => {
+    if (value === null || value === undefined || value === '') {
+      return '\u00A0'
+    }
+
+    const stringValue = String(value)
+    if (!maxLength || stringValue.length <= maxLength) {
+      return stringValue
+    }
+
+    return `${stringValue.substring(0, maxLength)}...`
+  }
+  const handleSortChange = (value) => {
+    const nextSort = Array.isArray(value) ? value[0] : undefined
+
+    if (!nextSort?.id) {
+      return
+    }
+
+    emit('sort', {
+      sort_column: nextSort.id,
+      sort_direction: nextSort.desc ? 'desc' : 'asc'
+    })
+  }
+  const handleSelect = (row) => {
+    router.push(getShowRoute(props.type, row.original.id))
+  }
 
 </script>
 
 <template>
   <UTable
       :loading="props.loading"
-      :loading-state="{ icon: 'i-heroicons-arrow-path-20-solid', label: 'Loading...' }"
       sort-mode="manual"
-      v-model:sort="sort"
-      @update:sort="emit('sort',{sort_column: sort.column, sort_direction: sort.direction})"
+      v-model:sorting="sorting"
+      @update:sorting="handleSortChange"
       v-if="dataType && columns"
-      :rows="props.rows"
-      :columns="props.columns"
+      :data="props.rows"
+      :columns="normalizedColumns"
       class="w-full"
       :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
-      @select="(i) => router.push(getShowRoute(type, i.id))"
-      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: `Keine ${dataType.label} anzuzeigen` }"
+      :on-select="handleSelect"
+      :empty="`Keine ${dataType.label} anzuzeigen`"
   >
-<!--    <template
-        v-for="column in dataType.templateColumns.filter(i => !i.disabledInTable)"
-        v-slot:[`${column.key}-header`]="{row}">
-      <span class="text-nowrap">{{column.label}}</span>
-    </template>-->
-    <template #name-data="{row}">
+    <template #name-cell="{ row }">
       <span
-          v-if="row.id === props.rows[selectedItem].id"
-          class="text-primary-500 font-bold">
-        <UTooltip
-            :text="row.name"
-        >
-          {{dataType.templateColumns.find(i => i.key === "name").maxLength ? (row.name.length > dataType.templateColumns.find(i => i.key === "name").maxLength ? `${row.name.substring(0,dataType.templateColumns.find(i => i.key === "name").maxLength)}...` : row.name ) : row.name}}
+          v-if="row.original.id === props.rows[selectedItem]?.id"
+          class="block truncate text-primary-500 font-bold"
+      >
+        <UTooltip :text="row.original.name">
+          <span class="block truncate">
+            {{ truncateValue(row.original.name, dataType.templateColumns.find(i => i.key === "name")?.maxLength) }}
+          </span>
         </UTooltip>      </span>
-      <span v-else>
-        <UTooltip
-          :text="row.name"
-        >
-          {{dataType.templateColumns.find(i => i.key === "name").maxLength ? (row.name.length > dataType.templateColumns.find(i => i.key === "name").maxLength ? `${row.name.substring(0,dataType.templateColumns.find(i => i.key === "name").maxLength)}...` : row.name ) : row.name}}
+      <span v-else class="block truncate">
+        <UTooltip :text="row.original.name">
+          <span class="block truncate">
+            {{ truncateValue(row.original.name, dataType.templateColumns.find(i => i.key === "name")?.maxLength) }}
+          </span>
         </UTooltip>
       </span>
     </template>
-    <template #fullName-data="{row}">
+    <template #fullName-cell="{ row }">
       <span
-          v-if="row.id === props.rows[selectedItem].id"
-          class="text-primary-500 font-bold">{{row.fullName}}
+          v-if="row.original.id === props.rows[selectedItem]?.id"
+          class="block truncate text-primary-500 font-bold">{{ row.original.fullName }}
       </span>
-      <span v-else>
-        {{row.fullName}}
+      <span v-else class="block truncate">
+        {{ row.original.fullName }}
       </span>
     </template>
-    <template #licensePlate-data="{row}">
+    <template #licensePlate-cell="{ row }">
       <span
-          v-if="row.id === props.rows[selectedItem].id"
-          class="text-primary-500 font-bold">{{row.licensePlate}}
+          v-if="row.original.id === props.rows[selectedItem]?.id"
+          class="block truncate text-primary-500 font-bold">{{ row.original.licensePlate }}
       </span>
-      <span v-else>
-        {{row.licensePlate}}
+      <span v-else class="block truncate">
+        {{ row.original.licensePlate }}
       </span>
     </template>
     <template
         v-for="column in dataType.templateColumns.filter(i => i.key !== 'name' && i.key !== 'fullName' && i.key !== 'licensePlate' && !i.disabledInTable)"
-        v-slot:[`${column.key}-data`]="{row}">
-      <component v-if="column.component" :is="column.component" :row="row"></component>
-      <span v-else-if="row[column.key]">
-        <UTooltip :text="row[column.key]">
-        {{row[column.key] ? `${column.maxLength ? (row[column.key].length > column.maxLength ? `${row[column.key].substring(0,column.maxLength)}...` : row[column.key]) : row[column.key]} ${column.unit ? column.unit : ''}`: ''}}
-      </UTooltip>
+        v-slot:[`${column.key}-cell`]="{ row }">
+      <component v-if="column.component" :is="column.component" :row="row.original"></component>
+      <span v-else-if="row.original[column.key]" class="block truncate">
+        <UTooltip :text="String(row.original[column.key])">
+          <span class="block truncate">
+            {{ `${truncateValue(row.original[column.key], column.maxLength)}${column.unit ? ` ${column.unit}` : ''}` }}
+          </span>
+        </UTooltip>
       </span>
 
     </template>

frontend/components/EntityTableMobile.vue

@@ -77,7 +77,7 @@
 
 <!--  <UTable
       v-if="dataType && columns"
-      :rows="props.rows"
+      :data="props.rows"
       :columns="props.columns"
       class="w-full"
       :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"

frontend/components/GlobalMessages.vue

@@ -55,17 +55,19 @@ setup()
 </script>
 
 <template>
-  <UModal v-model="showMessageModal" prevent-close>
-    <UCard>
-      <template #header>
-        <span class="font-bold">{{messageToShow.title}}</span>
-      </template>
-      <p class=" my-2" v-html="messageToShow.description"></p>
-      <UButton
-          variant="outline"
-          @click="markMessageAsRead"
-      >Gelesen</UButton>
-    </UCard>
+  <UModal v-model:open="showMessageModal" prevent-close>
+    <template #content>
+      <UCard>
+        <template #header>
+          <span class="font-bold">{{messageToShow.title}}</span>
+        </template>
+        <p class=" my-2" v-html="messageToShow.description"></p>
+        <UButton
+            variant="outline"
+            @click="markMessageAsRead"
+        >Gelesen</UButton>
+      </UCard>
+    </template>
   </UModal>
 
 <!--  <UCard
@@ -79,7 +81,7 @@ setup()
         variant="ghost"
         @click="showMessage(globalMessages[0])"
     />
-    <UModal v-model="showMessageModal">
+    <UModal v-model:open="showMessageModal">
       <UCard>
         <template #header>
           <span class="font-bold">{{messageToShow.title}}</span>

frontend/components/GlobalSearch.vue

@@ -123,18 +123,20 @@ function onSelect (option) {
   />
 
   <UModal
-      v-model="showCommandPalette"
+      v-model:open="showCommandPalette"
   >
-    <UCommandPalette
-        v-model="selectedCommand"
-        :groups="groups"
-        :autoselect="false"
-        @update:model-value="onSelect"
-        ref="commandPaletteRef"
-    />
+    <template #content>
+      <UCommandPalette
+          v-model="selectedCommand"
+          :groups="groups"
+          :autoselect="false"
+          @update:model-value="onSelect"
+          ref="commandPaletteRef"
+      />
+    </template>
   </UModal>
 </template>
 
 <style scoped>
 
-</style>
+</style>

frontend/components/HelpSlideover.vue

@@ -1,6 +1,16 @@
 <script setup>
+import dayjs from 'dayjs'
+
 const { isHelpSlideoverOpen } = useDashboard()
-const { metaSymbol } = useShortcuts()
+const { entries, pending, error, seenState, refresh, markAsSeen } = useChangelog()
+
+const metaSymbol = computed(() => {
+  if (import.meta.server) {
+    return 'Ctrl'
+  }
+
+  return /Mac|iPhone|iPad|iPod/i.test(navigator.platform) ? '⌘' : 'Ctrl'
+})
 
 const shortcuts = ref(false)
 const query = ref('')
@@ -122,7 +132,7 @@ const addContactRequest = async () => {
     toast.add({title: "Anfrage erfolgreich erstellt"})
     resetContactRequest()
   } else {
-    toast.add({title: "Anfrage konnte nicht erstellt werden",color:"rose"})
+    toast.add({title: "Anfrage konnte nicht erstellt werden",color:"error"})
   }
   loadingContactRequest.value = false
 }
@@ -133,10 +143,25 @@ const resetContactRequest = () => {
     title: "",
   }
 }
+
+const lastOpenedLabel = computed(() => {
+  if (!seenState.value.lastOpenedAt) return 'Noch nicht geöffnet'
+
+  return dayjs(seenState.value.lastOpenedAt).format('DD.MM.YYYY HH:mm')
+})
+
+const changelogEntries = computed(() => entries.value.slice(0, 12))
+
+watch(isHelpSlideoverOpen, async (isOpen) => {
+  if (!isOpen || shortcuts.value) return
+
+  await refresh(true)
+  markAsSeen()
+})
 </script>
 
 <template>
-  <UDashboardSlideover v-model="isHelpSlideoverOpen">
+  <USlideover v-model:open="isHelpSlideoverOpen" side="right">
     <template #title>
       <UButton
           v-if="shortcuts"
@@ -150,30 +175,94 @@ const resetContactRequest = () => {
       {{ shortcuts ? 'Shortcuts' : 'Hilfe & Information' }}
     </template>
 
-    <div v-if="shortcuts" class="space-y-6">
-      <UInput v-model="query" icon="i-heroicons-magnifying-glass" placeholder="Search..." autofocus color="gray" />
+    <template #body>
+      <div v-if="shortcuts" class="space-y-6">
+        <UInput v-model="query" icon="i-heroicons-magnifying-glass" placeholder="Search..." autofocus color="gray" />
 
-      <div v-for="(category, index) in filteredCategories" :key="index">
-        <p class="mb-3 text-sm text-gray-900 dark:text-white font-semibold">
-          {{ category.title }}
-        </p>
+        <div v-for="(category, index) in filteredCategories" :key="index">
+          <p class="mb-3 text-sm text-gray-900 dark:text-white font-semibold">
+            {{ category.title }}
+          </p>
 
-        <div class="space-y-2">
-          <div v-for="(item, i) in category.items" :key="i" class="flex items-center justify-between">
-            <span class="text-sm text-gray-500 dark:text-gray-400">{{ item.name }}</span>
+          <div class="space-y-2">
+            <div v-for="(item, i) in category.items" :key="i" class="flex items-center justify-between">
+              <span class="text-sm text-gray-500 dark:text-gray-400">{{ item.name }}</span>
 
-            <div class="flex items-center justify-end flex-shrink-0 gap-0.5">
-              <UKbd v-for="(shortcut, j) in item.shortcuts" :key="j">
-                {{ shortcut }}
-              </UKbd>
+              <div class="flex items-center justify-end flex-shrink-0 gap-0.5">
+                <UKbd v-for="(shortcut, j) in item.shortcuts" :key="j">
+                  {{ shortcut }}
+                </UKbd>
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-    <div v-else class="flex flex-col gap-y-3">
-      <UButton v-for="(link, index) in links" :key="index" color="white" v-bind="link" />
-    </div>
+      <div v-else class="flex flex-col gap-y-6">
+        <div class="flex flex-col gap-y-3">
+          <UButton v-for="(link, index) in links" :key="index" color="white" v-bind="link" />
+        </div>
+
+        <UCard>
+          <div class="flex items-center justify-between gap-3">
+            <div>
+              <p class="text-base font-semibold text-gray-900 dark:text-white">
+                Changelog
+              </p>
+              <p class="text-sm text-gray-500 dark:text-gray-400">
+                Zuletzt geöffnet: {{ lastOpenedLabel }}
+              </p>
+            </div>
+
+            <UButton
+                icon="i-heroicons-arrow-path"
+                color="gray"
+                variant="ghost"
+                :loading="pending"
+                @click="refresh(true)"
+            />
+          </div>
+
+          <UAlert
+              v-if="error"
+              class="mt-4"
+              color="red"
+              variant="soft"
+              title="Changelog konnte nicht geladen werden"
+              :description="error"
+          />
+
+          <div v-else-if="pending && !changelogEntries.length" class="mt-4">
+            <UProgress animation="carousel"/>
+          </div>
+
+          <div v-else-if="changelogEntries.length" class="mt-4 flex flex-col gap-3">
+            <div
+                v-for="entry in changelogEntries"
+                :key="entry.hash"
+                class="rounded-lg border border-gray-200 dark:border-gray-800 p-3"
+            >
+              <div class="flex items-start justify-between gap-3">
+                <div class="min-w-0">
+                  <p class="font-medium text-gray-900 dark:text-white break-words">
+                    {{ entry.subject }}
+                  </p>
+                  <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
+                    {{ entry.authorName }} · {{ dayjs(entry.committedAt).format('DD.MM.YYYY HH:mm') }}
+                  </p>
+                </div>
+
+                <UBadge color="gray" variant="subtle">
+                  {{ entry.shortHash }}
+                </UBadge>
+              </div>
+            </div>
+          </div>
+
+          <p v-else class="mt-4 text-sm text-gray-500 dark:text-gray-400">
+            Es sind noch keine Changelog-Einträge verfügbar.
+          </p>
+        </UCard>
+      </div>
 <!--    <div class="mt-5" v-if="!loadingContactRequest">
       <h1 class="font-semibold">Kontaktanfrage:</h1>
       <UForm
@@ -181,29 +270,29 @@ const resetContactRequest = () => {
         @submit="addContactRequest"
         @reset="resetContactRequest"
       >
-&lt;!&ndash;        <UFormGroup
+&lt;!&ndash;        <UFormField
           label="Art:"
         >
           <USelectMenu
               :options="['Hilfe','Software Problem / Bug','Funktionsanfrage','Kontakt','Sonstiges']"
               v-model="contactRequestData.contactType"
           />
-        </UFormGroup>&ndash;&gt;
-        <UFormGroup
+        </UFormField>&ndash;&gt;
+        <UFormField
           label="Titel:"
         >
           <UInput
             v-model="contactRequestData.title"
           />
-        </UFormGroup>
-        <UFormGroup
+        </UFormField>
+        <UFormField
           label="Nachricht:"
         >
           <UTextarea
               v-model="contactRequestData.message"
               rows="6"
           />
-        </UFormGroup>
+        </UFormField>
         <InputGroup class="mt-3">
           <UButton
             type="submit"
@@ -213,7 +302,7 @@ const resetContactRequest = () => {
           </UButton>
           <UButton
             type="reset"
-            color="rose"
+            color="error"
             variant="outline"
             :disabled="!contactRequestData.title && !contactRequestData.message"
           >
@@ -224,5 +313,6 @@ const resetContactRequest = () => {
       </UForm>
     </div>
     <UProgress class="mt-5" animation="carousel" v-else/>-->
-  </UDashboardSlideover>
+    </template>
+  </USlideover>
 </template>

frontend/components/HistoryDisplay.vue

@@ -76,38 +76,40 @@ const renderText = (text) => {
 
 <template>
   <UModal
-    v-model="showAddHistoryItemModal"
+    v-model:open="showAddHistoryItemModal"
 
   >
-    <UCard class="h-full">
-      <template #header>
-        <div class="flex items-center justify-between">
-          <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
-            Eintrag hinzufügen
-          </h3>
-          <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="showAddHistoryItemModal = false" />
-        </div>
-      </template>
+    <template #content>
+      <UCard class="h-full">
+        <template #header>
+          <div class="flex items-center justify-between">
+            <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+              Eintrag hinzufügen
+            </h3>
+            <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="showAddHistoryItemModal = false" />
+          </div>
+        </template>
 
-      <UFormGroup
-        label="Text:"
-      >
-        <UTextarea
-          v-model="addHistoryItemData.text"
-          @keyup.meta.enter="addHistoryItem"
-        />
-<!-- TODO: Add Dropdown and Checking for Usernames  -->
-<!--        <template #help>
-          <UKbd>{{metaSymbol}}</UKbd> <UKbd>Enter</UKbd> Speichern
-        </template>-->
+        <UFormField
+          label="Text:"
+        >
+          <UTextarea
+            v-model="addHistoryItemData.text"
+            @keyup.meta.enter="addHistoryItem"
+          />
+  <!-- TODO: Add Dropdown and Checking for Usernames  -->
+  <!--        <template #help>
+            <UKbd>{{metaSymbol}}</UKbd> <UKbd>Enter</UKbd> Speichern
+          </template>-->
 
-      </UFormGroup>
+        </UFormField>
 
 
-      <template #footer>
-        <UButton @click="addHistoryItem">Speichern</UButton>
-      </template>
-    </UCard>
+        <template #footer>
+          <UButton @click="addHistoryItem">Speichern</UButton>
+        </template>
+      </UCard>
+    </template>
   </UModal>
   <Toolbar
       v-if="!props.renderHeadline && props.elementId && props.type"
@@ -127,7 +129,7 @@ const renderText = (text) => {
         + Eintrag
       </UButton>
     </div>
-    <UDivider class="my-3"/>
+    <USeparator class="my-3"/>
   </div>
 
   <!-- ITEM LIST  -->
@@ -136,7 +138,7 @@ const renderText = (text) => {
         v-if="items.length > 0"
         v-for="(item,index) in items.slice().reverse()"
     >
-      <UDivider
+      <USeparator
           class="my-3"
           v-if="index !== 0"
       />

frontend/components/InboxList.vue

@@ -86,7 +86,7 @@ defineShortcuts({
         </p>
       </div>
 
-      <UDivider />
+      <USeparator />
     </div>
   </UDashboardPanelContent>
 </template>

frontend/components/InboxMail.vue

@@ -34,7 +34,7 @@ defineProps({
       </p>
     </div>
 
-    <UDivider class="my-5" />
+    <USeparator class="my-5" />
 
     <div class="flex-1">
       <p class="text-lg">
@@ -42,7 +42,7 @@ defineProps({
       </p>
     </div>
 
-    <UDivider class="my-5" />
+    <USeparator class="my-5" />
 
     <form @submit.prevent>
       <UTextarea color="gray" required size="xl" :rows="5" :placeholder="`Reply to ${mail.from.name}`">

frontend/components/LabelPrintModal.vue

@@ -90,7 +90,8 @@ watch(() => labelPrinter.connected, (connected) => {
 
 <template>
   <UModal :ui="{ width: 'sm:max-w-5xl' }">
-    <UCard class="w-[92vw] max-w-5xl">
+    <template #content>
+      <UCard class="w-[92vw] max-w-5xl">
 
       <template #header>
         <div class="flex items-center justify-between">
@@ -133,6 +134,7 @@ watch(() => labelPrinter.connected, (connected) => {
         </div>
       </template>
 
-    </UCard>
+      </UCard>
+    </template>
   </UModal>
 </template>

frontend/components/LabelPrinterButton.vue

@@ -18,21 +18,23 @@ const handleClick = async () => {
 <template>
   <!-- Printer Button -->
 
-  <UModal v-model="showPrinterInfo">
-    <UCard>
-      <template #header>
-        <div class="flex items-center justify-between">
-          <h3 class="text-lg font-semibold">Drucker Informationen</h3>
-          <UButton icon="i-heroicons-x-mark" variant="ghost" @click="showPrinterInfo = false" />
-        </div>
-      </template>
-      <p>Seriennummer: {{labelPrinter.info.serial}}</p>
-      <p>MAC: {{labelPrinter.info.mac}}</p>
-      <p>Modell: {{labelPrinter.info.modelId}}</p>
-      <p>Charge: {{labelPrinter.info.charge}}</p>
-      <p>Hardware Version: {{labelPrinter.info.hardwareVersion}}</p>
-      <p>Software Version: {{labelPrinter.info.softwareVersion}}</p>
-    </UCard>
+  <UModal v-model:open="showPrinterInfo">
+    <template #content>
+      <UCard>
+        <template #header>
+          <div class="flex items-center justify-between">
+            <h3 class="text-lg font-semibold">Drucker Informationen</h3>
+            <UButton icon="i-heroicons-x-mark" variant="ghost" @click="showPrinterInfo = false" />
+          </div>
+        </template>
+        <p>Seriennummer: {{labelPrinter.info.serial}}</p>
+        <p>MAC: {{labelPrinter.info.mac}}</p>
+        <p>Modell: {{labelPrinter.info.modelId}}</p>
+        <p>Charge: {{labelPrinter.info.charge}}</p>
+        <p>Hardware Version: {{labelPrinter.info.hardwareVersion}}</p>
+        <p>Software Version: {{labelPrinter.info.softwareVersion}}</p>
+      </UCard>
+    </template>
   </UModal>
 
   <UButton
@@ -50,4 +52,4 @@ const handleClick = async () => {
 
 <style scoped>
 
-</style>
+</style>

frontend/components/MainNav.vue

@@ -1,10 +1,14 @@
 <script setup>
+const props = defineProps({
+  collapsed: {
+    type: Boolean,
+    default: false
+  }
+})
+
 const route = useRoute()
 const auth = useAuthStore()
 const { has } = usePermission()
-
-// Lokaler State für den Taschenrechner
-const showCalculator = ref(false)
 const tenantExtraModules = computed(() => {
   const modules = auth.activeTenantData?.extraModules
   return Array.isArray(modules) ? modules : []
@@ -15,8 +19,21 @@ const showMembersNav = computed(() => {
 const showMemberRelationsNav = computed(() => {
   return tenantExtraModules.value.includes("verein") && has("members")
 })
+const isAdmin = computed(() => Boolean(auth.user?.is_admin))
 const tenantFeatures = computed(() => auth.activeTenantData?.features || {})
 const featureEnabled = (key) => tenantFeatures.value?.[key] !== false
+const visibleItems = (items) => items.filter(item => item && !item.disabled)
+const isRouteActive = (to) => {
+  if (!to) {
+    return false
+  }
+
+  if (to === '/') {
+    return route.path === '/'
+  }
+
+  return route.path === to || route.path.startsWith(`${to}/`)
+}
 
 const links = computed(() => {
   const organisationChildren = [
@@ -25,12 +42,17 @@ const links = computed(() => {
       to: "/tasks",
       icon: "i-heroicons-rectangle-stack"
     } : null,
+    featureEnabled("planningBoard") ? {
+      label: "Plantafel",
+      to: "/organisation/plantafel",
+      icon: "i-heroicons-calendar-days"
+    } : null,
     featureEnabled("wiki") ? {
       label: "Wiki",
       to: "/wiki",
       icon: "i-heroicons-book-open"
     } : null,
-  ].filter(Boolean)
+  ]
 
   const documentChildren = [
     featureEnabled("files") ? {
@@ -50,7 +72,7 @@ const links = computed(() => {
       icon: "i-heroicons-archive-box",
       disabled: true
     } : null,
-  ].filter(Boolean)
+  ]
 
   const communicationChildren = [
     featureEnabled("helpdesk") ? {
@@ -65,7 +87,7 @@ const links = computed(() => {
       icon: "i-heroicons-envelope",
       disabled: true
     } : null,
-  ].filter(Boolean)
+  ]
 
   const contactsChildren = [
     showMembersNav.value && featureEnabled("members") ? {
@@ -88,7 +110,7 @@ const links = computed(() => {
       to: "/standardEntity/contacts",
       icon: "i-heroicons-user-group"
     } : null,
-  ].filter(Boolean)
+  ]
 
   const staffChildren = [
     featureEnabled("staffTime") ? {
@@ -96,7 +118,7 @@ const links = computed(() => {
       to: "/staff/time",
       icon: "i-heroicons-clock",
     } : null,
-  ].filter(Boolean)
+  ]
 
   const accountingChildren = [
     featureEnabled("createDocument") ? {
@@ -114,6 +136,11 @@ const links = computed(() => {
       to: "/incomingInvoices",
       icon: "i-heroicons-document-text",
     } : null,
+    (featureEnabled("createDocument") || featureEnabled("incomingInvoices")) ? {
+      label: "USt-Auswertung",
+      to: "/accounting/tax",
+      icon: "i-heroicons-calculator",
+    } : null,
     featureEnabled("costcentres") ? {
       label: "Kostenstellen",
       to: "/standardEntity/costcentres",
@@ -134,7 +161,7 @@ const links = computed(() => {
       to: "/banking",
       icon: "i-heroicons-document-text",
     } : null,
-  ].filter(Boolean)
+  ]
 
   const inventoryChildren = [
     has("spaces") && featureEnabled("spaces") ? {
@@ -162,7 +189,7 @@ const links = computed(() => {
       to: "/standardEntity/inventoryitemgroups",
       icon: "i-heroicons-puzzle-piece"
     } : null,
-  ].filter(Boolean)
+  ]
 
   const masterDataChildren = [
     has("products") && featureEnabled("products") ? {
@@ -215,7 +242,7 @@ const links = computed(() => {
       to: "/standardEntity/vehicles",
       icon: "i-heroicons-truck"
     } : null,
-  ].filter(Boolean)
+  ]
 
   const settingsChildren = [
     featureEnabled("settingsNumberRanges") ? {
@@ -243,29 +270,42 @@ const links = computed(() => {
       to: "/settings/tenant",
       icon: "i-heroicons-building-office",
     } : null,
+    isAdmin.value ? {
+      label: "Administration",
+      to: "/settings/admin",
+      icon: "i-heroicons-shield-check",
+    } : null,
     featureEnabled("export") ? {
       label: "Export",
       to: "/export",
       icon: "i-heroicons-clipboard-document-list"
     } : null,
-  ].filter(Boolean)
+  ]
 
-  return [
+  const visibleOrganisationChildren = visibleItems(organisationChildren)
+  const visibleDocumentChildren = visibleItems(documentChildren)
+  const visibleCommunicationChildren = visibleItems(communicationChildren)
+  const visibleContactsChildren = visibleItems(contactsChildren)
+  const visibleStaffChildren = visibleItems(staffChildren)
+  const visibleAccountingChildren = visibleItems(accountingChildren)
+  const visibleInventoryChildren = visibleItems(inventoryChildren)
+  const visibleMasterDataChildren = visibleItems(masterDataChildren)
+  const visibleSettingsChildren = visibleItems(settingsChildren)
+
+  return visibleItems([
     ...(auth.profile?.pinned_on_navigation || []).map(pin => {
       if (pin.type === "external") {
         return {
           label: pin.label,
           to: pin.link,
           icon: pin.icon,
-          target: "_blank",
-          pinned: true
+          target: "_blank"
         }
       } else if (pin.type === "standardEntity") {
         return {
           label: pin.label,
           to: pin.datatype === "tasks" ? `/tasks/show/${pin.id}` : `/standardEntity/${pin.datatype}/show/${pin.id}`,
-          icon: pin.icon,
-          pinned: true
+          icon: pin.icon
         }
       }
     }),
@@ -282,55 +322,6 @@ const links = computed(() => {
       to: "/historyitems",
       icon: "i-heroicons-book-open"
     } : null,
-    ...(organisationChildren.length > 0 ? [{
-      label: "Organisation",
-      icon: "i-heroicons-rectangle-stack",
-      defaultOpen: false,
-      children: organisationChildren
-    }] : []),
-    ...(documentChildren.length > 0 ? [{
-      label: "Dokumente",
-      icon: "i-heroicons-rectangle-stack",
-      defaultOpen: false,
-      children: documentChildren
-    }] : []),
-    ...(communicationChildren.length > 0 ? [{
-      label: "Kommunikation",
-      icon: "i-heroicons-megaphone",
-      defaultOpen: false,
-      children: communicationChildren
-    }] : []),
-    ...(contactsChildren.length > 0 ? [{
-      label: "Kontakte",
-      defaultOpen: false,
-      icon: "i-heroicons-user-group",
-      children: contactsChildren
-    }] : []),
-    ...(staffChildren.length > 0 ? [{
-      label: "Mitarbeiter",
-      defaultOpen: false,
-      icon: "i-heroicons-user-group",
-      children: staffChildren
-    }] : []),
-    ...(accountingChildren.length > 0 ? [{
-      label: "Buchhaltung",
-      defaultOpen: false,
-      icon: "i-heroicons-chart-bar-square",
-      children: accountingChildren
-    }] : []),
-    ...(inventoryChildren.length > 0 ? [{
-      label: "Lager",
-      icon: "i-heroicons-puzzle-piece",
-      defaultOpen: false,
-      children: inventoryChildren
-    }] : []),
-    ...(masterDataChildren.length > 0 ? [{
-      label: "Stammdaten",
-      defaultOpen: false,
-      icon: "i-heroicons-clipboard-document",
-      children: masterDataChildren
-    }] : []),
-
     ...(has("projects") && featureEnabled("projects")) ? [{
       label: "Projekte",
       to: "/standardEntity/projects",
@@ -346,90 +337,139 @@ const links = computed(() => {
       to: "/standardEntity/plants",
       icon: "i-heroicons-clipboard-document"
     }] : [],
-    ...(settingsChildren.length > 0 ? [{
+    ...(visibleOrganisationChildren.length > 0 ? [{
+      label: "Organisation",
+      icon: "i-heroicons-rectangle-stack",
+      defaultOpen: false,
+      children: visibleOrganisationChildren
+    }] : []),
+    ...(visibleDocumentChildren.length > 0 ? [{
+      label: "Dokumente",
+      icon: "i-heroicons-rectangle-stack",
+      defaultOpen: false,
+      children: visibleDocumentChildren
+    }] : []),
+    ...(visibleCommunicationChildren.length > 0 ? [{
+      label: "Kommunikation",
+      icon: "i-heroicons-megaphone",
+      defaultOpen: false,
+      children: visibleCommunicationChildren
+    }] : []),
+    ...(visibleContactsChildren.length > 0 ? [{
+      label: "Kontakte",
+      defaultOpen: false,
+      icon: "i-heroicons-user-group",
+      children: visibleContactsChildren
+    }] : []),
+    ...(visibleStaffChildren.length > 0 ? [{
+      label: "Mitarbeiter",
+      defaultOpen: false,
+      icon: "i-heroicons-user-group",
+      children: visibleStaffChildren
+    }] : []),
+    ...(visibleAccountingChildren.length > 0 ? [{
+      label: "Buchhaltung",
+      defaultOpen: false,
+      icon: "i-heroicons-chart-bar-square",
+      children: visibleAccountingChildren
+    }] : []),
+    ...(visibleInventoryChildren.length > 0 ? [{
+      label: "Lager",
+      icon: "i-heroicons-puzzle-piece",
+      defaultOpen: false,
+      children: visibleInventoryChildren
+    }] : []),
+    ...(visibleMasterDataChildren.length > 0 ? [{
+      label: "Stammdaten",
+      defaultOpen: false,
+      icon: "i-heroicons-clipboard-document",
+      children: visibleMasterDataChildren
+    }] : []),
+
+
+    ...(visibleSettingsChildren.length > 0 ? [{
       label: "Einstellungen",
       defaultOpen: false,
       icon: "i-heroicons-cog-8-tooth",
-      children: settingsChildren
+      children: visibleSettingsChildren
     }] : []),
-  ].filter(Boolean)
+  ])
 })
 
-const accordionItems = computed(() =>
-    links.value.filter(item => Array.isArray(item.children) && item.children.length > 0)
-)
+const navItems = computed(() =>
+  links.value
+    .filter(Boolean)
+    .map((item, index) => {
+      const children = Array.isArray(item.children)
+        ? item.children.map((child, childIndex) => ({
+          ...child,
+          value: child.id || child.label || `${index}-${childIndex}`,
+          active: isRouteActive(child.to)
+        }))
+        : undefined
 
-const buttonItems = computed(() =>
-    links.value.filter(item => !item.children || item.children.length === 0)
+      const active = item.active || isRouteActive(item.to) || Boolean(children?.some(child => child.active))
+
+      return {
+        ...item,
+        children,
+        value: item.id || item.label || String(index),
+        defaultOpen: item.defaultOpen || active,
+        active,
+        tooltip: true,
+        popover: true,
+        trailingIcon: children?.length ? undefined : ''
+      }
+    })
 )
 </script>
 
 <template>
-  <div class="flex flex-col gap-1">
-    <UButton
-        v-for="item in buttonItems"
-        :key="item.label"
-        variant="ghost"
-        :color="(item.to && route.path === item.to) ? 'primary' : (item.pinned ? 'amber' : 'gray')"
-        :icon="item.pinned ? 'i-heroicons-star' : item.icon"
-        class="w-full"
-        :to="item.to"
-        :target="item.target"
-        @click="item.click ? item.click() : null"
-    >
-      <UIcon
-          v-if="item.pinned"
-          :name="item.icon"
-          class="w-5 h-5 me-2"
-      />
-      {{ item.label }}
-    </UButton>
-  </div>
-
-  <UDivider class="my-2"/>
-
-  <UAccordion
-      :items="accordionItems"
-      :multiple="false"
-      class="mt-2"
+  <UNavigationMenu
+      :items="navItems"
+      orientation="vertical"
+      :collapsed="props.collapsed"
+      tooltip
+      popover
+      color="neutral"
+      highlight
+      highlight-color="primary"
+      class="w-full"
+      :ui="{
+        root: 'w-full',
+        list: 'space-y-1',
+        link: 'min-w-0 rounded-lg px-2.5 py-2',
+        linkLeadingIcon: 'size-5 shrink-0',
+        linkLabel: 'truncate',
+        childList: 'ms-0 space-y-1 border-l border-default ps-3',
+        childLink: 'min-w-0 rounded-lg px-2 py-1.5',
+        childLinkLabel: 'truncate'
+      }"
   >
-    <template #default="{ item, open }">
-      <UButton
-          variant="ghost"
-          :color="(item.children?.some(c => route.path.includes(c.to))) ? 'primary' : 'gray'"
-          :icon="item.icon"
-          class="w-full"
+    <template #item-leading="{ item, active }">
+      <UIcon
+          v-if="item.icon"
+          :name="item.icon"
+          class="size-5 shrink-0"
+          :class="active ? 'text-primary' : 'text-muted'"
+      />
+    </template>
+
+    <template #item-trailing="{ item, active }">
+      <UBadge
+          v-if="item.badge && !props.collapsed"
+          color="primary"
+          variant="soft"
+          size="xs"
       >
-        {{ item.label }}
-        <template #trailing>
-          <UIcon
-              name="i-heroicons-chevron-right-20-solid"
-              class="w-5 h-5 ms-auto transform transition-transform duration-200"
-              :class="[open && 'rotate-90']"
-          />
-        </template>
-      </UButton>
+        {{ item.badge }}
+      </UBadge>
+      <UIcon
+          v-else-if="item.children?.length"
+          name="i-heroicons-chevron-down-20-solid"
+          class="size-4 shrink-0 transition-transform"
+          :class="active ? 'text-primary' : 'text-muted'"
+      />
     </template>
-
-    <template #item="{ item }">
-      <div class="flex flex-col">
-        <UButton
-            v-for="child in item.children"
-            :key="child.label"
-            variant="ghost"
-            :color="child.to === route.path ? 'primary' : 'gray'"
-            :icon="child.icon"
-            class="ml-4"
-            :to="child.to"
-            :target="child.target"
-            :disabled="child.disabled"
-            @click="child.click ? child.click() : null"
-        >
-          {{ child.label }}
-        </UButton>
-      </div>
-    </template>
-  </UAccordion>
-
-  <Calculator v-if="showCalculator" v-model="showCalculator"/>
+  </UNavigationMenu>
 </template>

frontend/components/NotificationsSlideover.vue

@@ -36,28 +36,30 @@ const setNotificationAsRead = async (notification) => {
 </script>
 
 <template>
-  <UDashboardSlideover v-model="isNotificationsSlideoverOpen" title="Benachrichtigungen">
-    <NuxtLink
-        v-for="notification in notifications"
-        :key="notification.id"
-        :to="notification.link"
-        class="p-3 rounded-md hover:bg-gray-50 dark:hover:bg-gray-800/50 cursor-pointer flex items-center gap-3 relative"
-        @click="setNotificationAsRead(notification)"
-    >
-      <UChip color="primary" :show="!notification.read && !notification.readAt" inset>
-        <UAvatar alt="FEDEO" size="md" />
-      </UChip>
+  <USlideover v-model:open="isNotificationsSlideoverOpen" title="Benachrichtigungen" side="right">
+    <template #body>
+      <NuxtLink
+          v-for="notification in notifications"
+          :key="notification.id"
+          :to="notification.link"
+          class="p-3 rounded-md hover:bg-gray-50 dark:hover:bg-gray-800/50 cursor-pointer flex items-center gap-3 relative"
+          @click="setNotificationAsRead(notification)"
+      >
+        <UChip color="primary" :show="!notification.read && !notification.readAt" inset>
+          <UAvatar alt="FEDEO" size="md" />
+        </UChip>
 
-      <div class="text-sm flex-1">
-        <p class="flex items-center justify-between">
-          <span class="text-gray-900 dark:text-white font-medium">{{notification.title}}</span>
+        <div class="text-sm flex-1">
+          <p class="flex items-center justify-between">
+            <span class="text-gray-900 dark:text-white font-medium">{{notification.title}}</span>
 
-          <time :datetime="notification.date || notification.createdAt || notification.created_at" class="text-gray-500 dark:text-gray-400 text-xs" v-text="formatTimeAgo(new Date(notification.createdAt || notification.created_at))" />
-        </p>
-        <p class="text-gray-500 dark:text-gray-400">
-          {{ notification.message }}
-        </p>
-      </div>
-    </NuxtLink>
-  </UDashboardSlideover>
+            <time :datetime="notification.date || notification.createdAt || notification.created_at" class="text-gray-500 dark:text-gray-400 text-xs" v-text="formatTimeAgo(new Date(notification.createdAt || notification.created_at))" />
+          </p>
+          <p class="text-gray-500 dark:text-gray-400">
+            {{ notification.message }}
+          </p>
+        </div>
+      </NuxtLink>
+    </template>
+  </USlideover>
 </template>

frontend/components/PublicDynamicForm.vue

@@ -102,6 +102,10 @@ const currentUnit = computed(() => {
   const selectedService = data.value.services?.find(s => s.id === form.value.service)
   return selectedService?.unitSymbol || data.value?.units?.[0]?.symbol || 'h'
 })
+
+const setDeliveryDateToToday = () => {
+  form.value.deliveryDate = dayjs().format('YYYY-MM-DD')
+}
 </script>
 
 <template>
@@ -115,20 +119,24 @@ const currentUnit = computed(() => {
 
     <div class="space-y-5">
 
-      <UFormGroup
+      <UFormField
           label="Datum der Ausführung"
           :error="errors.deliveryDate"
           required
       >
-        <UInput
-            v-model="form.deliveryDate"
-            type="date"
-            size="lg"
-            icon="i-heroicons-calendar-days"
-        />
-      </UFormGroup>
+        <div class="flex items-center gap-2">
+          <UInput
+              v-model="form.deliveryDate"
+              type="date"
+              size="lg"
+              icon="i-heroicons-calendar-days"
+              class="flex-1"
+          />
+          <UButton color="gray" variant="soft" size="lg" label="Heute" @click="setDeliveryDateToToday" />
+        </div>
+      </UFormField>
 
-      <UFormGroup
+      <UFormField
           v-if="!context?.meta?.defaultProfileId && data?.profiles?.length > 0"
           label="Mitarbeiter"
           :error="errors.profile"
@@ -136,16 +144,16 @@ const currentUnit = computed(() => {
       >
         <USelectMenu
             v-model="form.profile"
-            :options="data.profiles"
-            option-attribute="fullName"
-            value-attribute="id"
+            :items="data.profiles"
+            label-key="fullName"
+            value-key="id"
             placeholder="Name auswählen..."
             searchable
             size="lg"
         />
-      </UFormGroup>
+      </UFormField>
 
-      <UFormGroup
+      <UFormField
           v-if="data?.projects?.length > 0"
           :label="config.ui?.labels?.project || 'Projekt / Auftrag'"
           :error="errors.project"
@@ -153,16 +161,16 @@ const currentUnit = computed(() => {
       >
         <USelectMenu
             v-model="form.project"
-            :options="data.projects"
-            option-attribute="name"
-            value-attribute="id"
+            :items="data.projects"
+            label-key="name"
+            value-key="id"
             placeholder="Wählen..."
             searchable
             size="lg"
         />
-      </UFormGroup>
+      </UFormField>
 
-      <UFormGroup
+      <UFormField
           v-if="data?.services?.length > 0"
           :label="config?.ui?.labels?.service || 'Tätigkeit'"
           :error="errors.service"
@@ -170,16 +178,16 @@ const currentUnit = computed(() => {
       >
         <USelectMenu
             v-model="form.service"
-            :options="data.services"
-            option-attribute="name"
-            value-attribute="id"
+            :items="data.services"
+            label-key="name"
+            value-key="id"
             placeholder="Wählen..."
             searchable
             size="lg"
         />
-      </UFormGroup>
+      </UFormField>
 
-      <UFormGroup
+      <UFormField
           label="Menge / Dauer"
           :error="errors.quantity"
           required
@@ -195,9 +203,9 @@ const currentUnit = computed(() => {
             <span class="text-gray-500 text-sm pr-2">{{ currentUnit }}</span>
           </template>
         </UInput>
-      </UFormGroup>
+      </UFormField>
 
-      <UFormGroup
+      <UFormField
           v-if="config?.features?.agriculture?.showDieselUsage"
           label="Dieselverbrauch"
           :error="errors.diesel"
@@ -208,11 +216,11 @@ const currentUnit = computed(() => {
             <span class="text-gray-500 text-xs">Liter</span>
           </template>
         </UInput>
-      </UFormGroup>
+      </UFormField>
 
-      <UFormGroup :label="config?.ui?.labels?.description || 'Notiz / Vorkommnisse'">
+      <UFormField :label="config?.ui?.labels?.description || 'Notiz / Vorkommnisse'">
         <UTextarea v-model="form.description" :rows="3" placeholder="Optional..." />
-      </UFormGroup>
+      </UFormField>
 
     </div>
 
@@ -226,4 +234,4 @@ const currentUnit = computed(() => {
       />
     </template>
   </UCard>
-</template>
+</template>

frontend/components/SessionRefreshModal.vue

@@ -16,28 +16,30 @@ const onLogout = async () => {
 </script>
 
 <template>
-  <UModal v-model="auth.sessionWarningVisible" prevent-close>
-    <UCard>
-      <template #header>
-        <h3 class="text-lg font-semibold">Sitzung läuft bald ab</h3>
-      </template>
+  <UModal v-model:open="auth.sessionWarningVisible" prevent-close>
+    <template #content>
+      <UCard>
+        <template #header>
+          <h3 class="text-lg font-semibold">Sitzung läuft bald ab</h3>
+        </template>
 
-      <p class="text-sm text-gray-600 dark:text-gray-300">
-        Deine Sitzung endet in
-        <span class="font-semibold">{{ remainingTimeLabel }}</span>.
-        Bitte bestätige, um eingeloggt zu bleiben.
-      </p>
+        <p class="text-sm text-gray-600 dark:text-gray-300">
+          Deine Sitzung endet in
+          <span class="font-semibold">{{ remainingTimeLabel }}</span>.
+          Bitte bestätige, um eingeloggt zu bleiben.
+        </p>
 
-      <template #footer>
-        <div class="flex justify-end gap-2">
-          <UButton variant="outline" color="gray" @click="onLogout">
-            Abmelden
-          </UButton>
-          <UButton color="primary" @click="onRefresh">
-            Eingeloggt bleiben
-          </UButton>
-        </div>
-      </template>
-    </UCard>
+        <template #footer>
+          <div class="flex justify-end gap-2">
+            <UButton variant="outline" color="gray" @click="onLogout">
+              Abmelden
+            </UButton>
+            <UButton color="primary" @click="onRefresh">
+              Eingeloggt bleiben
+            </UButton>
+          </div>
+        </template>
+      </UCard>
+    </template>
   </UModal>
 </template>

frontend/components/StaffTimeEntryModal.vue

@@ -50,6 +50,9 @@ const isOpen = computed({
 
 const toDateStr = (dateStr: string) => dateStr ? $dayjs(dateStr).format('YYYY-MM-DD') : ''
 const toTimeStr = (dateStr: string) => dateStr ? $dayjs(dateStr).format('HH:mm') : ''
+const setDateFieldToToday = (field: 'start_date' | 'end_date') => {
+  state[field] = $dayjs().format('YYYY-MM-DD')
+}
 
 watch(() => props.entry, (newVal) => {
   if (newVal) {
@@ -113,7 +116,7 @@ async function onSubmit(event: FormSubmitEvent<any>) {
     emit('saved')
     isOpen.value = false
   } catch (error: any) {
-    toast.add({ title: 'Fehler', description: error.message, color: 'red' })
+    toast.add({ title: 'Fehler', description: error.message, color: 'error' })
   } finally {
     loading.value = false
   }
@@ -121,51 +124,63 @@ async function onSubmit(event: FormSubmitEvent<any>) {
 </script>
 
 <template>
-  <UModal v-model="isOpen">
-    <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
-      <template #header>
-        <div class="flex items-center justify-between">
-          <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
-            {{ entry ? 'Eintrag bearbeiten' : 'Neue Zeit erfassen' }}
-          </h3>
-          <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isOpen = false" />
-        </div>
-      </template>
+  <UModal v-model:open="isOpen">
+    <template #content>
+      <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+        <template #header>
+          <div class="flex items-center justify-between">
+            <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+              {{ entry ? 'Eintrag bearbeiten' : 'Neue Zeit erfassen' }}
+            </h3>
+            <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isOpen = false" />
+          </div>
+        </template>
 
-      <UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
+        <UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
+          <UFormField label="Typ" name="type">
+            <USelectMenu
+              v-model="state.type"
+              :items="types"
+              value-key="value"
+              label-key="label"
+            />
+          </UFormField>
 
-        <UFormGroup label="Typ" name="type">
-          <USelectMenu v-model="state.type" :options="types" value-attribute="value" option-attribute="label" />
-        </UFormGroup>
+          <div class="grid grid-cols-2 gap-4">
+            <UFormField label="Start Datum" name="start_date">
+              <div class="flex items-center gap-2">
+                <UInput type="date" v-model="state.start_date" class="flex-1" />
+                <UButton color="gray" variant="soft" label="Heute" @click="setDateFieldToToday('start_date')" />
+              </div>
+            </UFormField>
+            <UFormField label="Start Zeit" name="start_time">
+              <UInput type="time" v-model="state.start_time" />
+            </UFormField>
+          </div>
 
-        <div class="grid grid-cols-2 gap-4">
-          <UFormGroup label="Start Datum" name="start_date">
-            <UInput type="date" v-model="state.start_date" />
-          </UFormGroup>
-          <UFormGroup label="Start Zeit" name="start_time">
-            <UInput type="time" v-model="state.start_time" />
-          </UFormGroup>
-        </div>
+          <div class="grid grid-cols-2 gap-4">
+            <UFormField label="Ende Datum" name="end_date">
+              <div class="flex items-center gap-2">
+                <UInput type="date" v-model="state.end_date" class="flex-1" />
+                <UButton color="gray" variant="soft" label="Heute" @click="setDateFieldToToday('end_date')" />
+              </div>
+            </UFormField>
+            <UFormField label="Ende Zeit" name="end_time">
+              <UInput type="time" v-model="state.end_time" />
+            </UFormField>
+          </div>
+          <p class="text-xs text-gray-500 -mt-2">Leer lassen, wenn die Zeit noch läuft.</p>
 
-        <div class="grid grid-cols-2 gap-4">
-          <UFormGroup label="Ende Datum" name="end_date">
-            <UInput type="date" v-model="state.end_date" />
-          </UFormGroup>
-          <UFormGroup label="Ende Zeit" name="end_time">
-            <UInput type="time" v-model="state.end_time" />
-          </UFormGroup>
-        </div>
-        <p class="text-xs text-gray-500 -mt-2">Leer lassen, wenn die Zeit noch läuft.</p>
+          <UFormField label="Beschreibung / Notiz" name="description">
+            <UTextarea v-model="state.description" placeholder="Was wurde gemacht?" />
+          </UFormField>
 
-        <UFormGroup label="Beschreibung / Notiz" name="description">
-          <UTextarea v-model="state.description" placeholder="Was wurde gemacht?" />
-        </UFormGroup>
-
-        <div class="flex justify-end gap-2 pt-4">
-          <UButton label="Abbrechen" color="gray" variant="ghost" @click="isOpen = false" />
-          <UButton type="submit" label="Speichern" color="primary" :loading="loading" />
-        </div>
-      </UForm>
-    </UCard>
+          <div class="flex justify-end gap-2 pt-4">
+            <UButton label="Abbrechen" color="gray" variant="ghost" @click="isOpen = false" />
+            <UButton type="submit" label="Speichern" color="primary" :loading="loading" />
+          </div>
+        </UForm>
+      </UCard>
+    </template>
   </UModal>
-</template>
+</template>

frontend/components/StandardEntityModal.vue

@@ -61,33 +61,35 @@ setupPage()
 
 <template>
   <UModal :fullscreen="props.mode === 'show'">
-    <EntityShow
-        v-if="loaded && props.mode === 'show'"
-        :type="props.type"
-        :item="item"
-        @updateNeeded="setupPage"
-        :key="item"
-        :in-modal="true"
-    />
-    <EntityEdit
-        v-else-if="loaded && (props.mode === 'edit' || props.mode === 'create')"
-        :type="props.type"
-        :item="item"
-        :inModal="true"
-        @return-data="(data) => emit('return-data',data)"
-        :createQuery="props.createQuery"
-        :mode="props.mode"
-    />
-<!--    <EntityList
-        v-else-if="loaded && props.mode === 'list'"
-        :type="props.type"
-        :items="items"
-    />-->
-    <UProgress
-        v-else
-        animation="carousel"
-        class="p-5 mt-10"
-    />
+    <template #content>
+      <EntityShow
+          v-if="loaded && props.mode === 'show'"
+          :type="props.type"
+          :item="item"
+          @updateNeeded="setupPage"
+          :key="item"
+          :in-modal="true"
+      />
+      <EntityEdit
+          v-else-if="loaded && (props.mode === 'edit' || props.mode === 'create')"
+          :type="props.type"
+          :item="item"
+          :inModal="true"
+          @return-data="(data) => emit('return-data',data)"
+          :createQuery="props.createQuery"
+          :mode="props.mode"
+      />
+  <!--    <EntityList
+          v-else-if="loaded && props.mode === 'list'"
+          :type="props.type"
+          :items="items"
+      />-->
+      <UProgress
+          v-else
+          animation="carousel"
+          class="p-5 mt-10"
+      />
+    </template>
   </UModal>
 </template>
 

frontend/components/TenantDropdown.vue

@@ -1,27 +1,59 @@
 <script setup>
 const auth = useAuthStore()
 
-const selectedTenant = ref(auth.user.tenant_id)
+const activeTenantName = computed(() => {
+  return auth.activeTenantData?.name || auth.tenants?.find((tenant) => tenant.id === auth.activeTenant)?.name || 'Mandant waehlen'
+})
 
+const tenantInitials = computed(() => {
+  return activeTenantName.value
+    .split(' ')
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part[0]?.toUpperCase() || '')
+    .join('') || 'M'
+})
 
+const tenantItems = computed(() => [
+  auth.tenants.map((tenant) => ({
+    label: tenant.name,
+    icon: tenant.id === auth.activeTenant ? 'i-heroicons-check' : undefined,
+    disabled: Boolean(tenant.locked),
+    onSelect: async (event) => {
+      if (tenant.locked || tenant.id === auth.activeTenant) {
+        event?.preventDefault?.()
+        return
+      }
+
+      await auth.switchTenant(tenant.id)
+    }
+  }))
+])
 </script>
 
 <template>
   <USelectMenu
-    :options="auth.tenants"
-    value-attribute="id"
-    class="w-40"
-    @change="auth.switchTenant(selectedTenant)"
-    v-model="selectedTenant"
+      :items="tenantItems"
+      :content="{ align: 'start', side: 'bottom', sideOffset: 6 }"
+      :ui="{ content: 'w-[var(--reka-dropdown-menu-trigger-width)] max-w-[var(--reka-dropdown-menu-trigger-width)]' }"
+      class="block w-40"
+      :avatar="{
+        alt: activeTenantName,
+        text: tenantInitials,
+        loading: 'lazy'
+    }"
   >
-    <UButton color="gray" variant="ghost" :class="[open && 'bg-gray-50 dark:bg-gray-800']" class="w-full">
-      <UAvatar :alt="auth.activeTenantData?.name" size="md" />
-
-      <span class="truncate text-gray-900 dark:text-white font-semibold">{{auth.tenants.find(i => auth.activeTenant === i.id).name}}</span>
-    </UButton>
-
-    <template #option="{option}">
-      {{option.name}}
+    <template #default="{ open }">
+      <UButton
+          color="gray"
+          variant="ghost"
+          class="w-full min-w-0 max-w-full justify-start gap-2 rounded-lg px-2.5 py-2 text-left"
+          :class="[open && 'bg-gray-100 dark:bg-gray-800']"
+      >
+        <span class="min-w-0 flex-1 truncate font-medium text-gray-900 dark:text-white">
+          {{ activeTenantName }}
+        </span>
+      </UButton>
     </template>
   </USelectMenu>
-</template>
+</template>

frontend/components/Toolbar.vue

@@ -11,7 +11,7 @@
       <slot name="right"/>
     </InputGroup>
   </div>
-  <UDivider class="my-3"/>
+  <USeparator class="my-3"/>
 </template>
 
 <style scoped>

frontend/components/UDashboardPanelContent.vue

@@ -0,0 +1,27 @@
+<script setup>
+defineOptions({
+  inheritAttrs: false
+})
+
+const props = defineProps({
+  as: {
+    type: [String, Object],
+    default: 'div'
+  }
+})
+
+const attrs = useAttrs()
+</script>
+
+<template>
+  <component
+      :is="props.as"
+      v-bind="attrs"
+      :class="[
+        'min-h-0 flex-1 overflow-y-auto px-4 py-4 sm:px-6 sm:py-5',
+        attrs.class
+      ]"
+  >
+    <slot />
+  </component>
+</template>

frontend/components/UserDropdown.vue

@@ -1,57 +1,44 @@
 <script setup>
-
-const { isHelpSlideoverOpen } = useDashboard()
-const { isDashboardSearchModalOpen } = useUIState()
-const { metaSymbol } = useShortcuts()
 const auth = useAuthStore()
 
-const items = computed(() => [
-  [{
-    slot: 'account',
-    label: '',
-    disabled: true
-  }],  [/*{
-    label: 'Mein Profil',
-    icon: 'i-heroicons-user',
-    to: `/profiles/show/${profileStore.activeProfile.id}`
-  },*/{
-    label: 'Passwort ändern',
+const userItems = computed(() => [[
+  {
+    label: 'Passwort aendern',
     icon: 'i-heroicons-shield-check',
-    to: `/password-change`
-  },{
+    to: '/password-change'
+  },
+  {
     label: 'Abmelden',
     icon: 'i-heroicons-arrow-left-on-rectangle',
-    click: async () => {
+    onSelect: async () => {
       await auth.logout()
-
     }
-  }]
-])
+  }
+]])
 </script>
 
 <template>
-  <UDropdown mode="hover" :items="items" :ui="{ width: 'w-full', item: { disabled: 'cursor-text select-text' } }" :popper="{ strategy: 'absolute', placement: 'top' }" class="w-full">
+  <UDropdownMenu
+    :items="userItems"
+    :content="{ align: 'start', side: 'top', sideOffset: 8 }"
+    :ui="{ content: 'w-[var(--reka-dropdown-menu-trigger-width)] max-w-[var(--reka-dropdown-menu-trigger-width)]' }"
+    class="block w-full"
+  >
     <template #default="{ open }">
-      <UButton color="gray" variant="ghost" class="w-full" :label="auth.user.email" :class="[open && 'bg-gray-50 dark:bg-gray-800']">
-<!--        <template #leading>
-          <UAvatar :alt="auth.user.email"  size="xs" />
-        </template>-->
+      <UButton
+        color="gray"
+        variant="ghost"
+        class="w-full min-w-0 justify-start gap-2 rounded-lg px-2.5 py-2 text-left"
+        :class="[open && 'bg-gray-100 dark:bg-gray-800']"
+      >
+        <span class="min-w-0 flex-1 truncate font-medium text-gray-900 dark:text-white">
+          {{ auth.user.email }}
+        </span>
 
         <template #trailing>
-          <UIcon name="i-heroicons-ellipsis-vertical" class="w-5 h-5 ml-auto" />
+          <UIcon name="i-heroicons-ellipsis-vertical" class="h-5 w-5 shrink-0" />
         </template>
       </UButton>
     </template>
-
-    <template #account>
-      <div class="text-left">
-        <p>
-          Angemeldet als
-        </p>
-        <p class="truncate font-medium text-gray-900 dark:text-white">
-          {{auth.user.email}}
-        </p>
-      </div>
-    </template>
-  </UDropdown>
+  </UDropdownMenu>
 </template>

frontend/components/copyCreatedDocumentModal.vue

@@ -67,12 +67,13 @@ const startImport = () => {
 
 <template>
   <UModal :fullscreen="false">
+    <template #content>
       <UCard>
         <template #header>
           Erstelltes Dokument Kopieren
         </template>
 
-        <UFormGroup
+        <UFormField
             label="Dokumententyp:"
           class="mb-3"
         >
@@ -84,7 +85,7 @@ const startImport = () => {
           >
 
           </USelectMenu>
-        </UFormGroup>
+        </UFormField>
         <UCheckbox
               v-for="key in Object.keys(optionsToImport).filter(i => documentTypeToUse !== props.type ? !['startText','endText'].includes(i) : true)"
               v-model="optionsToImport[key]"
@@ -101,9 +102,10 @@ const startImport = () => {
         </template>
 
       </UCard>
+    </template>
   </UModal>
 </template>
 
 <style scoped>
 
-</style>
+</style>

frontend/components/displayIncomeAndExpenditure.vue

@@ -5,7 +5,15 @@ import { Line } from "vue-chartjs";
 
 dayjs.extend(customParseFormat)
 
+const props = defineProps({
+  headerTarget: {
+    type: String,
+    default: ""
+  }
+})
+
 const tempStore = useTempStore()
+const isMounted = ref(false)
 
 const amountMode = ref("net")
 const granularity = ref("year")
@@ -218,35 +226,88 @@ const chartOptions = ref({
   maintainAspectRatio: false,
 })
 
+const showHeaderControls = computed(() => isMounted.value && !!props.headerTarget)
+const showInlineControls = computed(() => !showHeaderControls.value)
+
+onMounted(() => {
+  isMounted.value = true
+})
+
 loadData()
 </script>
 
 <template>
   <div class="h-full flex flex-col gap-2">
-    <div class="flex flex-wrap items-center justify-between gap-2">
+    <Teleport v-if="showHeaderControls" :to="props.headerTarget">
+      <div class="flex flex-wrap items-center justify-end gap-2">
+        <div class="flex flex-wrap items-center gap-2">
+          <USelectMenu
+            v-model="granularity"
+            :items="granularityOptions"
+            value-key="value"
+            label-key="label"
+            class="w-28"
+          />
+
+          <USelectMenu
+            v-model="selectedYear"
+            :items="yearOptions"
+            value-key="value"
+            label-key="label"
+            class="w-24"
+          />
+
+          <USelectMenu
+            v-if="granularity === 'month'"
+            v-model="selectedMonth"
+            :items="monthOptions"
+            value-key="value"
+            label-key="label"
+            class="w-36"
+          />
+        </div>
+
+        <UButtonGroup size="xs">
+          <UButton
+            :variant="amountMode === 'net' ? 'solid' : 'outline'"
+            @click="amountMode = 'net'"
+          >
+            Netto
+          </UButton>
+          <UButton
+            :variant="amountMode === 'gross' ? 'solid' : 'outline'"
+            @click="amountMode = 'gross'"
+          >
+            Brutto
+          </UButton>
+        </UButtonGroup>
+      </div>
+    </Teleport>
+
+    <div v-if="showInlineControls" class="flex flex-wrap items-center justify-between gap-2">
       <div class="flex flex-wrap items-center gap-2">
         <USelectMenu
           v-model="granularity"
-          :options="granularityOptions"
-          value-attribute="value"
-          option-attribute="label"
+          :items="granularityOptions"
+          value-key="value"
+          label-key="label"
           class="w-28"
         />
 
         <USelectMenu
           v-model="selectedYear"
-          :options="yearOptions"
-          value-attribute="value"
-          option-attribute="label"
+          :items="yearOptions"
+          value-key="value"
+          label-key="label"
           class="w-24"
         />
 
         <USelectMenu
           v-if="granularity === 'month'"
           v-model="selectedMonth"
-          :options="monthOptions"
-          value-attribute="value"
-          option-attribute="label"
+          :items="monthOptions"
+          value-key="value"
+          label-key="label"
           class="w-36"
         />
       </div>

frontend/components/displayOpenBalances.vue

@@ -2,8 +2,6 @@
 
 import dayjs from "dayjs";
 
-const profileStore = useProfileStore();
-
 let unpaidInvoicesSum = ref(0)
 let unpaidInvoicesCount = ref(0)
 let unpaidOverdueInvoicesSum = ref(0)
@@ -18,27 +16,23 @@ const setupPage = async () => {
   let documents = items.filter(i => i.type === "invoices" ||i.type === "advanceInvoices")
 
   let draftDocuments = documents.filter(i => i.state === "Entwurf")
-  let finalizedDocuments = documents.filter(i => i.state === "Gebucht")
-
-  finalizedDocuments = finalizedDocuments.filter(i => i.statementallocations.reduce((n,{amount}) => n + amount, 0).toFixed(2) !== useSum().getCreatedDocumentSum(i, documents).toFixed(2))
-
-  finalizedDocuments = finalizedDocuments.filter(x => (x.type === 'invoices' || x.type === 'advanceInvoices') && x.state === 'Gebucht' && !items.find(i => i.createddocument && i.createddocument.id === x.id))
+  let finalizedDocuments = documents.filter(i => useSum().isOpenCreatedDocument(i, items))
 
 
 
   finalizedDocuments.forEach(i => {
     if(dayjs().subtract(i.paymentDays,"days").isAfter(i.documentDate)) {
-      unpaidOverdueInvoicesSum.value += useSum().getCreatedDocumentSum(i, documents) - i.statementallocations.reduce((n,{amount}) => n + amount, 0)
+      unpaidOverdueInvoicesSum.value += useSum().getCreatedDocumentOpenAmount(i, items)
       unpaidOverdueInvoicesCount.value += 1
     } else {
-      unpaidInvoicesSum.value += useSum().getCreatedDocumentSum(i, items) - i.statementallocations.reduce((n,{amount}) => n + amount, 0)
+      unpaidInvoicesSum.value += useSum().getCreatedDocumentOpenAmount(i, items)
       unpaidInvoicesCount.value += 1
     }
   })
   //unpaidInvoicesCount.value = finalizedDocuments.length
 
   draftDocuments.forEach(i => {
-    draftInvoicesSum.value +=  useSum().getCreatedDocumentSum(i, documents) - i.statementallocations.reduce((n,{amount}) => n + amount, 0)
+    draftInvoicesSum.value +=  useSum().getCreatedDocumentOpenAmount(i, items)
   })
   draftInvoicesCount.value = draftDocuments.length
 
@@ -50,43 +44,91 @@ setupPage()
 </script>
 
 <template>
-  <table>
-    <tr>
-      <td class="break-all">Offene Rechnungen:</td>
-      <td
-          v-if="unpaidInvoicesSum > 0"
-          class="text-orange-500 font-bold text-nowrap"
-      >{{unpaidInvoicesCount}} Stk /<br> {{useCurrency(unpaidInvoicesSum)}}</td>
-      <td v-else class="text-primary-500 font-bold text-no-wrap">0 Stk / 0,00€</td>
-    </tr>
-    <tr>
-      <td class="break-all">Überfällige Rechnungen:</td>
-      <td
-          v-if="unpaidOverdueInvoicesSum !== 0"
-          class="text-rose-600 font-bold text-nowrap"
-      >{{unpaidOverdueInvoicesCount}} Stk /<br> {{useCurrency(unpaidOverdueInvoicesSum)}}</td>
-      <td v-else class="text-primary-500 font-bold text-no-wrap">0 Stk / 0,00€</td>
-    </tr>
-    <tr>
-      <td class="break-all">Angelegte Rechnungsentwürfe:</td>
-      <td
-          v-if="draftInvoicesSum > 0"
-          class="text-orange-500 font-bold text-nowrap"
-      >{{draftInvoicesCount}} Stk /<br> {{useCurrency(draftInvoicesSum)}}</td>
-      <td v-else class="text-primary-500 font-bold text-no-wrap">0 Stk / 0,00€</td>
-    </tr>
-    <tr>
-      <td class="break-all">Vorbereitete Eingangsrechnungen:</td>
-      <td
-          v-if="countPreparedOpenIncomingInvoices > 0"
-          class="text-orange-500 font-bold text-wrap"
-      >{{countPreparedOpenIncomingInvoices}} Stk </td>
-      <td v-else class="text-primary-500 font-bold text-no-wrap">0 Stk</td>
-    </tr>
-  </table>
+  <div class="space-y-3">
+    <div class="balance-row">
+      <p class="balance-label">Offene Rechnungen</p>
+      <div
+        v-if="unpaidInvoicesSum > 0"
+        class="balance-value text-orange-500"
+      >
+        <span>{{ unpaidInvoicesCount }} Stk</span>
+        <span>{{ useCurrency(unpaidInvoicesSum) }}</span>
+      </div>
+      <div v-else class="balance-value text-primary-500">
+        <span>0 Stk</span>
+        <span>0,00€</span>
+      </div>
+    </div>
 
+    <div class="balance-row">
+      <p class="balance-label">Überfällige Rechnungen</p>
+      <div
+        v-if="unpaidOverdueInvoicesSum !== 0"
+        class="balance-value text-rose-600"
+      >
+        <span>{{ unpaidOverdueInvoicesCount }} Stk</span>
+        <span>{{ useCurrency(unpaidOverdueInvoicesSum) }}</span>
+      </div>
+      <div v-else class="balance-value text-primary-500">
+        <span>0 Stk</span>
+        <span>0,00€</span>
+      </div>
+    </div>
+
+    <div class="balance-row">
+      <p class="balance-label">Angelegte Rechnungsentwürfe</p>
+      <div
+        v-if="draftInvoicesSum > 0"
+        class="balance-value text-orange-500"
+      >
+        <span>{{ draftInvoicesCount }} Stk</span>
+        <span>{{ useCurrency(draftInvoicesSum) }}</span>
+      </div>
+      <div v-else class="balance-value text-primary-500">
+        <span>0 Stk</span>
+        <span>0,00€</span>
+      </div>
+    </div>
+
+    <div class="balance-row">
+      <p class="balance-label">Vorbereitete Eingangsrechnungen</p>
+      <div
+        v-if="countPreparedOpenIncomingInvoices > 0"
+        class="balance-value text-orange-500"
+      >
+        <span>{{ countPreparedOpenIncomingInvoices }} Stk</span>
+      </div>
+      <div v-else class="balance-value text-primary-500">
+        <span>0 Stk</span>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style scoped>
+.balance-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 0.75rem;
+  align-items: start;
+}
 
-</style>
+.balance-label {
+  margin: 0;
+  line-height: 1.35;
+  color: rgb(55 65 81);
+}
+
+.balance-value {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  text-align: right;
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+:deep(.dark) .balance-label {
+  color: rgb(209 213 219);
+}
+</style>

frontend/components/displayOpenTasks.vue

@@ -4,11 +4,15 @@ const openTasks = ref([])
 const router = useRouter()
 const auth = useAuthStore()
 
+function isCompletedTask(task) {
+  return ["Abgeschlossen", "Erledigt"].includes(String(task?.categorie || "").trim())
+}
+
 const setupPage = async () => {
   openTasks.value = (await useEntities("tasks").select()).filter((task) => {
     const assignee = task.userId || task.user_id || task.profile
     const currentUser = auth.user?.user_id || auth.user?.id
-    return !task.archived && assignee === currentUser
+    return !task.archived && !isCompletedTask(task) && assignee === currentUser
   })
 }
 
@@ -19,9 +23,9 @@ setupPage()
 <template>
   <UTable
       v-if="openTasks.length > 0"
-    :rows="openTasks"
-      :columns="[{key:'name',label:'Name'},{key:'categorie',label:'Kategorie'}]"
-      @select="(i) => router.push(`/tasks/show/${i.id}`)"
+    :data="openTasks"
+      :columns="normalizeTableColumns([{key:'name',label:'Name'},{key:'categorie',label:'Kategorie'}])"
+      :on-select="(i) => router.push(`/tasks/show/${i.id}`)"
   />
   <div v-else>
     <p  class="text-center font-bold">Keine offenen Aufgaben</p>

frontend/components/displayRunningTime.vue

@@ -29,7 +29,7 @@ const startTime = async () => {
     await setupPage()
   } catch (error) {
     console.log(error)
-    toast.add({title: "Fehler beim starten der Projektzeit",color:"rose"})
+    toast.add({title: "Fehler beim starten der Projektzeit",color:"error"})
   }
 }
 
@@ -41,7 +41,7 @@ const stopStartedTime = async () => {
   } catch (error) {
     console.log(error)
     let errorId = await useError().logError(`${JSON.stringify(error)}`)
-    toast.add({title: errorId ? `Fehler beim stoppen der Projektzeit (Fehler ID: ${errorId})` : `Fehler beim stoppen der Projektzeit`,color:"rose"})
+    toast.add({title: errorId ? `Fehler beim stoppen der Projektzeit (Fehler ID: ${errorId})` : `Fehler beim stoppen der Projektzeit`,color:"error"})
   }
 }
 
@@ -53,15 +53,15 @@ const stopStartedTime = async () => {
     <p>Start: {{dayjs(runningTimeInfo.started_at).format("HH:mm")}}</p>
     <p>Dauer: {{dayjs().diff(dayjs(runningTimeInfo.started_at),'minutes') > 59 ? `${Math.floor(dayjs().diff(dayjs(runningTimeInfo.started_at),'minutes') / 60)}:${dayjs().diff(dayjs(runningTimeInfo.started_at),'minutes') % 60} h` : dayjs().diff(dayjs(runningTimeInfo.started_at),'minutes') + ' min' }}</p>
 
-    <UFormGroup
+    <UFormField
         class="mt-2"
         label="Notizen:"
     >
       <UTextarea
           v-model="runningTimeInfo.notes"
       />
-    </UFormGroup>
-    <UFormGroup
+    </UFormField>
+    <UFormField
         class="mt-2"
         label="Projekt:"
     >
@@ -74,7 +74,7 @@ const stopStartedTime = async () => {
           value-attribute="id"
           option-attribute="name"
       />
-    </UFormGroup>
+    </UFormField>
     <UButton
         class="mt-3"
         @click="stopStartedTime"

frontend/components/displayRunningWorkingTime.vue

@@ -25,7 +25,7 @@ const startTime = async () => {
     await setupPage()
   } catch (error) {
     console.log(error)
-    toast.add({title: "Fehler beim starten der Zeit",color:"rose"})
+    toast.add({title: "Fehler beim starten der Zeit",color:"error"})
   }
 }
 
@@ -37,7 +37,7 @@ const stopStartedTime = async () => {
   } catch (error) {
     console.log(error)
     let errorId = await useError().logError(`${JSON.stringify(error)}`)
-    toast.add({title: errorId ? `Fehler beim stoppen der Anwesenheit (Fehler ID: ${errorId})` : `Fehler beim stoppen der Anwesenheit`,color:"rose"})
+    toast.add({title: errorId ? `Fehler beim stoppen der Anwesenheit (Fehler ID: ${errorId})` : `Fehler beim stoppen der Anwesenheit`,color:"error"})
   }
 }
 
@@ -49,14 +49,14 @@ const stopStartedTime = async () => {
     <p>Start: {{dayjs(runningTimeInfo.started_at).format("HH:mm")}}</p>
     <p>Dauer: {{dayjs().diff(dayjs(runningTimeInfo.started_at),'minutes') > 59 ? `${Math.floor(dayjs().diff(dayjs(runningTimeInfo.started_at),'minutes') / 60)}:${dayjs().diff(dayjs(runningTimeInfo.started_at),'minutes') % 60} h` : dayjs().diff(dayjs(runningTimeInfo.started_at),'minutes') + ' min' }}</p>
 
-    <UFormGroup
+    <UFormField
         class="mt-2"
         label="Notizen:"
     >
       <UTextarea
           v-model="runningTimeInfo.notes"
       />
-    </UFormGroup>
+    </UFormField>
     <UButton
         class="mt-3"
         @click="stopStartedTime"

frontend/components/displayTaxSummary.vue

@@ -0,0 +1,183 @@
+<script setup lang="ts">
+import dayjs from "dayjs"
+import customParseFormat from "dayjs/plugin/customParseFormat"
+import {
+  formatTaxEvaluationPeriodLabel,
+  formatTaxEvaluationPeriodRange,
+  getCreatedDocumentTaxBreakdown,
+  getIncomingInvoiceTaxBreakdown,
+  getTaxEvaluationPeriodBounds,
+  normalizeTaxEvaluationPeriod
+} from "~/composables/useTaxEvaluation"
+
+dayjs.extend(customParseFormat)
+
+const auth = useAuthStore()
+
+const loading = ref(true)
+const summary = ref({
+  label: "",
+  range: "",
+  outputTax: 0,
+  inputTax: 0,
+  balance: 0,
+  outputCount: 0,
+  inputCount: 0,
+})
+
+const formatCurrency = (value: number) => {
+  return new Intl.NumberFormat("de-DE", {
+    style: "currency",
+    currency: "EUR"
+  }).format(Number(value || 0))
+}
+
+const loadSummary = async () => {
+  loading.value = true
+
+  try {
+    const periodType = normalizeTaxEvaluationPeriod(auth.activeTenantData?.taxEvaluationPeriod)
+    const bounds = getTaxEvaluationPeriodBounds(dayjs(), periodType)
+
+    const [docs, incoming] = await Promise.all([
+      useEntities("createddocuments").select(),
+      useEntities("incominginvoices").select()
+    ])
+
+    const outputDocs = (docs || []).filter((doc: any) => {
+      if (doc?.state !== "Gebucht") return false
+      if (!["invoices", "advanceInvoices", "cancellationInvoices"].includes(doc?.type)) return false
+
+      const date = dayjs(doc.documentDate)
+      return date.isValid() && !date.isBefore(bounds.start, "day") && !date.isAfter(bounds.end, "day")
+    })
+
+    const inputDocs = (incoming || []).filter((invoice: any) => {
+      if (invoice?.state !== "Gebucht" || !invoice?.date) return false
+
+      const date = dayjs(invoice.date)
+      return date.isValid() && !date.isBefore(bounds.start, "day") && !date.isAfter(bounds.end, "day")
+    })
+
+    const outputTax = outputDocs.reduce((sum: number, doc: any) => {
+      const breakdown = getCreatedDocumentTaxBreakdown(doc)
+      return sum + breakdown.tax19 + breakdown.tax7
+    }, 0)
+
+    const inputTax = inputDocs.reduce((sum: number, invoice: any) => {
+      const breakdown = getIncomingInvoiceTaxBreakdown(invoice)
+      return sum + breakdown.tax19 + breakdown.tax7
+    }, 0)
+
+    summary.value = {
+      label: formatTaxEvaluationPeriodLabel(bounds.start, periodType),
+      range: formatTaxEvaluationPeriodRange(bounds.start, periodType),
+      outputTax: Number(outputTax.toFixed(2)),
+      inputTax: Number(inputTax.toFixed(2)),
+      balance: Number((outputTax - inputTax).toFixed(2)),
+      outputCount: outputDocs.length,
+      inputCount: inputDocs.length,
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(loadSummary)
+</script>
+
+<template>
+  <div class="space-y-3">
+    <div class="tax-summary-top">
+      <div>
+        <p class="tax-summary-period">{{ summary.label }}</p>
+        <p class="tax-summary-range">{{ summary.range }}</p>
+      </div>
+      <UButton
+          size="xs"
+          variant="soft"
+          color="gray"
+          icon="i-heroicons-arrow-top-right-on-square"
+          @click="navigateTo('/accounting/tax')"
+      >
+        Details
+      </UButton>
+    </div>
+
+    <div class="tax-summary-row">
+      <span class="tax-summary-label">USt Rechnungen</span>
+      <span class="tax-summary-value text-amber-600 dark:text-amber-400">
+        {{ loading ? "..." : formatCurrency(summary.outputTax) }}
+      </span>
+    </div>
+
+    <div class="tax-summary-row">
+      <span class="tax-summary-label">Vorsteuer</span>
+      <span class="tax-summary-value text-sky-600 dark:text-sky-400">
+        {{ loading ? "..." : formatCurrency(summary.inputTax) }}
+      </span>
+    </div>
+
+    <div class="tax-summary-row">
+      <span class="tax-summary-label">Ergebnis</span>
+      <span
+          class="tax-summary-value"
+          :class="summary.balance >= 0 ? 'text-rose-600 dark:text-rose-400' : 'text-emerald-600 dark:text-emerald-400'"
+      >
+        {{ loading ? "..." : formatCurrency(summary.balance) }}
+      </span>
+    </div>
+
+    <div class="tax-summary-meta">
+      {{ summary.outputCount }} Ausgangsbelege | {{ summary.inputCount }} Eingangsbelege
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.tax-summary-top {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.75rem;
+  align-items: flex-start;
+}
+
+.tax-summary-period {
+  margin: 0;
+  font-weight: 700;
+  color: rgb(17 24 39);
+}
+
+.tax-summary-range,
+.tax-summary-meta {
+  margin: 0;
+  font-size: 0.875rem;
+  color: rgb(107 114 128);
+}
+
+.tax-summary-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 0.75rem;
+  align-items: center;
+}
+
+.tax-summary-label {
+  color: rgb(55 65 81);
+}
+
+.tax-summary-value {
+  font-weight: 700;
+  text-align: right;
+}
+
+:deep(.dark) .tax-summary-period {
+  color: rgb(243 244 246);
+}
+
+:deep(.dark) .tax-summary-range,
+:deep(.dark) .tax-summary-meta,
+:deep(.dark) .tax-summary-label {
+  color: rgb(156 163 175);
+}
+</style>

frontend/components/materialComposing.vue

@@ -12,6 +12,10 @@ const props = defineProps({
 const products = ref([])
 const units = ref([])
 
+const productSearchInput = {
+  placeholder: 'Artikel suchen...'
+}
+
 const setup = async () => {
   products.value = await useEntities("products").select()
   units.value = await useEntities("units").selectSpecial()
@@ -80,16 +84,16 @@ const setRowData = (row) => {
       >
         <td>
           <USelectMenu
-              searchable
-              :search-attributes="['name']"
-            :options="products"
-            value-attribute="id"
-            option-attribute="name"
+            :items="products"
+            label-key="name"
+            value-key="id"
+            :search-input="productSearchInput"
+            :filter-fields="['name']"
             v-model="product.product"
-            :color="product.product ? 'primary' : 'rose'"
+            :color="product.product ? 'primary' : 'error'"
             @change="setRowData(product)"
           >
-            <template #label>
+            <template #default>
               {{products.find(i => i.id === product.product) ? products.find(i => i.id === product.product).name : 'Kein Artikel ausgewählt'}}
             </template>
           </USelectMenu>
@@ -104,9 +108,9 @@ const setRowData = (row) => {
         </td>
         <td>
           <USelectMenu
-            :options="units"
-            value-attribute="id"
-            option-attribute="name"
+            :items="units"
+            label-key="name"
+            value-key="id"
             v-model="product.unit"
           ></USelectMenu>
         </td>
@@ -123,7 +127,7 @@ const setRowData = (row) => {
             icon="i-heroicons-x-mark"
             @click="removeProductFromMaterialComposition(product.id)"
             variant="outline"
-            color="rose"
+            color="error"
           />
         </td>
       </tr>
@@ -135,4 +139,4 @@ const setRowData = (row) => {
 td {
   margin-bottom: 0.5em;
 }
-</style>
+</style>

frontend/components/mobile/FloatingActionButton.vue

@@ -53,7 +53,10 @@ const emit = defineEmits(["click"])
 <style scoped>
 /* FAB Basis */
 .fab-base {
-  @apply rounded-full px-5 py-4 text-lg font-semibold;
+  border-radius: 9999px;
+  padding: 1rem 1.25rem;
+  font-size: 1.125rem;
+  font-weight: 600;
 
   /* Wenn nur ein Icon vorhanden ist → runder Kreis */
   /* Wenn Label + Icon → Extended FAB */
@@ -61,6 +64,12 @@ const emit = defineEmits(["click"])
 
 /* Optional: Auto-Kreisen wenn kein Label */
 #fab:not([label]) {
-  @apply w-14 h-14 p-0 flex items-center justify-center text-2xl;
+  width: 3.5rem;
+  height: 3.5rem;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.5rem;
 }
 </style>

frontend/components/nimbot.vue

@@ -47,14 +47,14 @@ async function handlePrint() {
 
     {{labelPrinter.printProgress}}
 
-    <UFormGroup label="Breite">
+    <UFormField label="Breite">
       <UInput v-model="labelWidth"><template #trailing>mm</template></UInput>
-    </UFormGroup>
-    <UFormGroup label="Höhe">
+    </UFormField>
+    <UFormField label="Höhe">
       <UInput v-model="labelHeight"><template #trailing>mm</template></UInput>
-    </UFormGroup>
-    <UFormGroup label="ZPL">
+    </UFormField>
+    <UFormField label="ZPL">
       <UTextarea v-model="zpl" rows="6" />
-    </UFormGroup>
+    </UFormField>
   </UCard>
 </template>

frontend/components/personalComposing.vue

@@ -12,6 +12,10 @@ const props = defineProps({
 const hourrates = ref([])
 const units = ref([])
 
+const hourrateSearchInput = {
+  placeholder: 'Stundensatz suchen...'
+}
+
 const setup = async () => {
   hourrates.value = await useEntities("hourrates").select()
   units.value = await useEntities("units").selectSpecial()
@@ -82,14 +86,14 @@ const setRowData = (row) => {
       >
         <td>
           <USelectMenu
-              searchable
-              :search-attributes="['name']"
-              :options="hourrates"
-              value-attribute="id"
-              option-attribute="name"
-              v-model="row.hourrate"
-              :color="row.hourrate ? 'primary' : 'rose'"
-              @change="setRowData(row)"
+            :items="hourrates"
+            label-key="name"
+            value-key="id"
+            :search-input="hourrateSearchInput"
+            :filter-fields="['name']"
+            v-model="row.hourrate"
+            :color="row.hourrate ? 'primary' : 'error'"
+            @change="setRowData(row)"
           >
 <!--            <template #label>
               {{products.find(i => i.id === product.product) ? products.find(i => i.id === product.product).name : 'Kein Artikel ausgewählt'}}
@@ -106,10 +110,10 @@ const setRowData = (row) => {
         </td>
         <td>
           <USelectMenu
-            :options="units"
+            :items="units"
             disabled
-            value-attribute="id"
-            option-attribute="name"
+            label-key="name"
+            value-key="id"
             v-model="row.unit"
           ></USelectMenu>
         </td>
@@ -134,7 +138,7 @@ const setRowData = (row) => {
             icon="i-heroicons-x-mark"
             @click="removeRowFromPersonalComposition(row.id)"
             variant="outline"
-            color="rose"
+            color="error"
           />
         </td>
       </tr>
@@ -146,4 +150,4 @@ const setRowData = (row) => {
 td {
   margin-bottom: 0.5em;
 }
-</style>
+</style>

frontend/components/wiki/WikiEditor.vue

@@ -206,16 +206,62 @@ const addVideo = () => {
 <style scoped>
 /* Toolbar & Buttons */
 .toolbar-btn {
-  @apply p-1.5 rounded text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors text-sm font-medium min-w-[28px] h-[28px] flex items-center justify-center;
+  padding: 0.375rem;
+  border-radius: 0.25rem;
+  color: #4b5563;
+  transition: background-color 0.2s ease, color 0.2s ease;
+  font-size: 0.875rem;
+  font-weight: 500;
+  min-width: 28px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }
 .toolbar-btn.is-active {
-  @apply bg-gray-200 dark:bg-gray-600 text-black dark:text-white shadow-inner;
+  background: #e5e7eb;
+  color: #000;
+  box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
 }
 .bubble-btn {
-  @apply px-2 py-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors text-sm min-w-[24px] h-[24px] flex items-center justify-center text-gray-700 dark:text-gray-200;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  transition: background-color 0.2s ease, color 0.2s ease;
+  font-size: 0.875rem;
+  min-width: 24px;
+  height: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #374151;
 }
 .bubble-btn.is-active {
-  @apply bg-gray-200 dark:bg-gray-600 text-black dark:text-white;
+  background: #e5e7eb;
+  color: #000;
+}
+
+.toolbar-btn:hover,
+.bubble-btn:hover {
+  background: #f3f4f6;
+}
+
+:global(.dark) .toolbar-btn {
+  color: #d1d5db;
+}
+
+:global(.dark) .toolbar-btn:hover,
+:global(.dark) .bubble-btn:hover {
+  background: #374151;
+}
+
+:global(.dark) .toolbar-btn.is-active,
+:global(.dark) .bubble-btn.is-active {
+  background: #4b5563;
+  color: #fff;
+}
+
+:global(.dark) .bubble-btn {
+  color: #e5e7eb;
 }
 
 /* GLOBAL EDITOR STYLES */
@@ -235,20 +281,48 @@ const addVideo = () => {
   /* MENTION */
   .wiki-mention {
     /* Pill-Shape, grau/neutral statt knallig blau */
-    @apply bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200 px-1.5 py-0.5 rounded-md text-sm font-medium no-underline inline-block mx-0.5 align-middle border border-gray-200 dark:border-gray-700;
-
+    background: #f3f4f6;
+    color: #374151;
+    padding: 0.125rem 0.375rem;
+    border-radius: 0.375rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    text-decoration: none;
+    display: inline-block;
+    margin-inline: 0.125rem;
+    vertical-align: middle;
+    border: 1px solid #e5e7eb;
     box-decoration-break: clone;
   }
 
   .wiki-mention::before {
-    @apply text-gray-400 dark:text-gray-500 mr-0.5;
+    color: #9ca3af;
+    margin-right: 0.125rem;
   }
 
   .wiki-mention:hover {
-    @apply bg-primary-50 dark:bg-primary-900/30 border-primary-200 dark:border-primary-800 text-primary-700 dark:text-primary-400;
+    background: #eefbf0;
+    border-color: #bbf7d0;
+    color: #15803d;
     cursor: pointer;
   }
 
+  :global(.dark) .wiki-mention {
+    background: #1f2937;
+    color: #e5e7eb;
+    border-color: #374151;
+  }
+
+  :global(.dark) .wiki-mention::before {
+    color: #6b7280;
+  }
+
+  :global(.dark) .wiki-mention:hover {
+    background: rgb(20 83 45 / 0.3);
+    border-color: #166534;
+    color: #4ade80;
+  }
+
   /* TABLE */
   table { width: 100% !important; border-collapse: collapse; table-layout: fixed; margin: 1rem 0; }
   th, td { border: 1px solid #d1d5db; padding: 0.5rem; vertical-align: top; box-sizing: border-box; min-width: 1em; }
@@ -258,7 +332,7 @@ const addVideo = () => {
   .column-resize-handle { background-color: #3b82f6; width: 4px; }
 
   /* CODE */
-  pre { background: #0d1117; color: #c9d1d9; font-family: 'JetBrains Mono', monospace; padding: 0.75rem 1rem; border-radius: 0.5rem; margin: 1rem 0; overflow-x: auto; }
+  pre { background: #0d1117; color: #c9d1d9; font-family: var(--font-mono); padding: 0.75rem 1rem; border-radius: 0.5rem; margin: 1rem 0; overflow-x: auto; }
   code { color: inherit; padding: 0; background: none; font-size: 0.9rem; }
 
   /* IMG */
@@ -269,4 +343,4 @@ const addVideo = () => {
   mark { background-color: #fef08a; padding: 0.1rem 0.2rem; border-radius: 0.2rem; }
   .ProseMirror-selectednode { outline: 2px solid #3b82f6; }
 }
-</style>
+</style>

frontend/components/wiki/WikiEntityWidget.vue

@@ -98,17 +98,19 @@
       </div>
     </div>
 
-    <UModal v-model="isCreateModalOpen">
-      <div class="p-5">
-        <h3 class="font-bold mb-4">Neue Seite</h3>
-        <form @submit.prevent="createPage">
-          <UInput v-model="newTitle" placeholder="Titel..." autofocus />
-          <div class="mt-4 flex justify-end gap-2">
-            <UButton color="gray" variant="ghost" @click="isCreateModalOpen = false">Abbrechen</UButton>
-            <UButton type="submit" color="primary" :loading="isCreating">Erstellen</UButton>
-          </div>
-        </form>
-      </div>
+    <UModal v-model:open="isCreateModalOpen">
+      <template #content>
+        <div class="p-5">
+          <h3 class="font-bold mb-4">Neue Seite</h3>
+          <form @submit.prevent="createPage">
+            <UInput v-model="newTitle" placeholder="Titel..." autofocus />
+            <div class="mt-4 flex justify-end gap-2">
+              <UButton color="gray" variant="ghost" @click="isCreateModalOpen = false">Abbrechen</UButton>
+              <UButton type="submit" color="primary" :loading="isCreating">Erstellen</UButton>
+            </div>
+          </form>
+        </div>
+      </template>
     </UModal>
 
   </div>
@@ -163,7 +165,7 @@ async function selectPage(id: string) {
     const data = await $api(`/api/wiki/${id}`, { method: 'GET' })
     selectedPage.value = data
   } catch (e) {
-    toast.add({ title: 'Fehler beim Laden', color: 'red' })
+    toast.add({ title: 'Fehler beim Laden', color: 'error' })
   } finally {
     loadingContent.value = false
   }
@@ -233,4 +235,4 @@ watch(() => [props.entityId, props.entityUuid], fetchList)
 <style scoped>
 .custom-scrollbar::-webkit-scrollbar { width: 4px; }
 .custom-scrollbar::-webkit-scrollbar-thumb { background-color: #ddd; border-radius: 4px; }
-</style>
+</style>

frontend/composables/useChangelog.ts

@@ -0,0 +1,155 @@
+import { createSharedComposable } from '@vueuse/core'
+
+type ChangelogEntry = {
+  hash: string
+  shortHash: string
+  subject: string
+  authorName: string
+  committedAt: string
+}
+
+type ChangelogSeenState = {
+  lastOpenedAt: string | null
+  latestSeenHash: string | null
+}
+
+const defaultSeenState = (): ChangelogSeenState => ({
+  lastOpenedAt: null,
+  latestSeenHash: null
+})
+
+let changelogRequest: Promise<void> | null = null
+
+const _useChangelog = () => {
+  const auth = useAuthStore()
+
+  const entries = useState<ChangelogEntry[]>('changelog:entries', () => [])
+  const pending = useState<boolean>('changelog:pending', () => false)
+  const error = useState<string | null>('changelog:error', () => null)
+  const loadedKey = useState<string | null>('changelog:loaded-key', () => null)
+  const seenState = useState<ChangelogSeenState>('changelog:seen-state', defaultSeenState)
+
+  const scopeKey = computed(() => {
+    const userId = auth.user?.id
+    const tenantId = auth.activeTenant
+
+    if (!userId || !tenantId) return null
+
+    return `${userId}:${tenantId}`
+  })
+
+  const storageKey = computed(() => {
+    if (!scopeKey.value) return null
+
+    return `fedeo:changelog:last-opened:${scopeKey.value}`
+  })
+
+  const latestEntry = computed(() => entries.value[0] || null)
+
+  const hasUnread = computed(() => {
+    if (!latestEntry.value?.hash) return false
+
+    return latestEntry.value.hash !== seenState.value.latestSeenHash
+  })
+
+  function loadSeenState() {
+    if (!process.client || !storageKey.value) {
+      seenState.value = defaultSeenState()
+      return
+    }
+
+    try {
+      const raw = localStorage.getItem(storageKey.value)
+
+      if (!raw) {
+        seenState.value = defaultSeenState()
+        return
+      }
+
+      const parsed = JSON.parse(raw)
+
+      seenState.value = {
+        lastOpenedAt: parsed?.lastOpenedAt || null,
+        latestSeenHash: parsed?.latestSeenHash || null
+      }
+    } catch (err) {
+      console.error('Could not parse changelog seen state', err)
+      seenState.value = defaultSeenState()
+    }
+  }
+
+  async function refresh(force = false) {
+    if (!process.client || !scopeKey.value) return
+    if (!force && loadedKey.value === scopeKey.value && entries.value.length) return
+    if (changelogRequest) return changelogRequest
+
+    changelogRequest = (async () => {
+      pending.value = true
+      error.value = null
+
+      try {
+        const response = await useNuxtApp().$api('/api/functions/changelog', {
+          query: { limit: 20 }
+        })
+
+        entries.value = Array.isArray(response?.entries) ? response.entries : []
+        loadedKey.value = scopeKey.value
+      } catch (err: any) {
+        error.value = err?.data?.error || err?.message || 'Changelog konnte nicht geladen werden.'
+      } finally {
+        pending.value = false
+      }
+    })()
+
+    try {
+      await changelogRequest
+    } finally {
+      changelogRequest = null
+    }
+  }
+
+  function markAsSeen() {
+    if (!process.client || !storageKey.value) return
+
+    const nextState = {
+      lastOpenedAt: new Date().toISOString(),
+      latestSeenHash: latestEntry.value?.hash || null
+    }
+
+    seenState.value = nextState
+
+    try {
+      localStorage.setItem(storageKey.value, JSON.stringify(nextState))
+    } catch (err) {
+      console.error('Could not persist changelog seen state', err)
+    }
+  }
+
+  watch(storageKey, () => {
+    loadSeenState()
+  }, { immediate: true })
+
+  watch(scopeKey, (nextScopeKey, previousScopeKey) => {
+    if (!process.client || !nextScopeKey) return
+
+    if (nextScopeKey !== previousScopeKey) {
+      entries.value = []
+      loadedKey.value = null
+    }
+
+    void refresh(true)
+  }, { immediate: true })
+
+  return {
+    entries,
+    pending,
+    error,
+    latestEntry,
+    hasUnread,
+    seenState,
+    refresh,
+    markAsSeen
+  }
+}
+
+export const useChangelog = createSharedComposable(_useChangelog)

frontend/composables/useFiles.ts

@@ -36,6 +36,9 @@ export const useFiles = () => {
         let data = []
         data = await useEntities("files").select("*, incominginvoice(*), project(*), vendor(*), customer(*), contract(*), plant(*), createddocument(*), vehicle(*), product(*), profile(*), check(*), inventoryitem(*)")
 
+        if (!Array.isArray(data) || data.length === 0) {
+            return []
+        }
 
 
         const res =  await useNuxtApp().$api("/api/files/presigned",{
@@ -138,4 +141,4 @@ export const useFiles = () => {
 
 
     return {uploadFiles, selectDocuments, selectSomeDocuments, selectDocument, downloadFile, dataURLtoFile}
-}
+}

frontend/composables/useFunctions.js

@@ -92,5 +92,10 @@ export const useFunctions = () => {
         return await useNuxtApp().$api(`/api/banking/iban/${encodeURIComponent(normalized)}`)
     }
 
-    return {getWorkingTimesEvaluationData, useNextNumber, useBankingGenerateLink, useZipCheck, useBankingCheckInstitutions, useBankingListRequisitions, useBankingResolveIban, useCreatePDF}
+    const useBankingStatementSuggestions = async (statementId) => {
+        if (!statementId) return { suggestions: [] }
+        return await useNuxtApp().$api(`/api/banking/statements/${statementId}/suggestions`)
+    }
+
+    return {getWorkingTimesEvaluationData, useNextNumber, useBankingGenerateLink, useZipCheck, useBankingCheckInstitutions, useBankingListRequisitions, useBankingResolveIban, useBankingStatementSuggestions, useCreatePDF}
 }

frontend/composables/useModal.ts

@@ -0,0 +1,35 @@
+type ModalComponent = any
+type ModalProps = Record<string, any> | undefined
+
+const modalStack = useState<any[]>('__fed_modal_stack__', () => [])
+
+export const useModal = () => {
+  const overlay = useOverlay()
+
+  const open = (component: ModalComponent, props?: ModalProps) => {
+    const instance = overlay.create(component, { props, destroyOnClose: true })
+    modalStack.value.push(instance)
+
+    const result = instance.open(props)
+    result.finally(() => {
+      modalStack.value = modalStack.value.filter((entry) => entry.id !== instance.id)
+    })
+
+    return result
+  }
+
+  const close = (value?: any) => {
+    const current = modalStack.value[modalStack.value.length - 1]
+
+    if (!current) {
+      return
+    }
+
+    current.close(value)
+  }
+
+  return {
+    open,
+    close
+  }
+}

frontend/composables/useSum.js

@@ -1,5 +1,16 @@
 
 export const useSum = () => {
+    const unwrapCreatedDocuments = (createddocuments = []) => {
+        if (Array.isArray(createddocuments)) return createddocuments
+        if (Array.isArray(createddocuments?.value)) return createddocuments.value
+        return []
+    }
+
+    const getCreatedDocumentLinkId = (value) => {
+        if (value && typeof value === "object") return value.id
+        return value
+    }
+
     const getIncomingInvoiceSum = (invoice) => {
         let sum = 0
         invoice.accounts.forEach(account => {
@@ -15,6 +26,7 @@ export const useSum = () => {
     }
 
     const getCreatedDocumentSum = (createddocument,createddocuments = []) => {
+        const availableCreatedDocuments = unwrapCreatedDocuments(createddocuments)
         let totalNet = 0
         let total19 = 0
         let total7 = 0
@@ -44,7 +56,9 @@ export const useSum = () => {
 
 
         createddocument.usedAdvanceInvoices.forEach(advanceInvoiceId => {
-            let advanceInvoice = createddocuments.find(i => i.id === advanceInvoiceId)
+            let advanceInvoice = availableCreatedDocuments.find(i => i.id === advanceInvoiceId)
+
+            if (!advanceInvoice) return
 
             let priceNet = advanceInvoice.rows.find(i => i.advanceInvoiceData).price
 
@@ -59,6 +73,24 @@ export const useSum = () => {
         return Number(sumToPay.toFixed(2))
     }
 
+    const hasCancellationInvoice = (createddocument, createddocuments = []) => {
+        const availableCreatedDocuments = unwrapCreatedDocuments(createddocuments)
+
+        return availableCreatedDocuments.some((document) => {
+            return document.type === "cancellationInvoices"
+                && document.state !== "Entwurf"
+                && !document.archived
+                && getCreatedDocumentLinkId(document.createddocument) === createddocument.id
+        })
+    }
+
+    const getCreatedDocumentOpenAmount = (createddocument, createddocuments = []) => {
+        let amountPaid = 0
+        createddocument.statementallocations.forEach(allocation => amountPaid += allocation.amount)
+
+        return Number((getCreatedDocumentSum(createddocument, createddocuments) - amountPaid).toFixed(2))
+    }
+
     const getCreatedDocumentSumDetailed = (createddocument) => {
         let totalNet = 0
         let total19 = 0
@@ -124,12 +156,24 @@ export const useSum = () => {
     }
 
     const getIsPaid = (createddocument,createddocuments) => {
-        let amountPaid = 0
-        createddocument.statementallocations.forEach(allocation => amountPaid += allocation.amount)
-
-        return Number(amountPaid.toFixed(2)) === getCreatedDocumentSum(createddocument,createddocuments)
+        return getCreatedDocumentOpenAmount(createddocument, createddocuments) === 0
     }
 
-    return {getIncomingInvoiceSum, getCreatedDocumentSum, getCreatedDocumentSumDetailed, getIsPaid}
+    const isOpenCreatedDocument = (createddocument, createddocuments = []) => {
+        return ['invoices', 'advanceInvoices'].includes(createddocument.type)
+            && createddocument.state === "Gebucht"
+            && !hasCancellationInvoice(createddocument, createddocuments)
+            && !getIsPaid(createddocument, createddocuments)
+    }
+
+    return {
+        getIncomingInvoiceSum,
+        getCreatedDocumentSum,
+        getCreatedDocumentSumDetailed,
+        getCreatedDocumentOpenAmount,
+        getIsPaid,
+        hasCancellationInvoice,
+        isOpenCreatedDocument
+    }
 
 }

frontend/composables/useTableColumns.ts

@@ -0,0 +1,28 @@
+type LegacyTableColumn = {
+  id?: string
+  key?: string
+  label?: unknown
+  header?: unknown
+  accessorKey?: string
+  [key: string]: unknown
+}
+
+export const normalizeTableColumns = (columns: LegacyTableColumn[] = []) => {
+  return columns.map((column, index) => {
+    const accessorKey = typeof column.accessorKey === 'string'
+      ? column.accessorKey
+      : typeof column.key === 'string'
+        ? column.key
+        : undefined
+
+    const header = column.header ?? column.label ?? accessorKey ?? `column_${index}`
+    const id = column.id ?? accessorKey ?? (typeof header === 'string' ? header : `column_${index}`)
+
+    return {
+      ...column,
+      id,
+      accessorKey,
+      header
+    }
+  })
+}

frontend/composables/useTaxEvaluation.ts

@@ -0,0 +1,162 @@
+import dayjs from "dayjs"
+import customParseFormat from "dayjs/plugin/customParseFormat"
+
+dayjs.extend(customParseFormat)
+
+export const TAX_EVALUATION_PERIOD_OPTIONS = [
+    { label: "Monatlich", value: "monthly" },
+    { label: "Quartalsweise", value: "quarterly" },
+    { label: "Jährlich", value: "yearly" },
+]
+
+export const normalizeTaxEvaluationPeriod = (value?: string) => {
+    if (value === "quarterly" || value === "yearly") return value
+    return "monthly"
+}
+
+const ZERO_BREAKDOWN = () => ({
+    net19: 0,
+    tax19: 0,
+    net7: 0,
+    tax7: 0,
+    net0: 0,
+})
+
+const isTaxFreeDocument = (taxType?: string | null) => {
+    return ["13b UStG", "19 UStG", "12.3 UStG"].includes(String(taxType || ""))
+}
+
+export const getTaxEvaluationPeriodBounds = (
+    referenceDate: dayjs.ConfigType,
+    period: string
+) => {
+    const normalized = normalizeTaxEvaluationPeriod(period)
+    const base = dayjs(referenceDate)
+
+    if (normalized === "yearly") {
+        return {
+            start: base.startOf("year"),
+            end: base.endOf("year"),
+        }
+    }
+
+    if (normalized === "quarterly") {
+        const quarterStartMonth = Math.floor(base.month() / 3) * 3
+        const start = base.month(quarterStartMonth).startOf("month")
+
+        return {
+            start,
+            end: start.add(2, "month").endOf("month"),
+        }
+    }
+
+    return {
+        start: base.startOf("month"),
+        end: base.endOf("month"),
+    }
+}
+
+export const shiftTaxEvaluationPeriodStart = (
+    periodStart: dayjs.ConfigType,
+    period: string,
+    offset: number
+) => {
+    const normalized = normalizeTaxEvaluationPeriod(period)
+    const base = dayjs(periodStart)
+
+    if (normalized === "yearly") return base.add(offset, "year").startOf("year")
+    if (normalized === "quarterly") return base.add(offset * 3, "month").startOf("month")
+    return base.add(offset, "month").startOf("month")
+}
+
+export const formatTaxEvaluationPeriodLabel = (
+    periodStart: dayjs.ConfigType,
+    period: string
+) => {
+    const { start, end } = getTaxEvaluationPeriodBounds(periodStart, period)
+    const normalized = normalizeTaxEvaluationPeriod(period)
+
+    if (normalized === "yearly") {
+        return start.format("YYYY")
+    }
+
+    if (normalized === "quarterly") {
+        return `Q${Math.floor(start.month() / 3) + 1} ${start.format("YYYY")}`
+    }
+
+    return start.format("MMMM YYYY")
+}
+
+export const formatTaxEvaluationPeriodRange = (
+    periodStart: dayjs.ConfigType,
+    period: string
+) => {
+    const { start, end } = getTaxEvaluationPeriodBounds(periodStart, period)
+    return `${start.format("DD.MM.YYYY")} - ${end.format("DD.MM.YYYY")}`
+}
+
+export const getCreatedDocumentTaxBreakdown = (doc: any) => {
+    const breakdown = ZERO_BREAKDOWN()
+
+    if (!doc || isTaxFreeDocument(doc.taxType)) {
+        return breakdown
+    }
+
+    ;(doc.rows || []).forEach((row: any) => {
+        if (!row || ["pagebreak", "title", "text"].includes(row.mode)) return
+
+        const quantity = Number(row.quantity || 0)
+        const price = Number(row.price || 0)
+        const discountPercent = Number(row.discountPercent || 0)
+        const taxPercent = Number(row.taxPercent || 0)
+        const net = Number((quantity * price * (1 - discountPercent / 100)).toFixed(2))
+
+        if (!Number.isFinite(net) || net === 0) return
+
+        if (taxPercent === 19) {
+            breakdown.net19 += net
+            breakdown.tax19 += Number((net * 0.19).toFixed(2))
+        } else if (taxPercent === 7) {
+            breakdown.net7 += net
+            breakdown.tax7 += Number((net * 0.07).toFixed(2))
+        } else {
+            breakdown.net0 += net
+        }
+    })
+
+    return {
+        net19: Number(breakdown.net19.toFixed(2)),
+        tax19: Number(breakdown.tax19.toFixed(2)),
+        net7: Number(breakdown.net7.toFixed(2)),
+        tax7: Number(breakdown.tax7.toFixed(2)),
+        net0: Number(breakdown.net0.toFixed(2)),
+    }
+}
+
+export const getIncomingInvoiceTaxBreakdown = (invoice: any) => {
+    const breakdown = ZERO_BREAKDOWN()
+
+    ;(invoice?.accounts || []).forEach((account: any) => {
+        const taxType = String(account?.taxType || "")
+        const amountNet = Number(account?.amountNet || 0)
+        const amountTax = Number(account?.amountTax || 0)
+
+        if (taxType === "19") {
+            breakdown.net19 += amountNet
+            breakdown.tax19 += amountTax
+        } else if (taxType === "7") {
+            breakdown.net7 += amountNet
+            breakdown.tax7 += amountTax
+        } else {
+            breakdown.net0 += amountNet
+        }
+    })
+
+    return {
+        net19: Number(breakdown.net19.toFixed(2)),
+        tax19: Number(breakdown.tax19.toFixed(2)),
+        net7: Number(breakdown.net7.toFixed(2)),
+        tax7: Number(breakdown.tax7.toFixed(2)),
+        net0: Number(breakdown.net0.toFixed(2)),
+    }
+}

frontend/layouts/default.vue

@@ -16,6 +16,7 @@ const route = useRoute()
 const auth = useAuthStore()
 const labelPrinter = useLabelPrinterStore()
 const calculatorStore = useCalculatorStore()
+const { hasUnread, refresh: refreshChangelog } = useChangelog()
 
 const month = dayjs().format("MM")
 
@@ -114,7 +115,7 @@ const groups = computed(() => [
 ].filter(Boolean))
 
 // --- Footer Links nutzen jetzt den zentralen Calculator Store ---
-const footerLinks = computed(() => [
+const footerItems = computed(() => [
   {
     label: 'Taschenrechner',
     icon: 'i-heroicons-calculator',
@@ -123,10 +124,15 @@ const footerLinks = computed(() => [
   {
     label: 'Hilfe & Info',
     icon: 'i-heroicons-question-mark-circle',
+    badge: hasUnread.value ? 'Neu' : null,
     click: () => isHelpSlideoverOpen.value = true
   }
 ])
 
+onMounted(() => {
+  void refreshChangelog()
+})
+
 </script>
 
 <template>
@@ -234,48 +240,81 @@ const footerLinks = computed(() => [
         </UCard>
       </UContainer>
     </div>
-    <UDashboardLayout class="safearea" v-else>
-      <UDashboardPanel :width="250" :resizable="{ min: 200, max: 300 }" collapsible>
-        <UDashboardNavbar style="margin-top: env(safe-area-inset-top, 10px) !important;"
-                          :class="['!border-transparent']" :ui="{ left: 'flex-1' }">
-          <template #left>
+    <div class="safearea flex min-h-screen w-full flex-col overflow-hidden" v-else>
+<!--      <div
+          class="border-b border-default bg-default px-3 py-2"
+          style="padding-top: max(env(safe-area-inset-top, 0px), 0.5rem);"
+      >
+        <TenantDropdown class="min-w-0 w-full max-w-sm" />
+      </div>-->
+
+      <UDashboardGroup class="flex min-h-0 flex-1 overflow-hidden">
+
+
+        <UDashboardSidebar
+            id="sidebar"
+            collapsible
+            resizable
+            :default-size="18"
+            :min-size="14"
+            :max-size="24"
+            class="shrink-0 border-r border-default bg-default"
+        >
+          <template #header>
             <TenantDropdown class="w-full"/>
+
           </template>
-        </UDashboardNavbar>
 
-        <UDashboardSidebar id="sidebar">
-
-          <MainNav/>
-
-          <div class="flex-1"/>
-
-          <template #footer>
+          <template #default="{ collapsed }">
+            <MainNav :collapsed="collapsed" />
+          </template>
 
+          <template #footer="{ collapsed }">
             <div class="flex flex-col gap-3">
+              <div class="flex items-center gap-2">
+                <UColorModeSwitch :class="[collapsed ? 'mx-auto' : 'ml-3']"/>
+                <UDashboardSidebarCollapse v-if="collapsed" class="mx-auto" />
+              </div>
 
-              <UColorModeToggle class="ml-3"/>
               <LabelPrinterButton class="w-full"/>
 
-              <UDashboardSidebarLinks :links="footerLinks" class="w-full"/>
+              <div class="flex flex-col gap-1">
+                <UButton
+                    v-for="item in footerItems"
+                    :key="item.label"
+                    color="gray"
+                    variant="ghost"
+                    class="w-full"
+                    :icon="item.icon"
+                    @click="item.click ? item.click() : null"
+                >
+                  <span v-if="!collapsed">{{ item.label }}</span>
 
-              <UDivider class="sticky bottom-0 w-full"/>
+                  <template #trailing>
+                    <UBadge v-if="!collapsed && item.badge" color="primary" variant="solid" size="xs">
+                      {{ item.badge }}
+                    </UBadge>
+                  </template>
+                </UButton>
+              </div>
+
+              <USeparator class="sticky bottom-0 w-full"/>
               <UserDropdown style="margin-bottom: env(safe-area-inset-bottom, 10px) !important;" class="w-full"/>
             </div>
           </template>
         </UDashboardSidebar>
-      </UDashboardPanel>
 
-      <UDashboardPage>
-        <UDashboardPanel grow>
+
+        <div class="flex min-w-0 flex-1 flex-col overflow-hidden">
           <slot/>
-        </UDashboardPanel>
-      </UDashboardPage>
+
+        </div>
+      </UDashboardGroup>
 
       <HelpSlideover/>
 
       <Calculator v-if="calculatorStore.isOpen"/>
-
-    </UDashboardLayout>
+    </div>
   </div>
 
   <div
@@ -306,7 +345,7 @@ const footerLinks = computed(() => [
       </div>
       <UButton
           variant="outline"
-          color="rose"
+          color="error"
           @click="auth.logout()"
       >Abmelden
       </UButton>

frontend/nuxt.config.ts

@@ -7,7 +7,7 @@ export default defineNuxtConfig({
         }
     },
 
-    modules: ['@vite-pwa/nuxt','@pinia/nuxt', '@nuxt/ui', "nuxt-editorjs", '@nuxtjs/fontaine', 'nuxt-viewport', '@nuxtjs/leaflet', '@vueuse/nuxt'],
+    modules: ['@vite-pwa/nuxt','@pinia/nuxt', '@nuxt/ui-pro', "nuxt-editorjs", '@nuxtjs/fontaine', 'nuxt-viewport', '@nuxtjs/leaflet', '@vueuse/nuxt'],
 
     ssr: false,
 
@@ -15,14 +15,12 @@ export default defineNuxtConfig({
         dirs: ['stores']
     },
 
-    extends: [
-        '@nuxt/ui-pro'
-    ],
-
     components: [{
         path: '~/components'
     }],
 
+    css: ['~/assets/css/main.css'],
+
     build: {
         transpile: ['@vuepic/vue-datepicker','@tiptap/vue-3','@tiptap/extension-code-block-lowlight',
             'lowlight',]
@@ -74,10 +72,6 @@ export default defineNuxtConfig({
         },
     },
 
-    ui: {
-        icons: ['heroicons', 'mdi', 'simple-icons']
-    },
-
     colorMode: {
         preference: 'system'
     },

frontend/package.json

@@ -37,7 +37,8 @@
     "@fullcalendar/vue3": "^6.1.10",
     "@iconify/json": "^2.2.171",
     "@mmote/niimbluelib": "^0.0.1-alpha.29",
-    "@nuxt/ui-pro": "^1.6.0",
+    "@nuxt/ui": "^3.3.7",
+    "@nuxt/ui-pro": "^3.3.7",
     "@nuxtjs/fontaine": "^0.4.1",
     "@nuxtjs/google-fonts": "^3.1.0",
     "@nuxtjs/strapi": "^1.9.3",
@@ -81,6 +82,7 @@
     "date-fns": "^3.6.0",
     "dayjs": "^1.11.10",
     "fast-sort": "^3.4.1",
+    "gridstack": "^12.4.2",
     "handlebars": "^4.7.8",
     "image-js": "^1.1.0",
     "leaflet": "^1.9.4",

frontend/pages/accounting/tax.vue

@@ -0,0 +1,289 @@
+<script setup lang="ts">
+import dayjs from "dayjs"
+import customParseFormat from "dayjs/plugin/customParseFormat"
+import {
+  formatTaxEvaluationPeriodLabel,
+  formatTaxEvaluationPeriodRange,
+  getCreatedDocumentTaxBreakdown,
+  getIncomingInvoiceTaxBreakdown,
+  getTaxEvaluationPeriodBounds,
+  normalizeTaxEvaluationPeriod,
+  shiftTaxEvaluationPeriodStart
+} from "~/composables/useTaxEvaluation"
+
+dayjs.extend(customParseFormat)
+
+const auth = useAuthStore()
+
+const loading = ref(true)
+const createdDocuments = ref<any[]>([])
+const incomingInvoices = ref<any[]>([])
+
+const periodType = computed(() => normalizeTaxEvaluationPeriod(auth.activeTenantData?.taxEvaluationPeriod))
+
+const formatCurrency = (value: number) => {
+  return new Intl.NumberFormat("de-DE", {
+    style: "currency",
+    currency: "EUR"
+  }).format(Number(value || 0))
+}
+
+const isRelevantOutputDocument = (doc: any) => {
+  return doc?.state === "Gebucht" && ["invoices", "advanceInvoices", "cancellationInvoices"].includes(doc?.type)
+}
+
+const isRelevantInputInvoice = (invoice: any) => {
+  return invoice?.state === "Gebucht" && !!invoice?.date
+}
+
+const loadData = async () => {
+  loading.value = true
+
+  try {
+    const [docs, incoming] = await Promise.all([
+      useEntities("createddocuments").select(),
+      useEntities("incominginvoices").select()
+    ])
+
+    createdDocuments.value = (docs || []).filter(isRelevantOutputDocument)
+    incomingInvoices.value = (incoming || []).filter(isRelevantInputInvoice)
+  } finally {
+    loading.value = false
+  }
+}
+
+const periods = computed(() => {
+  const currentBounds = getTaxEvaluationPeriodBounds(dayjs(), periodType.value)
+
+  return Array.from({ length: 8 }, (_, index) => {
+    const start = shiftTaxEvaluationPeriodStart(currentBounds.start, periodType.value, -index)
+    const bounds = getTaxEvaluationPeriodBounds(start, periodType.value)
+
+    const outputDocs = createdDocuments.value.filter((doc) => {
+      const date = dayjs(doc.documentDate)
+      return date.isValid() && !date.isBefore(bounds.start, "day") && !date.isAfter(bounds.end, "day")
+    })
+
+    const inputDocs = incomingInvoices.value.filter((invoice) => {
+      const date = dayjs(invoice.date)
+      return date.isValid() && !date.isBefore(bounds.start, "day") && !date.isAfter(bounds.end, "day")
+    })
+
+    const output = outputDocs.reduce((sum, doc) => {
+      const breakdown = getCreatedDocumentTaxBreakdown(doc)
+      return {
+        net19: sum.net19 + breakdown.net19,
+        tax19: sum.tax19 + breakdown.tax19,
+        net7: sum.net7 + breakdown.net7,
+        tax7: sum.tax7 + breakdown.tax7,
+        net0: sum.net0 + breakdown.net0,
+      }
+    }, { net19: 0, tax19: 0, net7: 0, tax7: 0, net0: 0 })
+
+    const input = inputDocs.reduce((sum, invoice) => {
+      const breakdown = getIncomingInvoiceTaxBreakdown(invoice)
+      return {
+        net19: sum.net19 + breakdown.net19,
+        tax19: sum.tax19 + breakdown.tax19,
+        net7: sum.net7 + breakdown.net7,
+        tax7: sum.tax7 + breakdown.tax7,
+        net0: sum.net0 + breakdown.net0,
+      }
+    }, { net19: 0, tax19: 0, net7: 0, tax7: 0, net0: 0 })
+
+    const outputTax = Number((output.tax19 + output.tax7).toFixed(2))
+    const inputTax = Number((input.tax19 + input.tax7).toFixed(2))
+    const balance = Number((outputTax - inputTax).toFixed(2))
+
+    return {
+      key: bounds.start.format("YYYY-MM-DD"),
+      label: formatTaxEvaluationPeriodLabel(bounds.start, periodType.value),
+      range: formatTaxEvaluationPeriodRange(bounds.start, periodType.value),
+      isCurrent: index === 0,
+      outputTax,
+      inputTax,
+      balance,
+      output,
+      input,
+      outputCount: outputDocs.length,
+      inputCount: inputDocs.length,
+    }
+  })
+})
+
+const currentPeriod = computed(() => periods.value[0] || null)
+
+const columns = [
+  { key: "label", label: "Zeitraum" },
+  { key: "range", label: "Datumsbereich" },
+  { key: "outputTax", label: "USt Rechnungen" },
+  { key: "inputTax", label: "Vorsteuer" },
+  { key: "balance", label: "Ergebnis" },
+  { key: "documents", label: "Belege" },
+]
+
+onMounted(loadData)
+</script>
+
+<template>
+  <div>
+    <UDashboardNavbar title="USt-Auswertung">
+      <template #right>
+        <UButton
+            icon="i-heroicons-arrow-path"
+            variant="outline"
+            @click="loadData"
+            :loading="loading"
+        >
+          Aktualisieren
+        </UButton>
+      </template>
+    </UDashboardNavbar>
+
+    <UDashboardPanelContent class="p-4 md:p-6">
+      <div class="mb-6 flex flex-col gap-2">
+        <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
+          Aktueller Zeitraum: {{ currentPeriod?.label }}
+        </h2>
+        <p class="text-sm text-gray-500 dark:text-gray-400">
+          Intervall: {{ periodType === "monthly" ? "monatlich" : periodType === "quarterly" ? "quartalsweise" : "jährlich" }}.
+          Berücksichtigt werden gebuchte Ausgangsrechnungen, Abschlags- und Stornorechnungen sowie gebuchte Eingangsbelege mit Datum.
+        </p>
+        <p v-if="currentPeriod" class="text-sm text-gray-500 dark:text-gray-400">
+          {{ currentPeriod.range }}
+        </p>
+      </div>
+
+      <div v-if="currentPeriod" class="grid gap-4 md:grid-cols-3">
+        <UCard>
+          <div class="text-sm text-gray-500 dark:text-gray-400">Berechnete USt</div>
+          <div class="mt-2 text-2xl font-semibold text-gray-900 dark:text-white">
+            {{ formatCurrency(currentPeriod.outputTax) }}
+          </div>
+          <div class="mt-3 text-sm text-gray-500 dark:text-gray-400">
+            19%: {{ formatCurrency(currentPeriod.output.tax19) }} | 7%: {{ formatCurrency(currentPeriod.output.tax7) }}
+          </div>
+        </UCard>
+
+        <UCard>
+          <div class="text-sm text-gray-500 dark:text-gray-400">Vorsteuer</div>
+          <div class="mt-2 text-2xl font-semibold text-gray-900 dark:text-white">
+            {{ formatCurrency(currentPeriod.inputTax) }}
+          </div>
+          <div class="mt-3 text-sm text-gray-500 dark:text-gray-400">
+            19%: {{ formatCurrency(currentPeriod.input.tax19) }} | 7%: {{ formatCurrency(currentPeriod.input.tax7) }}
+          </div>
+        </UCard>
+
+        <UCard>
+          <div class="text-sm text-gray-500 dark:text-gray-400">Verrechnetes Ergebnis</div>
+          <div
+              class="mt-2 text-2xl font-semibold"
+              :class="currentPeriod.balance >= 0 ? 'text-amber-600 dark:text-amber-400' : 'text-emerald-600 dark:text-emerald-400'"
+          >
+            {{ formatCurrency(currentPeriod.balance) }}
+          </div>
+          <div class="mt-3 text-sm text-gray-500 dark:text-gray-400">
+            {{ currentPeriod.outputCount }} Ausgangsbelege | {{ currentPeriod.inputCount }} Eingangsbelege
+          </div>
+        </UCard>
+      </div>
+
+      <div v-if="currentPeriod" class="mt-6 grid gap-4 xl:grid-cols-2">
+        <UCard>
+          <template #header>
+            <div class="font-semibold">Ausgangsrechnungen</div>
+          </template>
+          <div class="space-y-3 text-sm">
+            <div class="flex items-center justify-between">
+              <span>Netto 19%</span>
+              <span>{{ formatCurrency(currentPeriod.output.net19) }}</span>
+            </div>
+            <div class="flex items-center justify-between">
+              <span>USt 19%</span>
+              <span>{{ formatCurrency(currentPeriod.output.tax19) }}</span>
+            </div>
+            <div class="flex items-center justify-between">
+              <span>Netto 7%</span>
+              <span>{{ formatCurrency(currentPeriod.output.net7) }}</span>
+            </div>
+            <div class="flex items-center justify-between">
+              <span>USt 7%</span>
+              <span>{{ formatCurrency(currentPeriod.output.tax7) }}</span>
+            </div>
+            <div class="flex items-center justify-between">
+              <span>Netto 0%</span>
+              <span>{{ formatCurrency(currentPeriod.output.net0) }}</span>
+            </div>
+          </div>
+        </UCard>
+
+        <UCard>
+          <template #header>
+            <div class="font-semibold">Eingangsbelege</div>
+          </template>
+          <div class="space-y-3 text-sm">
+            <div class="flex items-center justify-between">
+              <span>Netto 19%</span>
+              <span>{{ formatCurrency(currentPeriod.input.net19) }}</span>
+            </div>
+            <div class="flex items-center justify-between">
+              <span>Vorsteuer 19%</span>
+              <span>{{ formatCurrency(currentPeriod.input.tax19) }}</span>
+            </div>
+            <div class="flex items-center justify-between">
+              <span>Netto 7%</span>
+              <span>{{ formatCurrency(currentPeriod.input.net7) }}</span>
+            </div>
+            <div class="flex items-center justify-between">
+              <span>Vorsteuer 7%</span>
+              <span>{{ formatCurrency(currentPeriod.input.tax7) }}</span>
+            </div>
+            <div class="flex items-center justify-between">
+              <span>Netto 0%</span>
+              <span>{{ formatCurrency(currentPeriod.input.net0) }}</span>
+            </div>
+          </div>
+        </UCard>
+      </div>
+
+      <UCard class="mt-6">
+        <template #header>
+          <div class="font-semibold">Aktueller und vorherige Zeiträume</div>
+        </template>
+
+        <UTable
+            :columns="normalizeTableColumns(columns)"
+            :data="periods"
+            :loading="loading"
+            :empty="{ icon: 'i-heroicons-calculator', label: 'Keine Daten für die USt-Auswertung vorhanden' }"
+        >
+          <template #label-cell="{ row }">
+            <div class="flex items-center gap-2">
+              <span>{{ row.original.label }}</span>
+              <UBadge v-if="row.original.isCurrent" color="primary" variant="soft">Aktuell</UBadge>
+            </div>
+          </template>
+
+          <template #outputTax-cell="{ row }">
+            {{ formatCurrency(row.original.outputTax) }}
+          </template>
+
+          <template #inputTax-cell="{ row }">
+            {{ formatCurrency(row.original.inputTax) }}
+          </template>
+
+          <template #balance-cell="{ row }">
+            <span :class="row.original.balance >= 0 ? 'text-amber-600 dark:text-amber-400 font-medium' : 'text-emerald-600 dark:text-emerald-400 font-medium'">
+              {{ formatCurrency(row.original.balance) }}
+            </span>
+          </template>
+
+          <template #documents-cell="{ row }">
+            {{ row.original.outputCount }} / {{ row.original.inputCount }}
+          </template>
+        </UTable>
+      </UCard>
+    </UDashboardPanelContent>
+  </div>
+</template>

frontend/pages/accounts/index.vue

@@ -158,7 +158,7 @@ setupPage()
       <UButton
           icon="i-heroicons-x-mark"
           variant="outline"
-          color="rose"
+          color="error"
           @click="clearSearchString()"
           v-if="searchString.length > 0"
       />
@@ -194,20 +194,20 @@ setupPage()
     </template>
   </UDashboardToolbar>
   <UTable
-      :rows="filteredRows"
-      :columns="columns"
+      :data="filteredRows"
+      :columns="normalizeTableColumns(columns)"
       class="w-full"
       :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
-      @select="(i) => router.push(`/accounts/show/${i.id}`)"
-      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Buchungen anzuzeigen' }"
+      :on-select="(i) => router.push(`/accounts/show/${i.id}`)"
+      :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Buchungen anzuzeigen' }"
   >
-    <template #allocations-data="{row}">
-        <span v-if="dataLoaded">{{row.allocations ? row.allocations : null}}</span>
+    <template #allocations-cell="{row}">
+        <span v-if="dataLoaded">{{row.original.allocations ? row.original.allocations : null}}</span>
       <USkeleton v-else class="h-4 w-[250px]" />
 
     </template>
-    <template #saldo-data="{row}">
-      <span v-if="dataLoaded">{{row.allocations ? useCurrency(row.saldo) : null}}</span>
+    <template #saldo-cell="{row}">
+      <span v-if="dataLoaded">{{row.original.allocations ? useCurrency(row.original.saldo) : null}}</span>
       <USkeleton v-else class="h-4 w-[250px]" />
     </template>
   </UTable>
@@ -219,4 +219,4 @@ setupPage()
 
 <style scoped>
 
-</style>
+</style>

frontend/pages/accounts/show/[id].vue

@@ -106,7 +106,7 @@ const saldo = computed(() => {
   </UDashboardNavbar>
   <UDashboardPanelContent>
     <UTabs :items="[{label: 'Information'},{label: 'Buchungen'}]">
-      <template #item="{item}">
+      <template #content="{item}">
         <UCard class="mt-5" v-if="item.label === 'Information'">
           <div class="text-wrap">
             <table class="w-full" v-if="itemInfo">
@@ -137,21 +137,21 @@ const saldo = computed(() => {
         <UCard class="mt-5" v-if="item.label === 'Buchungen'">
           <UTable
               v-if="statementallocations"
-            :rows="renderedAllocations"
-              :columns="[{key:'amount', label:'Betrag'},{key:'date', label:'Datum'},{key:'partner', label:'Partner'},{key:'description', label:'Beschreibung'}]"
-              @select="(i) => selectAllocation(i)"
-              :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Buchungen anzuzeigen' }"
+            :data="renderedAllocations"
+              :columns="normalizeTableColumns([{key:'amount', label:'Betrag'},{key:'date', label:'Datum'},{key:'partner', label:'Partner'},{key:'description', label:'Beschreibung'}])"
+              :on-select="(i) => selectAllocation(i)"
+              :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Buchungen anzuzeigen' }"
           >
-            <template #amount-data="{row}">
-              <span class="text-right text-rose-600" v-if="row.amount < 0 || row.color === 'red'">{{useCurrency(row.amount)}}</span>
-              <span class="text-right text-primary-500" v-else-if="row.amount > 0 || row.color === 'green'">{{useCurrency(row.amount)}}</span>
-              <span v-else>{{useCurrency(row.amount)}}</span>
+            <template #amount-cell="{row}">
+              <span class="text-right text-rose-600" v-if="row.original.amount < 0 || row.original.color === 'red'">{{useCurrency(row.original.amount)}}</span>
+              <span class="text-right text-primary-500" v-else-if="row.original.amount > 0 || row.original.color === 'green'">{{useCurrency(row.original.amount)}}</span>
+              <span v-else>{{useCurrency(row.original.amount)}}</span>
             </template>
-            <template #date-data="{row}">
-              {{row.date ? dayjs(row.date).format('DD.MM.YYYY') : ''}}
+            <template #date-cell="{row}">
+              {{row.original.date ? dayjs(row.original.date).format('DD.MM.YYYY') : ''}}
             </template>
-            <template #description-data="{row}">
-              {{row.description ? row.description : ''}}
+            <template #description-cell="{row}">
+              {{row.original.description ? row.original.description : ''}}
             </template>
           </UTable>
         </UCard>
@@ -167,4 +167,4 @@ td {
   padding-bottom: 0.15em;
   padding-top: 0.15em;
 }
-</style>
+</style>

frontend/pages/banking/index.vue

@@ -12,9 +12,18 @@ const route = useRoute()
 
 const bankstatements = ref([])
 const bankaccounts = ref([])
+const customers = ref([])
+const vendors = ref([])
+const entitybankaccounts = ref([])
+const createddocuments = ref([])
+const incominginvoices = ref([])
+const openDocuments = ref([])
+const openIncomingInvoices = ref([])
 const filterAccount = ref([])
 const isSyncing = ref(false)
 const loadingDocs = ref(true) // Startet im Ladezustand
+const suggestionsModalOpen = ref(false)
+const selectedSuggestionRowId = ref(null)
 
 // Zeitraum-Optionen
 const periodOptions = [
@@ -32,16 +41,42 @@ const dateRange = ref({
   end: $dayjs().endOf('month').format('YYYY-MM-DD')
 })
 
+const setDateRangeFieldToToday = (field) => {
+  dateRange.value[field] = $dayjs().format('YYYY-MM-DD')
+}
+
 const setupPage = async () => {
   loadingDocs.value = true
   try {
-    const [statements, accounts] = await Promise.all([
+    const [statements, accounts, customerItems, vendorItems, entityBankItems, documentItems, invoiceItems] = await Promise.all([
       useEntities("bankstatements").select("*, statementallocations(*)", "valueDate", false),
-      useEntities("bankaccounts").select()
+      useEntities("bankaccounts").select(),
+      useEntities("customers").select(),
+      useEntities("vendors").select(),
+      useEntities("entitybankaccounts").select(),
+      useEntities("createddocuments").select("*, statementallocations(*), customer(id,name)"),
+      useEntities("incominginvoices").select("*, statementallocations(*), vendor(*)")
     ])
 
     bankstatements.value = statements
     bankaccounts.value = accounts
+    customers.value = customerItems
+    vendors.value = vendorItems
+    entitybankaccounts.value = entityBankItems
+    createddocuments.value = documentItems
+    incominginvoices.value = invoiceItems.filter(i => i.state === "Gebucht")
+
+    const documents = createddocuments.value.filter(i => i.type === "invoices" || i.type === "advanceInvoices")
+    openDocuments.value = documents.filter(i => useSum().isOpenCreatedDocument(i, createddocuments.value))
+        .map(i => ({
+          ...i,
+          docTotal: useSum().getCreatedDocumentSum(i, createddocuments.value),
+          statementTotal: Number(i.statementallocations.reduce((n, {amount}) => n + amount, 0)),
+          openSum: useSum().getCreatedDocumentOpenAmount(i, createddocuments.value).toFixed(2)
+        }))
+
+    openIncomingInvoices.value = invoiceItems
+        .filter(i => i.state === "Gebucht" && !i.archived && i.statementallocations.reduce((n, {amount}) => n + amount, 0).toFixed(2) !== getInvoiceSum(i, false))
 
     if (bankaccounts.value.length > 0 && filterAccount.value.length === 0) {
       filterAccount.value = bankaccounts.value
@@ -126,6 +161,213 @@ const calculateOpenSum = (statement) => {
   return (statement.amount - allocated).toFixed(2);
 }
 
+const getInvoiceSum = (invoice, onlyOpenSum) => {
+  let sum = 0
+  if (invoice.accounts) {
+    invoice.accounts.forEach(account => {
+      sum += (account.amountTax || 0)
+      sum += (account.amountNet || 0)
+    })
+  }
+
+  if (onlyOpenSum) sum = sum + Number(invoice.statementallocations.reduce((n, {amount}) => n + amount, 0))
+
+  if (invoice.expense) {
+    return (sum * -1).toFixed(2)
+  } else {
+    return sum.toFixed(2)
+  }
+}
+
+const normalizeIban = (value) => String(value || "").replace(/\s+/g, "").toUpperCase()
+const normalizeSuggestionText = (value) => String(value || "").toLowerCase().replace(/[^a-z0-9äöüß]+/gi, " ").replace(/\s+/g, " ").trim()
+const getSuggestionTokens = (value) => [...new Set(normalizeSuggestionText(value).split(" ").filter((token) => token.length >= 4))]
+const getMatchingPurposeParts = (value, candidates = []) => {
+  const haystack = normalizeSuggestionText(value)
+  if (!haystack) return []
+
+  return [...new Set(
+      candidates
+          .flatMap(candidate => getSuggestionTokens(candidate))
+          .filter(token => haystack.includes(token))
+  )].slice(0, 3)
+}
+
+const getAmountMatchLabel = (openSum, remaining) => {
+  const difference = Math.abs(Math.abs(Number(openSum)) - Math.abs(Number(remaining)))
+  if (difference < 0.01) return "Betrag exakt"
+  if (difference <= 1) return "Betrag fast passend"
+  if (difference <= 5) return "Betrag aehnlich"
+  return null
+}
+
+const isWithinAmountTolerance = (candidateSum, remaining) => {
+  const reference = Math.abs(Number(remaining))
+  const candidate = Math.abs(Number(candidateSum))
+  if (!reference || !candidate) return false
+
+  const difference = Math.abs(candidate - reference)
+  return difference / reference <= 0.1
+}
+
+const resolveMatchedBankAccountId = (statement) => {
+  const partnerIban = normalizeIban(statement.amount >= 0 ? (statement.debIban || statement.credIban) : (statement.credIban || statement.debIban))
+  if (!partnerIban) return null
+  return entitybankaccounts.value.find(account => normalizeIban(account.iban) === partnerIban)?.id || null
+}
+
+const getTopEntitySuggestion = (statement) => {
+  const isCustomer = Number(statement.amount) >= 0
+  const partnerName = normalizeSuggestionText(isCustomer ? (statement.debName || statement.credName) : (statement.credName || statement.debName))
+  const partnerIban = normalizeIban(isCustomer ? (statement.debIban || statement.credIban) : (statement.credIban || statement.debIban))
+  const matchedBankAccountId = resolveMatchedBankAccountId(statement)
+  const sourceItems = isCustomer ? customers.value : vendors.value
+
+  const suggestions = sourceItems.map(item => {
+    const infoData = item.infoData || {}
+    const bankAccountIds = Array.isArray(infoData.bankAccountIds) ? infoData.bankAccountIds.map(Number) : []
+    const bankingIbans = Array.isArray(infoData.bankingIbans) ? infoData.bankingIbans.map(iban => normalizeIban(iban)) : []
+    const normalizedEntityName = normalizeSuggestionText(item.name)
+    const exactNameMatch = normalizedEntityName && partnerName && normalizedEntityName === partnerName
+    const partialNameMatch = normalizedEntityName && partnerName
+        ? normalizedEntityName.includes(partnerName) || partnerName.includes(normalizedEntityName)
+        : false
+
+    let score = 0
+    let reason = ""
+
+    if (matchedBankAccountId && bankAccountIds.includes(matchedBankAccountId) && partnerIban && bankingIbans.includes(partnerIban)) {
+      score = 100
+      reason = "IBAN und Bankkonto passen"
+    } else if (matchedBankAccountId && bankAccountIds.includes(matchedBankAccountId)) {
+      score = 95
+      reason = "Bankkonto passt"
+    } else if (partnerIban && bankingIbans.includes(partnerIban)) {
+      score = 90
+      reason = "IBAN bekannt"
+    } else if (exactNameMatch) {
+      score = 60
+      reason = "Name passt"
+    } else if (partialNameMatch) {
+      score = 45
+      reason = "Name aehnlich"
+    }
+
+    return {
+      type: isCustomer ? "customer" : "vendor",
+      id: item.id,
+      name: item.name,
+      number: isCustomer ? item.customerNumber : item.vendorNumber,
+      score,
+      reason
+    }
+  }).filter(item => item.score > 0)
+    .sort((a, b) => b.score - a.score)
+
+  return suggestions[0] || null
+}
+
+const getDocumentSuggestionMeta = (statement, document, suggestion) => {
+  let score = 0
+  const remaining = Math.abs(Number(calculateOpenSum(statement)))
+  const openSum = Math.abs(Number(document.openSum))
+  const purposeMatches = getMatchingPurposeParts(statement.text, [document.documentNumber, document.title, document.description])
+  const amountLabel = getAmountMatchLabel(openSum, remaining)
+  const withinTolerance = isWithinAmountTolerance(openSum, remaining)
+
+  if (!withinTolerance) {
+    return { score: 0, amountLabel: null, purposeMatches: [] }
+  }
+
+  if (openSum === remaining) score += 100
+  else score += Math.max(0, 60 - Math.abs(openSum - remaining))
+
+  if (suggestion && document.customer?.id === suggestion.id) score += 80
+  if (purposeMatches.length > 0) score += 50 + (purposeMatches.length * 10)
+
+  return { score, amountLabel, purposeMatches }
+}
+
+const getIncomingInvoiceSuggestionMeta = (statement, invoice, suggestion) => {
+  let score = 0
+  const remaining = Math.abs(Number(calculateOpenSum(statement)))
+  const openSum = Math.abs(Number(getInvoiceSum(invoice, true)))
+  const purposeMatches = getMatchingPurposeParts(statement.text, [invoice.reference, invoice.description])
+  const amountLabel = getAmountMatchLabel(openSum, remaining)
+  const withinTolerance = isWithinAmountTolerance(openSum, remaining)
+
+  if (!withinTolerance) {
+    return { score: 0, amountLabel: null, purposeMatches: [] }
+  }
+
+  if (openSum === remaining) score += 100
+  else score += Math.max(0, 60 - Math.abs(openSum - remaining))
+
+  if (suggestion && invoice.vendor?.id === suggestion.id) score += 80
+  if (purposeMatches.length > 0) score += 50 + (purposeMatches.length * 10)
+
+  return { score, amountLabel, purposeMatches }
+}
+
+const getRowSuggestions = (statement) => {
+  const entitySuggestion = getTopEntitySuggestion(statement)
+
+  const topDocument = (entitySuggestion?.type === "customer" ? openDocuments.value.filter(doc => doc.customer?.id === entitySuggestion.id) : openDocuments.value)
+      .map(document => {
+        const meta = getDocumentSuggestionMeta(statement, document, entitySuggestion?.type === "customer" ? entitySuggestion : null)
+        return { ...document, suggestionScore: meta.score, suggestionAmountLabel: meta.amountLabel, suggestionPurposeMatches: meta.purposeMatches, suggestionKey: `document:${document.id}` }
+      })
+      .filter(document => !isSuggestionDismissed(statement.id, document.suggestionKey))
+      .filter(document => document.suggestionScore >= 80 || document.suggestionPurposeMatches?.length > 0)
+      .sort((a, b) => b.suggestionScore - a.suggestionScore)[0] || null
+
+  const topIncomingInvoice = (entitySuggestion?.type === "vendor" ? openIncomingInvoices.value.filter(invoice => invoice.vendor?.id === entitySuggestion.id) : openIncomingInvoices.value)
+      .map(invoice => {
+        const meta = getIncomingInvoiceSuggestionMeta(statement, invoice, entitySuggestion?.type === "vendor" ? entitySuggestion : null)
+        return { ...invoice, suggestionScore: meta.score, suggestionAmountLabel: meta.amountLabel, suggestionPurposeMatches: meta.purposeMatches, suggestionKey: `invoice:${invoice.id}` }
+      })
+      .filter(invoice => !isSuggestionDismissed(statement.id, invoice.suggestionKey))
+      .filter(invoice => invoice.suggestionScore >= 80 || invoice.suggestionPurposeMatches?.length > 0)
+      .sort((a, b) => b.suggestionScore - a.suggestionScore)[0] || null
+
+  return {
+    topDocument,
+    topIncomingInvoice
+  }
+}
+
+const rowSuggestions = computed(() => {
+  const entries = filteredRows.value.map(row => [row.id, getRowSuggestions(row)])
+  return Object.fromEntries(entries)
+})
+
+const dismissedSuggestions = computed(() => tempStore.settings?.banking?.dismissedSuggestions || {})
+
+const getDismissedSuggestionKeys = (statementId) => {
+  const key = String(statementId || "")
+  const values = dismissedSuggestions.value?.[key]
+  return Array.isArray(values) ? values : []
+}
+
+const isSuggestionDismissed = (statementId, suggestionKey) => {
+  return getDismissedSuggestionKeys(statementId).includes(suggestionKey)
+}
+
+const rowsWithSuggestions = computed(() => {
+  return filteredRows.value
+      .map((row) => ({
+        row,
+        suggestions: rowSuggestions.value[row.id]
+      }))
+      .filter(({ suggestions }) => suggestions?.topDocument || suggestions?.topIncomingInvoice)
+})
+
+const suggestionCount = computed(() => rowsWithSuggestions.value.length)
+
+const selectedSuggestionRow = computed(() => {
+  return rowsWithSuggestions.value.find((entry) => entry.row.id === selectedSuggestionRowId.value) || rowsWithSuggestions.value[0] || null
+})
+
 const filteredRows = computed(() => {
   if (!bankstatements.value.length) return []
 
@@ -162,6 +404,60 @@ const filteredRows = computed(() => {
 
 const displayCurrency = (value) => `${Number(value).toFixed(2).replace(".", ",")} €`
 
+const saveAllocation = async (allocation) => {
+  await $api("/api/banking/statements", {
+    method: "POST",
+    body: { data: allocation }
+  })
+  await setupPage()
+}
+
+const handleAssignDocument = async (row, document, event) => {
+  event.stopPropagation()
+  await saveAllocation({
+    createddocument: document.id,
+    bankstatement: row.id,
+    amount: Number(Number(document.openSum) < Number(calculateOpenSum(row)) ? document.openSum : calculateOpenSum(row)),
+    description: "Automatischer Vorschlag"
+  })
+}
+
+const handleAssignIncomingInvoice = async (row, invoice, event) => {
+  event.stopPropagation()
+  await saveAllocation({
+    incominginvoice: invoice.id,
+    bankstatement: row.id,
+    amount: Number(Math.abs(getInvoiceSum(invoice, true)) > Math.abs(Number(calculateOpenSum(row))) ? calculateOpenSum(row) : getInvoiceSum(invoice, true)),
+    description: "Automatischer Vorschlag"
+  })
+}
+
+const dismissSuggestion = (row, suggestionKey, event) => {
+  event.stopPropagation()
+  const bankingSettings = tempStore.settings?.banking || {}
+  const dismissed = { ...(bankingSettings.dismissedSuggestions || {}) }
+  const rowKey = String(row.id || "")
+  const existing = Array.isArray(dismissed[rowKey]) ? dismissed[rowKey] : []
+  if (!existing.includes(suggestionKey)) dismissed[rowKey] = [...existing, suggestionKey]
+
+  tempStore.modifySettings("banking", {
+    ...bankingSettings,
+    dismissedSuggestions: dismissed
+  })
+
+  if (selectedSuggestionRowId.value === row.id) {
+    const remaining = getDismissedSuggestionKeys(row.id).concat([suggestionKey])
+    const current = rowSuggestions.value[row.id]
+    const noMoreSuggestions = (!current?.topDocument || remaining.includes(current.topDocument.suggestionKey))
+      && (!current?.topIncomingInvoice || remaining.includes(current.topIncomingInvoice.suggestionKey))
+
+    if (noMoreSuggestions) {
+      const nextRow = rowsWithSuggestions.value.find((entry) => entry.row.id !== row.id)
+      selectedSuggestionRowId.value = nextRow?.row.id || null
+    }
+  }
+}
+
 onMounted(() => {
   setupPage()
 })
@@ -170,6 +466,15 @@ onMounted(() => {
 <template>
   <UDashboardNavbar title="Bankbuchungen" :badge="filteredRows.length">
     <template #right>
+      <UButton
+          color="primary"
+          variant="soft"
+          icon="i-heroicons-sparkles"
+          @click="suggestionsModalOpen = true"
+      >
+        Vorschlaege
+        <UBadge color="primary" variant="solid" size="xs" class="ml-2">{{ suggestionCount }}</UBadge>
+      </UButton>
       <UButton
           label="Bankabruf"
           icon="i-heroicons-arrow-path"
@@ -199,7 +504,7 @@ onMounted(() => {
             placeholder="Konten"
             class="w-48"
         />
-        <UDivider orientation="vertical" class="h-6"/>
+        <USeparator orientation="vertical" class="h-6"/>
         <div class="flex items-center gap-2">
           <USelectMenu
               v-model="selectedPeriod"
@@ -208,8 +513,14 @@ onMounted(() => {
               icon="i-heroicons-calendar-days"
           />
           <div v-if="selectedPeriod.key === 'custom'" class="flex items-center gap-1">
-            <UInput type="date" v-model="dateRange.start" size="xs" class="w-32"/>
-            <UInput type="date" v-model="dateRange.end" size="xs" class="w-32"/>
+            <div class="flex items-center gap-1">
+              <UInput type="date" v-model="dateRange.start" size="xs" class="w-32"/>
+              <UButton size="2xs" color="gray" variant="soft" label="Heute" @click="setDateRangeFieldToToday('start')" />
+            </div>
+            <div class="flex items-center gap-1">
+              <UInput type="date" v-model="dateRange.end" size="xs" class="w-32"/>
+              <UButton size="2xs" color="gray" variant="soft" label="Heute" @click="setDateRangeFieldToToday('end')" />
+            </div>
           </div>
           <div v-else class="text-xs text-gray-400 hidden sm:block italic">
             {{ $dayjs(dateRange.start).format('DD.MM.') }} - {{ $dayjs(dateRange.end).format('DD.MM.YYYY') }}
@@ -289,4 +600,113 @@ onMounted(() => {
     </table>
   </div>
   <PageLeaveGuard :when="isSyncing"/>
-</template>
+
+  <UModal v-model:open="suggestionsModalOpen" :ui="{ width: 'sm:max-w-6xl' }">
+    <template #content>
+      <UCard>
+        <template #header>
+          <div class="flex items-center justify-between gap-3">
+            <div>
+              <div class="text-lg font-semibold">Vorschlaege fuer Bankbuchungen</div>
+              <div class="text-sm text-gray-500">Direkte Zuweisung von passenden Rechnungen und Eingangsbelegen</div>
+            </div>
+            <UBadge color="primary" variant="subtle">{{ suggestionCount }}</UBadge>
+          </div>
+        </template>
+
+      <div v-if="rowsWithSuggestions.length > 0" class="grid grid-cols-1 lg:grid-cols-3 gap-4 min-h-[520px]">
+        <div class="lg:col-span-1 border rounded-lg overflow-hidden dark:border-gray-800">
+          <div
+              v-for="entry in rowsWithSuggestions"
+              :key="entry.row.id"
+              class="p-3 border-b dark:border-gray-800 cursor-pointer transition-colors"
+              :class="selectedSuggestionRowId === entry.row.id || (!selectedSuggestionRowId && selectedSuggestionRow?.row.id === entry.row.id) ? 'bg-primary-50 dark:bg-primary-900/20' : 'hover:bg-gray-50 dark:hover:bg-gray-900/50'"
+              @click="selectedSuggestionRowId = entry.row.id"
+          >
+            <div class="flex items-start justify-between gap-2">
+              <div class="min-w-0">
+                <div class="text-sm font-medium truncate">{{ entry.row.amount < 0 ? entry.row.credName : entry.row.debName }}</div>
+                <div class="text-xs text-gray-500 truncate">{{ entry.row.text || 'Ohne Verwendungszweck' }}</div>
+              </div>
+              <div class="text-xs font-mono whitespace-nowrap" :class="entry.row.amount >= 0 ? 'text-green-600' : 'text-rose-600'">
+                {{ displayCurrency(entry.row.amount) }}
+              </div>
+            </div>
+            <div class="mt-2 flex flex-wrap gap-1">
+              <UBadge v-if="entry.suggestions?.topDocument" size="xs" color="emerald" variant="subtle">Rechnung</UBadge>
+              <UBadge v-if="entry.suggestions?.topIncomingInvoice" size="xs" color="error" variant="subtle">Eingangsbeleg</UBadge>
+            </div>
+          </div>
+        </div>
+
+        <div class="lg:col-span-2 space-y-3" v-if="selectedSuggestionRow">
+          <div class="rounded-lg border dark:border-gray-800 p-4 bg-gray-50 dark:bg-gray-900/50">
+            <div class="flex items-start justify-between gap-3">
+              <div>
+                <div class="text-sm font-semibold">{{ selectedSuggestionRow.row.amount < 0 ? selectedSuggestionRow.row.credName : selectedSuggestionRow.row.debName }}</div>
+                <div class="text-xs text-gray-500 mt-1">{{ selectedSuggestionRow.row.text || 'Ohne Verwendungszweck' }}</div>
+                <div class="text-xs text-gray-400 mt-1">{{ $dayjs(selectedSuggestionRow.row.valueDate).format("DD.MM.YYYY") }}</div>
+              </div>
+              <div class="text-right">
+                <div class="font-mono font-semibold" :class="selectedSuggestionRow.row.amount >= 0 ? 'text-green-600' : 'text-rose-600'">{{ displayCurrency(selectedSuggestionRow.row.amount) }}</div>
+                <div class="text-xs text-gray-400">Offen {{ displayCurrency(calculateOpenSum(selectedSuggestionRow.row)) }}</div>
+              </div>
+            </div>
+          </div>
+
+          <div v-if="selectedSuggestionRow.suggestions?.topDocument" class="rounded-lg border border-emerald-200 bg-emerald-50/70 px-4 py-3">
+            <div class="flex items-start justify-between gap-3">
+              <div class="min-w-0">
+                <div class="text-sm font-semibold text-emerald-700">Rechnung {{ selectedSuggestionRow.suggestions.topDocument.documentNumber }}</div>
+                <div class="text-xs text-gray-600 mt-1">{{ selectedSuggestionRow.suggestions.topDocument.customer?.name }} | Offen {{ displayCurrency(selectedSuggestionRow.suggestions.topDocument.openSum) }}</div>
+                <div class="mt-2 flex flex-wrap gap-1" v-if="selectedSuggestionRow.suggestions.topDocument.suggestionAmountLabel || selectedSuggestionRow.suggestions.topDocument.suggestionPurposeMatches?.length">
+                  <UBadge v-if="selectedSuggestionRow.suggestions.topDocument.suggestionAmountLabel" size="xs" color="emerald" variant="subtle">
+                    {{ selectedSuggestionRow.suggestions.topDocument.suggestionAmountLabel }}
+                  </UBadge>
+                  <UBadge v-for="match in selectedSuggestionRow.suggestions.topDocument.suggestionPurposeMatches" :key="`modal-doc-${selectedSuggestionRow.row.id}-${match}`" size="xs" color="amber" variant="subtle">
+                    VWZ: {{ match }}
+                  </UBadge>
+                </div>
+              </div>
+              <UButton size="sm" color="emerald" @click="handleAssignDocument(selectedSuggestionRow.row, selectedSuggestionRow.suggestions.topDocument, $event)">
+                Zuweisen
+              </UButton>
+              <UButton size="sm" color="gray" variant="ghost" @click="dismissSuggestion(selectedSuggestionRow.row, selectedSuggestionRow.suggestions.topDocument.suggestionKey, $event)">
+                Ablehnen
+              </UButton>
+            </div>
+          </div>
+
+          <div v-if="selectedSuggestionRow.suggestions?.topIncomingInvoice" class="rounded-lg border border-rose-200 bg-rose-50/70 px-4 py-3">
+            <div class="flex items-start justify-between gap-3">
+              <div class="min-w-0">
+                <div class="text-sm font-semibold text-rose-700">Eingangsbeleg {{ selectedSuggestionRow.suggestions.topIncomingInvoice.reference || '-' }}</div>
+                <div class="text-xs text-gray-600 mt-1">{{ selectedSuggestionRow.suggestions.topIncomingInvoice.vendor?.name }} | Offen {{ displayCurrency(getInvoiceSum(selectedSuggestionRow.suggestions.topIncomingInvoice, true)) }}</div>
+                <div class="mt-2 flex flex-wrap gap-1" v-if="selectedSuggestionRow.suggestions.topIncomingInvoice.suggestionAmountLabel || selectedSuggestionRow.suggestions.topIncomingInvoice.suggestionPurposeMatches?.length">
+                  <UBadge v-if="selectedSuggestionRow.suggestions.topIncomingInvoice.suggestionAmountLabel" size="xs" color="emerald" variant="subtle">
+                    {{ selectedSuggestionRow.suggestions.topIncomingInvoice.suggestionAmountLabel }}
+                  </UBadge>
+                  <UBadge v-for="match in selectedSuggestionRow.suggestions.topIncomingInvoice.suggestionPurposeMatches" :key="`modal-invoice-${selectedSuggestionRow.row.id}-${match}`" size="xs" color="amber" variant="subtle">
+                    VWZ: {{ match }}
+                  </UBadge>
+                </div>
+              </div>
+              <UButton size="sm" color="error" @click="handleAssignIncomingInvoice(selectedSuggestionRow.row, selectedSuggestionRow.suggestions.topIncomingInvoice, $event)">
+                Zuweisen
+              </UButton>
+              <UButton size="sm" color="gray" variant="ghost" @click="dismissSuggestion(selectedSuggestionRow.row, selectedSuggestionRow.suggestions.topIncomingInvoice.suggestionKey, $event)">
+                Ablehnen
+              </UButton>
+            </div>
+          </div>
+        </div>
+      </div>
+
+        <div v-else class="py-10 text-center text-gray-400">
+          <UIcon name="i-heroicons-sparkles" class="w-10 h-10 mx-auto mb-2 opacity-30"/>
+          <p>Keine Vorschlaege fuer die aktuelle Filterung vorhanden.</p>
+        </div>
+      </UCard>
+    </template>
+  </UModal>
+</template>

frontend/pages/banking/statements/[mode]/[[id]].vue

@@ -21,6 +21,7 @@ const openDocuments = ref([])
 const allocatedDocuments = ref([])
 const openIncomingInvoices = ref([])
 const allocatedIncomingInvoices = ref([])
+const statementSuggestions = ref({ suggestions: [] })
 
 const customers = ref([])
 const vendors = ref([])
@@ -52,13 +53,13 @@ const setup = async () => {
   customers.value = (await useEntities("customers").select())
   vendors.value = (await useEntities("vendors").select())
 
-  openDocuments.value = documents.filter(i => i.statementallocations.reduce((n, {amount}) => n + amount, 0).toFixed(2) !== useSum().getCreatedDocumentSum(i, createddocuments.value).toFixed(2))
+  openDocuments.value = documents.filter(i => useSum().isOpenCreatedDocument(i, createddocuments.value))
   openDocuments.value = openDocuments.value.map(i => {
     return {
       ...i,
       docTotal: useSum().getCreatedDocumentSum(i, createddocuments.value),
       statementTotal: Number(i.statementallocations.reduce((n, {amount}) => n + amount, 0)),
-      openSum: (useSum().getCreatedDocumentSum(i, createddocuments.value) - Number(i.statementallocations.reduce((n, {amount}) => n + amount, 0))).toFixed(2)
+      openSum: useSum().getCreatedDocumentOpenAmount(i, createddocuments.value).toFixed(2)
     }
   })
 
@@ -67,6 +68,12 @@ const setup = async () => {
 
   openIncomingInvoices.value = (await useEntities("incominginvoices").select("*, statementallocations(*), vendor(*)")).filter(i => !i.archived && i.statementallocations.reduce((n, {amount}) => n + amount, 0).toFixed(2) !== getInvoiceSum(i, false))
 
+  if (itemInfo.value?.id) {
+    statementSuggestions.value = await useFunctions().useBankingStatementSuggestions(itemInfo.value.id)
+  } else {
+    statementSuggestions.value = { suggestions: [] }
+  }
+
   loading.value = false
 }
 
@@ -163,6 +170,225 @@ const filteredIncomingInvoices = computed(() => {
   return useSearch(searchString.value, openIncomingInvoices.value.filter(i => i.state === "Gebucht"))
 })
 
+const dismissedSuggestions = computed(() => tempStore.settings?.banking?.dismissedSuggestions || {})
+
+const getDismissedSuggestionKeys = (statementId) => {
+  const key = String(statementId || "")
+  const values = dismissedSuggestions.value?.[key]
+  return Array.isArray(values) ? values : []
+}
+
+const isSuggestionDismissed = (statementId, suggestionKey) => {
+  return getDismissedSuggestionKeys(statementId).includes(suggestionKey)
+}
+
+const dismissSuggestion = (statementId, suggestionKey) => {
+  const bankingSettings = tempStore.settings?.banking || {}
+  const dismissed = { ...(bankingSettings.dismissedSuggestions || {}) }
+  const rowKey = String(statementId || "")
+  const existing = Array.isArray(dismissed[rowKey]) ? dismissed[rowKey] : []
+  if (!existing.includes(suggestionKey)) dismissed[rowKey] = [...existing, suggestionKey]
+
+  tempStore.modifySettings("banking", {
+    ...bankingSettings,
+    dismissedSuggestions: dismissed
+  })
+}
+
+const topEntitySuggestion = computed(() => {
+  const suggestions = Array.isArray(statementSuggestions.value?.suggestions) ? statementSuggestions.value.suggestions : []
+  return suggestions[0] || null
+})
+
+const normalizeSuggestionText = (value) => {
+  return String(value || "")
+      .toLowerCase()
+      .replace(/[^a-z0-9äöüß]+/gi, " ")
+      .replace(/\s+/g, " ")
+      .trim()
+}
+
+const getSuggestionTokens = (value) => {
+  return [...new Set(
+      normalizeSuggestionText(value)
+          .split(" ")
+          .filter((token) => token.length >= 4)
+  )]
+}
+
+const getMatchingPurposeParts = (value, candidates = []) => {
+  const haystack = normalizeSuggestionText(value)
+  if (!haystack) return []
+
+  return [...new Set(
+      candidates
+          .flatMap(candidate => getSuggestionTokens(candidate))
+          .filter(token => haystack.includes(token))
+  )].slice(0, 3)
+}
+
+const getAmountMatchLabel = (openSum, remaining) => {
+  const difference = Math.abs(Math.abs(Number(openSum)) - Math.abs(Number(remaining)))
+  if (difference < 0.01) return "Betrag exakt passend"
+  if (difference <= 1) return `Betrag fast passend (${displayCurrency(difference)} Abweichung)`
+  if (difference <= 5) return `Betrag aehnlich (${displayCurrency(difference)} Abweichung)`
+  return null
+}
+
+const isWithinAmountTolerance = (candidateSum, remaining) => {
+  const reference = Math.abs(Number(remaining))
+  const candidate = Math.abs(Number(candidateSum))
+  if (!reference || !candidate) return false
+
+  const difference = Math.abs(candidate - reference)
+  return difference / reference <= 0.1
+}
+
+const getDocumentSuggestionMeta = (document, suggestion) => {
+  let score = 0
+  const remaining = Math.abs(Number(calculateOpenSum.value))
+  const openSum = Math.abs(Number(document.openSum))
+  const purposeMatches = getMatchingPurposeParts(itemInfo.value.text, [
+    document.documentNumber,
+    document.title,
+    document.description
+  ])
+  const amountLabel = getAmountMatchLabel(openSum, remaining)
+  const withinTolerance = isWithinAmountTolerance(openSum, remaining)
+
+  if (!withinTolerance) {
+    return {
+      score: 0,
+      purposeMatches: [],
+      amountLabel: null
+    }
+  }
+
+  if (openSum === remaining) score += 100
+  else score += Math.max(0, 60 - Math.abs(openSum - remaining))
+
+  if (suggestion && document.customer?.id === suggestion.id) score += 80
+  if (purposeMatches.length > 0) score += 50 + (purposeMatches.length * 10)
+
+  return {
+    score,
+    purposeMatches,
+    amountLabel
+  }
+}
+
+const getInvoiceSuggestionMeta = (invoice, suggestion) => {
+  let score = 0
+  const remaining = Math.abs(Number(calculateOpenSum.value))
+  const openSum = Math.abs(Number(getInvoiceSum(invoice, true)))
+  const purposeMatches = getMatchingPurposeParts(itemInfo.value.text, [
+    invoice.reference,
+    invoice.description
+  ])
+  const amountLabel = getAmountMatchLabel(openSum, remaining)
+  const withinTolerance = isWithinAmountTolerance(openSum, remaining)
+
+  if (!withinTolerance) {
+    return {
+      score: 0,
+      purposeMatches: [],
+      amountLabel: null
+    }
+  }
+
+  if (openSum === remaining) score += 100
+  else score += Math.max(0, 60 - Math.abs(openSum - remaining))
+
+  if (suggestion && invoice.vendor?.id === suggestion.id) score += 80
+  if (purposeMatches.length > 0) score += 50 + (purposeMatches.length * 10)
+
+  return {
+    score,
+    purposeMatches,
+    amountLabel
+  }
+}
+
+const suggestedDocuments = computed(() => {
+  if (topEntitySuggestion.value?.type !== "customer") return []
+
+  return openDocuments.value
+      .filter((document) => document.customer?.id === topEntitySuggestion.value.id)
+      .map((document) => {
+        const meta = getDocumentSuggestionMeta(document, topEntitySuggestion.value)
+        return {
+          ...document,
+          suggestionScore: meta.score,
+          suggestionPurposeMatches: meta.purposeMatches,
+          suggestionAmountLabel: meta.amountLabel,
+          suggestionKey: `document:${document.id}`
+        }
+      })
+      .filter((document) => !isSuggestionDismissed(itemInfo.value?.id, document.suggestionKey))
+      .sort((a, b) => b.suggestionScore - a.suggestionScore)
+      .slice(0, 3)
+})
+
+const suggestedIncomingInvoices = computed(() => {
+  if (topEntitySuggestion.value?.type !== "vendor") return []
+
+  return openIncomingInvoices.value
+      .filter((invoice) => invoice.vendor?.id === topEntitySuggestion.value.id)
+      .map((invoice) => {
+        const meta = getInvoiceSuggestionMeta(invoice, topEntitySuggestion.value)
+        return {
+          ...invoice,
+          suggestionScore: meta.score,
+          suggestionPurposeMatches: meta.purposeMatches,
+          suggestionAmountLabel: meta.amountLabel,
+          suggestionKey: `invoice:${invoice.id}`
+        }
+      })
+      .filter((invoice) => !isSuggestionDismissed(itemInfo.value?.id, invoice.suggestionKey))
+      .sort((a, b) => b.suggestionScore - a.suggestionScore)
+      .slice(0, 3)
+})
+
+const fallbackSuggestedDocuments = computed(() => {
+  if (topEntitySuggestion.value) return []
+
+  return openDocuments.value
+      .map((document) => {
+        const meta = getDocumentSuggestionMeta(document, null)
+        return {
+          ...document,
+          suggestionScore: meta.score,
+          suggestionPurposeMatches: meta.purposeMatches,
+          suggestionAmountLabel: meta.amountLabel,
+          suggestionKey: `document:${document.id}`
+        }
+      })
+      .filter((document) => !isSuggestionDismissed(itemInfo.value?.id, document.suggestionKey))
+      .filter((document) => document.suggestionScore >= 80 || document.suggestionPurposeMatches?.length > 0)
+      .sort((a, b) => b.suggestionScore - a.suggestionScore)
+      .slice(0, 3)
+})
+
+const fallbackSuggestedIncomingInvoices = computed(() => {
+  if (topEntitySuggestion.value) return []
+
+  return openIncomingInvoices.value
+      .map((invoice) => {
+        const meta = getInvoiceSuggestionMeta(invoice, null)
+        return {
+          ...invoice,
+          suggestionScore: meta.score,
+          suggestionPurposeMatches: meta.purposeMatches,
+          suggestionAmountLabel: meta.amountLabel,
+          suggestionKey: `invoice:${invoice.id}`
+        }
+      })
+      .filter((invoice) => !isSuggestionDismissed(itemInfo.value?.id, invoice.suggestionKey))
+      .filter((invoice) => invoice.suggestionScore >= 80 || invoice.suggestionPurposeMatches?.length > 0)
+      .sort((a, b) => b.suggestionScore - a.suggestionScore)
+      .slice(0, 3)
+})
+
 const archiveStatement = async () => {
   let temp = {...itemInfo.value}
   delete temp.statementallocations
@@ -212,7 +438,7 @@ setup()
       <UBadge v-else color="amber" variant="subtle">Offen</UBadge>
     </template>
     <template #right>
-      <ArchiveButton color="rose" variant="outline" type="bankstatements" @confirmed="archiveStatement"/>
+      <ArchiveButton color="error" variant="outline" type="bankstatements" @confirmed="archiveStatement"/>
     </template>
   </UDashboardNavbar>
 
@@ -326,7 +552,7 @@ setup()
                   <div class="font-mono text-sm font-semibold">{{ displayCurrency(item.amount) }}</div>
                   <UButton
                       icon="i-heroicons-trash"
-                      color="rose"
+                      color="error"
                       variant="ghost"
                       size="xs"
                       class="opacity-0 group-hover:opacity-100 transition-opacity"
@@ -345,14 +571,14 @@ setup()
             class="p-4 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 shadow-sm shrink-0 z-10">
           <div class="grid grid-cols-12 gap-4 items-end">
             <div class="col-span-12 md:col-span-3">
-              <UFormGroup label="Betrag" size="sm">
+              <UFormField label="Betrag" size="sm">
                 <UInput v-model="manualAllocationSum" type="number" step="0.01">
                   <template #trailing><span class="text-gray-500 text-xs">EUR</span></template>
                 </UInput>
-              </UFormGroup>
+              </UFormField>
             </div>
             <div class="col-span-12 md:col-span-5">
-              <UFormGroup label="Konto / Manuelle Buchung" size="sm">
+              <UFormField label="Konto / Manuelle Buchung" size="sm">
                 <div class="flex gap-1">
                   <USelectMenu
                       class="w-full"
@@ -381,7 +607,7 @@ setup()
                     />
                   </UTooltip>
                 </div>
-              </UFormGroup>
+              </UFormField>
             </div>
             <div class="col-span-12 md:col-span-4 flex justify-end gap-2 pb-0.5">
               <UButton variant="soft" color="gray" icon="i-heroicons-adjustments-horizontal"
@@ -442,6 +668,102 @@ setup()
 
           <div class="flex-1 overflow-y-auto p-4 space-y-6">
 
+            <div v-if="Number(calculateOpenSum) !== 0 && (topEntitySuggestion || fallbackSuggestedDocuments.length > 0 || fallbackSuggestedIncomingInvoices.length > 0)" class="rounded-xl border border-primary-200 bg-primary-50/70 dark:bg-primary-900/10 dark:border-primary-800 p-4">
+              <div class="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
+                <div v-if="topEntitySuggestion">
+                  <div class="text-xs font-bold uppercase tracking-wide text-primary-700 dark:text-primary-300">Automatischer Vorschlag</div>
+                  <div class="mt-1 text-sm font-semibold text-gray-900 dark:text-white">
+                    {{ topEntitySuggestion.type === 'customer' ? 'Kunde' : 'Lieferant' }}:
+                    {{ topEntitySuggestion.number }} - {{ topEntitySuggestion.name }}
+                  </div>
+                  <div class="text-xs text-gray-600 dark:text-gray-300 mt-1">
+                    {{ topEntitySuggestion.reason }}
+                  </div>
+                  <div class="text-xs text-gray-500 mt-1" v-if="statementSuggestions.partnerIban || statementSuggestions.partnerName">
+                    {{ statementSuggestions.partnerName || 'Unbekannter Partner' }}
+                    <span v-if="statementSuggestions.partnerIban">| {{ separateIBAN(statementSuggestions.partnerIban) }}</span>
+                  </div>
+                </div>
+              </div>
+
+              <div v-if="!topEntitySuggestion" class="mb-3">
+                <div class="text-xs font-bold uppercase tracking-wide text-primary-700 dark:text-primary-300">Automatische Belegvorschlaege</div>
+                <div class="mt-1 text-xs text-gray-600 dark:text-gray-300">
+                  Kein eindeutiger Kunde oder Lieferant erkannt. Vorschlaege basieren auf Betrag und Verwendungszweck.
+                </div>
+              </div>
+
+              <div v-if="suggestedDocuments.length > 0 || suggestedIncomingInvoices.length > 0 || fallbackSuggestedDocuments.length > 0 || fallbackSuggestedIncomingInvoices.length > 0" class="mt-4 grid gap-2">
+                <div
+                    v-for="document in (topEntitySuggestion ? suggestedDocuments : fallbackSuggestedDocuments)"
+                    :key="`suggested-document-${document.id}`"
+                    class="flex items-center justify-between rounded-lg border border-white/70 dark:border-gray-800 bg-white dark:bg-gray-900 px-3 py-2"
+                >
+                  <div>
+                    <div class="text-sm font-medium text-gray-900 dark:text-white">{{ document.documentNumber }}</div>
+                    <div class="text-xs text-gray-500">{{ document.customer?.name }} | Offen {{ displayCurrency(document.openSum) }}</div>
+                    <div class="mt-1 flex flex-wrap gap-1" v-if="document.suggestionAmountLabel || document.suggestionPurposeMatches?.length">
+                      <UBadge v-if="document.suggestionAmountLabel" size="xs" color="emerald" variant="subtle">
+                        {{ document.suggestionAmountLabel }}
+                      </UBadge>
+                      <UBadge v-for="match in document.suggestionPurposeMatches" :key="`doc-match-${document.id}-${match}`" size="xs" color="amber" variant="subtle">
+                        VWZ: {{ match }}
+                      </UBadge>
+                    </div>
+                  </div>
+                  <UButton
+                      size="xs"
+                      color="primary"
+                      @click="saveAllocation({createddocument: document.id, bankstatement: itemInfo.id, amount: Number(Number(document.openSum) < manualAllocationSum ? document.openSum : manualAllocationSum), description: allocationDescription || 'Automatischer Vorschlag'})"
+                  >
+                    Rechnung zuweisen
+                  </UButton>
+                  <UButton
+                      size="xs"
+                      color="gray"
+                      variant="ghost"
+                      @click="dismissSuggestion(itemInfo.id, document.suggestionKey)"
+                  >
+                    Ablehnen
+                  </UButton>
+                </div>
+
+                <div
+                    v-for="invoice in (topEntitySuggestion ? suggestedIncomingInvoices : fallbackSuggestedIncomingInvoices)"
+                    :key="`suggested-invoice-${invoice.id}`"
+                    class="flex items-center justify-between rounded-lg border border-white/70 dark:border-gray-800 bg-white dark:bg-gray-900 px-3 py-2"
+                >
+                  <div>
+                    <div class="text-sm font-medium text-gray-900 dark:text-white">{{ invoice.vendor?.name }}</div>
+                    <div class="text-xs text-gray-500">Ref: {{ invoice.reference || '-' }} | Offen {{ displayCurrency(getInvoiceSum(invoice, true)) }}</div>
+                    <div class="mt-1 flex flex-wrap gap-1" v-if="invoice.suggestionAmountLabel || invoice.suggestionPurposeMatches?.length">
+                      <UBadge v-if="invoice.suggestionAmountLabel" size="xs" color="emerald" variant="subtle">
+                        {{ invoice.suggestionAmountLabel }}
+                      </UBadge>
+                      <UBadge v-for="match in invoice.suggestionPurposeMatches" :key="`invoice-match-${invoice.id}-${match}`" size="xs" color="amber" variant="subtle">
+                        VWZ: {{ match }}
+                      </UBadge>
+                    </div>
+                  </div>
+                  <UButton
+                      size="xs"
+                      color="error"
+                      @click="saveAllocation({incominginvoice: invoice.id, bankstatement: itemInfo.id, amount: Number(Math.abs(getInvoiceSum(invoice,true)) > Math.abs(manualAllocationSum) ? manualAllocationSum : getInvoiceSum(invoice,true)), description: allocationDescription || 'Automatischer Vorschlag'})"
+                  >
+                    Beleg zuweisen
+                  </UButton>
+                  <UButton
+                      size="xs"
+                      color="gray"
+                      variant="ghost"
+                      @click="dismissSuggestion(itemInfo.id, invoice.suggestionKey)"
+                  >
+                    Ablehnen
+                  </UButton>
+                </div>
+              </div>
+            </div>
+
             <div v-if="filteredDocuments.length > 0">
               <h3 class="text-xs font-bold text-gray-500 uppercase mb-2 pl-1 flex items-center gap-2">
                 <UIcon name="i-heroicons-document-arrow-up"/>
@@ -545,7 +867,7 @@ setup()
                           v-if="!itemInfo.statementallocations.find(i => i.incominginvoice === item.id)"
                           icon="i-heroicons-check"
                           size="sm"
-                          color="rose"
+                          color="error"
                           variant="soft"
                           @click="saveAllocation({incominginvoice: item.id, bankstatement: itemInfo.id, amount: Number(Math.abs(getInvoiceSum(item,true)) > Math.abs(manualAllocationSum) ? manualAllocationSum : getInvoiceSum(item,true)), description: allocationDescription})"
                       />
@@ -598,4 +920,4 @@ setup()
 .dark ::-webkit-scrollbar-thumb {
   background: #475569;
 }
-</style>
+</style>

frontend/pages/createDocument/edit/[[id]].vue

@@ -1,9 +1,9 @@
 <script setup>
 import dayjs from "dayjs"
-import Handlebars from "handlebars"
 import { v4 as uuidv4 } from 'uuid';
 import {useFunctions} from "~/composables/useFunctions.js";
 import EntityModalButtons from "~/components/EntityModalButtons.vue";
+import { documentTemplateHandlebars } from "~/utils/handlebars";
 
 const dataStore = useDataStore()
 const profileStore = useProfileStore()
@@ -1098,8 +1098,8 @@ const getDocumentData = async () => {
   })
 
   //Compile Start & EndText
-  const templateStartText = Handlebars.compile(itemInfo.value.startText);
-  const templateEndText = Handlebars.compile(itemInfo.value.endText);
+  const templateStartText = documentTemplateHandlebars.compile(itemInfo.value.startText);
+  const templateEndText = documentTemplateHandlebars.compile(itemInfo.value.endText);
 
   const generateContext = (itemInfo, contactData) => {
     return {
@@ -1283,7 +1283,9 @@ const generateDocument = async () => {
 }
 
 const onChangeTab = (index) => {
-  if (index === 1) {
+  selectedTab.value = String(index)
+
+  if (String(index) === "1") {
     generateDocument()
   }
 }
@@ -1441,13 +1443,13 @@ const saveDocument = async (state, resetup = false) => {
   if (resetup) await setupPage()
 }
 
-const selectedTab = ref(0)
+const selectedTab = ref("0")
 
 const closeDocument = async () => {
 
-  if(selectedTab.value === 0) {
+  if(selectedTab.value === "0") {
     await generateDocument()
-    selectedTab.value = 1
+    selectedTab.value = "1"
   } else {
     loaded.value = false
 
@@ -1609,7 +1611,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
     </template>
     <template #right>
       <ArchiveButton
-          color="rose"
+          color="error"
           type="createddocuments"
           v-if="itemInfo.state === 'Entwurf' || itemInfo.type === 'serialInvoices'"
           variant="outline"
@@ -1628,7 +1630,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
           @click="closeDocument"
           v-if="itemInfo.id && itemInfo.type !== 'serialInvoices'"
       >
-        {{selectedTab === 0 ? "Vorschau zeigen" : "Fertigstellen"}}
+        {{selectedTab === '0' ? "Vorschau zeigen" : "Fertigstellen"}}
       </UButton>
       <UButton
           icon="i-mdi-content-save"
@@ -1640,13 +1642,13 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
     </template>
   </UDashboardNavbar>
   <UDashboardPanelContent>
-    <UTabs class="p-5" :items="tabItems" @change="onChangeTab" v-if="loaded" v-model="selectedTab">
-      <template #item="{item}">
+    <UTabs class="p-5" :items="tabItems" @update:model-value="onChangeTab" v-if="loaded" v-model="selectedTab">
+      <template #content="{item}">
         <div v-if="item.label === 'Editor'">
           <UAlert
               class="my-5"
               title="Vorhandene Probleme und Informationen:"
-              :color="findDocumentErrors.filter(i => i.type === 'breaking').length > 0 ? 'rose' : 'white'"
+              :color="findDocumentErrors.filter(i => i.type === 'breaking').length > 0 ? 'error' : 'white'"
               variant="outline"
               v-if="findDocumentErrors.length > 0"
           >
@@ -1664,7 +1666,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
 
           <InputGroup>
             <div class="w-1/3 mr-5">
-              <UFormGroup
+              <UFormField
                   label="Dokumenttyp:"
               >
                 <InputGroup>
@@ -1689,14 +1691,15 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                 </InputGroup>
 
                 <USlideover
-                    v-model="showAdvanceInvoiceCalcModal"
+                    v-model:open="showAdvanceInvoiceCalcModal"
                 >
-                  <UCard class="h-full">
-                    <template #header>
-                      <UButton @click="importPositions">Übernehmen</UButton>
-                    </template>
+                  <template #body>
+                    <UCard class="h-full">
+                      <template #header>
+                        <UButton @click="importPositions">Übernehmen</UButton>
+                      </template>
 
-                    <UFormGroup
+                    <UFormField
                         label="Gesamtsumme:"
                     >
                       <UInput
@@ -1705,8 +1708,8 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                           v-model="advanceInvoiceData.totalSumNet"
                           @focusout="advanceInvoiceData.part = advanceInvoiceData.totalSumNet / 100 * advanceInvoiceData.partPerPecentage"
                       />
-                    </UFormGroup>
-                    <UFormGroup
+                    </UFormField>
+                    <UFormField
                         label="Prozent:"
                     >
                       <UInput
@@ -1715,27 +1718,26 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                           v-model="advanceInvoiceData.partPerPecentage"
                           @focusout="advanceInvoiceData.part = advanceInvoiceData.totalSumNet / 100 * advanceInvoiceData.partPerPecentage"
                       />
-                    </UFormGroup>
+                    </UFormField>
 
-                    <UFormGroup
-                        label="Abzurechnender Anteil:"
-                    >
-                      <UInput
-                          type="number"
-                          :step="0.01"
-                          v-model="advanceInvoiceData.part"
-                          @focusout="advanceInvoiceData.partPerPecentage = Number((advanceInvoiceData.part / advanceInvoiceData.totalSumNet * 100).toFixed(2))"
-                      />
-                    </UFormGroup>
-
-
-                  </UCard>
+                      <UFormField
+                          label="Abzurechnender Anteil:"
+                      >
+                        <UInput
+                            type="number"
+                            :step="0.01"
+                            v-model="advanceInvoiceData.part"
+                            @focusout="advanceInvoiceData.partPerPecentage = Number((advanceInvoiceData.part / advanceInvoiceData.totalSumNet * 100).toFixed(2))"
+                        />
+                      </UFormField>
+                    </UCard>
+                  </template>
 
                 </USlideover>
 
-              </UFormGroup>
+              </UFormField>
 
-              <UFormGroup
+              <UFormField
                   label="Steuertyp:"
                   v-if="['invoices','advanceInvoices','quotes','confirmationOrders','serialInvoices'].includes(itemInfo.type)"
               >
@@ -1747,9 +1749,9 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                     @change="setTaxType"
                     class="w-full"
                 ></USelectMenu>
-              </UFormGroup>
+              </UFormField>
 
-              <UFormGroup
+              <UFormField
                   label="Briefpapier:"
               >
                 <USelectMenu
@@ -1761,15 +1763,15 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                     searchable-placeholder="Suche..."
                     :search-attributes="['name']"
                     class="w-full"
-                    :color="itemInfo.letterhead ? 'primary' : 'rose'"
+                    :color="itemInfo.letterhead ? 'primary' : 'error'"
                 >
                   <template #label>
                     {{ itemInfo.letterhead ? letterheads.find(i => i.id === itemInfo.letterhead).name : "Kein Briefpapier gewählt" }}
                   </template>
                 </USelectMenu>
-              </UFormGroup>
+              </UFormField>
 
-              <UFormGroup
+              <UFormField
                   label="Kunde:"
               >
                 <div class="flex flex-row">
@@ -1788,7 +1790,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                       {{ option.name }}{{ option.nameAddition }}
                     </template>
                     <UButton
-                        :color="itemInfo.customer ? 'primary' : 'rose'"
+                        :color="itemInfo.customer ? 'primary' : 'error'"
                         variant="outline"
                         class="w-full"
                     >
@@ -1860,8 +1862,8 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
 
                 </UAlert>
 
-              </UFormGroup>
-              <UFormGroup
+              </UFormField>
+              <UFormField
                   label="Ansprechpartner:"
                   v-if="itemInfo.customer ? customers.find(i => i.id === itemInfo.customer).isCompany : false "
               >
@@ -1902,7 +1904,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                                     >Kontakt</UButton>-->
                   <UButton
                       variant="outline"
-                      color="rose"
+                      color="error"
                       v-if="itemInfo.contact"
                       icon="i-heroicons-x-mark"
                       @click="itemInfo.contact = null"
@@ -1915,15 +1917,15 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                   />
                 </InputGroup>
 
-              </UFormGroup>
+              </UFormField>
 
-              <UFormGroup
+              <UFormField
                   label="Adresse:"
               >
                 <UInput
                     v-model="itemInfo.address.street"
                     :placeholder="itemInfo.customer ? customers.find(i => i.id === itemInfo.customer).infoData.street : 'Straße + Hausnummer'"
-                    :color="itemInfo.address.street ? 'primary' : 'rose'"
+                    :color="itemInfo.address.street ? 'primary' : 'error'"
                 />
                 <UInput
                     v-model="itemInfo.address.special"
@@ -1940,19 +1942,19 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                       @input="sanitizeAddressZipInput"
                       @change="checkAddressZip"
                       :placeholder="itemInfo.customer ? customers.find(i => i.id === itemInfo.customer).infoData.zip : 'PLZ'"
-                      :color="itemInfo.address.zip ? 'primary' : 'rose'"
+                      :color="itemInfo.address.zip ? 'primary' : 'error'"
                   />
                   <UInput
                       class="flex-auto"
                       v-model="itemInfo.address.city"
                       :placeholder="itemInfo.customer ? customers.find(i => i.id === itemInfo.customer).infoData.city : 'Ort'"
-                      :color="itemInfo.address.city ? 'primary' : 'rose'"
+                      :color="itemInfo.address.city ? 'primary' : 'error'"
                   />
                 </InputGroup>
-              </UFormGroup>
+              </UFormField>
             </div>
             <div class="w-2/3">
-              <UFormGroup
+              <UFormField
                   :label="itemInfo.documentNumberTitle + ':'"
                   v-if="itemInfo.type !== 'serialInvoices'"
               >
@@ -1961,10 +1963,10 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                     placeholder="XXXX"
                     disabled
                 />
-              </UFormGroup>
+              </UFormField>
 
               <InputGroup class="w-full">
-                <UFormGroup
+                <UFormField
                     class="w-80 mr-1"
                     label="Lieferdatumsart:"
                     v-if="itemInfo.type !== 'serialInvoices'"
@@ -1975,8 +1977,8 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                   />
 
 
-                </UFormGroup>
-                <UFormGroup
+                </UFormField>
+                <UFormField
                     :label="`${itemInfo.deliveryDateType}${['Lieferzeitraum', 'Leistungszeitraum'].includes(itemInfo.deliveryDateType) ? ' Start' : ''}:`"
                     v-if="itemInfo.type !== 'serialInvoices' && itemInfo.deliveryDateType !== 'Kein Lieferdatum anzeigen'"
                     class="mr-1"
@@ -1994,8 +1996,8 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                     </template>
                   </UPopover>
 
-                </UFormGroup>
-                <UFormGroup
+                </UFormField>
+                <UFormField
                     :label="itemInfo.deliveryDateType + ' Ende:'"
                     v-if="itemInfo.type !== 'serialInvoices' && ['Lieferzeitraum','Leistungszeitraum'].includes(itemInfo.deliveryDateType)"
                 >
@@ -2012,11 +2014,11 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                       <LazyDatePicker v-model="itemInfo.deliveryDateEnd" @close="close"/>
                     </template>
                   </UPopover>
-                </UFormGroup>
+                </UFormField>
               </InputGroup>
 
               <InputGroup class="w-full">
-                <UFormGroup
+                <UFormField
                     label="Belegdatum:"
                     class="mr-1"
                     v-if="itemInfo.type !== 'serialInvoices'"
@@ -2032,10 +2034,10 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                       <LazyDatePicker v-model="itemInfo.documentDate" @close="close"/>
                     </template>
                   </UPopover>
-                </UFormGroup>
+                </UFormField>
 
 
-                <UFormGroup
+                <UFormField
                     class="w-full"
                     label="Zahlungsziel in Tagen:"
                 >
@@ -2043,8 +2045,8 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                       type="number"
                       v-model="itemInfo.paymentDays"
                   />
-                </UFormGroup>
-                <UFormGroup
+                </UFormField>
+                <UFormField
                     class="w-full"
                     label="Zahlungsart:"
                 >
@@ -2066,8 +2068,8 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                       {{itemInfo.payment_type === 'transfer' ? "Überweisung" : "SEPA-Lastschrift"}}
                     </template>
                   </USelectMenu>
-                </UFormGroup>
-                <UFormGroup
+                </UFormField>
+                <UFormField
                     class="w-full"
                     label="Individueller Aufschlag:"
                 >
@@ -2081,9 +2083,9 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                       <span class="text-gray-500 dark:text-gray-400 text-xs">%</span>
                     </template>
                   </UInput>
-                </UFormGroup>
+                </UFormField>
               </InputGroup>
-              <UFormGroup
+              <UFormField
                   label="Mitarbeiter:"
               >
                 <USelectMenu
@@ -2093,22 +2095,22 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                     value-attribute="id"
                     @change="setContactPersonData"
                 />
-              </UFormGroup>
-              <UFormGroup
+              </UFormField>
+              <UFormField
                   label="Kontakt Telefon:"
               >
                 <UInput
                     v-model="itemInfo.contactTel"
                 />
-              </UFormGroup>
-              <UFormGroup
+              </UFormField>
+              <UFormField
                   label="Kontakt E-Mail:"
               >
                 <UInput
                     v-model="itemInfo.contactEMail"
                 />
-              </UFormGroup>
-              <UFormGroup
+              </UFormField>
+              <UFormField
                   label="Objekt:"
               >
                 <InputGroup>
@@ -2132,7 +2134,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                   </USelectMenu>
                   <UButton
                       variant="outline"
-                      color="rose"
+                      color="error"
                       v-if="itemInfo.plant"
                       icon="i-heroicons-x-mark"
                       @click="itemInfo.plant = null"
@@ -2145,8 +2147,8 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                   />
                 </InputGroup>
 
-              </UFormGroup>
-              <UFormGroup
+              </UFormField>
+              <UFormField
                   label="Projekt:"
               >
                 <InputGroup>
@@ -2171,7 +2173,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                   </USelectMenu>
                   <UButton
                       variant="outline"
-                      color="rose"
+                      color="error"
                       v-if="itemInfo.project"
                       icon="i-heroicons-x-mark"
                       @click="itemInfo.project = null"
@@ -2184,8 +2186,8 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                   />
                 </InputGroup>
 
-              </UFormGroup>
-              <UFormGroup
+              </UFormField>
+              <UFormField
                   label="Vertrag:"
               >
                 <InputGroup>
@@ -2210,7 +2212,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                   </USelectMenu>
                   <UButton
                       variant="outline"
-                      color="rose"
+                      color="error"
                       v-if="itemInfo.contract"
                       icon="i-heroicons-x-mark"
                       @click="itemInfo.contract = null"
@@ -2223,19 +2225,19 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                   />
                 </InputGroup>
 
-              </UFormGroup>
+              </UFormField>
 
             </div>
           </InputGroup>
 
           <div v-if="itemInfo.type === 'serialInvoices'" class="mb-5">
-            <UDivider class="mt-5 mb-3">
+            <USeparator class="mt-5 mb-3">
               Einstellungen für die Serienrechnung
-            </UDivider>
+            </USeparator>
 
             <div class="flex flex-row">
               <div class="w-1/3">
-                <UFormGroup
+                <UFormField
                     label="Datum erste Ausführung:"
                 >
                   <UPopover :popper="{ placement: 'bottom-start' }">
@@ -2249,8 +2251,8 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                       <LazyDatePicker v-model="itemInfo.serialConfig.firstExecution" @close="close"/>
                     </template>
                   </UPopover>
-                </UFormGroup>
-                <UFormGroup
+                </UFormField>
+                <UFormField
                     label="Datum letzte Ausführung:"
                 >
                   <UPopover :popper="{ placement: 'bottom-start' }">
@@ -2264,7 +2266,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                       <LazyDatePicker v-model="itemInfo.serialConfig.executionUntil" @close="close"/>
                     </template>
                   </UPopover>
-                </UFormGroup>
+                </UFormField>
                 <UCheckbox
                     v-model="itemInfo.serialConfig.active"
                     label="Aktiv"
@@ -2273,22 +2275,22 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
 
               </div>
               <div class="w-2/3">
-                <UFormGroup
+                <UFormField
                     label="Intervall:"
                 >
                   <USelectMenu
                       v-model="itemInfo.serialConfig.intervall"
                       :options="['wöchentlich','2 - wöchentlich', 'monatlich', 'vierteljährlich','halbjährlich', 'jährlich']"
                   />
-                </UFormGroup>
-                <UFormGroup
+                </UFormField>
+                <UFormField
                     label="Richtung:"
                 >
                   <USelectMenu
                       v-model="itemInfo.serialConfig.dateDirection"
                       :options="['Rückwirkend','Im Voraus']"
                   />
-                </UFormGroup>
+                </UFormField>
                 <UAlert
                     title="Anfangs- und Enddatum"
                     description="Für das Anfangs- und Enddatum werden jeweils der ersten und letzte Tag des ausgewählten Intervalls und der Richtung automatisch ausgewählt"
@@ -2301,27 +2303,27 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
 
           </div>
 
-          <UDivider
+          <USeparator
               class="my-3"
           />
 
-          <UFormGroup
+          <UFormField
               label="Titel:"
           >
             <UInput v-model="itemInfo.title" disabled/>
-          </UFormGroup>
-          <UFormGroup
+          </UFormField>
+          <UFormField
               label="Beschreibung:"
               class="mt-3"
           >
             <UInput v-model="itemInfo.description"/>
-          </UFormGroup>
+          </UFormField>
 
-          <UDivider
+          <USeparator
               class="my-3"
           />
 
-          <UFormGroup
+          <UFormField
               label="Vorlage auswählen"
           >
             <USelectMenu
@@ -2337,20 +2339,20 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                 {{ texttemplates.find(i => i.text === itemInfo.startText && (itemInfo.type === "serialInvoices" ? i.documentType === "invoices" : i.documentType === itemInfo.type)) ? texttemplates.find(i => i.text === itemInfo.startText && (itemInfo.type === "serialInvoices" ? i.documentType === "invoices" : i.documentType === itemInfo.type)).name : "Keine Vorlage ausgewählt oder Vorlage verändert" }}
               </template>
             </USelectMenu>
-          </UFormGroup>
+          </UFormField>
 
 
-          <UFormGroup
+          <UFormField
               label="Einleitung:"
           >
             <UTextarea
                 v-model="itemInfo.startText"
                 :rows="6"
             />
-          </UFormGroup>
+          </UFormField>
 
 
-          <UDivider
+          <USeparator
               class="my-3"
           />
 
@@ -2389,7 +2391,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                       v-if="row.mode === 'pagebreak'"
                       colspan="7"
                   >
-                    <UDivider/>
+                    <USeparator/>
                   </td>
                   <td
                       v-if="row.mode === 'text'"
@@ -2429,7 +2431,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                           :disabled="itemInfo.type === 'cancellationInvoices'"
                           class="w-60"
                           :options="products"
-                          :color="row.product ? 'primary' : 'rose'"
+                          :color="row.product ? 'primary' : 'error'"
                           option-attribute="name"
                           value-attribute="id"
                           searchable
@@ -2453,14 +2455,14 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                                                 icon="i-heroicons-magnifying-glass"
                                                 @click="showProductSelectionModal = true"
                                             />
-                                            <UModal v-model="showProductSelectionModal">
+                                            <UModal v-model:open="showProductSelectionModal">
                                               <UCard>
                                                 <template #header>
                                                   Artikel Auswählen
                                                 </template>
 
                                                 <InputGroup class="w-full">
-                                                  <UFormGroup label="Artikelkategorie:">
+                                                  <UFormField label="Artikelkategorie:">
                                                     <USelectMenu
                                                         v-if="productcategories.length > 0"
                                                         :options="[{name: 'Nicht zugeordnet',id:'not set'},...productcategories]"
@@ -2468,15 +2470,15 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                                                         option-attribute="name"
                                                         v-model="selectedProductcategorie"
                                                     />
-                                                  </UFormGroup>
+                                                  </UFormField>
                                                 </InputGroup>
                                                 <UTable
                                                     :rows="selectedProductcategorie !== 'not set' ? products.filter(i => i.productcategories.includes(selectedProductcategorie)) : products.filter(i => i.productcategories.length === 0)"
-                                                    :columns="[
+                                                    :columns="normalizeTableColumns([
                                                         {key: 'name',label:'Name'},
                                                         {key: 'manufacturer',label:'Hersteller'},
                                                         {key: 'articleNumber',label:'Artikelnummer'},
-                                                    ]"
+                                                    ])"
                                                     :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Artikel anzuzeigen' }"
                                                     @select=" (i) => {
                                                      row.product = i.id
@@ -2501,7 +2503,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                           :disabled="itemInfo.type === 'cancellationInvoices'"
                           class="w-60"
                           :options="services"
-                          :color="row.service ? 'primary' : 'rose'"
+                          :color="row.service ? 'primary' : 'error'"
                           option-attribute="name"
                           value-attribute="id"
                           searchable
@@ -2525,14 +2527,14 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                                                 icon="i-heroicons-magnifying-glass"
                                                 @click="showServiceSelectionModal = true"
                                             />
-                                            <UModal v-model="showServiceSelectionModal">
+                                            <UModal v-model:open="showServiceSelectionModal">
                                               <UCard>
                                                 <template #header>
                                                   Leistung Auswählen
                                                 </template>
 
                                                 <InputGroup class="w-full">
-                                                  <UFormGroup label="Leistungskategorie:">
+                                                  <UFormField label="Leistungskategorie:">
                                                     <USelectMenu
                                                         v-if="servicecategories.length > 0"
                                                         :options="[{name: 'Nicht zugeordnet',id:'not set'},...servicecategories]"
@@ -2540,15 +2542,15 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                                                         option-attribute="name"
                                                         v-model="selectedServicecategorie"
                                                     />
-                                                  </UFormGroup>
+                                                  </UFormField>
                                                 </InputGroup>
                                                 <UTable
                                                     :rows="selectedServicecategorie !== 'not set' ? services.filter(i => i.servicecategories.includes(selectedServicecategorie)) : services.filter(i => i.servicecategories.length === 0)"
-                                                    :columns="[
+                                                    :columns="normalizeTableColumns([
                                                           {key: 'name',label:'Name'},
                                                           {key: 'serviceNumber',label:'Leistungsnummer'},
                                                           {key: 'sellingPrice',label:'Verkaufspreis'},
-                                                      ]"
+                                                    ])"
                                                     :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Leistungen anzuzeigen' }"
                                                     @select=" (i) => {
                                                        row.service = i.id
@@ -2670,8 +2672,9 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                         v-if="row.agriculture"
                         @click="row.showEditDiesel = true"
                     />
-                    <UModal v-model="row.showEdit">
-                      <UCard>
+                    <UModal v-model:open="row.showEdit">
+                      <template #content>
+                        <UCard>
                         <!--                        <template #header>
                                                   Zeile bearbeiten
                                                 </template>-->
@@ -2685,7 +2688,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                           </div>
                         </template>
                         <InputGroup>
-                          <UFormGroup
+                          <UFormField
                               label="Anzahl:"
                               class="flex-auto"
                           >
@@ -2695,8 +2698,8 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                                 :step="units.find(i => i.id === row.unit) ? units.find(i => i.id === row.unit).step : '1' "
 
                             />
-                          </UFormGroup>
-                          <UFormGroup
+                          </UFormField>
+                          <UFormField
                               label="Einheit:"
                               class="flex-auto"
                           >
@@ -2711,10 +2714,10 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                                 {{ units.find(i => i.id === row.unit) ? units.find(i => i.id === row.unit).name : "Keine Einheit gewählt" }}
                               </template>
                             </USelectMenu>
-                          </UFormGroup>
+                          </UFormField>
                         </InputGroup>
 
-                        <UFormGroup
+                        <UFormField
                             label="Einzelpreis:"
                             v-if="itemInfo.type !== 'deliveryNotes'"
                         >
@@ -2743,8 +2746,8 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                                   class="text-gray-500 dark:text-gray-400 text-xs"> </span>
                             </template>
                           </UInput>
-                        </UFormGroup>
-                        <UFormGroup
+                        </UFormField>
+                        <UFormField
                             label="Umsatzsteuer:"
                             class="mt-3"
                             v-if="itemInfo.type !== 'deliveryNotes'"
@@ -2761,9 +2764,9 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                               {{ row.taxPercent }} %
                             </template>
                           </USelectMenu>
-                        </UFormGroup>
+                        </UFormField>
 
-                        <UFormGroup
+                        <UFormField
                             label="Rabatt:"
                             class="mt-3"
                             v-if="itemInfo.type !== 'deliveryNotes'"
@@ -2778,25 +2781,25 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                               <span class="text-gray-500 dark:text-gray-400 text-xs">%</span>
                             </template>
                           </UInput>
-                        </UFormGroup>
+                        </UFormField>
                         <InputGroup class="w-full mt-3">
-                          <UFormGroup
+                          <UFormField
                               label="Optional:"
                           >
-                            <UToggle
+                            <USwitch
                                 :disabled="row.alternative"
                                 v-model="row.optional"
                             />
-                          </UFormGroup>
-                          <UFormGroup
+                          </UFormField>
+                          <UFormField
                               class="ml-3"
                               label="Alternativ:"
                           >
-                            <UToggle
+                            <USwitch
                                 :disabled="row.optional"
                                 v-model="row.alternative"
                             />
-                          </UFormGroup>
+                          </UFormField>
                         </InputGroup>
 
                         <UAlert
@@ -2819,7 +2822,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                           </li>
                         </ul>
 
-                        <UFormGroup
+                        <UFormField
                             label="Beschreibung:"
                             class="mt-3"
                         >
@@ -2829,7 +2832,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                           >
 
                           </UTextarea>
-                        </UFormGroup>
+                        </UFormField>
 
                         <!--                        <template #footer>
                                                   <UButton
@@ -2838,16 +2841,16 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                                                     Speichern
                                                   </UButton>
                                                 </template>-->
-                      </UCard>
-
-
+                        </UCard>
+                      </template>
                     </UModal>
-                    <UModal v-model="row.showEditDiesel">
-                      <UCard>
-                        <template #header>
-                          Dieselverbrauch bearbeiten
-                        </template>
-                        <UFormGroup
+                    <UModal v-model:open="row.showEditDiesel">
+                      <template #content>
+                        <UCard>
+                          <template #header>
+                            Dieselverbrauch bearbeiten
+                          </template>
+                        <UFormField
                             label="Menge Diesel:"
                         >
                           <UInput
@@ -2861,8 +2864,8 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                               L
                             </template>
                           </UInput>
-                        </UFormGroup>
-                        <UFormGroup
+                        </UFormField>
+                        <UFormField
                             label="Preis Diesel:"
                         >
                           <UInput
@@ -2875,8 +2878,8 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                               €/L
                             </template>
                           </UInput>
-                        </UFormGroup>
-                        <UFormGroup
+                        </UFormField>
+                        <UFormField
                             label="Menge AdBlue:"
                         >
                           <UInput
@@ -2888,8 +2891,8 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                               L
                             </template>
                           </UInput>
-                        </UFormGroup>
-                        <UFormGroup
+                        </UFormField>
+                        <UFormField
                             label="Preis AdBlue:"
                         >
                           <UInput
@@ -2901,18 +2904,17 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                               €/L
                             </template>
                           </UInput>
-                        </UFormGroup>
-                        <template #footer>
-                          <UButton
-                              @click="row.showEditDiesel = false,
-                                      processDieselPosition()"
-                          >
-                            Speichern
-                          </UButton>
-                        </template>
-                      </UCard>
-
-
+                        </UFormField>
+                          <template #footer>
+                            <UButton
+                                @click="row.showEditDiesel = false,
+                                        processDieselPosition()"
+                            >
+                              Speichern
+                            </UButton>
+                          </template>
+                        </UCard>
+                      </template>
                     </UModal>
                   </td>
                   <td
@@ -2942,7 +2944,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                     <UButton
                         :disabled="itemInfo.type === 'cancellationInvoices'"
                         variant="ghost"
-                        color="rose"
+                        color="error"
                         icon="i-heroicons-x-mark-16-solid"
                         @click="removePosition(row.id)"
                     />
@@ -2954,7 +2956,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
           <UAlert
               v-else
               title="Keine Positionen hinzugefügt"
-              color="rose"
+              color="error"
               variant="outline"
               icon="i-heroicons-light-bulb"
           ></UAlert>
@@ -3004,12 +3006,12 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
             </UButton>
           </InputGroup>
 
-          <!--          <UDivider
+          <!--          <USeparator
                         class="mt-5 mb-3"
                         v-if="openAdvanceInvoices.length > 0 || itemInfo.usedAdvanceInvoices.length > 0"
                     >
                       Noch nicht abgerechnete Abschlagsrechnungen
-                    </UDivider>
+                    </USeparator>
 
                     <div
                         v-for="advanceInvoice in openAdvanceInvoices"
@@ -3029,7 +3031,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                         <UButton
                           @click="itemInfo.usedAdvanceInvoices = itemInfo.usedAdvanceInvoices.filter(i => i !== advanceInvoice.id)"
                           :disabled="!itemInfo.usedAdvanceInvoices.includes(advanceInvoice.id)"
-                          color="rose"
+                          color="error"
                           variant="outline"
                         >
                           X
@@ -3037,7 +3039,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                       </InputGroup>
                     </div>-->
 
-          <UDivider class="my-3" v-if="Object.keys(documentTotal.titleSums).length > 0">Überschriften</UDivider>
+          <USeparator class="my-3" v-if="Object.keys(documentTotal.titleSums).length > 0" label="Überschriften"/>
 
           <table>
             <tr v-for="sumKey in Object.keys(documentTotal.titleSums) ">
@@ -3046,7 +3048,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
             </tr>
           </table>
 
-          <UDivider class="my-3" v-if="itemInfo.rows.length > 0">Auswertung & Gesamt</UDivider>
+          <USeparator class="my-3" v-if="itemInfo.rows.length > 0" label="Auswertung & Gesamt"/>
 
 
           <div class="w-full flex justify-between" v-if="itemInfo.type !== 'deliveryNotes'">
@@ -3112,9 +3114,9 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
             </table>
           </div>
 
-          <!--          <UDivider
+          <!--          <USeparator
                         class="my-3"
-                    >Auswertung</UDivider>
+                    >Auswertung</USeparator>
 
                     <div class="w-full flex justify-end">
                       <table class="w-1/3">
@@ -3151,11 +3153,11 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
 
 
 
-          <UDivider
+          <USeparator
               class="my-3"
           />
 
-          <UFormGroup
+          <UFormField
               label="Vorlage auswählen"
           >
             <USelectMenu
@@ -3171,16 +3173,16 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                 {{texttemplates.find(i => i.text === itemInfo.endText && (itemInfo.type === "serialInvoices" ? i.documentType === "invoices" : i.documentType === itemInfo.type)) ? texttemplates.find(i => i.text === itemInfo.endText && (itemInfo.type === "serialInvoices" ? i.documentType === "invoices" : i.documentType === itemInfo.type)).name : "Keine Vorlage ausgewählt oder Vorlage verändert"}}
               </template>
             </USelectMenu>
-          </UFormGroup>
+          </UFormField>
 
-          <UFormGroup
+          <UFormField
               label="Nachbemerkung:"
           >
             <UTextarea
                 v-model="itemInfo.endText"
                 :rows="6"
             />
-          </UFormGroup>
+          </UFormField>
         </div>
         <div v-else-if="item.label === 'Vorschau'">
           <PDFViewer

frontend/pages/createDocument/index.vue

@@ -16,7 +16,7 @@
       </UInput>
       <UButton
           v-if="searchString.length > 0"
-          color="rose"
+          color="error"
           icon="i-heroicons-x-mark"
           variant="outline"
           @click="clearSearchString()"
@@ -55,82 +55,82 @@
         {{ getRowsForTab(item.key).length }}
       </UBadge>
     </template>
-    <template #item="{item}">
+    <template #content="{item}">
       <div style="height: 80vh; overflow-y: scroll">
         <UTable
-            :columns="getColumnsForTab(item.key)"
-            :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
-            :rows="getRowsForTab(item.key)"
+            :columns="normalizeTableColumns(getColumnsForTab(item.key))"
+            :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
+            :data="getRowsForTab(item.key)"
             :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
             class="w-full"
-            @select="selectItem"
+            :on-select="selectItem"
         >
-          <template #type-data="{row}">
-            <span v-if="row.type === 'cancellationInvoices'" class="text-cyan-500">{{
-                dataStore.documentTypesForCreation[row.type].labelSingle
-              }} für {{ filteredRows.find(i => row.createddocument?.id === i.id)?.documentNumber }}</span>
-            <span v-else>{{ dataStore.documentTypesForCreation[row.type].labelSingle }}</span>
+          <template #type-cell="{row}">
+            <span v-if="row.original.type === 'cancellationInvoices'" class="text-cyan-500">{{
+                dataStore.documentTypesForCreation[row.original.type].labelSingle
+              }} für {{ filteredRows.find(i => row.original.createddocument?.id === i.id)?.documentNumber }}</span>
+            <span v-else>{{ dataStore.documentTypesForCreation[row.original.type].labelSingle }}</span>
           </template>
 
-          <template #state-data="{row}">
-            <span v-if="row.state === 'Entwurf'" class="text-rose-500">{{ row.state }}</span>
+          <template #state-cell="{row}">
+            <span v-if="row.original.state === 'Entwurf'" class="text-rose-500">{{ row.original.state }}</span>
             <span
-                v-if="row.state === 'Gebucht' && !items.find(i => i.createddocument && i.createddocument.id === row.id)"
+                v-if="row.original.state === 'Gebucht' && !hasCancellationInvoice(row.original)"
                 class="text-primary-500"
             >
-              {{ row.state }}
+              {{ row.original.state }}
             </span>
             <span
-                v-else-if="row.state === 'Gebucht' && items.find(i => i.createddocument && i.createddocument.id === row.id && i.type === 'cancellationInvoices') && ['invoices','advanceInvoices'].includes(row.type)"
+                v-else-if="row.original.state === 'Gebucht' && hasCancellationInvoice(row.original) && ['invoices','advanceInvoices'].includes(row.original.type)"
                 class="text-cyan-500"
             >
-              Storniert mit {{ items.find(i => i.createddocument && i.createddocument.id === row.id).documentNumber }}
+              Storniert mit {{ getCancellationInvoice(row.original)?.documentNumber }}
             </span>
-            <span v-else-if="row.state === 'Gebucht'" class="text-primary-500">{{ row.state }}</span>
+            <span v-else-if="row.original.state === 'Gebucht'" class="text-primary-500">{{ row.original.state }}</span>
           </template>
 
-          <template #partner-data="{row}">
-            <span v-if="row.customer && row.customer.name.length < 21">{{ row.customer ? row.customer.name : "" }}</span>
-            <UTooltip v-else-if="row.customer && row.customer.name.length > 20" :text="row.customer.name">
-              {{ row.customer.name.substring(0, 20) }}...
+          <template #partner-cell="{row}">
+            <span v-if="row.original.customer && row.original.customer.name.length < 21">{{ row.original.customer ? row.original.customer.name : "" }}</span>
+            <UTooltip v-else-if="row.original.customer && row.original.customer.name.length > 20" :text="row.original.customer.name">
+              {{ row.original.customer.name.substring(0, 20) }}...
             </UTooltip>
           </template>
 
-          <template #reference-data="{row}">
-            <span v-if="row === filteredRows[selectedItem]" class="text-primary-500 font-bold">{{ row.documentNumber }}</span>
-            <span v-else>{{ row.documentNumber }}</span>
+          <template #reference-cell="{row}">
+            <span v-if="row.original === filteredRows[selectedItem]" class="text-primary-500 font-bold">{{ row.original.documentNumber }}</span>
+            <span v-else>{{ row.original.documentNumber }}</span>
           </template>
 
-          <template #date-data="{row}">
-            <span v-if="row.date">{{ row.date ? dayjs(row.date).format("DD.MM.YY") : '' }}</span>
-            <span v-if="row.documentDate">{{ row.documentDate ? dayjs(row.documentDate).format("DD.MM.YY") : '' }}</span>
+          <template #date-cell="{row}">
+            <span v-if="row.original.date">{{ row.original.date ? dayjs(row.original.date).format("DD.MM.YY") : '' }}</span>
+            <span v-if="row.original.documentDate">{{ row.original.documentDate ? dayjs(row.original.documentDate).format("DD.MM.YY") : '' }}</span>
           </template>
 
-          <template #dueDate-data="{row}">
+          <template #dueDate-cell="{row}">
              <span
-                 v-if="row.state === 'Gebucht' && row.paymentDays && ['invoices','advanceInvoices'].includes(row.type) && !items.find(i => i.linkedDocument && i.linkedDocument.id === row.id)"
-                 :class="dayjs(row.documentDate).add(row.paymentDays,'day').diff(dayjs()) <= 0 && !isPaid(row) ? ['text-rose-500'] : '' "
+                 v-if="row.original.state === 'Gebucht' && row.original.paymentDays && ['invoices','advanceInvoices'].includes(row.original.type) && !hasCancellationInvoice(row.original)"
+                 :class="dayjs(row.original.documentDate).add(row.original.paymentDays,'day').diff(dayjs()) <= 0 && !isPaid(row.original) ? ['text-rose-500'] : '' "
              >
-               {{ row.documentDate ? dayjs(row.documentDate).add(row.paymentDays, 'day').format("DD.MM.YY") : '' }}
+               {{ row.original.documentDate ? dayjs(row.original.documentDate).add(row.original.paymentDays, 'day').format("DD.MM.YY") : '' }}
              </span>
           </template>
 
-          <template #paid-data="{row}">
+          <template #paid-cell="{row}">
             <div
-                v-if="(row.type === 'invoices' ||row.type === 'advanceInvoices') && row.state === 'Gebucht' && !items.find(i => i.linkedDocument && i.linkedDocument.id === row.id)">
-              <span v-if="useSum().getIsPaid(row,items)" class="text-primary-500">Bezahlt</span>
+                v-if="(row.original.type === 'invoices' ||row.original.type === 'advanceInvoices') && row.original.state === 'Gebucht' && !hasCancellationInvoice(row.original)">
+              <span v-if="useSum().getIsPaid(row.original,items)" class="text-primary-500">Bezahlt</span>
               <span v-else class="text-rose-600">Offen</span>
             </div>
           </template>
 
-          <template #amount-data="{row}">
-            <span v-if="row.type !== 'deliveryNotes'">{{ displayCurrency(useSum().getCreatedDocumentSum(row, items)) }}</span>
+          <template #amount-cell="{row}">
+            <span v-if="row.original.type !== 'deliveryNotes'">{{ displayCurrency(useSum().getCreatedDocumentSum(row.original, items)) }}</span>
           </template>
 
-          <template #amountOpen-data="{row}">
+          <template #amountOpen-cell="{row}">
             <span
-                v-if="!['deliveryNotes','cancellationInvoices','quotes','confirmationOrders'].includes(row.type) && row.state !== 'Entwurf' && !useSum().getIsPaid(row,items) && !items.find(i => i.linkedDocument && i.linkedDocument.id === row.id) ">
-              {{ displayCurrency(useSum().getCreatedDocumentSum(row, items) - row.statementallocations.reduce((n, {amount}) => n + amount, 0)) }}
+                v-if="!['deliveryNotes','cancellationInvoices','quotes','confirmationOrders'].includes(row.original.type) && row.original.state !== 'Entwurf' && !hasCancellationInvoice(row.original) && !useSum().getIsPaid(row.original,items) ">
+              {{ displayCurrency(useSum().getCreatedDocumentOpenAmount(row.original, items)) }}
             </span>
           </template>
         </UTable>
@@ -264,13 +264,22 @@ const clearSearchString = () => {
   debouncedSearchString.value = ''
 }
 
+const getCancellationInvoice = (row) => {
+  return items.value.find((item) => {
+    const linkedDocumentId = item.createddocument?.id || item.createddocument
+    return item.type === 'cancellationInvoices'
+        && item.state !== 'Entwurf'
+        && !item.archived
+        && linkedDocumentId === row.id
+  })
+}
+
+const hasCancellationInvoice = (row) => Boolean(getCancellationInvoice(row))
+
 const openUnpaidInvoicesFilter = {
   name: 'Nur offene Rechnungen',
   filterFunction: (row) => {
-    return ['invoices', 'advanceInvoices'].includes(row.type)
-        && row.state === 'Gebucht'
-        && !useSum().getIsPaid(row, items.value)
-        && !items.value.find(i => i.linkedDocument && i.linkedDocument.id === row.id)
+    return useSum().isOpenCreatedDocument(row, items.value)
   }
 }
 
@@ -319,8 +328,6 @@ const getRowsForTab = (tabKey) => {
 }
 
 const isPaid = (item) => {
-  let amountPaid = 0
-  item.statementallocations.forEach(allocation => amountPaid += allocation.amount)
-  return Number(amountPaid.toFixed(2)) === useSum().getCreatedDocumentSum(item, items.value)
+  return useSum().getIsPaid(item, items.value)
 }
 </script>

frontend/pages/createDocument/serialInvoice.vue

@@ -44,15 +44,15 @@
       <USelectMenu
           v-model="selectedFilters"
           icon="i-heroicons-adjustments-horizontal-solid"
-          :options="filterOptions"
-          option-attribute="name"
-          value-attribute="name"
+          :items="filterOptions"
+          label-key="name"
+          value-key="name"
           multiple
           class="hidden lg:block"
           :color="selectedFilters.length > 0 ? 'primary' : 'white'"
-          :ui-menu="{ width: 'min-w-max' }"
+          :content="{ width: 'min-w-max' }"
       >
-        <template #label>
+        <template #default>
           Filter
         </template>
       </USelectMenu>
@@ -93,16 +93,16 @@
   </div>
 
   <UTable
-      :rows="filteredRows"
-      :columns="columns"
+      :data="filteredRows"
+      :columns="normalizeTableColumns(columns)"
       class="w-full"
       :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
-      @select="(row) => router.push(`/createDocument/edit/${row.id}`)"
-      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
+      :on-select="(row) => router.push(`/createDocument/edit/${row.id}`)"
+      :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
   >
-    <template #actions-data="{ row }">
+    <template #actions-cell="{ row }">
       <div @click.stop>
-        <UDropdown :items="getActionItems(row)" :popper="{ placement: 'bottom-end' }">
+        <UDropdown :items="getActionItems(row.original)" :popper="{ placement: 'bottom-end' }">
           <UButton
               color="gray"
               variant="ghost"
@@ -112,50 +112,54 @@
       </div>
     </template>
 
-    <template #type-data="{row}">
-      {{dataStore.documentTypesForCreation[row.type].labelSingle}}
+    <template #type-cell="{row}">
+      {{dataStore.documentTypesForCreation[row.original.type].labelSingle}}
     </template>
-    <template #partner-data="{row}">
-      <span v-if="row.customer">{{row.customer ? row.customer.name : ""}}</span>
+    <template #partner-cell="{row}">
+      <span v-if="row.original.customer">{{row.original.customer ? row.original.customer.name : ""}}</span>
 
     </template>
-    <template #amount-data="{row}">
-      {{displayCurrency(calculateDocSum(row))}}
+    <template #amount-cell="{row}">
+      {{displayCurrency(calculateDocSum(row.original))}}
     </template>
-    <template #serialConfig.active-data="{row}">
-      <span v-if="row.serialConfig.active" class="text-primary">Ja</span>
+    <template #serialConfig.active-cell="{row}">
+      <span v-if="row.original.serialConfig.active" class="text-primary">Ja</span>
       <span v-else class="text-rose-600">Nein</span>
     </template>
-    <template #contract-data="{row}">
-      <span v-if="row.contract">{{row.contract.contractNumber}} - {{row.contract.name}}</span>
+    <template #contract-cell="{row}">
+      <span v-if="row.original.contract">{{row.original.contract.contractNumber}} - {{row.original.contract.name}}</span>
     </template>
-    <template #serialConfig.intervall-data="{row}">
-      <span v-if="row.serialConfig?.intervall === 'monatlich'">Monatlich</span>
-      <span v-if="row.serialConfig?.intervall === 'vierteljährlich'">Quartalsweise</span>
+    <template #serialConfig.intervall-cell="{row}">
+      <span v-if="row.original.serialConfig?.intervall === 'monatlich'">Monatlich</span>
+      <span v-if="row.original.serialConfig?.intervall === 'vierteljährlich'">Quartalsweise</span>
     </template>
-    <template #payment_type-data="{row}">
-      <span v-if="row.payment_type === 'transfer'">Überweisung</span>
-      <span v-else-if="row.payment_type === 'direct-debit'">SEPA - Einzug</span>
+    <template #payment_type-cell="{row}">
+      <span v-if="row.original.payment_type === 'transfer'">Überweisung</span>
+      <span v-else-if="row.original.payment_type === 'direct-debit'">SEPA - Einzug</span>
     </template>
   </UTable>
 
-  <UModal v-model="showExecutionModal" :ui="{ width: 'sm:max-w-4xl' }">
-    <UCard>
-      <template #header>
-        <div class="flex items-center justify-between">
-          <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
-            Serienrechnungen manuell ausführen
-          </h3>
-          <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="showExecutionModal = false" />
-        </div>
-      </template>
+  <UModal v-model:open="showExecutionModal" :ui="{ width: 'sm:max-w-4xl' }">
+    <template #content>
+      <UCard>
+        <template #header>
+          <div class="flex items-center justify-between">
+            <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+              Serienrechnungen manuell ausführen
+            </h3>
+            <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="showExecutionModal = false" />
+          </div>
+        </template>
 
       <div class="space-y-4">
-        <UFormGroup label="Ausführungsdatum (Belegdatum)" help="Dieses Datum steuert auch den Leistungszeitraum (z.B. Vormonat bei 'Rückwirkend').">
-          <UInput type="date" v-model="executionDate" />
-        </UFormGroup>
+        <UFormField label="Ausführungsdatum (Belegdatum)" help="Dieses Datum steuert auch den Leistungszeitraum (z.B. Vormonat bei 'Rückwirkend').">
+          <div class="flex items-center gap-2">
+            <UInput type="date" v-model="executionDate" class="flex-1" />
+            <UButton color="gray" variant="soft" label="Heute" @click="setExecutionDateToToday" />
+          </div>
+        </UFormField>
 
-        <UDivider label="Vorlagen auswählen" />
+        <USeparator label="Vorlagen auswählen" />
 
         <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
           <div class="flex flex-col sm:flex-row gap-2 w-full sm:w-auto">
@@ -169,9 +173,9 @@
 
             <USelectMenu
                 v-model="selectedExecutionIntervall"
-                :options="executionIntervallOptions"
-                option-attribute="label"
-                value-attribute="value"
+                :items="executionIntervallOptions"
+                label-key="label"
+                value-key="value"
                 size="sm"
                 class="w-full sm:w-52"
             />
@@ -201,24 +205,24 @@
         <div class="max-h-96 overflow-y-auto border border-gray-200 dark:border-gray-800 rounded-md">
           <UTable
               v-model="selectedExecutionRows"
-              :rows="filteredExecutionList"
-              :columns="executionColumns"
+              :data="filteredExecutionList"
+              :columns="normalizeTableColumns(executionColumns)"
               :ui="{ th: { base: 'whitespace-nowrap' } }"
           >
-            <template #partner-data="{row}">
-              {{row.customer ? row.customer.name : "-"}}
+            <template #partner-cell="{row}">
+              {{row.original.customer ? row.original.customer.name : "-"}}
             </template>
-            <template #amount-data="{row}">
-              {{displayCurrency(calculateDocSum(row))}}
+            <template #amount-cell="{row}">
+              {{displayCurrency(calculateDocSum(row.original))}}
             </template>
-            <template #serialConfig.intervall-data="{row}">
-              {{ getIntervallLabel(row.serialConfig?.intervall) }}
+            <template #serialConfig.intervall-cell="{row}">
+              {{ getIntervallLabel(row.original.serialConfig?.intervall) }}
             </template>
-            <template #contract-data="{row}">
-              {{row.contract?.contractNumber}} - {{row.contract?.name}}
+            <template #contract-cell="{row}">
+              {{row.original.contract?.contractNumber}} - {{row.original.contract?.name}}
             </template>
-            <template #plant-data="{row}">
-              {{ row.plant?.name || "-" }}
+            <template #plant-cell="{row}">
+              {{ row.original.plant?.name || "-" }}
             </template>
           </UTable>
         </div>
@@ -228,58 +232,61 @@
         </div>
       </div>
 
-      <template #footer>
-        <div class="flex justify-end gap-2">
-          <UButton color="white" @click="showExecutionModal = false">Abbrechen</UButton>
-          <UButton
-              color="primary"
-              :loading="isExecuting"
-              :disabled="selectedExecutionRows.length === 0"
-              @click="executeSerialInvoices"
-          >
-            Jetzt ausführen
-          </UButton>
-        </div>
-      </template>
-    </UCard>
+        <template #footer>
+          <div class="flex justify-end gap-2">
+            <UButton color="white" @click="showExecutionModal = false">Abbrechen</UButton>
+            <UButton
+                color="primary"
+                :loading="isExecuting"
+                :disabled="selectedExecutionRows.length === 0"
+                @click="executeSerialInvoices"
+            >
+              Jetzt ausführen
+            </UButton>
+          </div>
+        </template>
+      </UCard>
+    </template>
   </UModal>
 
-  <USlideover v-model="showExecutionsSlideover" :ui="{ width: 'w-screen max-w-md' }">
-    <UCard class="flex flex-col flex-1" :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
-      <template #header>
-        <div class="flex items-center justify-between">
-          <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
-            Alle Ausführungen
-          </h3>
-          <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="showExecutionsSlideover = false" />
-        </div>
-      </template>
-
-      <div class="space-y-4 overflow-y-auto h-full p-1">
-        <div v-if="executionsLoading" class="flex justify-center py-4">
-          <UIcon name="i-heroicons-arrow-path" class="animate-spin text-gray-400 w-6 h-6" />
-        </div>
-
-        <div v-else-if="completedExecutions.length === 0" class="text-center text-gray-500 py-8">
-          Keine abgeschlossenen Ausführungen gefunden.
-        </div>
-
-        <div v-for="exec in completedExecutions" :key="exec.id" class="border border-gray-200 dark:border-gray-700 rounded-lg p-3">
-          <div class="flex justify-between items-start mb-2">
-            <span class="text-sm font-semibold">{{ dayjs(exec.createdAt).format('DD.MM.YYYY HH:mm') }}</span>
-            <UBadge :color="getStatusColor(exec.status)" variant="subtle" size="xs">
-              {{ getStatusLabel(exec.status) }}
-            </UBadge>
+  <USlideover v-model:open="showExecutionsSlideover" :ui="{ width: 'w-screen max-w-md' }">
+    <template #body>
+      <UCard class="flex flex-col flex-1" :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+        <template #header>
+          <div class="flex items-center justify-between">
+            <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+              Alle Ausführungen
+            </h3>
+            <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="showExecutionsSlideover = false" />
           </div>
-          <div class="text-xs text-gray-500 grid grid-cols-2 gap-2 mt-2">
-            <div>
-              <UIcon name="i-heroicons-check-circle" class="text-green-500 w-3 h-3 align-text-bottom" />
-              {{exec.summary}}
+        </template>
+
+        <div class="space-y-4 overflow-y-auto h-full p-1">
+          <div v-if="executionsLoading" class="flex justify-center py-4">
+            <UIcon name="i-heroicons-arrow-path" class="animate-spin text-gray-400 w-6 h-6" />
+          </div>
+
+          <div v-else-if="completedExecutions.length === 0" class="text-center text-gray-500 py-8">
+            Keine abgeschlossenen Ausführungen gefunden.
+          </div>
+
+          <div v-for="exec in completedExecutions" :key="exec.id" class="border border-gray-200 dark:border-gray-700 rounded-lg p-3">
+            <div class="flex justify-between items-start mb-2">
+              <span class="text-sm font-semibold">{{ dayjs(exec.createdAt).format('DD.MM.YYYY HH:mm') }}</span>
+              <UBadge :color="getStatusColor(exec.status)" variant="subtle" size="xs">
+                {{ getStatusLabel(exec.status) }}
+              </UBadge>
+            </div>
+            <div class="text-xs text-gray-500 grid grid-cols-2 gap-2 mt-2">
+              <div>
+                <UIcon name="i-heroicons-check-circle" class="text-green-500 w-3 h-3 align-text-bottom" />
+                {{exec.summary}}
+              </div>
             </div>
           </div>
         </div>
-      </div>
-    </UCard>
+      </UCard>
+    </template>
   </USlideover>
 
 </template>
@@ -303,6 +310,10 @@ const isExecuting = ref(false)
 const modalSearch = ref("") // NEU: Suchstring für das Modal
 const selectedExecutionIntervall = ref("all")
 
+const setExecutionDateToToday = () => {
+  executionDate.value = dayjs().format('YYYY-MM-DD')
+}
+
 // --- SerialExecutions State ---
 const showExecutionsSlideover = ref(false)
 const executionItems = ref([])

frontend/pages/createDocument/show/[id].vue

@@ -94,7 +94,7 @@ const openBankstatements = () => {
         <UButton
             @click="router.push(`/createDocument/edit/?createddocument=${itemInfo.id}&loadMode=storno`)"
             variant="outline"
-            color="rose"
+            color="error"
             :disabled="links.find(i => i.type === 'cancellationInvoices')"
         >
           Stornieren

frontend/pages/createdletters/[mode]/[[id]].vue

@@ -13,6 +13,7 @@ const itemInfo = ref({
 })
 const showDocument = ref(false)
 const uri = ref("")
+const openTab = ref("0")
 
 const setupPage = async () => {
   letterheads.value = await useEntities("letterheads").select("*")
@@ -23,7 +24,9 @@ const setupPage = async () => {
 setupPage()
 
 const onChangeTab = (index) => {
-  if(index === 1) {
+  openTab.value = String(index)
+
+  if(String(index) === "1") {
     generateDocument()
   }
 }
@@ -78,8 +81,8 @@ const contentChanged = (content) => {
   <UDashboardNavbar title="Anschreiben bearbeiten"/>
   {{itemInfo}}
   <UDashboardPanelContent>
-    <UTabs @change="onChangeTab" :items="[{label: 'Editor'},{label: 'Vorschau'}]">
-      <template #item="{item}">
+    <UTabs v-model="openTab" @update:model-value="onChangeTab" :items="[{label: 'Editor'},{label: 'Vorschau'}]">
+      <template #content="{item}">
         <div v-if="item.label === 'Editor'">
           <Tiptap
               class="mt-3"

frontend/pages/email/new.vue

@@ -162,7 +162,7 @@ const sendEmail = async () => {
 
 
   if(!res.success) {
-    toast.add({title: "Fehler beim Absenden der E-Mail", color: "rose"})
+    toast.add({title: "Fehler beim Absenden der E-Mail", color: "error"})
 
   } else {
     navigateTo("/")
@@ -210,34 +210,34 @@ const sendEmail = async () => {
 
       <div class="scrollContainer mt-3">
         <div class="flex-col flex w-full">
-          <UFormGroup
+          <UFormField
               label="Absender"
           >
             <USelectMenu
-                :options="emailAccounts"
-                option-attribute="email"
-                value-attribute="id"
+                :items="emailAccounts"
+                label-key="email"
+                value-key="id"
                 v-model="emailData.account"
             />
-          </UFormGroup>
-          <UDivider class="my-3"/>
-          <UFormGroup
+          </UFormField>
+          <USeparator class="my-3"/>
+          <UFormField
               label="Empfänger"
           >
             <UInput
                 class="w-full my-1"
                 v-model="emailData.to"
             />
-          </UFormGroup>
-          <UFormGroup
+          </UFormField>
+          <UFormField
               label="Kopie"
           >
             <UInput
                 class="w-full my-1"
                 v-model="emailData.cc"
             />
-          </UFormGroup>
-          <UFormGroup
+          </UFormField>
+          <UFormField
               label="Blindkopie"
           >
             <UInput
@@ -245,17 +245,17 @@ const sendEmail = async () => {
                 placeholder=""
                 v-model="emailData.bcc"
             />
-          </UFormGroup>
-          <UFormGroup
+          </UFormField>
+          <UFormField
               label="Betreff"
           >
             <UInput
                 class="w-full my-1"
                 v-model="emailData.subject"
             />
-          </UFormGroup>
+          </UFormField>
         </div>
-        <UDivider class="my-3"/>
+        <USeparator class="my-3"/>
         <div id="parentAttachments" class="flex flex-col justify-center mt-3">
           <span class="font-medium mb-2 text-xl">Anhänge</span>
           <!--        <UIcon

frontend/pages/export/create/sepa.vue

@@ -39,7 +39,7 @@ const createExport = async () => {
       :loading="true"
       v-model="selected"
       :loading-state="{ icon: 'i-heroicons-arrow-path-20-solid', label: 'Loading...' }"
-      :rows="createddocuments" />
+      :data="createddocuments" />
 </template>
 
 <style scoped>

frontend/pages/export/index.vue

@@ -89,7 +89,7 @@ const createExport = async () => {
   if(res.success) {
     toast.add({title: "Export wird erstellt. Sie erhalten eine Benachrichtigung sobald es soweit ist."})
   } else {
-    toast.add({title: "Es gab einen Fehler beim erstellen", color: "rose"})
+    toast.add({title: "Es gab einen Fehler beim erstellen", color: "error"})
   }
 
 }
@@ -110,38 +110,39 @@ const createExport = async () => {
   </UDashboardNavbar>
 
   <UTable
-      :rows="filteredExports"
-      :columns="[
+      :data="filteredExports"
+      :columns="normalizeTableColumns([
         { key: 'created_at', label: 'Erstellt am' },
         { key: 'start_date', label: 'Start' },
         { key: 'end_date', label: 'Ende' },
         { key: 'valid_until', label: 'Gültig bis' },
         { key: 'type', label: 'Typ' },
         { key: 'download', label: 'Download' },
-    ]"
+      ])"
   >
-    <template #created_at-data="{row}">
-      {{dayjs(row.created_at).format("DD.MM.YYYY HH:mm")}}
+    <template #created_at-cell="{row}">
+      {{dayjs(row.original.created_at).format("DD.MM.YYYY HH:mm")}}
     </template>
-    <template #start_date-data="{row}">
-      {{dayjs(row.start_date).format("DD.MM.YYYY HH:mm")}}
+    <template #start_date-cell="{row}">
+      {{dayjs(row.original.start_date).format("DD.MM.YYYY HH:mm")}}
     </template>
-    <template #end_date-data="{row}">
-      {{dayjs(row.end_date).format("DD.MM.YYYY HH:mm")}}
+    <template #end_date-cell="{row}">
+      {{dayjs(row.original.end_date).format("DD.MM.YYYY HH:mm")}}
     </template>
-    <template #valid_until-data="{row}">
-      {{dayjs(row.valid_until).format("DD.MM.YYYY HH:mm")}}
+    <template #valid_until-cell="{row}">
+      {{dayjs(row.original.valid_until).format("DD.MM.YYYY HH:mm")}}
     </template>
-    <template #download-data="{row}">
-      <UButton @click="downloadFile(row)">Download</UButton>
+    <template #download-cell="{row}">
+      <UButton @click="downloadFile(row.original)">Download</UButton>
     </template>
   </UTable>
 
-  <UModal v-model="showCreateExportModal">
-    <UCard>
-      <template #header>
-        Export erstellen
-      </template>
+  <UModal v-model:open="showCreateExportModal">
+    <template #content>
+      <UCard>
+        <template #header>
+          Export erstellen
+        </template>
 
       <div class="mb-6 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700">
         <div class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Schnellauswahl</div>
@@ -180,7 +181,7 @@ const createExport = async () => {
         </div>
       </div>
       <div class="flex gap-4">
-        <UFormGroup label="Start:" class="flex-1">
+        <UFormField label="Start:" class="flex-1">
           <UPopover :popper="{ placement: 'bottom-start' }">
             <UButton
                 icon="i-heroicons-calendar-days-20-solid"
@@ -192,9 +193,9 @@ const createExport = async () => {
               <LazyDatePicker v-model="createExportData.start_date" @close="close" />
             </template>
           </UPopover>
-        </UFormGroup>
+        </UFormField>
 
-        <UFormGroup label="Ende:" class="flex-1">
+        <UFormField label="Ende:" class="flex-1">
           <UPopover :popper="{ placement: 'bottom-start' }">
             <UButton
                 icon="i-heroicons-calendar-days-20-solid"
@@ -206,21 +207,22 @@ const createExport = async () => {
               <LazyDatePicker v-model="createExportData.end_date" @close="close" />
             </template>
           </UPopover>
-        </UFormGroup>
+        </UFormField>
       </div>
 
-      <template #footer>
-        <div class="flex justify-end">
-          <UButton @click="createExport">
-            Erstellen
-          </UButton>
-        </div>
-      </template>
+        <template #footer>
+          <div class="flex justify-end">
+            <UButton @click="createExport">
+              Erstellen
+            </UButton>
+          </div>
+        </template>
 
-    </UCard>
+      </UCard>
+    </template>
   </UModal>
 
 </template>
 
 <style scoped>
-</style>
+</style>

frontend/pages/files/index.vue

@@ -350,8 +350,8 @@ const syncdokubox = async () => {
       <UBreadcrumb :links="breadcrumbLinks"/>
     </template>
     <template #right>
-      <USelectMenu v-model="displayMode" :options="displayModes" value-attribute="key" class="w-32" :ui-menu="{ zIndex: 'z-50' }">
-        <template #label>
+      <USelectMenu v-model="displayMode" :items="displayModes" value-key="key" class="w-32" :content="{ zIndex: 'z-50' }">
+        <template #default>
           <UIcon :name="displayModes.find(i => i.key === displayMode).icon" class="w-4 h-4"/>
           <span>{{ displayModes.find(i => i.key === displayMode).label }}</span>
         </template>
@@ -371,9 +371,9 @@ const syncdokubox = async () => {
       <UProgress animation="carousel" class="w-1/2"/>
     </div>
 
-    <div v-else>
-      <div v-if="displayMode === 'list'">
-        <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-800">
+      <div v-else>
+        <div v-if="displayMode === 'list'">
+          <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-800">
           <thead class="bg-gray-50 dark:bg-gray-800 sticky top-0 z-20">
           <tr>
             <th class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold sm:pl-6">Name</th>
@@ -412,6 +412,11 @@ const syncdokubox = async () => {
               </UDropdown>
             </td>
           </tr>
+          <tr v-if="renderedFileList.length === 0">
+            <td colspan="3" class="px-6 py-16 text-center text-sm text-gray-500">
+              Keine Dateien oder Ordner vorhanden.
+            </td>
+          </tr>
           </tbody>
         </table>
       </div>
@@ -438,34 +443,41 @@ const syncdokubox = async () => {
           />
           <span class="text-xs font-medium text-center truncate w-full">{{ entry.label }}</span>
         </div>
+        <div
+            v-if="renderedFileList.length === 0"
+            class="col-span-full rounded-xl border border-dashed border-gray-300 dark:border-gray-700 px-6 py-16 text-center text-sm text-gray-500"
+        >
+          Keine Dateien oder Ordner vorhanden.
+        </div>
       </div>
     </div>
   </UDashboardPanelContent>
 
-  <UModal v-model="createFolderModalOpen">
-    <UCard>
-      <template #header><h3 class="font-bold">Ordner erstellen</h3></template>
+  <UModal v-model:open="createFolderModalOpen">
+    <template #content>
+      <UCard>
+        <template #header><h3 class="font-bold">Ordner erstellen</h3></template>
 
       <div class="space-y-4">
-        <UFormGroup label="Name" required>
+        <UFormField label="Name" required>
           <UInput v-model="createFolderData.name" autofocus @keyup.enter="createFolder"/>
-        </UFormGroup>
+        </UFormField>
 
-        <UFormGroup
+        <UFormField
             label="Standard Dateityp (Tag)"
             :help="isParentTypeMandatory ? 'Vom übergeordneten Ordner vorgegeben' : ''"
         >
           <USelectMenu
               v-model="createFolderData.standardFiletype"
-              :options="filetags"
-              value-attribute="id"
-              option-attribute="name"
+              :items="filetags"
+              value-key="id"
+              label-key="name"
               placeholder="Kein Standardtyp"
               searchable
               clear-search-on-close
               :disabled="isParentTypeMandatory"
           />
-        </UFormGroup>
+        </UFormField>
 
         <UCheckbox
             v-model="createFolderData.standardFiletypeIsOptional"
@@ -474,27 +486,30 @@ const syncdokubox = async () => {
         />
       </div>
 
-      <template #footer>
-        <div class="flex justify-end gap-2">
-          <UButton color="gray" @click="createFolderModalOpen = false">Abbrechen</UButton>
-          <UButton color="primary" @click="createFolder">Erstellen</UButton>
-        </div>
-      </template>
-    </UCard>
+        <template #footer>
+          <div class="flex justify-end gap-2">
+            <UButton color="gray" @click="createFolderModalOpen = false">Abbrechen</UButton>
+            <UButton color="primary" @click="createFolder">Erstellen</UButton>
+          </div>
+        </template>
+      </UCard>
+    </template>
   </UModal>
 
-  <UModal v-model="renameModalOpen">
-    <UCard>
-      <template #header><h3 class="font-bold">Umbenennen</h3></template>
-      <UFormGroup label="Neuer Name">
-        <UInput v-model="renameData.name" autofocus @keyup.enter="updateName"/>
-      </UFormGroup>
-      <template #footer>
-        <div class="flex justify-end gap-2">
-          <UButton color="gray" @click="renameModalOpen = false">Abbrechen</UButton>
-          <UButton color="primary" @click="updateName">Speichern</UButton>
-        </div>
-      </template>
-    </UCard>
+  <UModal v-model:open="renameModalOpen">
+    <template #content>
+      <UCard>
+        <template #header><h3 class="font-bold">Umbenennen</h3></template>
+        <UFormField label="Neuer Name">
+          <UInput v-model="renameData.name" autofocus @keyup.enter="updateName"/>
+        </UFormField>
+        <template #footer>
+          <div class="flex justify-end gap-2">
+            <UButton color="gray" @click="renameModalOpen = false">Abbrechen</UButton>
+            <UButton color="primary" @click="updateName">Speichern</UButton>
+          </div>
+        </template>
+      </UCard>
+    </template>
   </UModal>
-</template>
+</template>