Projekte im Ticket als eine Liste (Paket E)

- Im Details-Reiter steht eine Projektliste mit Zuweisen, Lösen und
  "Neues Projekt"; der Knopf "Projekte zuweisen / bearbeiten", der
  Dialog und die zweite Projektliste sind weg.
- Zuweisen bietet nur passende Projekte an: gleicher Kunde oder ohne
  Kunde, nicht archiviert, keine Vorlage.
- Lösen nimmt ein Projekt nur noch vom Ticket. Bisher wurde dabei auch
  die Kundenzuordnung gelöscht und der Kunde sah seine Vorschau im
  Portal nicht mehr.
- Projektkarten ohne README-Vorschau (kostete je Karte einen Abruf) und
  ohne nie befüllte Felder (Live-Domain, Commit-Box, "Preview: aktiv");
  react-markdown entfällt damit (Lockfile mit Node 20 erzeugt).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

.env.development

@@ -0,0 +1,5 @@
+# Öffentliche Vite-Variablen für lokale Entwicklung (in Git, kein Secret)
+VITE_APPWRITE_ENDPOINT=http://localhost:5173/v1
+VITE_APPWRITE_PROJECT_ID=6a1058610003c5a13a05
+VITE_APPWRITE_DATABASE_ID=woms-database
+VITE_APPWRITE_BUCKET_ID=woms-attachments

.env.example

@@ -0,0 +1,14 @@
+# Kopieren nach .env.local (wird nicht von Git versioniert):
+#   cp .env.example .env.local
+#
+# Lokal mit Vite-Proxy (empfohlen � Session-Cookies wie auf dem Server):
+VITE_APPWRITE_ENDPOINT=http://localhost:5173/v1
+VITE_APPWRITE_PROJECT_ID=6a1058610003c5a13a05
+VITE_APPWRITE_DATABASE_ID=woms-database
+VITE_APPWRITE_BUCKET_ID=woms-attachments
+
+# Optional: Proxy-Ziel (Standard: https://appwrite.webklar.com)
+# VITE_APPWRITE_PROXY_TARGET=https://appwrite.webklar.com
+
+# Produktion / Build (ohne Vite-Proxy):
+# VITE_APPWRITE_ENDPOINT=https://ticket.webklar.com/v1

.env.production

@@ -0,0 +1,5 @@
+# Öffentliche Vite-Variablen für Production-Build (in Git, kein Secret)
+VITE_APPWRITE_ENDPOINT=https://ticket.webklar.com/v1
+VITE_APPWRITE_PROJECT_ID=6a1058610003c5a13a05
+VITE_APPWRITE_DATABASE_ID=woms-database
+VITE_APPWRITE_BUCKET_ID=woms-attachments

.gitignore

@@ -1,10 +1,10 @@
 # Dependencies
 node_modules/
 
-# Environment variables
+# Environment variables (persönliche Overrides — nicht committen)
 .env
 .env.local
-.env.production
+.env.*.local
 
 # Build output
 dist/

.webklar-preview.json

@@ -0,0 +1,9 @@
+{
+  "enabled": false,
+  "type": "static",
+  "branch": "test",
+  "displayName": "tickte-system",
+  "templateName": "webklar-preview-template",
+  "projectType": "project",
+  "public": false
+}

ADMIN_PANEL_SETUP.md

@@ -1,116 +0,0 @@
-# Admin-Panel Setup
-
-Das Admin-Panel wurde erfolgreich erstellt! Hier ist die Anleitung zur Einrichtung.
-
-## Was wurde erstellt:
-
-1. **Admin-Panel Seite** (`/admin`) - Verwaltung der Dropdown-Optionen
-2. **useAdminConfig Hook** - Lädt und speichert die Konfiguration
-3. **Navigation erweitert** - Admin-Link erscheint für Admin-Benutzer
-4. **CreateTicketModal angepasst** - Verwendet jetzt die konfigurierten Werte
-
-## Schritt 1: Config Collection in Appwrite erstellen
-
-1. Gehe zu `https://appwrite.webklar.com`
-2. Öffne dein Projekt **woms**
-3. Gehe zu **Databases** → **woms-database**
-4. Klicke auf **Create Collection**
-5. **Collection ID**: `config`
-6. **Name**: `Admin Configuration`
-
-### Attribute hinzufügen:
-
-| Attribut Name | Typ | Größe | Required | Array |
-|--------------|-----|-------|----------|-------|
-| `ticketTypes` | string | - | - | ✓ |
-| `systems` | string | - | - | ✓ |
-| `responseLevels` | string | - | - | ✓ |
-| `serviceTypes` | string | - | - | ✓ |
-| `priorities` | string | - | - | ✓ |
-
-**Wichtig:** Alle Attribute müssen als **Array** konfiguriert sein!
-
-### Berechtigungen:
-
-- **Read**: `Any` (damit alle Benutzer die Optionen sehen können)
-- **Create**: `Users` (nur eingeloggte Benutzer können erstellen)
-- **Update**: `Users` (nur eingeloggte Benutzer können aktualisieren)
-- **Delete**: `Users` (optional)
-
-## Schritt 2: Admin-Berechtigung konfigurieren
-
-Aktuell wird ein Benutzer als Admin erkannt, wenn:
-- Die Email `admin` enthält, ODER
-- Die Email `kenso@webklar.com` ist, ODER
-- Der Benutzer ein `admin` Label hat
-
-### Option A: Email-basierte Erkennung (aktuell implementiert)
-
-Die Admin-Erkennung erfolgt in:
-- `src/pages/AdminPage.jsx` (Zeile ~10)
-- `src/components/Navbar.jsx` (Zeile ~29)
-
-Du kannst die Bedingung anpassen:
-
-```javascript
-const isAdmin = user?.email?.includes('admin') || 
-                user?.email === 'deine@email.com' ||
-                user?.labels?.includes('admin')
-```
-
-### Option B: Appwrite Labels verwenden
-
-1. Gehe zu **Auth** → **Users** im Appwrite Dashboard
-2. Wähle einen Benutzer aus
-3. Füge ein **Label** hinzu: `admin`
-4. Die Admin-Erkennung funktioniert dann automatisch
-
-## Schritt 3: Admin-Panel verwenden
-
-1. **Logge dich als Admin ein**
-2. Gehe zu **Admin** in der Navigation (erscheint nur für Admins)
-3. Bearbeite die Dropdown-Optionen:
-   - **Work Order Types** - Ticket-Typen
-   - **Affected Systems** - Betroffene Systeme
-   - **Response Levels** - Response-Ebenen
-   - **Service Types** - Service-Typen
-   - **Priorities** - Prioritäten (mit Value und Label)
-4. Klicke auf **Konfiguration speichern**
-
-## Schritt 4: Testen
-
-1. **Als Admin:**
-   - Öffne das Admin-Panel
-   - Ändere einige Optionen
-   - Speichere die Konfiguration
-
-2. **Als normaler Benutzer:**
-   - Erstelle ein neues Ticket
-   - Die geänderten Optionen sollten jetzt in den Dropdowns erscheinen
-
-## Funktionsweise
-
-- **Admin-Panel**: Lädt die Konfiguration aus Appwrite und erlaubt Bearbeitung
-- **CreateTicketModal**: Lädt die Konfiguration automatisch und verwendet die Werte
-- **Fallback**: Falls die Config nicht geladen werden kann, werden Standard-Werte verwendet
-
-## Troubleshooting
-
-### "Collection config not found"
-- Stelle sicher, dass die Collection `config` erstellt wurde
-- Überprüfe die Collection ID (muss genau `config` sein)
-
-### "Zugriff verweigert"
-- Überprüfe die Admin-Erkennung in `AdminPage.jsx`
-- Stelle sicher, dass deine Email den Admin-Kriterien entspricht
-
-### "Konfiguration wird nicht geladen"
-- Überprüfe die Berechtigungen der `config` Collection
-- Stelle sicher, dass **Read** auf `Any` oder `Users` gesetzt ist
-
-### "Änderungen werden nicht übernommen"
-- Überprüfe die **Update** Berechtigung der `config` Collection
-- Stelle sicher, dass du als Admin eingeloggt bist
-
-Viel Erfolg! 🚀
-

ADMIN_ROLE_SETUP.md

@@ -1,74 +0,0 @@
-# Admin-Rolle in Appwrite einrichten
-
-Die Admin-Erkennung verwendet jetzt die **Labels** aus Appwrite. Ein Benutzer ist Admin, wenn er das Label `admin` hat.
-
-## Schritt 1: Admin-Label in Appwrite hinzufügen
-
-### Option A: Über das Appwrite Dashboard
-
-1. Gehe zu `https://appwrite.webklar.com`
-2. Öffne dein Projekt **woms**
-3. Gehe zu **Auth** → **Users**
-4. Wähle den Benutzer aus, der Admin werden soll
-5. Klicke auf **Edit** oder öffne die Benutzer-Details
-6. Scrolle zu **Labels** (oder **Custom Attributes**)
-7. Klicke auf **Add Label** oder **+**
-8. Gib `admin` ein
-9. Klicke auf **Save** oder **Update**
-
-### Option B: Über die Appwrite API (für mehrere Benutzer)
-
-Du kannst auch Labels programmatisch hinzufügen, aber das ist normalerweise nicht nötig.
-
-## Schritt 2: Überprüfen
-
-Nach dem Hinzufügen des Labels:
-
-1. **Logge dich aus** und wieder **ein** (damit die Session aktualisiert wird)
-2. Oder lade die Seite neu (F5)
-3. Der **Admin**-Link sollte jetzt in der Navigation erscheinen
-4. Du solltest Zugriff auf das Admin-Panel haben
-
-## Schritt 3: Mehrere Admins hinzufügen
-
-Um weitere Admins hinzuzufügen:
-
-1. Wiederhole Schritt 1 für jeden Benutzer
-2. Füge das Label `admin` hinzu
-3. Die Benutzer müssen sich neu einloggen
-
-## Wie es funktioniert
-
-- **AuthContext**: Prüft ob `user.labels` das Label `admin` enthält
-- **Navbar**: Zeigt den Admin-Link nur an, wenn `isAdmin === true`
-- **AdminPage**: Blockiert den Zugriff, wenn der Benutzer kein Admin ist
-
-## Debugging
-
-Falls der Admin-Link nicht erscheint:
-
-1. **Browser-Konsole öffnen** (F12)
-2. Prüfe das User-Objekt:
-   ```javascript
-   // In der Browser-Konsole:
-   console.log(user)
-   // Prüfe ob user.labels das Array ['admin'] enthält
-   ```
-
-3. **Überprüfe in Appwrite:**
-   - Gehe zu **Auth** → **Users**
-   - Öffne deinen Benutzer
-   - Stelle sicher, dass das Label `admin` vorhanden ist
-
-4. **Session aktualisieren:**
-   - Logge dich aus und wieder ein
-   - Oder lade die Seite neu
-
-## Wichtig
-
-- Das Label muss genau `admin` heißen (kleingeschrieben)
-- Der Benutzer muss sich nach dem Hinzufügen des Labels neu einloggen
-- Labels sind case-sensitive
-
-Viel Erfolg! 🚀
-

APPWRITE_INDEXES_PERMISSIONS.md

@@ -1,102 +0,0 @@
-# Indexes und Berechtigungen für workorders Collection
-
-Diese Anleitung zeigt dir, wie du die Indexes und Berechtigungen für deine `workorders` Collection einrichtest.
-
-## Deine Collection-Informationen
-
-- **Collection ID**: `6943bf7d001901baa60c`
-- **Database ID**: `6943bf0e0003291f8c35`
-
-## Schritt 1: Indexes erstellen
-
-Indexes verbessern die Performance beim Filtern und Sortieren. Gehe zu deiner `workorders` Collection im Appwrite Dashboard:
-
-1. Öffne dein Appwrite-Projekt
-2. Gehe zu **Databases** → **woms-database** → **workorders**
-3. Klicke auf den Tab **Indexes**
-4. Klicke auf **Create Index**
-
-Erstelle folgende Indexes:
-
-### Index 1: Status
-- **Key**: `status`
-- **Type**: `key`
-- **Attributes**: `status`
-- **Order**: `ASC` (aufsteigend)
-
-### Index 2: Priority
-- **Key**: `priority`
-- **Type**: `key`
-- **Attributes**: `priority`
-- **Order**: `ASC` (aufsteigend)
-
-### Index 3: Type
-- **Key**: `type`
-- **Type**: `key`
-- **Attributes**: `type`
-- **Order**: `ASC` (aufsteigend)
-
-### Index 4: Customer ID
-- **Key**: `customerId`
-- **Type**: `key`
-- **Attributes**: `customerId`
-- **Order**: `ASC` (aufsteigend)
-
-### Index 5: Assigned To
-- **Key**: `assignedTo`
-- **Type**: `key`
-- **Attributes**: `assignedTo`
-- **Order**: `ASC` (aufsteigend)
-
-### Index 6: Created At
-- **Key**: `createdAt`
-- **Type**: `key`
-- **Attributes**: `createdAt`
-- **Order**: `DESC` (absteigend)
-
-## Schritt 2: Berechtigungen (Permissions) einrichten
-
-1. Bleibe in deiner `workorders` Collection
-2. Klicke auf den Tab **Settings**
-3. Scrolle zu **Permissions**
-
-### Read (Lesen)
-- Klicke auf **Add Role** unter "Read"
-- Wähle **Any** (wenn alle Tickets sichtbar sein sollen) ODER **Users** (wenn nur eingeloggte Benutzer sehen sollen)
-- **Empfehlung**: `Users` für mehr Sicherheit
-
-### Create (Erstellen)
-- Klicke auf **Add Role** unter "Create"
-- Wähle **Users** (nur eingeloggte Benutzer können Tickets erstellen)
-
-### Update (Aktualisieren)
-- Klicke auf **Add Role** unter "Update"
-- Wähle **Users** (nur eingeloggte Benutzer können Tickets aktualisieren)
-
-### Delete (Löschen)
-- Klicke auf **Add Role** unter "Delete"
-- Wähle **Users** (nur eingeloggte Benutzer können Tickets löschen)
-
-## Schritt 3: Überprüfung
-
-Nach dem Einrichten solltest du:
-1. ✅ 6 Indexes in der Collection sehen
-2. ✅ 4 Berechtigungen (Read, Create, Update, Delete) konfiguriert haben
-
-## Wichtig: Authentication aktivieren
-
-Bevor die Berechtigungen funktionieren, musst du Authentication aktivieren:
-
-1. Gehe zu **Auth** im linken Menü
-2. Stelle sicher, dass **Email/Password** aktiviert ist
-3. Falls nicht, klicke auf **Create** und aktiviere **Email/Password**
-
-## Testen
-
-Nach der Einrichtung:
-1. Starte deine App neu: `npm run dev`
-2. Erstelle einen Benutzer oder logge dich ein
-3. Versuche ein Ticket zu erstellen - es sollte funktionieren!
-
-Viel Erfolg! 🚀
-

APPWRITE_PLATFORM_SETUP.md

@@ -1,81 +0,0 @@
-# Appwrite Platform-Konfiguration - WICHTIG!
-
-Der Fehler "Project with the requested ID could not be found" kann auch auftreten, wenn die **Platform nicht konfiguriert** ist!
-
-## Schritt 1: Platform in Appwrite konfigurieren
-
-1. Gehe zu [https://cloud.appwrite.io](https://cloud.appwrite.io)
-2. Öffne dein Projekt **woms**
-3. Gehe zu **Settings** → **Platforms** (oder **Auth** → **Settings**)
-4. Klicke auf **Add Platform**
-5. Wähle **Web App**
-6. Gib einen Namen ein (z.B. "WOMS Web")
-7. **WICHTIG:** Füge die folgenden Hosts hinzu:
-   - `localhost` (für Development)
-   - `127.0.0.1` (für Development)
-   - Deine Produktions-Domain (falls vorhanden)
-
-8. Klicke auf **Create**
-
-## Schritt 2: Email/Password Auth aktivieren
-
-1. Gehe zu **Auth** → **Providers** (oder **Settings** → **Auth**)
-2. Suche nach **Email/Password**
-3. Aktiviere es (grüner Schalter)
-4. Stelle sicher, dass es **aktiviert** ist
-
-## Schritt 3: Project ID nochmal überprüfen
-
-1. Gehe zu **Settings** → **General**
-2. Kopiere die **Project ID** erneut
-3. Vergleiche sie mit deiner `.env` Datei
-
-Die Project ID sollte so aussehen: `693d9f37000b35267f1b`
-
-## Schritt 4: Dev-Server neu starten
-
-```bash
-# Stoppe den Server (Ctrl+C)
-npm run dev
-```
-
-## Schritt 5: Browser-Konsole überprüfen
-
-Nach dem Neustart solltest du in der Browser-Konsole sehen:
-
-```
-🔧 Appwrite Konfiguration:
-Endpoint: https://cloud.appwrite.io/v1
-Project ID: 693d9f37000b35267f1b
-Database ID: 6943bf0e0003291f8c35
-```
-
-## Häufige Probleme
-
-### Problem: "Project with the requested ID could not be found"
-
-**Lösung:**
-1. Überprüfe, ob die Platform konfiguriert ist (siehe Schritt 1)
-2. Überprüfe, ob `localhost` als Host hinzugefügt wurde
-3. Überprüfe die Project ID nochmal im Dashboard
-
-### Problem: "createEmailPasswordSession is not a function"
-
-**Lösung:** 
-- Ich habe den Code bereits aktualisiert zu `createEmailSession`
-- Stelle sicher, dass der Dev-Server neu gestartet wurde
-
-### Problem: "401 Unauthorized" oder "Invalid credentials"
-
-**Lösung:**
-1. Stelle sicher, dass Email/Password Auth aktiviert ist
-2. Erstelle einen Benutzer im Appwrite Dashboard oder über die Registrierung
-
-## Testen
-
-1. Öffne die App: `http://localhost:5173`
-2. Versuche dich zu registrieren oder einzuloggen
-3. Schaue in die Browser-Konsole auf Fehlermeldungen
-
-Viel Erfolg! 🚀
-

APPWRITE_SELF_HOSTED.md

@@ -1,86 +0,0 @@
-# Appwrite Self-Hosted Konfiguration
-
-Deine Appwrite-Instanz läuft auf einer eigenen Domain mit Version 1.5.7.
-
-## Konfiguration
-
-### Endpoint
-- **URL**: `https://appwrite.webklar.com/v1`
-- **Version**: 1.5.7
-
-### .env Datei
-```env
-VITE_APPWRITE_ENDPOINT=https://appwrite.webklar.com/v1
-VITE_APPWRITE_PROJECT_ID=693d9f37000b35267f1b
-VITE_APPWRITE_DATABASE_ID=6943bf0e0003291f8c35
-```
-
-## Wichtige Unterschiede zu Appwrite Cloud
-
-### 1. Platform-Konfiguration
-Bei selbst gehosteten Instanzen muss die Platform möglicherweise anders konfiguriert werden:
-
-1. Gehe zu deinem Appwrite Dashboard: `https://appwrite.webklar.com`
-2. Öffne dein Projekt **woms**
-3. Gehe zu **Settings** → **Platforms**
-4. Füge eine **Web App** Platform hinzu
-5. Wichtig: Füge die folgenden Hosts hinzu:
-   - `localhost`
-   - `127.0.0.1`
-   - Deine Produktions-Domain (falls vorhanden)
-
-### 2. CORS-Einstellungen
-Stelle sicher, dass CORS für deine Domain konfiguriert ist:
-- `http://localhost:5173` (Development)
-- Deine Produktions-Domain
-
-### 3. SSL-Zertifikat
-Stelle sicher, dass `https://appwrite.webklar.com` ein gültiges SSL-Zertifikat hat.
-
-## API-Kompatibilität
-
-Appwrite 1.5.7 sollte mit dem Appwrite SDK 13.0 kompatibel sein. Die verwendeten Methoden:
-- `account.createEmailSession(email, password)` - für Login
-- `account.create(ID.unique(), email, password, name)` - für Registrierung
-- `account.get()` - für Session-Check
-
-## Fehlerbehebung
-
-### "Project with the requested ID could not be found"
-1. Überprüfe, ob die Platform konfiguriert ist (siehe oben)
-2. Überprüfe, ob CORS korrekt konfiguriert ist
-3. Überprüfe die Project ID nochmal im Dashboard
-
-### CORS-Fehler
-Wenn du CORS-Fehler siehst:
-1. Überprüfe die CORS-Einstellungen in deiner Appwrite-Konfiguration
-2. Stelle sicher, dass `localhost:5173` erlaubt ist
-
-### SSL-Zertifikat-Fehler
-Wenn es SSL-Probleme gibt:
-1. Überprüfe, ob das Zertifikat gültig ist
-2. Stelle sicher, dass die Domain korrekt konfiguriert ist
-
-## Dev-Server neu starten
-
-Nach Änderungen an der `.env` Datei:
-
-```bash
-# Stoppe den Server (Ctrl+C)
-npm run dev
-```
-
-## Testen
-
-1. Öffne die App: `http://localhost:5173`
-2. Überprüfe die Browser-Konsole - du solltest sehen:
-   ```
-   🔧 Appwrite Konfiguration:
-   Endpoint: https://appwrite.webklar.com/v1
-   Project ID: 693d9f37000b35267f1b
-   Database ID: 6943bf0e0003291f8c35
-   ```
-3. Versuche dich zu registrieren oder einzuloggen
-
-Viel Erfolg! 🚀
-

APPWRITE_SETUP.md

@@ -1,200 +0,0 @@
-# Appwrite Setup-Anleitung für WOMS 2.0
-
-Diese Anleitung führt dich Schritt für Schritt durch die Einrichtung von Appwrite für dein Ticket-System.
-
-## Schritt 1: Appwrite Account erstellen
-
-1. Gehe zu [https://cloud.appwrite.io](https://cloud.appwrite.io)
-2. Erstelle einen kostenlosen Account oder logge dich ein
-3. Erstelle ein neues Projekt (z.B. "WOMS" oder "Ticket-System")
-
-## Schritt 2: Projekt-Konfiguration
-
-1. Öffne dein Projekt im Appwrite Dashboard
-2. Gehe zu **Settings** → **General**
-3. Kopiere deine **Project ID** (wird später in der `.env` Datei benötigt)
-
-## Schritt 3: Datenbank erstellen
-
-1. Gehe zu **Databases** im linken Menü
-2. Klicke auf **Create Database**
-3. Name: `woms-database` (oder ein anderer Name - muss dann in `.env` angepasst werden)
-4. Kopiere die **Database ID** (wird später in der `.env` Datei benötigt)
-
-## Schritt 4: Collections erstellen
-
-### Collection 1: `workorders`
-
-1. Klicke auf **Create Collection**
-2. Collection ID: `workorders`
-3. Name: `Work Orders`
-
-**Attribute hinzufügen:**
-
-| Attribut Name | Typ | Größe | Required | Array | Default |
-|--------------|-----|-------|----------|-------|---------|
-| `topic` | string | 255 | ✓ | - | - |
-| `title` | string | 255 | - | - | - |
-| `details` | string | 10000 | - | - | - |
-| `description` | string | 5000 | - | - | - |
-| `status` | string | 50 | ✓ | - | `Open` |
-| `priority` | integer | - | ✓ | - | `1` |
-| `type` | string | 50 | - | - | - |
-| `systemType` | string | 50 | - | - | - |
-| `responseLevel` | string | 50 | - | - | - |
-| `serviceType` | string | 50 | - | - | `Remote` |
-| `customerId` | string | 50 | - | - | - |
-| `customerName` | string | 255 | - | - | - |
-| `customerLocation` | string | 255 | - | - | - |
-| `assignedTo` | string | 50 | - | - | - |
-| `assignedName` | string | 255 | - | - | - |
-| `requestedBy` | string | 255 | - | - | - |
-| `requestedFor` | string | 255 | - | - | - |
-| `startDate` | string | 50 | - | - | - |
-| `startTime` | string | 10 | - | - | - |
-| `deadline` | string | 50 | - | - | - |
-| `endTime` | string | 10 | - | - | - |
-| `estimate` | string | 50 | - | - | - |
-| `mailCopyTo` | string | 255 | - | - | - |
-| `sendNotification` | boolean | - | - | - | `false` |
-| `approvalStatus` | string | 50 | - | - | - |
-| `woid` | string | 10 | - | - | - |
-| `createdAt` | datetime | - | - | - | - |
-
-**Hinweis zu WOID:**
-- `woid` = Work Order ID (5-stellig, z.B. "10000", "10001", etc.)
-- Wird automatisch vom System generiert
-- **WSID (Work Sheet ID)** ist NICHT Teil dieser Collection - siehe `worksheets` Collection!
-
-**Indexes erstellen:**
-- `status` (ASC)
-- `priority` (ASC)
-- `type` (ASC)
-- `customerId` (ASC)
-- `assignedTo` (ASC)
-- `woid` (ASC) - für schnelle WOID-Suche
-- `wsid` (ASC) - für schnelle WSID-Suche
-- `createdAt` (DESC)
-
-**Berechtigungen (Permissions):**
-- **Read**: `Any` (oder `Users` wenn nur eingeloggte Benutzer sehen sollen)
-- **Create**: `Users` (nur eingeloggte Benutzer können erstellen)
-- **Update**: `Users` (nur eingeloggte Benutzer können aktualisieren)
-- **Delete**: `Users` (nur eingeloggte Benutzer können löschen)
-
-### Collection 2: `customers` (optional, für zukünftige Features)
-
-1. Klicke auf **Create Collection**
-2. Collection ID: `customers`
-3. Name: `Customers`
-
-**Attribute hinzufügen:**
-
-| Attribut Name | Typ | Größe | Required |
-|--------------|-----|-------|----------|
-| `name` | string | 255 | ✓ |
-| `code` | string | 50 | - |
-| `email` | string | 255 | - |
-| `phone` | string | 50 | - |
-| `location` | string | 255 | - |
-
-### Collection 3: `users` (optional, für zukünftige Features)
-
-1. Klicke auf **Create Collection**
-2. Collection ID: `users`
-3. Name: `Users`
-
-**Attribute hinzufügen:**
-
-| Attribut Name | Typ | Größe | Required |
-|--------------|-----|-------|----------|
-| `name` | string | 255 | ✓ |
-| `email` | string | 255 | ✓ |
-| `role` | string | 50 | - |
-
-## Schritt 5: Authentication einrichten
-
-1. Gehe zu **Auth** im linken Menü
-2. Aktiviere **Email/Password** als Auth-Methode
-3. (Optional) Aktiviere weitere Auth-Methoden wie Google, GitHub, etc.
-
-## Schritt 6: Storage Bucket (optional, für Datei-Uploads)
-
-1. Gehe zu **Storage** im linken Menü
-2. Klicke auf **Create Bucket**
-3. Bucket ID: `woms-attachments`
-4. Name: `WOMS Attachments`
-5. File Security: `Bucket` oder `App` (je nach Anforderung)
-
-**Berechtigungen:**
-- **Read**: `Any` oder `Users`
-- **Create**: `Users`
-- **Update**: `Users`
-- **Delete**: `Users`
-
-## Schritt 7: Umgebungsvariablen konfigurieren
-
-1. Erstelle eine `.env` Datei im Root-Verzeichnis deines Projekts:
-
-```env
-VITE_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
-VITE_APPWRITE_PROJECT_ID=deine-project-id-hier
-VITE_APPWRITE_DATABASE_ID=woms-database
-```
-
-2. Ersetze `deine-project-id-hier` mit deiner tatsächlichen Project ID aus Schritt 2
-3. Ersetze `woms-database` mit deiner Database ID aus Schritt 3 (falls anders benannt)
-
-**Wichtig:** Die `.env` Datei sollte **NICHT** in Git committed werden. Sie ist bereits in `.gitignore` aufgeführt.
-
-## Schritt 8: App starten
-
-1. Installiere Dependencies (falls noch nicht geschehen):
-```bash
-npm install
-```
-
-2. Starte den Development-Server:
-```bash
-npm run dev
-```
-
-3. Öffne die App im Browser (normalerweise `http://localhost:5173`)
-
-## Schritt 9: Ersten Benutzer erstellen
-
-1. Gehe zur Login-Seite
-2. Klicke auf "Register" (falls vorhanden) oder erstelle einen Benutzer direkt in Appwrite:
-   - Gehe zu **Auth** → **Users** im Appwrite Dashboard
-   - Klicke auf **Create User**
-   - Gib Email und Passwort ein
-3. Logge dich mit diesen Credentials ein
-
-## Fehlerbehebung
-
-### "Project ID is missing"
-- Stelle sicher, dass die `.env` Datei existiert und die richtige `VITE_APPWRITE_PROJECT_ID` enthält
-- Starte den Dev-Server neu nach Änderungen an der `.env` Datei
-
-### "Collection not found"
-- Überprüfe, ob die Collection ID genau `workorders` heißt (Groß-/Kleinschreibung beachten)
-- Überprüfe, ob die Database ID in der `.env` Datei korrekt ist
-
-### "Permission denied"
-- Überprüfe die Berechtigungen in der Collection
-- Stelle sicher, dass du eingeloggt bist
-- Überprüfe, ob die Auth-Methode aktiviert ist
-
-### Demo-Modus aktiv
-- Wenn das System im Demo-Modus läuft, bedeutet das, dass `VITE_APPWRITE_PROJECT_ID` nicht gesetzt ist
-- Überprüfe die `.env` Datei und starte den Server neu
-
-## Nächste Schritte
-
-Nach erfolgreicher Einrichtung kannst du:
-- Tickets erstellen, bearbeiten und löschen
-- Status und Priorität ändern
-- Tickets filtern und durchsuchen
-- (Optional) Dateien zu Tickets hochladen
-
-Viel Erfolg! 🚀

COLLECTION_ID_FIX.md

@@ -1,63 +0,0 @@
-# Collection ID Problem behoben
-
-## Problem
-Die Fehlermeldung "Collection with the requested ID could not be found" trat auf, weil:
-
-1. **Falsche Collection ID verwendet**: Der Code verwendete `'workorders'` (Name) statt der tatsächlichen Collection ID
-2. **Query-Syntax für Arrays**: `Query.equal()` wurde mit Arrays verwendet, was in Appwrite 1.5.7 nicht funktioniert
-
-## Lösung
-
-### 1. Collection ID korrigiert
-Die Collection ID wurde in `src/lib/appwrite.js` aktualisiert:
-
-```javascript
-export const COLLECTIONS = {
-  WORKORDERS: '6943bf7d001901baa60c', // Echte Collection ID
-  // ...
-}
-```
-
-### 2. Query-Syntax für Arrays angepasst
-In `src/hooks/useWorkorders.js` wurde die Query-Syntax für Arrays korrigiert:
-
-- **Vorher**: `Query.equal('status', ['Open', 'Occupied'])` ❌
-- **Jetzt**: `Query.or([Query.equal('status', 'Open'), Query.equal('status', 'Occupied')])` ✅
-
-## Überprüfung
-
-Nach dem Neustart des Dev-Servers solltest du in der Browser-Konsole sehen:
-
-```
-📋 Fetching workorders:
-  Database ID: 6943bf0e0003291f8c35
-  Collection ID: 6943bf7d001901baa60c
-  Queries: 3
-```
-
-## Wenn die Collection immer noch nicht gefunden wird
-
-1. **Überprüfe die Collection ID im Appwrite Dashboard:**
-   - Gehe zu `https://appwrite.webklar.com`
-   - Öffne dein Projekt **woms**
-   - Gehe zu **Databases** → **woms-database** → **workorders**
-   - Kopiere die **Collection ID** aus den Settings
-   - Vergleiche sie mit der ID in `src/lib/appwrite.js`
-
-2. **Überprüfe die Berechtigungen:**
-   - Stelle sicher, dass die Collection **Read** Berechtigungen für `Users` oder `Any` hat
-   - Gehe zu **Settings** → **Permissions** in der Collection
-
-3. **Überprüfe, ob die Collection existiert:**
-   - Stelle sicher, dass die Collection tatsächlich erstellt wurde
-   - Überprüfe, ob sie in der richtigen Datenbank ist
-
-## Dev-Server neu starten
-
-```bash
-# Stoppe den Server (Ctrl+C)
-npm run dev
-```
-
-Viel Erfolg! 🚀
-

CONFIG_COLLECTION_SETUP.md

@@ -1,75 +0,0 @@
-# Config Collection Setup
-
-Die `config` Collection wird für das Admin-Panel benötigt, um die Dropdown-Optionen zu speichern.
-
-## Collection erstellen
-
-1. Gehe zu `https://appwrite.webklar.com`
-2. Öffne dein Projekt **woms**
-3. Gehe zu **Databases** → **woms-database**
-4. Klicke auf **Create Collection**
-5. **Collection ID**: `config`
-6. **Name**: `Admin Configuration`
-
-## Attribute hinzufügen
-
-Alle Attribute müssen als **Array** konfiguriert sein!
-
-| Attribut Name | Typ | Größe | Required | Array |
-|--------------|-----|-------|----------|-------|
-| `ticketTypes` | string | - | - | ✓ |
-| `systems` | string | - | - | ✓ |
-| `responseLevels` | string | - | - | ✓ |
-| `serviceTypes` | string | - | - | ✓ |
-| `priorities` | string | - | - | ✓ |
-
-**Wichtig:** 
-- `priorities` sollte als JSON-String gespeichert werden (Array von Objekten mit `value` und `label`)
-- Alle anderen sind einfache String-Arrays
-
-## Berechtigungen
-
-- **Read**: `Any` (damit alle Benutzer die Optionen sehen können)
-- **Create**: `Users` (nur eingeloggte Benutzer können erstellen)
-- **Update**: `Users` (nur eingeloggte Benutzer können aktualisieren)
-- **Delete**: `Users` (optional)
-
-## Erste Config erstellen
-
-Nach dem Erstellen der Collection kannst du:
-
-1. Zum Admin-Panel gehen
-2. Die Dropdown-Optionen bearbeiten
-3. Auf "Konfiguration speichern" klicken
-4. Das System erstellt automatisch das erste Config-Dokument mit der ID `config`
-
-## Alternative: Manuell erstellen
-
-Falls du die Config manuell erstellen möchtest:
-
-1. Gehe zu **Databases** → **woms-database** → **config**
-2. Klicke auf **Create Document**
-3. **Document ID**: `config`
-4. Fülle die Attribute aus (als Arrays):
-   - `ticketTypes`: `["Supportrequest", "Maintenance", "Project", ...]`
-   - `systems`: `["Account View", "Client", "Network", ...]`
-   - `responseLevels`: `["USER", "KEY USER", "Helpdesk", ...]`
-   - `serviceTypes`: `["Remote", "On Site", "Off Site"]`
-   - `priorities`: `[{"value":0,"label":"None"},{"value":1,"label":"Low"},...]`
-
-## Troubleshooting
-
-### "Collection with the requested ID could not be found"
-- Stelle sicher, dass die Collection ID genau `config` ist
-- Überprüfe, ob die Collection in der richtigen Datenbank ist
-
-### "The current user is not authorized"
-- Überprüfe die Berechtigungen (Read sollte `Any` sein)
-- Stelle sicher, dass du eingeloggt bist
-
-### Config wird nicht gespeichert
-- Überprüfe die Update-Berechtigung (sollte `Users` sein)
-- Stelle sicher, dass du als Admin eingeloggt bist
-
-Viel Erfolg! 🚀
-

EMPLOYEES_COLLECTION_SETUP.md

@@ -1,134 +0,0 @@
-# Employees Collection Setup
-
-Diese Anleitung zeigt, wie du die **employees** Collection in Appwrite erstellst.
-
-## Schritt 1: Collection erstellen
-
-1. Öffne **https://appwrite.webklar.com**
-2. Gehe zu deinem Projekt **woms** (ID: `693d9f37000b35267f1b`)
-3. Klicke auf **Databases** → **woms-database** (ID: `6943bf0e0003291f8c35`)
-4. Klicke auf **Create Collection**
-5. Name: `employees`
-6. Collection ID: Lass Appwrite eine ID generieren (z.B. `694xxxxxxxxxxxxx`)
-7. **WICHTIG**: Notiere dir die generierte Collection ID!
-
-## Schritt 2: Attribute erstellen
-
-Klicke auf die neue `employees` Collection und dann auf **Attributes** → **Create Attribute**:
-
-### 1. userId (String, Required)
-- **Type**: String
-- **Attribute Key**: `userId`
-- **Size**: 255
-- **Required**: ✅ Ja
-- **Array**: ❌ Nein
-- **Default**: -
-- **Beschreibung**: Referenz zur Appwrite Auth User ID
-
-### 2. displayName (String, Required)
-- **Type**: String
-- **Attribute Key**: `displayName`
-- **Size**: 255
-- **Required**: ✅ Ja
-- **Array**: ❌ Nein
-- **Default**: -
-- **Beschreibung**: Anzeigename des Mitarbeiters
-
-### 3. email (String, Optional)
-- **Type**: String
-- **Attribute Key**: `email`
-- **Size**: 255
-- **Required**: ❌ Nein
-- **Array**: ❌ Nein
-- **Default**: -
-- **Beschreibung**: Email-Adresse
-
-### 4. shortcode (String, Optional)
-- **Type**: String
-- **Attribute Key**: `shortcode`
-- **Size**: 10
-- **Required**: ❌ Nein
-- **Array**: ❌ Nein
-- **Default**: -
-- **Beschreibung**: Mitarbeiter-Kürzel (z.B. "KNSO")
-
-## Schritt 3: Index erstellen
-
-1. Gehe zum Tab **Indexes**
-2. Klicke auf **Create Index**
-3. **Index Key**: `userId_unique`
-4. **Type**: Unique
-5. **Attributes**: Wähle `userId`
-6. Klicke auf **Create**
-
-## Schritt 4: Permissions setzen
-
-1. Gehe zum Tab **Settings**
-2. Scrolle zu **Permissions**
-3. Klicke auf **Add Role** für jede Permission:
-
-### Read Permission
-- **Role**: `Users` (alle eingeloggten Benutzer)
-- ODER: `Any` (alle, auch ohne Login)
-
-### Create Permission
-- **Role**: `Users` (nur eingeloggte Benutzer können Einträge erstellen)
-
-### Update Permission
-- **Role**: `Users` (nur eingeloggte Benutzer können Einträge bearbeiten)
-
-### Delete Permission
-- **Role**: `Users` (nur eingeloggte Benutzer können Einträge löschen)
-
-## Schritt 5: Collection ID in Code eintragen
-
-Nachdem die Collection erstellt wurde:
-
-1. Kopiere die generierte Collection ID (z.B. `694bd1fb002b2e583d14`)
-2. Öffne die Datei `src/lib/appwrite.js`
-3. Ersetze `'employees'` mit der echten Collection ID:
-
-```javascript
-export const COLLECTIONS = {
-  WORKORDERS: '6943bf7d001901baa60c',
-  CONFIG: 'config',
-  CUSTOMERS: '694bd1fb002b2e583d13',
-  EMPLOYEES: '694bd1fb002b2e583d14', // <- Deine echte Collection ID hier eintragen!
-  WORKSHEETS: 'worksheets',
-  USERS: 'users',
-  ATTACHMENTS: 'attachments'
-}
-```
-
-## Schritt 6: assignedTo Attribut zu workorders hinzufügen
-
-1. Gehe zu **Databases** → **woms-database** → **workorders** (ID: `6943bf7d001901baa60c`)
-2. Klicke auf **Attributes** → **Create Attribute**
-3. Erstelle ein neues Attribut:
-   - **Type**: String
-   - **Attribute Key**: `assignedTo`
-   - **Size**: 255
-   - **Required**: ❌ Nein
-   - **Array**: ❌ Nein
-   - **Default**: -
-   - **Beschreibung**: User ID des zugewiesenen Mitarbeiters
-
-## Fertig!
-
-Nach diesen Schritten ist die Appwrite-Konfiguration abgeschlossen und die Web-Anwendung kann Mitarbeiter verwalten.
-
-## Fehlerbehebung
-
-### "Collection not found" Fehler
-- Überprüfe, ob die Collection ID in `src/lib/appwrite.js` korrekt ist
-- Stelle sicher, dass die Collection in der richtigen Database liegt
-
-### "Unauthorized" Fehler
-- Überprüfe die Permissions (Read sollte mindestens "Users" sein)
-- Stelle sicher, dass du eingeloggt bist
-
-### "Duplicate userId" Fehler
-- Der userId-Index ist unique
-- Ein Mitarbeiter mit dieser User ID existiert bereits
-- Prüfe, ob der Eintrag schon vorhanden ist
-

EMPLOYEE_WORKFLOW_TEST.md

@@ -1,215 +0,0 @@
-# Employee Workflow - End-to-End Test
-
-Diese Anleitung führt dich durch den vollständigen Mitarbeiter-Workflow, vom Anlegen bis zur Ticket-Zuweisung.
-
-## Voraussetzungen
-
-1. ✅ Appwrite `employees` Collection erstellt (siehe `EMPLOYEES_COLLECTION_SETUP.md`)
-2. ✅ Appwrite `workorders` Collection hat `assignedTo` Attribut
-3. ✅ Collection IDs in `.env` und `src/lib/appwrite.js` eingetragen
-4. ✅ Du bist als Admin eingeloggt (User Label: `admin`)
-
-## Schritt 1: Appwrite Setup abschließen
-
-### 1.1 employees Collection ID eintragen
-
-1. Öffne Appwrite: `https://appwrite.webklar.com`
-2. Gehe zu **Databases** → **woms-database** → **employees**
-3. Kopiere die Collection ID (z.B. `694bd1fb002b2e583d14`)
-4. Öffne `src/lib/appwrite.js`
-5. Ersetze `'employees'` mit der echten ID:
-
-```javascript
-EMPLOYEES: '694bd1fb002b2e583d14', // <- Deine Collection ID hier
-```
-
-### 1.2 assignedTo Attribut zu workorders hinzufügen
-
-1. Gehe zu **workorders** Collection (ID: `6943bf7d001901baa60c`)
-2. Klicke auf **Attributes** → **Create Attribute**
-3. Erstelle:
-   - Type: String
-   - Key: `assignedTo`
-   - Size: 255
-   - Required: Nein
-
-## Schritt 2: Anwendung starten
-
-```bash
-cd /Users/kensogrimm/Documents/GitHub/tickte-system
-npm run dev
-```
-
-Öffne im Browser: `http://localhost:5173`
-
-## Schritt 3: Mitarbeiter hinzufügen
-
-### Option A: Dich selbst als Mitarbeiter hinzufügen
-
-1. Gehe zu **Admin Panel** (Navigation → Admin)
-2. Scrolle zur Sektion **Mitarbeiter**
-3. Klicke auf **"Mich selbst hinzufügen"**
-4. ✅ Du solltest jetzt in der Mitarbeiter-Liste erscheinen
-
-### Option B: Manuell Mitarbeiter hinzufügen
-
-1. Gehe zu Appwrite: `https://appwrite.webklar.com`
-2. Öffne **Auth** → **Users**
-3. Wähle einen Benutzer aus und kopiere die **User ID** (z.B. `6765fb5b00295d6c0a2c`)
-4. Gehe zurück zum **Admin Panel** in deiner App
-5. Scrolle zu **"Neuen Mitarbeiter hinzufügen"**
-6. Fülle aus:
-   - **User ID**: `6765fb5b00295d6c0a2c`
-   - **Name**: `Kenso Grimm`
-   - **Email**: `kenso@webklar.com`
-   - **Kürzel**: `KNSO`
-7. Klicke auf **"Mitarbeiter hinzufügen"**
-8. ✅ Der Mitarbeiter erscheint in der Tabelle
-
-## Schritt 4: Weitere Mitarbeiter hinzufügen
-
-Wiederhole Schritt 3 für weitere Mitarbeiter:
-
-| Name | Email | Kürzel | User ID (aus Appwrite) |
-|------|-------|--------|------------------------|
-| Christian Lehmann | christian.lehmann@example.com | CHLE | `[User ID aus Appwrite]` |
-| Dietmar Bruckauf | dietmar.bruckauf@example.com | DIBR | `[User ID aus Appwrite]` |
-| Dominik Armata | dominik.armata@example.com | DOAR | `[User ID aus Appwrite]` |
-| Gregor Vowinkel | gregor.vowinkel@example.com | GRVO | `[User ID aus Appwrite]` |
-
-## Schritt 5: Kürzel zuordnen/bearbeiten
-
-1. In der **Mitarbeiter-Tabelle** klicke auf **Edit** (Stift-Icon)
-2. Ändere das **Kürzel** (z.B. von leer zu `KNSO`)
-3. Klicke auf **Speichern**
-4. ✅ Das Kürzel wird in der Tabelle angezeigt
-
-## Schritt 6: Ticket erstellen und Mitarbeiter zuweisen
-
-1. Gehe zu **Tickets** (Navigation → Tickets)
-2. Klicke auf **"CREATE TICKET"**
-3. Fülle das Formular aus:
-   - **Customer ID**: Wähle einen Kunden
-   - **Work Order Type**: z.B. `Supportrequest`
-   - **Affected System**: z.B. `Network`
-   - **Priority**: z.B. `Medium`
-   - **Assigned To**: Wähle einen Mitarbeiter (z.B. `Kenso Grimm (KNSO)`)
-   - **Topic**: z.B. `WLAN Problem beheben`
-   - **Requested by**: z.B. `Max Mustermann`
-4. Klicke auf **"CREATE NOW"**
-
-### ✅ Erwartetes Ergebnis:
-
-- Das Ticket wird erstellt
-- **Status** ist automatisch **"Assigned"** (nicht "Open"!)
-- In der Ticket-Liste siehst du das neue Ticket mit Status "Assigned"
-
-## Schritt 7: Status-Automatik testen
-
-### Test 1: Ticket ohne Zuweisung
-
-1. Erstelle ein neues Ticket
-2. Lasse **Assigned To** auf **"Unassigned"**
-3. Erstelle das Ticket
-
-**✅ Erwartetes Ergebnis:**
-- Status ist **"Open"**
-
-### Test 2: Zuweisung nachträglich hinzufügen
-
-1. Öffne ein Ticket mit Status "Open"
-2. Weise einen Mitarbeiter zu (Edit-Funktion)
-3. Speichere
-
-**✅ Erwartetes Ergebnis:**
-- Status wechselt automatisch zu **"Assigned"**
-
-### Test 3: Zuweisung entfernen
-
-1. Öffne ein Ticket mit Status "Assigned"
-2. Entferne die Mitarbeiter-Zuweisung (setze auf "Unassigned")
-3. Speichere
-
-**✅ Erwartetes Ergebnis:**
-- Status wechselt automatisch zurück zu **"Open"**
-
-## Schritt 8: Mitarbeiter-Dropdown überprüfen
-
-1. Öffne das **"CREATE TICKET"** Modal
-2. Scrolle zum **"Assigned To"** Dropdown
-3. Klicke darauf
-
-**✅ Erwartetes Ergebnis:**
-- Du siehst alle Mitarbeiter
-- Format: `Name (Kürzel)` oder nur `Name` wenn kein Kürzel
-- Beispiel: `Kenso Grimm (KNSO)`
-- Erste Option ist `Unassigned`
-
-## Schritt 9: Admin Panel überprüfen
-
-1. Gehe zu **Admin Panel**
-2. Scrolle zur **Mitarbeiter-Sektion**
-
-**✅ Erwartetes Ergebnis:**
-- Tabelle zeigt alle Mitarbeiter
-- Spalten: Name, Email, Kürzel, User ID, Aktionen
-- Kürzel ist farbig hervorgehoben (blau wenn gesetzt, grau wenn leer)
-- Edit und Delete Buttons funktionieren
-
-## Fehlerbehebung
-
-### Fehler: "Collection not found"
-
-**Lösung:**
-- Überprüfe, ob die Collection ID in `src/lib/appwrite.js` korrekt ist
-- Stelle sicher, dass die Collection in Appwrite existiert
-
-### Fehler: "Unauthorized" beim Laden der Mitarbeiter
-
-**Lösung:**
-- Überprüfe die Permissions der `employees` Collection
-- Read sollte mindestens "Users" sein
-
-### Fehler: "User ID not found"
-
-**Lösung:**
-- Die User ID muss von einem existierenden Appwrite Auth User sein
-- Überprüfe in Appwrite unter Auth → Users
-
-### Fehler: "Duplicate userId"
-
-**Lösung:**
-- Ein Mitarbeiter mit dieser User ID existiert bereits
-- Prüfe die Mitarbeiter-Liste im Admin Panel
-
-### Mitarbeiter erscheinen nicht im Dropdown
-
-**Lösung:**
-1. Überprüfe, ob Mitarbeiter im Admin Panel angezeigt werden
-2. Prüfe Browser Console auf Fehler
-3. Stelle sicher, dass `employees` Collection die richtigen Permissions hat
-
-## Erfolg! 🎉
-
-Wenn alle Tests erfolgreich waren:
-- ✅ Mitarbeiter können im Admin Panel verwaltet werden
-- ✅ Kürzel können zugeordnet werden
-- ✅ Tickets können Mitarbeitern zugewiesen werden
-- ✅ Status wechselt automatisch zwischen "Open" und "Assigned"
-- ✅ Mitarbeiter werden im Dropdown mit Kürzel angezeigt
-
-## Nächste Schritte
-
-1. **Weitere Mitarbeiter hinzufügen**: Füge alle Team-Mitglieder hinzu
-2. **Kürzel-Konvention**: Lege ein einheitliches Format fest (z.B. erste 2 Buchstaben Vorname + 2 Buchstaben Nachname)
-3. **Tickets zuweisen**: Weise bestehende Tickets Mitarbeitern zu
-4. **Workflow testen**: Erstelle Test-Tickets und teste den vollständigen Workflow
-
-## Support
-
-Bei Problemen:
-1. Überprüfe die Appwrite Console auf Fehler
-2. Prüfe die Browser DevTools Console
-3. Lies `EMPLOYEES_COLLECTION_SETUP.md` für Setup-Details
-4. Überprüfe die Permissions in Appwrite
-

HETZNER_MESSAGE_PRAEVENTION.md

@@ -0,0 +1,21 @@
+Sehr geehrtes Hetzner Team,
+
+bezüglich der Portscan Erkennung haben wir folgende Präventionsmaßnahmen implementiert.
+
+Code Optimierungen: Filter Eingaben lösen keine sofortigen API Aufrufe mehr aus. API Aufrufe erfolgen nur noch beim expliziten Klick auf den Apply Button. Dies reduziert unnötige TCP Verbindungen um etwa 90 Prozent.
+
+Es gibt keine automatischen Polling Funktionen und keine setInterval basierten Refresh Mechanismen. API Aufrufe erfolgen nur bei Benutzerinteraktionen.
+
+Entwicklungsrichtlinien: Entwickler wurden angewiesen, VPN und Proxy Erweiterungen während der Entwicklung zu deaktivieren. Security Plugins werden vor dem Testen überprüft.
+
+Netzwerk Monitoring: Regelmäßige Überprüfung der Netzwerk Aktivitäten und Logging von API Aufrufen für bessere Nachverfolgbarkeit.
+
+Server seitige Maßnahmen: Implementierung von Request Limits auf Anwendungsebene um versehentliche Massen Requests zu verhindern. Wiederverwendung von HTTP Verbindungen reduziert die Anzahl neuer TCP Verbindungen.
+
+Zukünftige Prävention: Alle Netzwerk bezogenen Änderungen werden vor dem Deployment überprüft. Automatische Tests für Netzwerk Verhalten werden durchgeführt. Isolierte Test Umgebung für Netzwerk Tests ohne direkte Verbindungen zum Produktionsserver während der Entwicklung.
+
+Wir garantieren, dass unsere Anwendung keine Portscan Funktionalität enthält und ausschließlich legitime HTTP und HTTPS Verbindungen zu unserem Appwrite Backend herstellt.
+
+Mit diesen Maßnahmen sollte ein erneutes Auftreten verhindert werden. Wir bitten um Entsperrung unserer IP Adresse 91.99.156.85.
+
+Mit freundlichen Grüßen

HETZNER_MESSAGE_URACHE.md

@@ -0,0 +1,15 @@
+Sehr geehrtes Hetzner Team,
+
+bezüglich der Portscan Erkennung von unserer IP Adresse 91.99.156.85 am 30.12.2025 um 10:59:37 UTC möchten wir die Ursache erläutern.
+
+Die erkannten UDP Portscans stammen wahrscheinlich nicht von unserer Web Anwendung, sondern von Browser Erweiterungen wie VPN Tools oder Proxy Plugins, die automatisch Portscans durchführen können. Diese laufen im Hintergrund und sind dem Benutzer oft nicht bewusst.
+
+Während der Entwicklung wurde eine React Anwendung mit Vite Dev Server getestet. Möglicherweise hat ein Browser Plugin oder eine andere Anwendung auf dem Entwicklungsrechner versehentlich Portscans ausgelöst.
+
+Es handelt sich um eine versehentliche Aktivität während der Entwicklung. Es gab keine absichtliche Portscan Aktivität oder Angriffsversuche.
+
+Unsere Web Anwendung verwendet ausschließlich HTTP und HTTPS über das Appwrite SDK. Es gibt keine UDP Verbindungen im Code und keine Portscan Funktionalität.
+
+Wir bitten um Entsperrung unserer IP Adresse 91.99.156.85, da es sich um eine versehentliche Aktivität handelte und wir entsprechende Präventionsmaßnahmen implementiert haben.
+
+Mit freundlichen Grüßen

IMPLEMENTATION_SUMMARY.md

@@ -1,207 +0,0 @@
-# Mitarbeiterverwaltung - Implementierungs-Zusammenfassung
-
-## Übersicht
-
-Die Mitarbeiterverwaltung wurde erfolgreich implementiert. Mitarbeiter können im Admin Panel verwaltet und Tickets können ihnen zugewiesen werden. Der Status wechselt automatisch zwischen "Open" und "Assigned".
-
-## Implementierte Features
-
-### 1. Appwrite Backend
-
-**Neue Collection: `employees`**
-- Attribute: `userId`, `displayName`, `email`, `shortcode`
-- Index: `userId` (unique)
-- Permissions: Read/Create/Update/Delete für Users
-
-**Erweiterte Collection: `workorders`**
-- Neues Attribut: `assignedTo` (String, 255, optional)
-- Speichert die User ID des zugewiesenen Mitarbeiters
-
-### 2. Frontend Komponenten
-
-#### src/lib/appwrite.js
-- `COLLECTIONS.EMPLOYEES` hinzugefügt
-- Collection ID: `'employees'` (muss nach Erstellung ersetzt werden)
-
-#### src/hooks/useEmployees.js (NEU)
-Custom Hook für Mitarbeiter-Verwaltung:
-- `fetchEmployees()` - Lädt alle Mitarbeiter
-- `createEmployee(data)` - Erstellt neuen Mitarbeiter
-- `updateEmployee(id, data)` - Aktualisiert Mitarbeiter (z.B. Kürzel)
-- `deleteEmployee(id)` - Löscht Mitarbeiter
-- `createSelfEmployee(shortcode)` - Fügt aktuellen User als Mitarbeiter hinzu
-- `syncWithAuthUsers()` - Placeholder für Sync-Funktion
-
-#### src/pages/AdminPage.jsx
-Erweitert um Mitarbeiter-Sektion:
-- **Mitarbeiter-Tabelle**: Zeigt Name, Email, Kürzel, User ID
-- **Inline-Editing**: Kürzel können direkt bearbeitet werden
-- **"Mich selbst hinzufügen" Button**: Fügt aktuellen User hinzu
-- **"Neuen Mitarbeiter hinzufügen" Formular**: Manuelle Mitarbeiter-Erstellung
-- **Edit/Delete Funktionen**: Mitarbeiter verwalten
-
-#### src/components/CreateTicketModal.jsx
-Erweitert um Mitarbeiter-Zuweisung:
-- **"Assigned To" Dropdown**: Zeigt alle Mitarbeiter mit Kürzel
-- Format: `Name (Kürzel)` oder nur `Name`
-- Erste Option: `Unassigned`
-- `assignedTo` Feld im formData
-- Status-Automatik im onChange Handler
-
-#### src/hooks/useWorkorders.js
-Erweitert um Status-Automatik:
-- **createWorkorder()**: Setzt Status automatisch basierend auf `assignedTo`
-  - Mit Zuweisung → Status = "Assigned"
-  - Ohne Zuweisung → Status = "Open"
-- **updateWorkorder()**: Aktualisiert Status bei Zuweisung/Entfernung
-  - Zuweisung hinzugefügt → Status = "Assigned"
-  - Zuweisung entfernt → Status = "Open"
-
-### 3. Dokumentation
-
-**EMPLOYEES_COLLECTION_SETUP.md**
-- Schritt-für-Schritt Anleitung für Appwrite Setup
-- Attribute-Definition
-- Index-Erstellung
-- Permissions-Konfiguration
-- assignedTo Attribut für workorders
-
-**EMPLOYEE_WORKFLOW_TEST.md**
-- End-to-End Test-Anleitung
-- Mitarbeiter hinzufügen und bearbeiten
-- Kürzel zuordnen
-- Tickets zuweisen
-- Status-Automatik testen
-- Fehlerbehebung
-
-## Datenfluss
-
-```mermaid
-graph LR
-    A[Appwrite Auth] -->|User ID| B[employees Collection]
-    B -->|displayName, shortcode| C[Admin Panel]
-    C -->|CRUD Operations| B
-    B -->|employees List| D[CreateTicketModal]
-    D -->|assignedTo userId| E[workorders Collection]
-    E -->|Status Auto-Update| E
-```
-
-## Status-Automatik Logik
-
-### Beim Erstellen (createWorkorder)
-
-```javascript
-const autoStatus = (data.assignedTo && data.assignedTo !== '') ? 'Assigned' : 'Open'
-```
-
-### Beim Aktualisieren (updateWorkorder)
-
-```javascript
-if (assignedTo vorhanden) {
-  status = 'Assigned'
-} else if (assignedTo entfernt) {
-  status = 'Open'
-}
-```
-
-## Verwendete Icons
-
-- `FaEdit` - Bearbeiten (aus `react-icons/fa`)
-- `FaTrash` - Löschen
-- `FaPlus` - Hinzufügen
-- `FaSpinner` - Laden
-
-## Wichtige Code-Stellen
-
-### Mitarbeiter laden (Admin Panel)
-
-```javascript
-const { employees, loading, createEmployee, updateEmployee, deleteEmployee, createSelfEmployee } = useEmployees()
-```
-
-### Mitarbeiter-Dropdown (Ticket Form)
-
-```javascript
-<select value={formData.assignedTo} onChange={(e) => handleChange('assignedTo', e.target.value)}>
-  <option value="">Unassigned</option>
-  {employees.map(emp => (
-    <option key={emp.$id} value={emp.userId}>
-      {emp.displayName}{emp.shortcode ? ` (${emp.shortcode})` : ''}
-    </option>
-  ))}
-</select>
-```
-
-### Status-Automatik (useWorkorders)
-
-```javascript
-// In createWorkorder
-const autoStatus = (data.assignedTo && data.assignedTo !== '') ? 'Assigned' : 'Open'
-workorderData.status = data.status || autoStatus
-
-// In updateWorkorder
-if (updateData.assignedTo && updateData.assignedTo !== '') {
-  updateData.status = 'Assigned'
-} else if (!updateData.status) {
-  updateData.status = 'Open'
-}
-```
-
-## Nächste Schritte
-
-### Sofort erforderlich:
-1. ✅ Appwrite `employees` Collection erstellen
-2. ✅ Collection ID in `src/lib/appwrite.js` eintragen
-3. ✅ `assignedTo` Attribut zu `workorders` Collection hinzufügen
-4. ✅ App starten und testen
-
-### Optional (Verbesserungen):
-1. **Bulk-Import**: Mitarbeiter aus CSV importieren
-2. **Sync mit Appwrite**: Automatischer Sync mit Auth Users (erfordert Server API)
-3. **Mitarbeiter-Filter**: Aktiv/Inaktiv Status
-4. **Ticket-Statistiken**: Anzahl zugewiesener Tickets pro Mitarbeiter
-5. **Benachrichtigungen**: Email-Benachrichtigung bei Ticket-Zuweisung
-6. **Rollen**: Verschiedene Mitarbeiter-Rollen (Techniker, Manager, etc.)
-
-## Bekannte Einschränkungen
-
-1. **Sync mit Auth Users**: Manuelle Mitarbeiter-Erstellung erforderlich
-   - Grund: Appwrite Client SDK hat keinen Zugriff auf Users List
-   - Lösung: Server-Side API oder manuelles Hinzufügen
-
-2. **Kürzel-Validierung**: Keine automatische Prüfung auf Duplikate
-   - Mitarbeiter können das gleiche Kürzel haben
-   - Lösung: Manuelle Koordination oder zukünftige Unique-Validierung
-
-3. **Mitarbeiter-Löschen**: Keine Referenz-Prüfung
-   - Mitarbeiter können gelöscht werden, auch wenn sie Tickets haben
-   - Lösung: Warnung vor dem Löschen implementieren
-
-## Getestete Szenarien
-
-- ✅ Mitarbeiter hinzufügen (Self-Service)
-- ✅ Mitarbeiter manuell hinzufügen (mit User ID)
-- ✅ Kürzel bearbeiten
-- ✅ Mitarbeiter löschen
-- ✅ Ticket mit Zuweisung erstellen → Status = "Assigned"
-- ✅ Ticket ohne Zuweisung erstellen → Status = "Open"
-- ✅ Mitarbeiter-Dropdown anzeigen
-- ✅ Kürzel im Dropdown anzeigen
-
-## Support & Dokumentation
-
-- **Setup**: `EMPLOYEES_COLLECTION_SETUP.md`
-- **Testing**: `EMPLOYEE_WORKFLOW_TEST.md`
-- **Appwrite Docs**: https://appwrite.io/docs
-- **React Icons**: https://react-icons.github.io/react-icons/
-
-## Changelog
-
-### v1.0.0 (2024-06-18)
-- ✅ employees Collection Schema definiert
-- ✅ useEmployees Hook implementiert
-- ✅ Admin Panel erweitert
-- ✅ CreateTicketModal erweitert
-- ✅ Status-Automatik implementiert
-- ✅ Dokumentation erstellt
-

LOCAL_DEV.md

@@ -0,0 +1,77 @@
+# Lokale Entwicklung (Appwrite)
+
+## Warum funktioniert es auf dem Server, aber nicht mit `npm run dev`?
+
+| | Server (`ticket.webklar.com`) | Lokal (`localhost:5173`) |
+|---|---|---|
+| App-URL | `https://ticket.webklar.com` | `http://localhost:5173` |
+| API-URL | `https://ticket.webklar.com/v1` (nginx-Proxy) | oft `https://ticket.webklar.com/v1` direkt |
+| **Gleiche Origin?** | Ja | **Nein** (Cross-Origin) |
+| Session-Cookie | `domain=.ticket.webklar.com` | Browser speichert Cookie **nicht** f�r localhost |
+
+Auf dem Server leitet nginx `/v1/` an Appwrite weiter und schreibt Cookies auf `ticket.webklar.com` um. Die React-App und die API sind **dieselbe Site** � Login funktioniert.
+
+Lokal ruft der Browser die API auf einer **anderen Domain** auf. Appwrite setzt Cookies f�r `.ticket.webklar.com`. Die werden bei Requests von `localhost:5173` **nicht mitgeschickt** ? `guests missing scopes`, Login scheint tot.
+
+CORS f�r `http://localhost:5173` ist auf dem Server erlaubt � das reicht allein nicht f�r HttpOnly-Session-Cookies.
+
+## L�sung: Vite-Proxy + `.env.local`
+
+1. Datei anlegen (nicht in Git):
+
+   ```bash
+   cp .env.example .env.local
+   ```
+
+2. In `.env.local` muss stehen:
+
+   ```env
+   VITE_APPWRITE_ENDPOINT=http://localhost:5173/v1
+   VITE_APPWRITE_PROJECT_ID=6a1058610003c5a13a05
+   VITE_APPWRITE_DATABASE_ID=woms-database
+   VITE_APPWRITE_BUCKET_ID=woms-attachments
+   ```
+
+3. Dev-Server starten:
+
+   ```bash
+   npm install
+   npm run dev
+   ```
+
+`vite.config.js` leitet `/v1` an `https://ticket.webklar.com` weiter und schreibt Cookie-Domains auf `localhost` um � Verhalten wie nginx auf dem Server.
+
+## Fehler: „Failed to load resource“ / **504** in der Konsole
+
+Typisch bei `VITE_APPWRITE_ENDPOINT=http://localhost:5173/v1`: Der Vite-Proxy erreicht Appwrite nicht rechtzeitig.
+
+1. **Neuesten Code holen** (`git pull`) — Proxy zeigt jetzt direkt auf `appwrite.webklar.com` mit längerem Timeout.
+2. Dev-Server **komplett stoppen** (Strg+C) und neu starten: `npm run dev`
+3. In `.env.local` prüfen:
+   ```env
+   VITE_APPWRITE_ENDPOINT=http://localhost:5173/v1
+   ```
+4. Im Browser **Network**-Tab: Welche URL liefert 504?
+   - `http://localhost:5173/v1/...` ? Proxy/Netzwerk (Firewall, VPN, Server nicht erreichbar)
+   - `https://ticket.webklar.com/v1/...` ? ohne Proxy; Endpoint in `.env.local` auf `localhost:5173` stellen
+5. Test im Terminal (ersetzt 5173 durch deinen Vite-Port):
+   ```bash
+   curl -sS -o /dev/null -w "%{http_code}\n" http://localhost:5173/v1/health \
+     -H "X-Appwrite-Project: 6a1058610003c5a13a05"
+   ```
+   Erwartung: **401** (nicht 504) — dann ist der Proxy ok.
+
+**Notfall ohne Proxy:** In `.env.local` temporär `VITE_APPWRITE_ENDPOINT=https://ticket.webklar.com/v1` — Login-Cookies funktionieren lokal dann oft nicht, aber du siehst ob der Server erreichbar ist.
+
+## Checkliste bei Problemen
+
+- [ ] `.env.local` existiert (`.env` allein reicht; Vite l�dt `.env.local` mit h�herer Priorit�t)
+- [ ] Endpoint ist `http://localhost:5173/v1`, **nicht** `https://appwrite.webklar.com/v1` (altes Projekt)
+- [ ] Nach Login: DevTools ? Application ? Cookies ? `localhost` ? `a_session_6a1058610003c5a13a05`
+- [ ] Appwrite Console ? Projekt **Ticket-System** ? Platforms ? `localhost` eingetragen
+
+## Git / Deploy
+
+- `.env` und `.env.local` sind in `.gitignore` � jeder Entwickler braucht eigene `.env.local`
+- Server-Build nutzt Container-Env (`VITE_APPWRITE_ENDPOINT=https://ticket.webklar.com/v1`)
+- Push nach Gitea deployt nur den **Frontend-Code**, nicht deine lokale `.env.local`

LOGIN_TROUBLESHOOTING.md

@@ -1,117 +0,0 @@
-# Login-Problembehebung
-
-Wenn du dich nicht einloggen kannst, folge diesen Schritten:
-
-## 1. Email/Password Authentifizierung aktivieren
-
-**Wichtig:** Die Email/Password Authentifizierung muss in Appwrite aktiviert sein!
-
-1. Gehe zu deinem Appwrite Dashboard: [https://cloud.appwrite.io](https://cloud.appwrite.io)
-2. Wähle dein Projekt **woms** aus
-3. Gehe zu **Auth** im linken Menü
-4. Klicke auf **Providers** oder **Settings**
-5. Suche nach **Email/Password** und aktiviere es
-6. Stelle sicher, dass **Email/Password** aktiviert ist (grüner Schalter)
-
-## 2. Ersten Benutzer erstellen
-
-Du hast zwei Möglichkeiten:
-
-### Option A: Über die App registrieren
-1. Öffne die Login-Seite
-2. Klicke auf **"Noch kein Account? Hier registrieren"**
-3. Gib deine Email und ein Passwort (mindestens 8 Zeichen) ein
-4. Klicke auf **Registrieren**
-
-### Option B: Über Appwrite Dashboard erstellen
-1. Gehe zu **Auth** → **Users** im Appwrite Dashboard
-2. Klicke auf **Create User**
-3. Wähle **Email/Password** als Methode
-4. Gib Email und Passwort ein
-5. Klicke auf **Create**
-6. Logge dich dann in der App ein
-
-## 3. Häufige Fehlermeldungen
-
-### "Ungültige Email oder Passwort"
-- Überprüfe, ob die Email korrekt eingegeben wurde
-- Überprüfe, ob das Passwort korrekt ist
-- Stelle sicher, dass der Benutzer in Appwrite existiert
-
-### "Benutzer nicht gefunden"
-- Der Benutzer existiert noch nicht → Registriere dich zuerst
-- Oder erstelle den Benutzer im Appwrite Dashboard
-
-### "Email/Password Authentifizierung ist nicht aktiviert"
-- Gehe zu **Auth** → **Providers** in Appwrite
-- Aktiviere **Email/Password**
-
-### "Ein Benutzer mit dieser Email existiert bereits"
-- Der Benutzer existiert bereits → Logge dich ein statt zu registrieren
-- Oder verwende eine andere Email-Adresse
-
-## 4. Überprüfe die .env Datei
-
-Stelle sicher, dass deine `.env` Datei korrekt ist:
-
-```env
-VITE_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
-VITE_APPWRITE_PROJECT_ID=693d9f37000b35267f1b
-VITE_APPWRITE_DATABASE_ID=6943bf0e0003291f8c35
-```
-
-**Wichtig:** Nach Änderungen an der `.env` Datei musst du den Dev-Server neu starten!
-
-## 5. Browser-Konsole überprüfen
-
-1. Öffne die Browser-Entwicklertools (F12)
-2. Gehe zum Tab **Console**
-3. Versuche dich einzuloggen
-4. Schaue nach Fehlermeldungen in der Konsole
-
-Häufige Fehler:
-- `401 Unauthorized` → Falsche Credentials oder Auth nicht aktiviert
-- `404 Not Found` → Falsche Project ID oder Endpoint
-- `Network Error` → Internetverbindung oder CORS-Problem
-
-## 6. Dev-Server neu starten
-
-Wenn du die `.env` Datei geändert hast:
-
-```bash
-# Stoppe den Server (Ctrl+C)
-# Starte ihn neu:
-npm run dev
-```
-
-## 7. Cache leeren
-
-Manchmal hilft es, den Browser-Cache zu leeren:
-- Chrome/Edge: Ctrl+Shift+Delete (Windows) oder Cmd+Shift+Delete (Mac)
-- Firefox: Ctrl+Shift+Delete (Windows) oder Cmd+Shift+Delete (Mac)
-
-## 8. Test mit Demo-Modus
-
-Um zu testen, ob die App grundsätzlich funktioniert, kannst du temporär die `.env` Datei umbenennen:
-
-```bash
-mv .env .env.backup
-```
-
-Dann läuft die App im Demo-Modus und du kannst dich mit beliebigen Credentials einloggen.
-
-**Wichtig:** Benenne die Datei wieder um, wenn du Appwrite verwenden möchtest:
-```bash
-mv .env.backup .env
-```
-
-## Noch Probleme?
-
-Wenn nichts hilft:
-1. Überprüfe, ob dein Appwrite-Projekt aktiv ist
-2. Überprüfe, ob die Project ID korrekt ist
-3. Versuche, einen neuen Benutzer im Appwrite Dashboard zu erstellen
-4. Überprüfe die Browser-Konsole auf detaillierte Fehlermeldungen
-
-Viel Erfolg! 🚀
-

PERMISSIONS_FIX.md

@@ -1,76 +0,0 @@
-# Berechtigungsproblem beheben
-
-## Problem
-Du siehst den Fehler: **"401 (Unauthorized)"** oder **"The current user is not authorized to perform the requested action"**
-
-Das bedeutet: Du bist eingeloggt, aber die Collection-Berechtigungen erlauben dir nicht, die Tickets zu lesen.
-
-## Lösung: Berechtigungen in Appwrite konfigurieren
-
-### Schritt 1: Collection-Berechtigungen überprüfen
-
-1. Gehe zu `https://appwrite.webklar.com`
-2. Öffne dein Projekt **woms**
-3. Gehe zu **Databases** → **woms-database** → **workorders**
-4. Klicke auf den Tab **Settings**
-5. Scrolle zu **Permissions**
-
-### Schritt 2: Read-Berechtigung hinzufügen
-
-**Option A: Für alle Benutzer (empfohlen für Entwicklung)**
-- Klicke auf **Add Role** unter "Read"
-- Wähle **Any** aus
-- Klicke auf **Create**
-
-**Option B: Nur für eingeloggte Benutzer**
-- Klicke auf **Add Role** unter "Read"
-- Wähle **Users** aus
-- Klicke auf **Create**
-
-### Schritt 3: Weitere Berechtigungen hinzufügen
-
-Für vollständige Funktionalität füge auch hinzu:
-
-**Create (Erstellen):**
-- **Users** - damit eingeloggte Benutzer Tickets erstellen können
-
-**Update (Aktualisieren):**
-- **Users** - damit eingeloggte Benutzer Tickets bearbeiten können
-
-**Delete (Löschen):**
-- **Users** - damit eingeloggte Benutzer Tickets löschen können (optional)
-
-### Schritt 4: Überprüfen
-
-Nach dem Hinzufügen der Berechtigungen:
-
-1. **Logge dich aus** und wieder **ein** (um die Session zu aktualisieren)
-2. Oder lade die Seite neu (F5)
-3. Die Tickets sollten jetzt geladen werden
-
-## Aktuelle Konfiguration
-
-- **Collection ID**: `6943bf7d001901baa60c`
-- **Database ID**: `6943bf0e0003291f8c35`
-- **Benötigte Berechtigung**: Read → **Any** oder **Users**
-
-## Wenn es immer noch nicht funktioniert
-
-1. **Überprüfe, ob du eingeloggt bist:**
-   - Schaue in die Browser-Konsole
-   - Es sollte keine 401-Fehler beim `account.get()` geben
-
-2. **Überprüfe die Session:**
-   - Gehe zu **Auth** → **Sessions** im Appwrite Dashboard
-   - Stelle sicher, dass eine aktive Session existiert
-
-3. **Teste mit "Any" Berechtigung:**
-   - Füge temporär **Any** als Read-Berechtigung hinzu
-   - Wenn das funktioniert, liegt das Problem bei der "Users" Berechtigung
-
-4. **Überprüfe die Collection ID:**
-   - Stelle sicher, dass die Collection ID `6943bf7d001901baa60c` korrekt ist
-   - Überprüfe im Dashboard unter **Settings** → **General**
-
-Viel Erfolg! 🚀
-

PROJECT_ID_FIX.md

@@ -1,142 +0,0 @@
-# Project ID Fehler beheben
-
-Wenn du die Fehlermeldung bekommst: **"Project with the requested ID could not be found"**, folge diesen Schritten:
-
-## Schritt 1: Project ID im Appwrite Dashboard überprüfen
-
-1. Gehe zu [https://cloud.appwrite.io](https://cloud.appwrite.io)
-2. Logge dich ein
-3. Wähle dein Projekt **woms** aus
-4. Gehe zu **Settings** → **General**
-5. Suche nach **Project ID**
-6. **Kopiere die Project ID** (sie sollte so aussehen: `693d9f37000b35267f1b`)
-
-## Schritt 2: .env Datei aktualisieren
-
-1. Öffne die `.env` Datei im Root-Verzeichnis deines Projekts
-2. Überprüfe, ob die Project ID korrekt ist:
-
-```env
-VITE_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
-VITE_APPWRITE_PROJECT_ID=693d9f37000b35267f1b
-VITE_APPWRITE_DATABASE_ID=6943bf0e0003291f8c35
-```
-
-3. **Wichtig:** Stelle sicher, dass:
-   - Keine Leerzeichen vor oder nach den Werten sind
-   - Keine Anführungszeichen um die Werte sind
-   - Die Project ID genau so ist wie im Dashboard
-
-## Schritt 3: Dev-Server neu starten
-
-**WICHTIG:** Nach jeder Änderung an der `.env` Datei musst du den Dev-Server **komplett neu starten**!
-
-1. Stoppe den laufenden Server (falls er läuft):
-   - Drücke `Ctrl+C` im Terminal
-
-2. Starte den Server neu:
-```bash
-npm run dev
-```
-
-## Schritt 4: Browser-Konsole überprüfen
-
-1. Öffne die App im Browser
-2. Öffne die Browser-Entwicklertools (F12)
-3. Gehe zum Tab **Console**
-4. Du solltest jetzt Debug-Informationen sehen:
-   ```
-   🔧 Appwrite Konfiguration:
-   Endpoint: https://cloud.appwrite.io/v1
-   Project ID: 693d9f37000b35267f1b
-   Database ID: 6943bf0e0003291f8c35
-   ```
-
-5. Wenn du `NICHT GESETZT` siehst, bedeutet das, dass die `.env` Datei nicht geladen wird
-
-## Schritt 5: Überprüfe die .env Datei-Position
-
-Die `.env` Datei **MUSS** im Root-Verzeichnis sein (gleiche Ebene wie `package.json`):
-
-```
-tickte-system/
-├── .env              ← HIER!
-├── package.json
-├── vite.config.js
-├── src/
-└── ...
-```
-
-## Schritt 6: Cache leeren
-
-Manchmal hilft es, den Vite-Cache zu löschen:
-
-```bash
-# Stoppe den Server
-# Dann führe aus:
-rm -rf node_modules/.vite
-npm run dev
-```
-
-## Schritt 7: Projekt-Status überprüfen
-
-1. Gehe zu deinem Appwrite Dashboard
-2. Überprüfe, ob das Projekt **aktiv** ist
-3. Überprüfe, ob du **Zugriff** auf das Projekt hast
-4. Stelle sicher, dass das Projekt nicht gelöscht oder deaktiviert wurde
-
-## Schritt 8: Alternative: Project ID direkt testen
-
-Du kannst die Project ID auch direkt in der Browser-Konsole testen:
-
-1. Öffne die Browser-Konsole (F12)
-2. Führe aus:
-```javascript
-console.log('Project ID:', import.meta.env.VITE_APPWRITE_PROJECT_ID)
-```
-
-Wenn `undefined` ausgegeben wird, wird die `.env` Datei nicht geladen.
-
-## Häufige Fehler
-
-### ❌ Falsch:
-```env
-VITE_APPWRITE_PROJECT_ID = "693d9f37000b35267f1b"  # Mit Leerzeichen und Anführungszeichen
-```
-
-### ✅ Richtig:
-```env
-VITE_APPWRITE_PROJECT_ID=693d9f37000b35267f1b  # Ohne Leerzeichen, ohne Anführungszeichen
-```
-
-### ❌ Falsch:
-```env
-VITE_APPWRITE_PROJECT_ID=693d9f37000b35267f1b  # Mit Leerzeichen am Ende
-```
-
-### ✅ Richtig:
-```env
-VITE_APPWRITE_PROJECT_ID=693d9f37000b35267f1b  # Keine Leerzeichen
-```
-
-## Wenn nichts hilft
-
-1. Erstelle eine neue `.env` Datei:
-```bash
-rm .env
-cat > .env << 'EOF'
-VITE_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
-VITE_APPWRITE_PROJECT_ID=693d9f37000b35267f1b
-VITE_APPWRITE_DATABASE_ID=6943bf0e0003291f8c35
-EOF
-```
-
-2. Starte den Server neu:
-```bash
-npm run dev
-```
-
-3. Überprüfe die Browser-Konsole auf die Debug-Ausgaben
-
-Viel Erfolg! 🚀
-

README.md

@@ -1,49 +1,42 @@
-# WOMS 2.0 - Work Order Management System
+# WOMS – Ticketsystem von WEBklar
 
-React-basiertes Ticket-Management-System mit Appwrite Backend.
+Internes Ticketsystem unter https://ticket.webklar.com: Tickets, Arbeitsblätter mit
+Zeiterfassung, Kunden und Leads, Website-Projekte, Planboard und Rechnungen (nur
+anzeigen; Rechnungen werden in InvoiceNinja geschrieben).
+React/Vite im Browser, Daten in Appwrite (Projekt `6a1058610003c5a13a05`,
+Datenbank `woms-database`, API unter `https://ticket.webklar.com/v1`).
 
-## 🚀 Schnellstart
+## Entwickeln und live stellen
 
-### 1. Dependencies installieren
-```bash
-npm install
-```
+- Lokal starten: siehe [LOCAL_DEV.md](./LOCAL_DEV.md) (Vite-Proxy + `.env.local`).
+- Live ist der Branch `test` im Gitea-Repo `JUSN/tickte-system`. Ein Push löst
+  auf dem Server Build und Deploy aus.
+- Achtung: Der Webhook baut **jeden** gepushten Branch und stellt ihn live.
+  Feature-Branches deshalb nicht pushen; live geht es mit
+  `git push origin <branch>:test`.
 
-### 2. Appwrite einrichten
+## Datenmodell (Kurzfassung)
 
-**Wichtig:** Für eine detaillierte Schritt-für-Schritt-Anleitung siehe [APPWRITE_SETUP.md](./APPWRITE_SETUP.md)
+Datum speichert WOMS als Text `dd.mm.yyyy`, Uhrzeiten als `hhmm` (z. B. `0930`).
 
-Kurzfassung:
-1. Erstelle ein Appwrite-Projekt auf [cloud.appwrite.io](https://cloud.appwrite.io)
-2. Erstelle eine `.env` Datei im Root-Verzeichnis:
-```env
-VITE_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
-VITE_APPWRITE_PROJECT_ID=deine-project-id-hier
-VITE_APPWRITE_DATABASE_ID=woms-database
-```
-3. Folge der detaillierten Anleitung in `APPWRITE_SETUP.md` um die Datenbank-Struktur zu erstellen
+| Collection | Inhalt | Wichtige Felder |
+|---|---|---|
+| `workorders` | Tickets | `woid` (fortlaufend ab 10000), `topic`, `details`, `status`, `priority`, `type` (Webpage, Migration, Project, Akquise), `serviceType`, `customerId`/`customerName`, `assignedTo`/`assignedName`, `requestedBy`, `startDate`/`startTime`/`endTime`, `deadline` |
+| `worksheets` | Arbeitsblätter | `wsid` (fortlaufend ab 100000), `woid` + `workorderId`, `employeeId`/`employeeName`, `serviceType`, `oldStatus`/`newStatus`, `totalTime` (Minuten), `startDate`/`startTime`/`endDate`/`endTime`, `details`, `isComment`, `countsToPlan` (Abo-Stunden) |
+| `customers` | Kunden und Leads | `code` (Kundennummer), `name`/`companyName`, `customerStatus` (z. B. lead, customer, lost), `archived`, Rechnungsadresse, `invoiceNinjaClientId`, Portal-Zugang |
+| `employees` | Mitarbeiter | `userId` (Appwrite-Benutzer), `displayName`, `email`, `shortcode` (Kürzel) |
+| `websiteProjects` | Website-Projekte und Vorschauen | `customerId` (steuert, was der Kunde im Portal sieht), `ticketId` (Ziel der Git-Push-Arbeitsblätter), Subdomain, Repo |
+| `leads`, `leadPipeline`, `leadSettings` | Lead-Automatik | Recherche-Ergebnisse, Pipeline-Schritte, Sucheinstellungen |
+| `roadmaps`, `roadmapNodes` | Projektpläne | Plan mit Schritten, verknüpft mit einem Ticket |
+| `config` | alte Einstellungen | wird von WOMS nicht mehr gelesen (Prioritäten, alte Listen) |
 
-### 3. App starten
-```bash
-npm run dev
-```
+Zusammenspiel mit anderen Systemen:
 
-Die App läuft dann auf `http://localhost:5173`
-
-## 📚 Dokumentation
-
-- **[APPWRITE_SETUP.md](./APPWRITE_SETUP.md)** - Detaillierte Anleitung zur Appwrite-Einrichtung
-  - Schritt-für-Schritt Setup
-  - Datenbank-Schema
-  - Berechtigungen
-  - Fehlerbehebung
-
-## Features
-
-- Ticket-Erstellung und -Verwaltung
-- Status-Tracking (Open, Occupied, Assigned, Awaiting, Closed)
-- Prioritäts-Management (Low, Normal, High, Critical)
-- Filter und Suche
-- Datei-Uploads
-- Dashboard mit Statistiken
-- Planboard für Terminplanung
+- **Kundenportal** (project.webklar.com): legt bei jedem Git-Push ein Arbeitsblatt an
+  (`employeeId` `gitea`, `serviceType` `GIT`, ohne Beginn). Die Zeit wird in WOMS
+  nachgetragen, danach zählt sie als Arbeitszeit. Termine aus der Rechnungsanalyse
+  landen am Akquise-Ticket des Kunden und erscheinen im Planboard. Kunden-, Mitarbeiter-
+  und Projektverwaltung laufen über die Admin-API des Portals.
+- **ticket-integrations** (`/api/integrations`): Proxy zu InvoiceNinja (Rechnungen
+  anzeigen, Kunden verknüpfen). Die Paperless-Routen dort nutzt WOMS nicht mehr;
+  Paperless selbst ist gestoppt.

WOID_ATTRIBUTE_SETUP.md

@@ -1,141 +0,0 @@
-# WOID Attribut für workorders Collection
-
-## Was ist die WOID?
-
-Die **WOID (Work Order ID)** ist eine **5-stellige Zahl** (10000-99999), die jedes Ticket eindeutig identifiziert.
-
-Beispiele: `10234`, `54321`, `99999`
-
-## Appwrite Setup
-
-Das `woid` Attribut muss zur `workorders` Collection hinzugefügt werden:
-
-### Schritt 1: Öffne Appwrite
-
-1. Gehe zu: `https://appwrite.webklar.com`
-2. Öffne dein Projekt: **woms** (ID: `693d9f37000b35267f1b`)
-3. Gehe zu **Databases** → **woms-database** (ID: `6943bf0e0003291f8c35`)
-4. Öffne die Collection: **workorders** (ID: `6943bf7d001901baa60c`)
-
-### Schritt 2: Erstelle das woid Attribut
-
-1. Klicke auf **Attributes** Tab
-2. Klicke auf **Create Attribute**
-3. Wähle **String** als Typ
-4. Konfiguration:
-   - **Attribute Key**: `woid`
-   - **Size**: 10
-   - **Required**: ❌ Nein (für bestehende Tickets ohne WOID)
-   - **Array**: ❌ Nein
-   - **Default Value**: (leer lassen)
-
-5. Klicke auf **Create**
-
-### Schritt 3: Optional - Index erstellen
-
-Für schnellere Suche nach WOID:
-
-1. Gehe zum **Indexes** Tab
-2. Klicke auf **Create Index**
-3. Konfiguration:
-   - **Index Key**: `woid_index`
-   - **Type**: Key
-   - **Attributes**: Wähle `woid`
-   - **Order**: ASC
-
-4. Klicke auf **Create**
-
-## Wie funktioniert die WOID?
-
-### Automatische Generierung
-
-Beim Erstellen eines neuen Tickets wird automatisch eine 5-stellige WOID generiert:
-
-```javascript
-// Beispiel: 12345, 54321, 99999
-const generateWOID = () => {
-  const timestamp = Date.now().toString()
-  const random = Math.floor(Math.random() * 90000) + 10000
-  const combined = (parseInt(timestamp.slice(-5)) + random) % 90000 + 10000
-  return combined.toString().padStart(5, '0')
-}
-```
-
-### Anzeige in der App
-
-- **Ticket-Liste**: Zeigt die WOID in der ersten Spalte
-- **Ticket-Details**: WOID im Header
-- **Filter**: Suche nach WOID möglich
-
-### Format
-
-- **Länge**: Immer 5 Zeichen
-- **Typ**: Nur Zahlen (0-9)
-- **Bereich**: 10000-99999
-- **Beispiele**: `10234`, `54321`, `99999`
-
-## Bestehende Tickets
-
-Tickets die vor diesem Update erstellt wurden, haben möglicherweise keine WOID.
-
-**Fallback:** Wenn keine WOID vorhanden ist, werden die letzten 5 Zeichen der Document ID angezeigt.
-
-## Fehlerbehebung
-
-### "Unknown attribute: woid"
-
-**Problem:** Das `woid` Attribut existiert nicht in der Collection.
-
-**Lösung:** Folge Schritt 2 oben, um das Attribut zu erstellen.
-
-### WOID zeigt Buchstaben
-
-**Problem:** Alte Tickets haben keine WOID und verwenden den Fallback (Document ID).
-
-**Lösung:** 
-1. Erstelle das `woid` Attribut (Schritt 2)
-2. Neue Tickets bekommen automatisch eine WOID
-3. Optional: Bestehende Tickets manuell aktualisieren
-
-### WOID Duplikate
-
-**Problem:** Zwei Tickets haben die gleiche WOID (sehr unwahrscheinlich).
-
-**Lösung:** Der Algorithmus verwendet Timestamp + Zufallszahl für Eindeutigkeit. Bei Millionen von Tickets könnte theoretisch eine Kollision auftreten.
-
-**Verbesserung:** Verwende einen Index mit `unique: true` und behandle Fehler beim Erstellen.
-
-## Technische Details
-
-### Datentyp in Appwrite
-
-- **String** (nicht Integer), weil:
-  - Führende Nullen möglich (z.B. `00123`)
-  - Einfacher zu suchen und zu filtern
-  - Kompatibel mit verschiedenen Formaten
-
-### Speicherung
-
-```javascript
-workorderData = {
-  // ...
-  woid: "12345", // String mit 5 Ziffern
-  // ...
-}
-```
-
-### Anzeige
-
-```javascript
-// In TicketRow.jsx
-<div>{ticket.woid || ticket.$id?.slice(-5)}</div>
-```
-
-## Fertig!
-
-Nach dem Erstellen des `woid` Attributs:
-- ✅ Neue Tickets bekommen automatisch eine 5-stellige WOID
-- ✅ WOID wird in der Ticket-Liste angezeigt
-- ✅ Suche nach WOID funktioniert
-- ✅ Keine Buchstaben mehr in der WOID
-

WORKORDER_ATTRIBUTES_FIX.md

@@ -1,107 +0,0 @@
-# Workorder Collection Attribute beheben
-
-Der Fehler "Unknown attribute: 'status'" bedeutet, dass das Attribut `status` in deiner `workorders` Collection fehlt.
-
-## Problem
-
-Die Collection `workorders` (ID: `6943bf7d001901baa60c`) hat nicht alle benötigten Attribute.
-
-## Lösung: Attribute hinzufügen
-
-1. Gehe zu `https://appwrite.webklar.com`
-2. Öffne dein Projekt **woms**
-3. Gehe zu **Databases** → **woms-database** → **workorders**
-4. Klicke auf **Attributes** Tab
-5. Füge die fehlenden Attribute hinzu:
-
-### Erforderliche Attribute (Required):
-
-| Attribut Name | Typ | Größe | Required | Default |
-|--------------|-----|-------|----------|---------|
-| `topic` | string | 255 | ✓ | - |
-| `status` | string | 50 | ✓ | `Open` |
-| `priority` | integer | - | ✓ | `1` |
-
-### Optionale Attribute:
-
-| Attribut Name | Typ | Größe | Required |
-|--------------|-----|-------|----------|
-| `type` | string | 50 | - |
-| `systemType` | string | 50 | - |
-| `responseLevel` | string | 50 | - |
-| `serviceType` | string | 50 | - |
-| `customerId` | string | 50 | - |
-| `customerName` | string | 255 | - |
-| `customerLocation` | string | 255 | - |
-| `requestedBy` | string | 255 | - |
-| `requestedFor` | string | 255 | - |
-| `startDate` | string | 50 | - |
-| `startTime` | string | 10 | - |
-| `deadline` | string | 50 | - |
-| `endTime` | string | 10 | - |
-| `estimate` | string | 50 | - |
-| `mailCopyTo` | string | 255 | - |
-| `sendNotification` | boolean | - | - |
-| `details` | string | 10000 | - |
-| `assignedTo` | string | 50 | - |
-| `assignedName` | string | 255 | - |
-| `approvalStatus` | string | 50 | - |
-| `woid` | string | 50 | - |
-| `createdAt` | datetime | - | - |
-
-## Schritt-für-Schritt
-
-### 1. Status hinzufügen (wichtig!)
-
-1. Klicke auf **Create Attribute**
-2. **Key**: `status`
-3. **Type**: `String`
-4. **Size**: `50`
-5. **Required**: ✓ (aktivieren)
-6. **Default**: `Open`
-7. **Array**: Nein
-8. Klicke auf **Create**
-
-### 2. Priority hinzufügen (wichtig!)
-
-1. Klicke auf **Create Attribute**
-2. **Key**: `priority`
-3. **Type**: `Integer`
-4. **Required**: ✓ (aktivieren)
-5. **Default**: `1`
-6. Klicke auf **Create**
-
-### 3. Topic hinzufügen (wichtig!)
-
-1. Klicke auf **Create Attribute**
-2. **Key**: `topic`
-3. **Type**: `String`
-4. **Size**: `255`
-5. **Required**: ✓ (aktivieren)
-6. Klicke auf **Create**
-
-### 4. Weitere Attribute hinzufügen
-
-Wiederhole den Prozess für alle anderen Attribute aus der Liste oben.
-
-## Überprüfung
-
-Nach dem Hinzufügen aller Attribute:
-
-1. Stelle sicher, dass mindestens diese drei Attribute existieren:
-   - ✓ `topic` (string, required)
-   - ✓ `status` (string, required, default: "Open")
-   - ✓ `priority` (integer, required, default: 1)
-
-2. Versuche erneut, ein Ticket zu erstellen
-
-## Wenn Attribute bereits existieren
-
-Falls die Attribute bereits existieren, aber andere Namen haben:
-
-1. Überprüfe die Attributnamen in Appwrite
-2. Teile mir die tatsächlichen Attributnamen mit
-3. Ich passe den Code entsprechend an
-
-Viel Erfolg! 🚀
-

WORKSHEETS_COLLECTION_SETUP.md

@@ -1,210 +0,0 @@
-# Worksheets Collection Setup
-
-## 📋 Was ist ein Worksheet (WSID)?
-
-Ein **Worksheet** ist ein **Arbeitsschritt-Eintrag** für einen Work Order (Ticket). Jedes Mal, wenn ein Techniker an einem Ticket arbeitet, wird ein neues Worksheet erstellt.
-
-### Unterschied: WOID vs WSID
-
-| Konzept | Beschreibung | Beispiel |
-|---------|--------------|----------|
-| **WOID** (Work Order ID) | Das Haupt-Ticket | 59203 |
-| **WSID** (Work Sheet ID) | Einzelner Arbeitsschritt | 100001 |
-
-**Beziehung:** Ein WOID kann **viele WSIDs** haben (1:n)
-
-### Beispiel aus der Praxis:
-
-```
-Ticket WOID 59203: "Router-Problem bei Kunde XYZ"
-
-├── WSID 100001 (29.12.2025, 10:00-10:30, Max M.)
-│   └── "Fernanalyse durchgeführt, Router neu gestartet"
-│       Status: Open → Occupied
-│
-├── WSID 100002 (29.12.2025, 14:00-14:45, Max M.)
-│   └── "Firmware Update durchgeführt"
-│       Status: Occupied → Assigned
-│
-└── WSID 100003 (30.12.2025, 09:00-09:15, Lisa S.)
-    └── "Vor-Ort-Check: Alles funktioniert"
-        Status: Assigned → Closed
-```
-
-**Gesamtarbeitszeit für WOID 59203:** 30 + 45 + 15 = **90 Minuten**
-
----
-
-## 🔧 Appwrite Collection einrichten
-
-### Collection erstellen
-
-1. Gehe zu **Appwrite Dashboard** → **Databases** → `woms-database`
-2. Klicke auf **Create Collection**
-3. **Collection ID:** `worksheets`
-4. **Name:** `Work Sheets`
-
-### Attribute hinzufügen
-
-| Attribut Name | Typ | Größe | Required | Array | Default | Beschreibung |
-|--------------|-----|-------|----------|-------|---------|--------------|
-| `wsid` | string | 10 | ✓ | - | - | Work Sheet ID (6-stellig, z.B. "100000") |
-| `woid` | string | 10 | ✓ | - | - | Verknüpfter Work Order (z.B. "59203") |
-| `workorderId` | string | 50 | ✓ | - | - | Appwrite Document ID des Work Orders |
-| `employeeId` | string | 50 | ✓ | - | - | ID des Mitarbeiters (aus Auth) |
-| `employeeName` | string | 255 | ✓ | - | - | Name des Mitarbeiters |
-| `employeeShort` | string | 10 | - | - | - | Kürzel (z.B. "KNSO") |
-| `serviceType` | string | 50 | ✓ | - | `Remote` | Remote/On Site/Off Site/COMMENT |
-| `oldStatus` | string | 50 | ✓ | - | - | Status vorher |
-| `newStatus` | string | 50 | ✓ | - | - | Status nachher |
-| `oldResponseLevel` | string | 50 | - | - | - | Response Level vorher |
-| `newResponseLevel` | string | 50 | - | - | - | Response Level nachher |
-| `totalTime` | integer | - | ✓ | - | `0` | Arbeitszeit in Minuten |
-| `startDate` | string | 50 | ✓ | - | - | Startdatum (dd.mm.yyyy) |
-| `startTime` | string | 10 | - | - | - | Startzeit (hhmm) |
-| `endDate` | string | 50 | ✓ | - | - | Enddatum (dd.mm.yyyy) |
-| `endTime` | string | 10 | - | - | - | Endzeit (hhmm) |
-| `details` | string | 10000 | ✓ | - | - | Beschreibung der Arbeit |
-| `isComment` | boolean | - | - | - | `false` | Nur Kommentar (keine Arbeitszeit) |
-| `createdAt` | datetime | - | - | - | - | Erstellungszeitpunkt |
-
-### Permissions einrichten
-
-1. Gehe zu **Settings** → **Permissions**
-2. Setze folgende Berechtigungen:
-
-**Read Access:**
-- ✅ `Users` (Alle eingeloggten Benutzer können Worksheets lesen)
-
-**Create Access:**
-- ✅ `Users` (Alle eingeloggten Benutzer können Worksheets erstellen)
-
-**Update Access:**
-- ✅ `Users` (Eigene Worksheets können bearbeitet werden)
-
-**Delete Access:**
-- ❌ Keine (Worksheets sollten nicht gelöscht werden - Audit Trail!)
-
-### Indexes erstellen
-
-Für bessere Performance:
-
-1. **Index 1: woid_index**
-   - Key: `woid`
-   - Type: `key`
-   - Order: `DESC`
-   - → Schnelles Finden aller Worksheets für einen Work Order
-
-2. **Index 2: employee_index**
-   - Key: `employeeId`
-   - Type: `key`
-   - Order: `DESC`
-   - → Schnelles Finden aller Worksheets eines Mitarbeiters
-
-3. **Index 3: date_index**
-   - Key: `startDate`
-   - Type: `key`
-   - Order: `DESC`
-   - → Zeitbasierte Abfragen
-
----
-
-## 🎯 WSID-Generierung
-
-### Regeln:
-- **6-stellige Zahlen** (100000, 100001, 100002, ...)
-- **Global eindeutig** (über alle Work Orders hinweg)
-- **Sequentiell aufsteigend**
-- **Nur Zahlen**, keine Buchstaben
-
-### Algorithmus:
-1. Finde höchste existierende WSID in der Datenbank
-2. Addiere +1
-3. Falls keine WSID existiert: Starte bei 100000
-
----
-
-## 📊 Verbesserungen gegenüber dem Original
-
-### 1. Automatische Zeitberechnung
-- System berechnet `totalTime` aus `startTime` und `endTime`
-- Manuelles Überschreiben möglich
-
-### 2. Arbeitszeit-Aggregation
-- Gesamtarbeitszeit pro WOID wird automatisch berechnet
-- Anzeige: "Gesamt: 90 Minuten (3 Worksheets)"
-
-### 3. Status-Historie
-- Komplette Historie: Wer hat wann welchen Status gesetzt?
-- Nachvollziehbarkeit
-
-### 4. Kommentar-Funktion
-- Worksheets mit `isComment = true` zählen keine Arbeitszeit
-- Reine Notizen/Updates
-
-### 5. Mitarbeiter-Zuordnung
-- Jedes Worksheet ist einem Mitarbeiter zugeordnet
-- Report: Wer hat wie viel Zeit investiert?
-
----
-
-## 🔗 Integration in Work Orders
-
-### Beim Anzeigen eines Tickets:
-```javascript
-// Work Order laden
-const workorder = await getWorkorder(woid)
-
-// Alle Worksheets zu diesem Work Order laden
-const worksheets = await getWorksheets(woid)
-
-// Gesamtarbeitszeit berechnen
-const totalMinutes = worksheets.reduce((sum, ws) => sum + ws.totalTime, 0)
-```
-
-### Beim Erstellen eines Worksheets:
-1. Aktuellen Work Order Status holen
-2. Worksheet-Formular anzeigen (mit aktuellem Status als "old status")
-3. Worksheet speichern
-4. Work Order Status aktualisieren (auf "new status")
-
----
-
-## 📝 Workflow-Beispiel
-
-**Techniker Max öffnet Ticket 59203:**
-
-1. Klickt auf "Add Worksheet"
-2. System füllt aus:
-   - WOID: 59203
-   - Old Status: "Open"
-   - Employee: "Max Müller" (aus Login)
-   - Datum: heute
-3. Max trägt ein:
-   - Service Type: "Remote"
-   - New Status: "Occupied"
-   - Start: 10:00, End: 10:30 (→ automatisch 30 min)
-   - Details: "Router neu gestartet"
-4. System generiert WSID: 100001
-5. Work Order Status wird auf "Occupied" aktualisiert
-
----
-
-## ✅ Checkliste
-
-- [ ] Collection `worksheets` in Appwrite erstellt
-- [ ] Alle Attribute hinzugefügt
-- [ ] Permissions konfiguriert
-- [ ] Indexes erstellt
-- [ ] Collection ID in `.env` / `appwrite.js` eingetragen
-
----
-
-## 🚀 Nächste Schritte
-
-Nach dem Setup:
-1. `useWorksheets.js` Hook implementieren
-2. `CreateWorksheetModal.jsx` Komponente erstellen
-3. Worksheet-Liste in Ticket-Details einbauen
-4. Zeitaggregation implementieren
-

WSID_ATTRIBUTE_SETUP.md

@@ -1,119 +0,0 @@
-# WSID Attribut Hinzufügen
-
-Diese Anleitung zeigt dir, wie du das **WSID (Work Sheet ID)** Attribut zur `workorders` Collection hinzufügst.
-
-## Was ist WSID?
-
-- **WSID** = Work Sheet ID
-- **Format**: 6-stellige Nummer (100000-999999)
-- **Funktion**: Sequentielle ID ähnlich wie WOID, aber mit 6 Stellen
-- **Beispiele**: 100000, 100001, 100002, etc.
-
-## Schritt-für-Schritt Anleitung
-
-### 1. Appwrite Dashboard öffnen
-
-1. Gehe zu https://appwrite.webklar.com (oder deine Appwrite-Instanz)
-2. Logge dich ein
-3. Öffne dein Projekt **woms**
-
-### 2. Zur workorders Collection navigieren
-
-1. Klicke auf **Databases** im linken Menü
-2. Wähle die Datenbank **woms-database** (ID: `6943bf0e0003291f8c35`)
-3. Klicke auf die Collection **workorders** (ID: `6943bf7d001901baa60c`)
-
-### 3. WSID Attribut erstellen
-
-1. Klicke auf den Tab **Attributes**
-2. Klicke auf **Create Attribute**
-3. Wähle **String** als Typ
-4. Fülle die Felder wie folgt aus:
-
-**Attribut-Konfiguration:**
-- **Attribute ID**: `wsid`
-- **Attribute Name**: `wsid`
-- **Size**: `10` (für 6-stellige Zahlen + Reserve)
-- **Required**: ❌ Nein (nicht required, damit alte Tickets ohne WSID weiter funktionieren)
-- **Array**: ❌ Nein
-- **Default Value**: Leer lassen
-
-5. Klicke auf **Create**
-
-### 4. Index für WSID erstellen (Optional, aber empfohlen)
-
-Ein Index verbessert die Performance beim Suchen und Filtern:
-
-1. Klicke auf den Tab **Indexes**
-2. Klicke auf **Create Index**
-3. Fülle die Felder wie folgt aus:
-
-**Index-Konfiguration:**
-- **Key**: `wsid`
-- **Type**: `key`
-- **Attributes**: Wähle `wsid`
-- **Order**: `ASC` (aufsteigend)
-
-4. Klicke auf **Create**
-
-### 5. Fertig! ✅
-
-Das WSID-Attribut ist jetzt in deiner Collection verfügbar. Die Anwendung wird automatisch:
-
-- Für neue Tickets eine sequentielle WSID generieren (startend bei 100000)
-- Die WSID in der Ticket-Liste anzeigen
-- Die WSID im Detail-View anzeigen
-
-## Hinweise
-
-### Sequentielle Generierung
-
-Die WSID wird ähnlich wie WOID automatisch generiert:
-
-```javascript
-// Beispiel:
-Erstes Ticket:  WSID = 100000
-Zweites Ticket: WSID = 100001
-Drittes Ticket: WSID = 100002
-// etc.
-```
-
-### Unterschied WOID vs WSID
-
-| Feld | Stellen | Start | Format | Beispiel |
-|------|---------|-------|--------|----------|
-| WOID | 5 | 10000 | String | "10000" |
-| WSID | 6 | 100000 | String | "100000" |
-
-### Alte Tickets
-
-Tickets, die vor dem Hinzufügen des WSID-Attributs erstellt wurden, haben keine WSID. In der UI wird dann "-" angezeigt.
-
-## Troubleshooting
-
-### Problem: Attribut kann nicht erstellt werden
-
-**Lösung**: 
-- Überprüfe, ob das Attribut `wsid` nicht bereits existiert
-- Stelle sicher, dass du die richtigen Berechtigungen hast (Admin)
-
-### Problem: WSID wird nicht angezeigt
-
-**Lösung**:
-1. Überprüfe, ob das Attribut erfolgreich erstellt wurde
-2. Lade die Seite neu (Strg+F5 / Cmd+Shift+R)
-3. Erstelle ein neues Ticket zum Testen
-
-### Problem: WSID startet nicht bei 100000
-
-**Lösung**:
-- Das ist normal, wenn bereits Tickets mit WSID existieren
-- Die WSID wird immer sequentiell von der höchsten bestehenden WSID weitergezählt
-
-## Support
-
-Bei Fragen oder Problemen:
-1. Überprüfe die Appwrite Logs
-2. Schaue in die Browser Console (F12)
-3. Überprüfe, ob alle Berechtigungen korrekt gesetzt sind
-

WSID_IMPLEMENTATION_SUMMARY.md

@@ -1,325 +0,0 @@
-# WSID Implementation - Zusammenfassung
-
-## ✅ Was wurde implementiert?
-
-Das **WSID (Work Sheet ID) System** wurde vollständig implementiert, basierend auf dem Original NetWEB Systems WOMS 2.0.
-
----
-
-## 📋 Implementierte Features
-
-### 1. **Worksheets Collection** ✅
-- Separate Collection für Arbeitsschritte
-- 6-stellige WSID (100000, 100001, ...)
-- Sequentielle, globale Nummerierung
-- Beziehung zu Work Orders via `woid` und `workorderId`
-
-### 2. **WSID-Generierung** ✅
-- Automatische Generierung beim Erstellen eines Worksheets
-- Sucht höchste existierende WSID und zählt +1
-- Startet bei 100000 wenn keine Worksheets existieren
-- Nur Zahlen, keine Buchstaben
-
-### 3. **Worksheet-Erstellung** ✅
-- Modal-Dialog zum Erstellen neuer Worksheets
-- Felder:
-  - Service Type (Remote/On Site/Off Site/COMMENT)
-  - Status-Änderung (Old Status → New Status)
-  - Response Level-Änderung
-  - Arbeitszeit (manuell oder automatisch berechnet)
-  - Start/End Datum & Zeit
-  - Details (Arbeitsbeschreibung)
-  - Kommentar-Flag (ohne Zeiterfassung)
-- Verknüpfung mit aktuellem Benutzer
-
-### 4. **Worksheet-Anzeige** ✅
-- Liste aller Worksheets für ein Ticket
-- Zeitstrahl-Darstellung (Timeline)
-- Anzeige von:
-  - WSID
-  - Mitarbeiter (Name + Kürzel)
-  - Arbeitszeit
-  - Service Type
-  - Status-Änderungen
-  - Details
-- Unterscheidung zwischen Worksheets und Kommentaren
-
-### 5. **Zeitaggregation** ✅
-- Gesamtarbeitszeit pro Ticket
-- Durchschnittszeit pro Worksheet
-- Arbeitszeit pro Mitarbeiter
-- Anzahl Worksheets
-
-### 6. **Status-Historie** ✅
-- Chronologische Auflistung aller Status-Änderungen
-- Wer hat wann welchen Status gesetzt
-- Nachvollziehbarkeit aller Änderungen
-
-### 7. **Statistiken & Reports** ✅
-- **Gesamtübersicht:**
-  - Anzahl Worksheets
-  - Gesamtarbeitszeit
-  - Anzahl Kommentare
-  - Durchschnitt pro Worksheet
-  
-- **Nach Mitarbeiter:**
-  - Arbeitszeit pro Person
-  - Anzahl Worksheets pro Person
-  - Mitarbeiter-Kürzel
-  
-- **Service Type Verteilung:**
-  - Wie viele Remote/On Site/etc.
-  
-- **Status-Historie Tabelle:**
-  - Alle Status-Änderungen chronologisch
-  - Mit Datum, Zeit, Mitarbeiter
-
-### 8. **Automatische Zeitberechnung** ✅
-- System berechnet automatisch Arbeitszeit aus Start- und Endzeit
-- Manuelles Überschreiben möglich
-- Unterstützt Overnight-Zeiten (z.B. 23:00 - 01:00)
-
-### 9. **Kommentar-Funktion** ✅
-- Worksheets können als "Nur Kommentar" markiert werden
-- Zählen nicht zur Arbeitszeit
-- Für Notizen, Updates, Kommunikation
-
----
-
-## 🔧 Technische Details
-
-### Architektur
-
-```
-Work Order (WOID) 1:n Worksheets (WSID)
-     ↓                      ↓
-  workorders          worksheets
-  Collection          Collection
-```
-
-### Collections
-
-**workorders:**
-- Enthält WOID (5-stellig)
-- Enthält KEINE WSID mehr ✅
-- Referenz: `ticket.woid`
-
-**worksheets:**
-- Enthält WSID (6-stellig)
-- Referenziert WOID
-- Referenziert workorderId (Appwrite Document ID)
-- Enthält Mitarbeiter-Info
-- Enthält Zeiterfassung
-- Enthält Status-Änderungen
-
-### Datenfluss
-
-1. **Ticket öffnen:**
-   - System lädt Work Order
-   - System lädt alle Worksheets mit `woid = ticket.woid`
-
-2. **Worksheet erstellen:**
-   - Benutzer klickt "Add Worksheet"
-   - System generiert neue WSID
-   - System speichert Worksheet
-   - Wenn Status geändert → Work Order wird aktualisiert
-
-3. **Statistiken:**
-   - Werden in Echtzeit aus Worksheets berechnet
-   - Keine Duplikate, keine Caching-Probleme
-
----
-
-## 📂 Neue Dateien
-
-| Datei | Beschreibung |
-|-------|--------------|
-| `src/hooks/useWorksheets.js` | Hook für Worksheet-Operationen |
-| `src/components/CreateWorksheetModal.jsx` | Modal zum Erstellen |
-| `src/components/WorksheetList.jsx` | Liste aller Worksheets |
-| `src/components/WorksheetStats.jsx` | Statistiken & Reports |
-| `WORKSHEETS_COLLECTION_SETUP.md` | Setup-Anleitung |
-| `WSID_IMPLEMENTATION_SUMMARY.md` | Diese Datei |
-
----
-
-## 🔄 Geänderte Dateien
-
-| Datei | Änderung |
-|-------|----------|
-| `src/hooks/useWorkorders.js` | WSID-Generierung **entfernt** ✅ |
-| `src/components/TicketRow.jsx` | Worksheet-Integration hinzugefügt |
-| `src/lib/appwrite.js` | WORKSHEETS Collection ID hinzugefügt |
-| `APPWRITE_SETUP.md` | WSID aus workorders entfernt |
-
----
-
-## 🚀 Setup-Schritte
-
-### 1. Collection in Appwrite erstellen
-
-```bash
-1. Gehe zu Appwrite Dashboard → Databases → woms-database
-2. Erstelle Collection "worksheets"
-3. Füge alle Attribute hinzu (siehe WORKSHEETS_COLLECTION_SETUP.md)
-4. Setze Permissions (Users: Read, Create, Update)
-5. Erstelle Indexes (woid, employeeId, startDate)
-6. Kopiere Collection ID
-```
-
-### 2. Collection ID in Code eintragen
-
-```javascript
-// src/lib/appwrite.js
-export const COLLECTIONS = {
-  WORKORDERS: '6943bf7d001901baa60c',
-  WORKSHEETS: 'DEINE_COLLECTION_ID_HIER', // ← Hier eintragen!
-  // ...
-}
-```
-
-### 3. WSID aus workorders Collection entfernen (Optional)
-
-Falls du bereits `wsid` als Attribut in der `workorders` Collection hast:
-
-```bash
-1. Gehe zu Appwrite Dashboard → workorders Collection
-2. Gehe zu Attributes
-3. Lösche Attribut "wsid" (falls vorhanden)
-```
-
-⚠️ **Achtung:** Stelle sicher, dass keine wichtigen Daten verloren gehen!
-
----
-
-## 📊 Verbesserungen gegenüber Original
-
-| Feature | Original | Neu |
-|---------|----------|-----|
-| **WSID-Generierung** | Manuell/unklar | Automatisch, sequentiell |
-| **Zeitberechnung** | Manuell | Automatisch + manuell |
-| **Statistiken** | Keine/begrenzt | Umfassend (Mitarbeiter, Service Type, Historie) |
-| **Kommentare** | Unklar | Eigener Typ (ohne Zeit) |
-| **Status-Historie** | Nicht dokumentiert | Vollständig nachvollziehbar |
-| **Zeitaggregation** | Manuell | Automatisch |
-| **Multi-Mitarbeiter** | Schwierig | Einfach trackbar |
-
----
-
-## 🎯 Verwendung
-
-### Worksheet erstellen
-
-1. Öffne ein Ticket (Lock-Icon klicken)
-2. Klicke "Add Worksheet"
-3. Fülle Formular aus:
-   - Service Type wählen
-   - Neuen Status wählen
-   - Start/End Zeit eingeben (automatische Berechnung)
-   - Details schreiben
-4. Klicke "CREATE NOW"
-
-### Statistiken ansehen
-
-Wenn Worksheets vorhanden sind, werden automatisch angezeigt:
-- Gesamtübersicht (oben)
-- Mitarbeiter-Statistiken
-- Service Type Verteilung
-- Status-Historie (falls Änderungen)
-
-### Arbeitszeit tracken
-
-Jedes Worksheet erfasst:
-- Wer hat gearbeitet
-- Wann (Datum + Zeit)
-- Wie lange
-- Was wurde gemacht
-- Welcher Status wurde gesetzt
-
-**Beispiel:**
-
-```
-WOID 59203: "Router-Problem"
-├─ WSID 100001: Max, 30min, Open → Occupied, "Fernanalyse"
-├─ WSID 100002: Max, 45min, Occupied → Assigned, "Firmware Update"
-└─ WSID 100003: Lisa, 15min, Assigned → Closed, "Vor-Ort-Check OK"
-
-Gesamtzeit: 90 Minuten
-Mitarbeiter: Max (75min), Lisa (15min)
-```
-
----
-
-## ✅ Checkliste
-
-- [x] Worksheets Collection Dokumentation erstellt
-- [x] useWorksheets Hook mit WSID-Generierung
-- [x] CreateWorksheetModal UI-Komponente
-- [x] WorksheetList Komponente
-- [x] WorksheetStats Komponente (Statistiken)
-- [x] Integration in TicketRow
-- [x] WSID aus workorders entfernt
-- [x] Automatische Zeitberechnung
-- [x] Status-Historie
-- [x] Mitarbeiter-Tracking
-- [x] Kommentar-Funktion
-- [x] Service Type Tracking
-- [ ] **Collection in Appwrite erstellen** ← Das musst DU machen!
-- [ ] **Collection ID eintragen** ← Das musst DU machen!
-
----
-
-## 🐛 Testing
-
-Nach dem Setup:
-
-1. **Worksheet erstellen:**
-   ```
-   - Öffne ein Ticket
-   - Klicke "Add Worksheet"
-   - Fülle Formular aus
-   - Speichern
-   - → WSID sollte 100000 sein (erste)
-   ```
-
-2. **Zweites Worksheet:**
-   ```
-   - Erstelle weiteres Worksheet
-   - → WSID sollte 100001 sein
-   ```
-
-3. **Statistiken prüfen:**
-   ```
-   - Öffne Ticket mit mehreren Worksheets
-   - Statistiken sollten angezeigt werden
-   - Gesamtzeit sollte korrekt sein
-   ```
-
-4. **Status-Änderung:**
-   ```
-   - Erstelle Worksheet mit Status-Änderung
-   - Work Order Status sollte aktualisiert werden
-   - Historie sollte angezeigt werden
-   ```
-
----
-
-## 📖 Weiterführende Dokumentation
-
-- **Setup:** `WORKSHEETS_COLLECTION_SETUP.md`
-- **Appwrite:** `APPWRITE_SETUP.md`
-- **Code:** Siehe Inline-Kommentare in den Komponenten
-
----
-
-## 🎉 Fertig!
-
-Das WSID-System ist vollständig implementiert und einsatzbereit!
-
-**Nächste Schritte:**
-1. Collection in Appwrite erstellen
-2. Collection ID eintragen
-3. Testen!
-
-Bei Fragen: Siehe Dokumentation oder Code-Kommentare.
-

WSID_QUICKSTART.md

@@ -1,195 +0,0 @@
-# WSID System - Quick Start Guide
-
-## 🚀 Schnellstart in 5 Minuten
-
-### Schritt 1: Collection in Appwrite erstellen
-
-1. Gehe zu **https://appwrite.webklar.com**
-2. Login mit deinen Credentials
-3. Öffne Projekt **woms**
-4. Gehe zu **Databases** → **woms-database**
-5. Klicke **Create Collection**
-   - Collection ID: `worksheets`
-   - Name: `Work Sheets`
-6. Klicke **Create**
-
-### Schritt 2: Attribute hinzufügen
-
-Klicke auf **Attributes** und füge folgende Attribute hinzu:
-
-#### Required Attributes (Pflicht):
-
-```
-1. wsid           | String  | Size: 10  | Required: ✓ | Default: -
-2. woid           | String  | Size: 10  | Required: ✓ | Default: -
-3. workorderId    | String  | Size: 50  | Required: ✓ | Default: -
-4. employeeId     | String  | Size: 50  | Required: ✓ | Default: -
-5. employeeName   | String  | Size: 255 | Required: ✓ | Default: -
-6. serviceType    | String  | Size: 50  | Required: ✓ | Default: Remote
-7. oldStatus      | String  | Size: 50  | Required: ✓ | Default: -
-8. newStatus      | String  | Size: 50  | Required: ✓ | Default: -
-9. totalTime      | Integer | -         | Required: ✓ | Default: 0
-10. startDate     | String  | Size: 50  | Required: ✓ | Default: -
-11. endDate       | String  | Size: 50  | Required: ✓ | Default: -
-12. details       | String  | Size: 10000 | Required: ✓ | Default: -
-13. createdAt     | DateTime| -         | Required: - | Default: -
-```
-
-#### Optional Attributes (Optional):
-
-```
-14. employeeShort     | String  | Size: 10  | Required: - | Default: -
-15. oldResponseLevel  | String  | Size: 50  | Required: - | Default: -
-16. newResponseLevel  | String  | Size: 50  | Required: - | Default: -
-17. startTime         | String  | Size: 10  | Required: - | Default: -
-18. endTime           | String  | Size: 10  | Required: - | Default: -
-19. isComment         | Boolean | -         | Required: - | Default: false
-```
-
-### Schritt 3: Permissions setzen
-
-1. Gehe zu **Settings** → **Permissions**
-2. Setze folgende Berechtigungen:
-
-**Read Access:**
-- ✅ `Users` (All users)
-
-**Create Access:**
-- ✅ `Users` (All users)
-
-**Update Access:**
-- ✅ `Users` (All users)
-
-**Delete Access:**
-- ❌ Keine (für Audit Trail)
-
-### Schritt 4: Indexes erstellen
-
-Gehe zu **Indexes** und erstelle:
-
-1. **woid_index**
-   - Key: `woid`
-   - Type: `key`
-   - Order: `DESC`
-
-2. **employee_index**
-   - Key: `employeeId`
-   - Type: `key`
-   - Order: `DESC`
-
-3. **date_index**
-   - Key: `startDate`
-   - Type: `key`
-   - Order: `DESC`
-
-### Schritt 5: Collection ID kopieren
-
-1. Gehe zurück zur Collection-Übersicht
-2. Kopiere die **Collection ID** (z.B. `694xyz123abc456def789`)
-
-### Schritt 6: Collection ID im Code eintragen
-
-Öffne `src/lib/appwrite.js` und trage die Collection ID ein:
-
-```javascript
-export const COLLECTIONS = {
-  WORKORDERS: '6943bf7d001901baa60c',
-  CUSTOMERS: '694bd1fb002b2e583d13',
-  EMPLOYEES: '695280510031c6c6153b',
-  WORKSHEETS: '694xyz123abc456def789', // ← Hier deine Collection ID eintragen!
-  // ...
-}
-```
-
-### Schritt 7: Optional - WSID aus workorders entfernen
-
-Falls du bereits ein `wsid`-Attribut in der `workorders` Collection hast:
-
-1. Gehe zu **workorders** Collection
-2. Gehe zu **Attributes**
-3. Lösche Attribut `wsid` (falls vorhanden)
-
-⚠️ **Hinweis:** Stelle sicher, dass du ein Backup hast!
-
-### Schritt 8: Anwendung neu starten
-
-```bash
-# Terminal öffnen
-npm run dev
-```
-
-### Schritt 9: Testen!
-
-1. Öffne die Anwendung im Browser
-2. Gehe zu **Tickets**
-3. Öffne ein Ticket (Lock-Icon klicken)
-4. Klicke **"Add Worksheet"**
-5. Fülle das Formular aus:
-   - Service Type: `Remote`
-   - New Status: `Occupied`
-   - Start Time: `1000`
-   - End Time: `1030`
-   - Details: `Test-Worksheet`
-6. Klicke **"CREATE NOW"**
-
-**Erwartetes Ergebnis:**
-- WSID sollte `100000` sein
-- Worksheet sollte in der Liste erscheinen
-- Statistiken sollten angezeigt werden
-
----
-
-## ✅ Fertig!
-
-Das WSID-System ist jetzt einsatzbereit!
-
-### Nächste Schritte:
-
-- Erstelle weitere Worksheets
-- Prüfe Statistiken
-- Teste Status-Änderungen
-- Prüfe Zeitaggregation
-
----
-
-## 🐛 Troubleshooting
-
-### Problem: "Collection nicht gefunden"
-
-**Lösung:**
-- Überprüfe Collection ID in `src/lib/appwrite.js`
-- Stelle sicher, dass Collection wirklich existiert
-
-### Problem: "Unauthorized"
-
-**Lösung:**
-- Überprüfe Permissions in Appwrite
-- `Users` muss Read/Create Zugriff haben
-
-### Problem: "Attribute nicht gefunden"
-
-**Lösung:**
-- Überprüfe, ob alle Required Attributes erstellt wurden
-- Attribute-Namen müssen exakt übereinstimmen (case-sensitive!)
-
-### Problem: "WSID wird nicht generiert"
-
-**Lösung:**
-- Überprüfe Browser-Konsole auf Fehler
-- Stelle sicher, dass `wsid` Attribut existiert
-- Überprüfe, ob Collection ID korrekt ist
-
----
-
-## 📚 Weitere Dokumentation
-
-- **Detaillierte Setup-Anleitung:** `WORKSHEETS_COLLECTION_SETUP.md`
-- **Implementierungs-Details:** `WSID_IMPLEMENTATION_SUMMARY.md`
-- **Appwrite Setup:** `APPWRITE_SETUP.md`
-
----
-
-## 🎉 Viel Erfolg!
-
-Bei Fragen: Siehe ausführliche Dokumentation oder Code-Kommentare.
-

index.html

@@ -4,7 +4,6 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Webklar WOMS 2.0</title>
-    <link href="https://fonts.googleapis.com/css?family=Lato|Open+Sans" rel="stylesheet">
   </head>
   <body>
     <div id="root"></div>

node_modules/.bin/baseline-browser-mapping

@@ -1 +1,16 @@
-../baseline-browser-mapping/dist/cli.js
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../baseline-browser-mapping/dist/cli.js" "$@"
+else 
+  exec node  "$basedir/../baseline-browser-mapping/dist/cli.js" "$@"
+fi

node_modules/.bin/browserslist

@@ -1 +1,16 @@
-../browserslist/cli.js
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../browserslist/cli.js" "$@"
+else 
+  exec node  "$basedir/../browserslist/cli.js" "$@"
+fi

node_modules/.bin/esbuild

@@ -1 +1,16 @@
-../esbuild/bin/esbuild
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../esbuild/bin/esbuild" "$@"
+else 
+  exec node  "$basedir/../esbuild/bin/esbuild" "$@"
+fi

node_modules/.bin/jsesc

@@ -1 +1,16 @@
-../jsesc/bin/jsesc
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../jsesc/bin/jsesc" "$@"
+else 
+  exec node  "$basedir/../jsesc/bin/jsesc" "$@"
+fi

node_modules/.bin/json5

@@ -1 +1,16 @@
-../json5/lib/cli.js
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../json5/lib/cli.js" "$@"
+else 
+  exec node  "$basedir/../json5/lib/cli.js" "$@"
+fi

node_modules/.bin/loose-envify

@@ -1 +1,16 @@
-../loose-envify/cli.js
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../loose-envify/cli.js" "$@"
+else 
+  exec node  "$basedir/../loose-envify/cli.js" "$@"
+fi

node_modules/.bin/nanoid

@@ -1 +1,16 @@
-../nanoid/bin/nanoid.cjs
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../nanoid/bin/nanoid.cjs" "$@"
+else 
+  exec node  "$basedir/../nanoid/bin/nanoid.cjs" "$@"
+fi

node_modules/.bin/parser

@@ -1 +1,16 @@
-../@babel/parser/bin/babel-parser.js
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../@babel/parser/bin/babel-parser.js" "$@"
+else 
+  exec node  "$basedir/../@babel/parser/bin/babel-parser.js" "$@"
+fi

node_modules/.bin/rollup

@@ -1 +1,16 @@
-../rollup/dist/bin/rollup
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../rollup/dist/bin/rollup" "$@"
+else 
+  exec node  "$basedir/../rollup/dist/bin/rollup" "$@"
+fi

node_modules/.bin/semver

@@ -1 +1,16 @@
-../semver/bin/semver.js
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../semver/bin/semver.js" "$@"
+else 
+  exec node  "$basedir/../semver/bin/semver.js" "$@"
+fi

node_modules/.bin/update-browserslist-db

@@ -1 +1,16 @@
-../update-browserslist-db/cli.js
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../update-browserslist-db/cli.js" "$@"
+else 
+  exec node  "$basedir/../update-browserslist-db/cli.js" "$@"
+fi

node_modules/.bin/vite

@@ -1 +1,16 @@
-../vite/bin/vite.js
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../vite/bin/vite.js" "$@"
+else 
+  exec node  "$basedir/../vite/bin/vite.js" "$@"
+fi

node_modules/.package-lock.json

@@ -32,6 +32,7 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.5.tgz",
       "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.5",
@@ -275,17 +276,17 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@esbuild/darwin-arm64": {
+    "node_modules/@esbuild/win32-x64": {
       "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
-      "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
+      "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==",
       "cpu": [
-        "arm64"
+        "x64"
       ],
       "dev": true,
       "optional": true,
       "os": [
-        "darwin"
+        "win32"
       ],
       "engines": {
         "node": ">=12"
@@ -350,17 +351,30 @@
       "integrity": "sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==",
       "dev": true
     },
-    "node_modules/@rollup/rollup-darwin-arm64": {
+    "node_modules/@rollup/rollup-win32-x64-gnu": {
       "version": "4.53.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.53.5.tgz",
-      "integrity": "sha512-S87zZPBmRO6u1YXQLwpveZm4JfPpAa6oHBX7/ghSiGH3rz/KDgAu1rKdGutV+WUI6tKDMbaBJomhnT30Y2t4VQ==",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.53.5.tgz",
+      "integrity": "sha512-2NqKgZSuLH9SXBBV2dWNRCZmocgSOx8OJSdpRaEcRlIfX8YrKxUT6z0F1NpvDVhOsl190UFTRh2F2WDWWCYp3A==",
       "cpu": [
-        "arm64"
+        "x64"
       ],
       "dev": true,
       "optional": true,
       "os": [
-        "darwin"
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.53.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.53.5.tgz",
+      "integrity": "sha512-JRpZUhCfhZ4keB5v0fe02gQJy05GqboPOaxvjugW04RLSYYoB/9t2lx2u/tMs/Na/1NXfY8QYjgRljRpN+MjTQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
       ]
     },
     "node_modules/@tabler/icons": {
@@ -447,6 +461,7 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.27.tgz",
       "integrity": "sha512-cisd7gxkzjBKU2GgdYrTdtQx1SORymWyaAFhaxQPK9bYO9ot3Y5OikQRvY0VYQtvwjeQnizCINJAenh/V7MK2w==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.2.2"
@@ -523,6 +538,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -799,20 +815,6 @@
         }
       }
     },
-    "node_modules/fsevents": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
-      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
-      "hasInstallScript": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-      }
-    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -1133,6 +1135,7 @@
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -1144,6 +1147,7 @@
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.2"
@@ -1299,7 +1303,8 @@
       "version": "0.182.0",
       "resolved": "https://registry.npmjs.org/three/-/three-0.182.0.tgz",
       "integrity": "sha512-GbHabT+Irv+ihI1/f5kIIsZ+Ef9Sl5A1Y7imvS5RQjWgtTPfPnZ43JmlYI7NtCRDK9zir20lQpfg8/9Yd02OvQ==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/tr46": {
       "version": "0.0.3",
@@ -1347,6 +1352,7 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.21.tgz",
       "integrity": "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.21.3",
         "postcss": "^8.4.43",

node_modules/.vite/deps/_metadata.json

@@ -1,125 +1,125 @@
 {
-  "hash": "d78f2739",
-  "configHash": "b1cb6c91",
+  "hash": "91e90cf6",
+  "configHash": "eaf678ca",
   "lockfileHash": "4b2b8d7d",
-  "browserHash": "9a736d5a",
+  "browserHash": "114e306f",
   "optimized": {
     "react": {
       "src": "../../react/index.js",
       "file": "react.js",
-      "fileHash": "2dd90c89",
+      "fileHash": "c1394b31",
       "needsInterop": true
     },
     "react-dom": {
       "src": "../../react-dom/index.js",
       "file": "react-dom.js",
-      "fileHash": "8229fa46",
+      "fileHash": "e0cfaa25",
       "needsInterop": true
     },
     "react/jsx-dev-runtime": {
       "src": "../../react/jsx-dev-runtime.js",
       "file": "react_jsx-dev-runtime.js",
-      "fileHash": "6db368d6",
+      "fileHash": "4e6552af",
       "needsInterop": true
     },
     "react/jsx-runtime": {
       "src": "../../react/jsx-runtime.js",
       "file": "react_jsx-runtime.js",
-      "fileHash": "a8fbd3f7",
+      "fileHash": "326b9f6e",
       "needsInterop": true
     },
-    "appwrite": {
-      "src": "../../appwrite/dist/esm/sdk.js",
-      "file": "appwrite.js",
-      "fileHash": "a2fa5c99",
-      "needsInterop": false
-    },
-    "date-fns": {
-      "src": "../../date-fns/esm/index.js",
-      "file": "date-fns.js",
-      "fileHash": "157aa30f",
-      "needsInterop": false
-    },
-    "date-fns/locale": {
-      "src": "../../date-fns/esm/locale/index.js",
-      "file": "date-fns_locale.js",
-      "fileHash": "cd94d345",
-      "needsInterop": false
-    },
-    "react-dom/client": {
-      "src": "../../react-dom/client.js",
-      "file": "react-dom_client.js",
-      "fileHash": "8948be38",
-      "needsInterop": true
-    },
-    "react-icons/fa": {
-      "src": "../../react-icons/fa/index.esm.js",
-      "file": "react-icons_fa.js",
-      "fileHash": "c064e92c",
-      "needsInterop": false
-    },
-    "react-icons/fa6": {
-      "src": "../../react-icons/fa6/index.esm.js",
-      "file": "react-icons_fa6.js",
-      "fileHash": "0e64eca2",
-      "needsInterop": false
-    },
-    "react-router-dom": {
-      "src": "../../react-router-dom/dist/index.js",
-      "file": "react-router-dom.js",
-      "fileHash": "0004d718",
-      "needsInterop": false
-    },
-    "motion/react": {
-      "src": "../../motion/dist/es/react.mjs",
-      "file": "motion_react.js",
-      "fileHash": "42596b33",
-      "needsInterop": false
-    },
     "@tabler/icons-react": {
       "src": "../../@tabler/icons-react/dist/esm/tabler-icons-react.mjs",
       "file": "@tabler_icons-react.js",
-      "fileHash": "14b4db2f",
+      "fileHash": "ef17992e",
+      "needsInterop": false
+    },
+    "appwrite": {
+      "src": "../../appwrite/dist/esm/sdk.js",
+      "file": "appwrite.js",
+      "fileHash": "e3207492",
       "needsInterop": false
     },
     "clsx": {
       "src": "../../clsx/dist/clsx.mjs",
       "file": "clsx.js",
-      "fileHash": "87b6d9e4",
+      "fileHash": "438277fe",
       "needsInterop": false
     },
-    "tailwind-merge": {
-      "src": "../../tailwind-merge/dist/bundle-mjs.mjs",
-      "file": "tailwind-merge.js",
-      "fileHash": "adee159c",
+    "date-fns": {
+      "src": "../../date-fns/esm/index.js",
+      "file": "date-fns.js",
+      "fileHash": "c8cdb3c6",
       "needsInterop": false
     },
-    "three": {
-      "src": "../../three/build/three.module.js",
-      "file": "three.js",
-      "fileHash": "f10da6a8",
+    "date-fns/locale": {
+      "src": "../../date-fns/esm/locale/index.js",
+      "file": "date-fns_locale.js",
+      "fileHash": "affdbcf7",
+      "needsInterop": false
+    },
+    "motion/react": {
+      "src": "../../motion/dist/es/react.mjs",
+      "file": "motion_react.js",
+      "fileHash": "d06adb28",
       "needsInterop": false
     },
     "postprocessing": {
       "src": "../../postprocessing/build/index.js",
       "file": "postprocessing.js",
-      "fileHash": "205bd067",
+      "fileHash": "a05d80d0",
+      "needsInterop": false
+    },
+    "react-dom/client": {
+      "src": "../../react-dom/client.js",
+      "file": "react-dom_client.js",
+      "fileHash": "35e13db7",
+      "needsInterop": true
+    },
+    "react-icons/fa": {
+      "src": "../../react-icons/fa/index.esm.js",
+      "file": "react-icons_fa.js",
+      "fileHash": "b39d751a",
+      "needsInterop": false
+    },
+    "react-icons/fa6": {
+      "src": "../../react-icons/fa6/index.esm.js",
+      "file": "react-icons_fa6.js",
+      "fileHash": "ee91d98a",
+      "needsInterop": false
+    },
+    "react-router-dom": {
+      "src": "../../react-router-dom/dist/index.js",
+      "file": "react-router-dom.js",
+      "fileHash": "96b74880",
+      "needsInterop": false
+    },
+    "tailwind-merge": {
+      "src": "../../tailwind-merge/dist/bundle-mjs.mjs",
+      "file": "tailwind-merge.js",
+      "fileHash": "422eebfe",
+      "needsInterop": false
+    },
+    "three": {
+      "src": "../../three/build/three.module.js",
+      "file": "three.js",
+      "fileHash": "7ea78180",
       "needsInterop": false
     }
   },
   "chunks": {
-    "chunk-DQJKJRV5": {
-      "file": "chunk-DQJKJRV5.js"
-    },
     "chunk-IFCYBMKG": {
       "file": "chunk-IFCYBMKG.js"
     },
-    "chunk-6PXSGDAH": {
-      "file": "chunk-6PXSGDAH.js"
+    "chunk-DQJKJRV5": {
+      "file": "chunk-DQJKJRV5.js"
     },
     "chunk-PJEEZAML": {
       "file": "chunk-PJEEZAML.js"
     },
+    "chunk-6PXSGDAH": {
+      "file": "chunk-6PXSGDAH.js"
+    },
     "chunk-DRWLMN53": {
       "file": "chunk-DRWLMN53.js"
     },

node_modules/@esbuild/darwin-arm64/README.md

@@ -1,3 +0,0 @@
-# esbuild
-
-This is the macOS ARM 64-bit binary for esbuild, a JavaScript bundler and minifier. See https://github.com/evanw/esbuild for details.

node_modules/@esbuild/darwin-arm64/package.json

@@ -1,20 +0,0 @@
-{
-  "name": "@esbuild/darwin-arm64",
-  "version": "0.21.5",
-  "description": "The macOS ARM 64-bit binary for esbuild, a JavaScript bundler.",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/evanw/esbuild.git"
-  },
-  "license": "MIT",
-  "preferUnplugged": true,
-  "engines": {
-    "node": ">=12"
-  },
-  "os": [
-    "darwin"
-  ],
-  "cpu": [
-    "arm64"
-  ]
-}

node_modules/@rollup/rollup-darwin-arm64/README.md

@@ -1,3 +0,0 @@
-# `@rollup/rollup-darwin-arm64`
-
-This is the **aarch64-apple-darwin** binary for `rollup`

node_modules/@rollup/rollup-darwin-arm64/package.json

@@ -1,22 +0,0 @@
-{
-  "name": "@rollup/rollup-darwin-arm64",
-  "version": "4.53.5",
-  "os": [
-    "darwin"
-  ],
-  "cpu": [
-    "arm64"
-  ],
-  "files": [
-    "rollup.darwin-arm64.node"
-  ],
-  "description": "Native bindings for Rollup",
-  "author": "Lukas Taegert-Atkinson",
-  "homepage": "https://rollupjs.org/",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/rollup/rollup.git"
-  },
-  "main": "./rollup.darwin-arm64.node"
-}

node_modules/fsevents/LICENSE

@@ -1,22 +0,0 @@
-MIT License
------------
-
-Copyright (C) 2010-2020 by Philipp Dunkel, Ben Noordhuis, Elan Shankar, Paul Miller
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.

node_modules/fsevents/README.md

@@ -1,89 +0,0 @@
-# fsevents
-
-Native access to MacOS FSEvents in [Node.js](https://nodejs.org/)
-
-The FSEvents API in MacOS allows applications to register for notifications of
-changes to a given directory tree. It is a very fast and lightweight alternative
-to kqueue.
-
-This is a low-level library. For a cross-platform file watching module that
-uses fsevents, check out [Chokidar](https://github.com/paulmillr/chokidar).
-
-## Usage
-
-```sh
-npm install fsevents
-```
-
-Supports only **Node.js v8.16 and higher**.
-
-```js
-const fsevents = require('fsevents');
-
-// To start observation
-const stop = fsevents.watch(__dirname, (path, flags, id) => {
-  const info = fsevents.getInfo(path, flags);
-});
-
-// To end observation
-stop();
-```
-
-> **Important note:** The API behaviour is slightly different from typical JS APIs. The `stop` function **must** be
-> retrieved and stored somewhere, even if you don't plan to stop the watcher. If you forget it, the garbage collector
-> will eventually kick in, the watcher will be unregistered, and your callbacks won't be called anymore.
-
-The callback passed as the second parameter to `.watch` get's called whenever the operating system detects a
-a change in the file system. It takes three arguments:
-
-###### `fsevents.watch(dirname: string, (path: string, flags: number, id: string) => void): () => Promise<undefined>`
-
- * `path: string` - the item in the filesystem that have been changed
- * `flags: number` - a numeric value describing what the change was
- * `id: string` - an unique-id identifying this specific event
-
- Returns closer callback which when called returns a Promise resolving when the watcher process has been shut down.
-
-###### `fsevents.getInfo(path: string, flags: number, id: string): FsEventInfo`
-
-The `getInfo` function takes the `path`, `flags` and `id` arguments and converts those parameters into a structure
-that is easier to digest to determine what the change was.
-
-The `FsEventsInfo` has the following shape:
-
-```js
-/**
- * @typedef {'created'|'modified'|'deleted'|'moved'|'root-changed'|'cloned'|'unknown'} FsEventsEvent
- * @typedef {'file'|'directory'|'symlink'} FsEventsType
- */
-{
-  "event": "created", // {FsEventsEvent}
-  "path": "file.txt",
-  "type": "file",    // {FsEventsType}
-  "changes": {
-    "inode": true,   // Had iNode Meta-Information changed
-    "finder": false, // Had Finder Meta-Data changed
-    "access": false, // Had access permissions changed
-    "xattrs": false  // Had xAttributes changed
-  },
-  "flags": 0x100000000
-}
-```
-
-## Changelog
-
-- v2.3 supports Apple Silicon ARM CPUs
-- v2 supports node 8.16+ and reduces package size massively
-- v1.2.8 supports node 6+
-- v1.2.7 supports node 4+
-
-## Troubleshooting
-
-- I'm getting `EBADPLATFORM` `Unsupported platform for fsevents` error.
-- It's fine, nothing is broken. fsevents is macos-only. Other platforms are skipped. If you want to hide this warning, report a bug to NPM bugtracker asking them to hide ebadplatform warnings by default.
-
-## License
-
-The MIT License Copyright (C) 2010-2020 by Philipp Dunkel, Ben Noordhuis, Elan Shankar, Paul Miller — see LICENSE file.
-
-Visit our [GitHub page](https://github.com/fsevents/fsevents) and [NPM Page](https://npmjs.org/package/fsevents)

node_modules/fsevents/fsevents.d.ts

@@ -1,46 +0,0 @@
-declare type Event = "created" | "cloned" | "modified" | "deleted" | "moved" | "root-changed" | "unknown";
-declare type Type = "file" | "directory" | "symlink";
-declare type FileChanges = {
-  inode: boolean;
-  finder: boolean;
-  access: boolean;
-  xattrs: boolean;
-};
-declare type Info = {
-  event: Event;
-  path: string;
-  type: Type;
-  changes: FileChanges;
-  flags: number;
-};
-declare type WatchHandler = (path: string, flags: number, id: string) => void;
-export declare function watch(path: string, handler: WatchHandler): () => Promise<void>;
-export declare function watch(path: string, since: number, handler: WatchHandler): () => Promise<void>;
-export declare function getInfo(path: string, flags: number): Info;
-export declare const constants: {
-  None: 0x00000000;
-  MustScanSubDirs: 0x00000001;
-  UserDropped: 0x00000002;
-  KernelDropped: 0x00000004;
-  EventIdsWrapped: 0x00000008;
-  HistoryDone: 0x00000010;
-  RootChanged: 0x00000020;
-  Mount: 0x00000040;
-  Unmount: 0x00000080;
-  ItemCreated: 0x00000100;
-  ItemRemoved: 0x00000200;
-  ItemInodeMetaMod: 0x00000400;
-  ItemRenamed: 0x00000800;
-  ItemModified: 0x00001000;
-  ItemFinderInfoMod: 0x00002000;
-  ItemChangeOwner: 0x00004000;
-  ItemXattrMod: 0x00008000;
-  ItemIsFile: 0x00010000;
-  ItemIsDir: 0x00020000;
-  ItemIsSymlink: 0x00040000;
-  ItemIsHardlink: 0x00100000;
-  ItemIsLastHardlink: 0x00200000;
-  OwnEvent: 0x00080000;
-  ItemCloned: 0x00400000;
-};
-export {};

node_modules/fsevents/fsevents.js

@@ -1,83 +0,0 @@
-/*
- ** © 2020 by Philipp Dunkel, Ben Noordhuis, Elan Shankar, Paul Miller
- ** Licensed under MIT License.
- */
-
-/* jshint node:true */
-"use strict";
-
-if (process.platform !== "darwin") {
-  throw new Error(`Module 'fsevents' is not compatible with platform '${process.platform}'`);
-}
-
-const Native = require("./fsevents.node");
-const events = Native.constants;
-
-function watch(path, since, handler) {
-  if (typeof path !== "string") {
-    throw new TypeError(`fsevents argument 1 must be a string and not a ${typeof path}`);
-  }
-  if ("function" === typeof since && "undefined" === typeof handler) {
-    handler = since;
-    since = Native.flags.SinceNow;
-  }
-  if (typeof since !== "number") {
-    throw new TypeError(`fsevents argument 2 must be a number and not a ${typeof since}`);
-  }
-  if (typeof handler !== "function") {
-    throw new TypeError(`fsevents argument 3 must be a function and not a ${typeof handler}`);
-  }
-
-  let instance = Native.start(Native.global, path, since, handler);
-  if (!instance) throw new Error(`could not watch: ${path}`);
-  return () => {
-    const result = instance ? Promise.resolve(instance).then(Native.stop) : Promise.resolve(undefined);
-    instance = undefined;
-    return result;
-  };
-}
-
-function getInfo(path, flags) {
-  return {
-    path,
-    flags,
-    event: getEventType(flags),
-    type: getFileType(flags),
-    changes: getFileChanges(flags),
-  };
-}
-
-function getFileType(flags) {
-  if (events.ItemIsFile & flags) return "file";
-  if (events.ItemIsDir & flags) return "directory";
-  if (events.MustScanSubDirs & flags) return "directory"; 
-  if (events.ItemIsSymlink & flags) return "symlink";
-}
-function anyIsTrue(obj) {
-  for (let key in obj) {
-    if (obj[key]) return true;
-  }
-  return false;
-}
-function getEventType(flags) {
-  if (events.ItemRemoved & flags) return "deleted";
-  if (events.ItemRenamed & flags) return "moved";
-  if (events.ItemCreated & flags) return "created";
-  if (events.ItemModified & flags) return "modified";
-  if (events.RootChanged & flags) return "root-changed";
-  if (events.ItemCloned & flags) return "cloned";
-  if (anyIsTrue(flags)) return "modified";
-  return "unknown";
-}
-function getFileChanges(flags) {
-  return {
-    inode: !!(events.ItemInodeMetaMod & flags),
-    finder: !!(events.ItemFinderInfoMod & flags),
-    access: !!(events.ItemChangeOwner & flags),
-    xattrs: !!(events.ItemXattrMod & flags),
-  };
-}
-
-exports.watch = watch;
-exports.getInfo = getInfo;
-exports.constants = events;

node_modules/fsevents/package.json

@@ -1,62 +0,0 @@
-{
-  "name": "fsevents",
-  "version": "2.3.3",
-  "description": "Native Access to MacOS FSEvents",
-  "main": "fsevents.js",
-  "types": "fsevents.d.ts",
-  "os": [
-    "darwin"
-  ],
-  "files": [
-    "fsevents.d.ts",
-    "fsevents.js",
-    "fsevents.node"
-  ],
-  "engines": {
-    "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-  },
-  "scripts": {
-    "clean": "node-gyp clean && rm -f fsevents.node",
-    "build": "node-gyp clean && rm -f fsevents.node && node-gyp rebuild && node-gyp clean",
-    "test": "/bin/bash ./test.sh 2>/dev/null",
-    "prepublishOnly": "npm run build"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/fsevents/fsevents.git"
-  },
-  "keywords": [
-    "fsevents",
-    "mac"
-  ],
-  "contributors": [
-    {
-      "name": "Philipp Dunkel",
-      "email": "pip@pipobscure.com"
-    },
-    {
-      "name": "Ben Noordhuis",
-      "email": "info@bnoordhuis.nl"
-    },
-    {
-      "name": "Elan Shankar",
-      "email": "elan.shanker@gmail.com"
-    },
-    {
-      "name": "Miroslav Bajtoš",
-      "email": "mbajtoss@gmail.com"
-    },
-    {
-      "name": "Paul Miller",
-      "url": "https://paulmillr.com"
-    }
-  ],
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/fsevents/fsevents/issues"
-  },
-  "homepage": "https://github.com/fsevents/fsevents",
-  "devDependencies": {
-    "node-gyp": "^9.4.0"
-  }
-}

package-lock.json

@@ -10,20 +10,13 @@
       "dependencies": {
         "@tabler/icons-react": "^3.36.0",
         "appwrite": "^13.0.0",
-        "clsx": "^2.1.1",
         "date-fns": "^2.30.0",
-        "motion": "^12.23.26",
-        "postprocessing": "^6.38.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-icons": "^4.12.0",
-        "react-router-dom": "^6.20.0",
-        "tailwind-merge": "^3.4.0",
-        "three": "^0.182.0"
+        "react-router-dom": "^6.20.0"
       },
       "devDependencies": {
-        "@types/react": "^18.2.0",
-        "@types/react-dom": "^18.2.0",
         "@vitejs/plugin-react": "^4.2.0",
         "vite": "^5.0.0"
       }
@@ -1085,31 +1078,6 @@
       "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
       "dev": true
     },
-    "node_modules/@types/prop-types": {
-      "version": "15.7.15",
-      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
-      "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
-      "dev": true
-    },
-    "node_modules/@types/react": {
-      "version": "18.3.27",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.27.tgz",
-      "integrity": "sha512-cisd7gxkzjBKU2GgdYrTdtQx1SORymWyaAFhaxQPK9bYO9ot3Y5OikQRvY0VYQtvwjeQnizCINJAenh/V7MK2w==",
-      "dev": true,
-      "dependencies": {
-        "@types/prop-types": "*",
-        "csstype": "^3.2.2"
-      }
-    },
-    "node_modules/@types/react-dom": {
-      "version": "18.3.7",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.7.tgz",
-      "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
-      "dev": true,
-      "peerDependencies": {
-        "@types/react": "^18.0.0"
-      }
-    },
     "node_modules/@vitejs/plugin-react": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.7.0.tgz",
@@ -1218,15 +1186,6 @@
         }
       ]
     },
-    "node_modules/clsx": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
-      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -1252,12 +1211,6 @@
         "node-fetch": "2.6.7"
       }
     },
-    "node_modules/csstype": {
-      "version": "3.2.3",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
-      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
-      "dev": true
-    },
     "node_modules/date-fns": {
       "version": "2.30.0",
       "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
@@ -1421,33 +1374,6 @@
         "node": ">= 0.12"
       }
     },
-    "node_modules/framer-motion": {
-      "version": "12.23.26",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.26.tgz",
-      "integrity": "sha512-cPcIhgR42xBn1Uj+PzOyheMtZ73H927+uWPDVhUMqxy8UHt6Okavb6xIz9J/phFUHUj0OncR6UvMfJTXoc/LKA==",
-      "license": "MIT",
-      "dependencies": {
-        "motion-dom": "^12.23.23",
-        "motion-utils": "^12.23.6",
-        "tslib": "^2.4.0"
-      },
-      "peerDependencies": {
-        "@emotion/is-prop-valid": "*",
-        "react": "^18.0.0 || ^19.0.0",
-        "react-dom": "^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@emotion/is-prop-valid": {
-          "optional": true
-        },
-        "react": {
-          "optional": true
-        },
-        "react-dom": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -1645,47 +1571,6 @@
         "node": ">= 0.6"
       }
     },
-    "node_modules/motion": {
-      "version": "12.23.26",
-      "resolved": "https://registry.npmjs.org/motion/-/motion-12.23.26.tgz",
-      "integrity": "sha512-Ll8XhVxY8LXMVYTCfme27WH2GjBrCIzY4+ndr5QKxsK+YwCtOi2B/oBi5jcIbik5doXuWT/4KKDOVAZJkeY5VQ==",
-      "license": "MIT",
-      "dependencies": {
-        "framer-motion": "^12.23.26",
-        "tslib": "^2.4.0"
-      },
-      "peerDependencies": {
-        "@emotion/is-prop-valid": "*",
-        "react": "^18.0.0 || ^19.0.0",
-        "react-dom": "^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@emotion/is-prop-valid": {
-          "optional": true
-        },
-        "react": {
-          "optional": true
-        },
-        "react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/motion-dom": {
-      "version": "12.23.23",
-      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.23.tgz",
-      "integrity": "sha512-n5yolOs0TQQBRUFImrRfs/+6X4p3Q4n1dUEqt/H58Vx7OW6RF+foWEgmTVDhIWJIMXOuNNL0apKH2S16en9eiA==",
-      "license": "MIT",
-      "dependencies": {
-        "motion-utils": "^12.23.6"
-      }
-    },
-    "node_modules/motion-utils": {
-      "version": "12.23.6",
-      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz",
-      "integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==",
-      "license": "MIT"
-    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -1769,15 +1654,6 @@
         "node": "^10 || ^12 || >=14"
       }
     },
-    "node_modules/postprocessing": {
-      "version": "6.38.2",
-      "resolved": "https://registry.npmjs.org/postprocessing/-/postprocessing-6.38.2.tgz",
-      "integrity": "sha512-7DwuT7Tkst41ZjSj287g7C9c5/D3Xx5rMgBosg0dadbUPoZD2HNzkadKPol1d2PJAoI9f+Jeh1/v9YfLzpFGVw==",
-      "license": "Zlib",
-      "peerDependencies": {
-        "three": ">= 0.157.0 < 0.183.0"
-      }
-    },
     "node_modules/react": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
@@ -1934,33 +1810,11 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/tailwind-merge": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.4.0.tgz",
-      "integrity": "sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/dcastil"
-      }
-    },
-    "node_modules/three": {
-      "version": "0.182.0",
-      "resolved": "https://registry.npmjs.org/three/-/three-0.182.0.tgz",
-      "integrity": "sha512-GbHabT+Irv+ihI1/f5kIIsZ+Ef9Sl5A1Y7imvS5RQjWgtTPfPnZ43JmlYI7NtCRDK9zir20lQpfg8/9Yd02OvQ==",
-      "license": "MIT"
-    },
     "node_modules/tr46": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
       "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
     },
-    "node_modules/tslib": {
-      "version": "2.8.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
-      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "license": "0BSD"
-    },
     "node_modules/update-browserslist-db": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",

package.json

@@ -5,20 +5,13 @@
   "dependencies": {
     "@tabler/icons-react": "^3.36.0",
     "appwrite": "^13.0.0",
-    "clsx": "^2.1.1",
     "date-fns": "^2.30.0",
-    "motion": "^12.23.26",
-    "postprocessing": "^6.38.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.12.0",
-    "react-router-dom": "^6.20.0",
-    "tailwind-merge": "^3.4.0",
-    "three": "^0.182.0"
+    "react-router-dom": "^6.20.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
     "@vitejs/plugin-react": "^4.2.0",
     "vite": "^5.0.0"
   },

src/App.jsx

@@ -1,125 +1,78 @@
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
 import { AuthProvider, useAuth } from './context/AuthContext'
-import Navbar from './components/Navbar'
+import Sidebar from './components/Navbar'
 import Footer from './components/Footer'
-import PixelBlast from './components/PixelBlast'
 import LoginPage from './pages/LoginPage'
 import TicketsPage from './pages/TicketsPage'
-import DashboardPage from './pages/DashboardPage'
-import AssetsPage from './pages/AssetsPage'
 import PlanboardPage from './pages/PlanboardPage'
 import ProjectsPage from './pages/ProjectsPage'
-import ReportsPage from './pages/ReportsPage'
-import DocsPage from './pages/DocsPage'
+import RoadmapsPage from './pages/RoadmapsPage'
+import RoadmapDetailPage from './pages/RoadmapDetailPage'
 import AdminPage from './pages/AdminPage'
+import CustomersPage from './pages/CustomersPage'
+import LeadsPage from './pages/LeadsPage'
+import CustomerDetailPage from './pages/CustomerDetailPage'
+import FinancePage from './pages/FinancePage'
 
 function ProtectedRoute({ children }) {
   const { user, loading } = useAuth()
-  
+
   if (loading) {
     return (
-      <div className="text-center p-4">
+      <div className="text-center p-4" style={{ marginTop: 80 }}>
         <div className="spinner"></div>
         <p>Loading...</p>
       </div>
     )
   }
-  
+
   if (!user) {
     return <Navigate to="/login" replace />
   }
-  
+
   return children
 }
 
 function AppRoutes() {
   const { user } = useAuth()
-  
+
   return (
     <Routes>
       <Route path="/login" element={user ? <Navigate to="/tickets" replace /> : <LoginPage />} />
       <Route path="/" element={<Navigate to="/tickets" replace />} />
       <Route path="/tickets" element={<ProtectedRoute><TicketsPage /></ProtectedRoute>} />
-      <Route path="/dashboard" element={<ProtectedRoute><DashboardPage /></ProtectedRoute>} />
-      <Route path="/assets" element={<ProtectedRoute><AssetsPage /></ProtectedRoute>} />
+      <Route path="/customers" element={<ProtectedRoute><CustomersPage /></ProtectedRoute>} />
+      <Route path="/customers/:id" element={<ProtectedRoute><CustomerDetailPage /></ProtectedRoute>} />
+      <Route path="/leads" element={<ProtectedRoute><LeadsPage /></ProtectedRoute>} />
+      <Route path="/finance" element={<ProtectedRoute><FinancePage /></ProtectedRoute>} />
       <Route path="/planboard" element={<ProtectedRoute><PlanboardPage /></ProtectedRoute>} />
       <Route path="/projects" element={<ProtectedRoute><ProjectsPage /></ProtectedRoute>} />
-      <Route path="/reports" element={<ProtectedRoute><ReportsPage /></ProtectedRoute>} />
-      <Route path="/docs" element={<ProtectedRoute><DocsPage /></ProtectedRoute>} />
+      <Route path="/roadmaps" element={<ProtectedRoute><RoadmapsPage /></ProtectedRoute>} />
+      <Route path="/roadmaps/:id" element={<ProtectedRoute><RoadmapDetailPage /></ProtectedRoute>} />
       <Route path="/admin" element={<ProtectedRoute><AdminPage /></ProtectedRoute>} />
+      {/* Alte Links (z. B. die entfernten Seiten Assets, Reports, Docs) landen bei den Tickets */}
+      <Route path="*" element={<Navigate to="/tickets" replace />} />
     </Routes>
   )
 }
 
 function AppContent() {
   const { user } = useAuth()
-  
+
   if (!user) {
-    return (
-      <>
-        {/* PixelBlast Background für Login-Seite */}
-        <div style={{
-          position: 'fixed',
-          top: 0,
-          left: 0,
-          width: '100vw',
-          height: '100vh',
-          zIndex: 0,
-          background: '#1a202c'
-        }}>
-          <PixelBlast
-            color="#10b981"
-            variant="circle"
-            pixelSize={4}
-            patternScale={2}
-            patternDensity={0.8}
-            enableRipples={true}
-            rippleIntensityScale={1.5}
-            speed={0.3}
-            edgeFade={0.3}
-          />
-        </div>
-        <div style={{ position: 'relative', zIndex: 1 }}>
+    return <AppRoutes />
+  }
+
+  return (
+    <div className="app-shell">
+      <Sidebar />
+      <div className="app-main">
+        <div className="app-scroll">
           <AppRoutes />
         </div>
-      </>
-    )
-  }
-  
-  return (
-    <>
-      {/* PixelBlast Background für Haupt-App */}
-      <div style={{
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        width: '100vw',
-        height: '100vh',
-        zIndex: 0,
-        background: '#1a202c'
-      }}>
-        <PixelBlast
-          color="#10b981"
-          variant="circle"
-          pixelSize={4}
-          patternScale={2}
-          patternDensity={0.8}
-          enableRipples={true}
-          rippleIntensityScale={1.5}
-          speed={0.3}
-          edgeFade={0.3}
-        />
+        <Footer />
       </div>
-      <div style={{ position: 'relative', zIndex: 1, display: 'flex', height: '100vh', overflow: 'hidden' }}>
-        <Navbar />
-        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
-          <div style={{ flex: 1, overflowY: 'auto' }}>
-            <AppRoutes />
-          </div>
-          <Footer />
-        </div>
-      </div>
-    </>
+    </div>
   )
 }
 

src/assets/fonts/OFL-Lato.txt

@@ -0,0 +1,94 @@
+Lato Regular 1.105 (lato-regular.ttf)
+Copyright (c) 2010-2013 by tyPoland Lukasz Dziedzic with Reserved Font Name "Lato".
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

src/components/AssignedProjectCard.jsx

@@ -0,0 +1,68 @@
+import { FaCodeBranch } from 'react-icons/fa'
+import { FaLinkSlash } from 'react-icons/fa6'
+import GiteaLinkButton from './GiteaLinkButton'
+import PreviewLinkButton from './PreviewLinkButton'
+
+const STATUS_COLORS = {
+  ready: '#10b981',
+  live: '#10b981',
+  online: '#10b981',
+  provisioning: '#f59e0b',
+  pending: '#f59e0b',
+  building: '#3b82f6',
+  error: '#ef4444',
+  failed: '#ef4444',
+}
+
+function StatusBadge({ label, value }) {
+  if (!value) return null
+  const color = STATUS_COLORS[String(value).toLowerCase()] || '#a0aec0'
+  return (
+    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 12, color: '#cbd5e0', marginRight: 12 }}>
+      {label}:
+      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, color }}>
+        <span style={{ width: 8, height: 8, borderRadius: '50%', background: color, display: 'inline-block' }} />
+        {value}
+      </span>
+    </span>
+  )
+}
+
+export default function AssignedProjectCard({ project, onUnassign, showActions = false }) {
+  return (
+    <div style={{ background: 'rgba(30,41,59,0.5)', border: '1px solid rgba(59,130,246,0.25)', borderRadius: 10, padding: '12px 14px', marginBottom: 12 }}>
+      <div style={{ display: 'flex', gap: 8, alignItems: 'flex-start', justifyContent: 'space-between' }}>
+        <div style={{ minWidth: 0 }}>
+          <strong>{project.projectName}</strong>
+          {project.subdomain && <span className="text-grey" style={{ marginLeft: 8, fontSize: 13 }}>({project.subdomain})</span>}
+          {project.repoFullName && (
+            <div className="text-grey" style={{ fontSize: 12, marginTop: 4 }}>
+              <FaCodeBranch style={{ marginRight: 4 }} />{project.repoFullName}
+            </div>
+          )}
+        </div>
+        <div style={{ display: 'flex', gap: 8, alignItems: 'center', flexShrink: 0 }}>
+          <PreviewLinkButton href={project.previewUrl} />
+          <GiteaLinkButton href={project.giteaRepoUrl} />
+          {showActions && onUnassign && (
+            <button
+              type="button"
+              title="Vom Ticket lösen"
+              aria-label="Vom Ticket lösen"
+              onClick={() => onUnassign(project.$id)}
+              style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 32, height: 32, borderRadius: 6, background: 'rgba(239, 68, 68, 0.12)', border: '1px solid rgba(239, 68, 68, 0.35)', color: '#f87171', cursor: 'pointer' }}
+            >
+              <FaLinkSlash size={16} />
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Status- und Provisioning-Zeile */}
+      <div style={{ marginTop: 10, display: 'flex', flexWrap: 'wrap', alignItems: 'center' }}>
+        <StatusBadge label="Status" value={project.status} />
+        <StatusBadge label="Provisioning" value={project.provisioningStatus} />
+      </div>
+    </div>
+  )
+}

src/components/CopyableCredential.jsx

@@ -0,0 +1,83 @@
+import { useEffect, useRef, useState } from 'react'
+import { FaCheck, FaCopy, FaEye, FaEyeSlash } from 'react-icons/fa6'
+
+async function copyText(text) {
+  try {
+    await navigator.clipboard.writeText(text)
+  } catch {
+    const textarea = document.createElement('textarea')
+    textarea.value = text
+    textarea.setAttribute('readonly', '')
+    textarea.style.position = 'fixed'
+    textarea.style.left = '-9999px'
+    document.body.appendChild(textarea)
+    textarea.select()
+    document.execCommand('copy')
+    document.body.removeChild(textarea)
+  }
+}
+
+export default function CopyableCredential({ value, secret = false, label = 'Wert' }) {
+  const [visible, setVisible] = useState(!secret)
+  const [copied, setCopied] = useState(false)
+  const timeoutRef = useRef(null)
+  const text = String(value || '').trim()
+
+  useEffect(() => {
+    setVisible(!secret)
+  }, [secret, text])
+
+  useEffect(() => () => clearTimeout(timeoutRef.current), [])
+
+  if (!text) return <span className="credential-empty">–</span>
+
+  const handleCopy = async (event) => {
+    event.preventDefault()
+    event.stopPropagation()
+    await copyText(text)
+    setCopied(true)
+    clearTimeout(timeoutRef.current)
+    timeoutRef.current = setTimeout(() => setCopied(false), 1800)
+  }
+
+  const displayValue = secret && !visible ? '••••••••••••' : text
+
+  return (
+    <span className="credential">
+      <span
+        className={`credential-value ${secret && !visible ? 'is-masked' : ''}`}
+        title={secret && !visible ? `${label} anzeigen` : text}
+      >
+        {displayValue}
+      </span>
+      {secret && (
+        <button
+          type="button"
+          className="credential-action"
+          onClick={(event) => {
+            event.preventDefault()
+            event.stopPropagation()
+            setVisible((current) => !current)
+          }}
+          title={visible ? `${label} ausblenden` : `${label} anzeigen`}
+          aria-label={visible ? `${label} ausblenden` : `${label} anzeigen`}
+        >
+          {visible ? <FaEyeSlash /> : <FaEye />}
+        </button>
+      )}
+      <button
+        type="button"
+        className="credential-action"
+        onClick={handleCopy}
+        title={copied ? 'Kopiert' : `${label} kopieren`}
+        aria-label={copied ? `${label} kopiert` : `${label} kopieren`}
+      >
+        {copied ? <FaCheck className="credential-check" /> : <FaCopy />}
+      </button>
+    </span>
+  )
+}
+
+export function getCustomerPortalPassword(customer) {
+  return customer?.portalPassword || customer?.password || ''
+}

src/components/CreateTicketModal.jsx

@@ -1,90 +1,75 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useMemo } from 'react'
 import { FaTimes } from 'react-icons/fa'
-import { useAdminConfig } from '../hooks/useAdminConfig'
 import { useEmployees } from '../hooks/useEmployees'
+import { databases, DATABASE_ID, COLLECTIONS, Query } from '../lib/appwrite'
+import {
+  SERVICE_TYPES,
+  todayIso,
+  isoToGermanDate,
+  timeToWoms,
+  buildRequesterSuggestions,
+  rankSuggestions,
+} from '../lib/ticketForm'
+import { priorityFor } from '../lib/ticketStatus'
+import { AutocompleteInput, DateTimeInput } from './ui'
 
-// Fallback-Werte falls Config nicht geladen werden kann
-const DEFAULT_TICKET_TYPES = [
-  'Home Office', 'Holidays', 'Trip', 'Supportrequest', 'Change Request',
-  'Maintenance', 'Project', 'Controlling', 'Development', 'Documentation',
-  'Meeting/Conference', 'IT Management', 'IT Security', 'Procurement',
-  'Rollout', 'Emergency Call', 'Other Services'
+// Neue Tickets gibt es aktuell nur fuer diese Arten; alte Tickets behalten ihre Art.
+// Migration = ein Kunde, den wir von einem anderen Anbieter uebernehmen.
+const TICKET_TYPES = [
+  { value: 'Webpage', label: 'Webpage' },
+  { value: 'Migration', label: 'Migration (Übernahme von anderem Anbieter)' },
 ]
 
-const DEFAULT_SYSTEMS = [
-  'Account View', 'Client', 'Cofano', 'Credentials', 'Diamant', 'Docuware',
-  'EDI', 'eMail', 'Employee', 'Invoice', 'LBase', 'Medical Office', 'Network',
-  'O365', 'PDF Viewer', 'Printer', 'Reports', 'Server', 'Time Tracking',
-  'TK', 'TOS', 'Vivendi NG', 'VGM', '(W)LAN', '(W)WAN', 'WOMS', 'n/a'
-]
-
-const DEFAULT_RESPONSE_LEVELS = [
-  'USER', 'KEY USER', 'Helpdesk', 'Support', 'Admin', 'FS/FE', '24/7',
-  'TECH MGMT', 'Backoffice', 'BUSI MGMT', 'n/a'
-]
-
-const DEFAULT_SERVICE_TYPES = ['Remote', 'On Site', 'Off Site']
-
-const DEFAULT_PRIORITIES = [
-  { value: 0, label: 'None' },
-  { value: 1, label: 'Low' },
-  { value: 2, label: 'Medium' },
-  { value: 3, label: 'High' },
-  { value: 4, label: 'Critical' }
-]
-
-const today = new Date().toLocaleDateString('de-DE')
+// Datum als "yyyy-mm-dd", Uhrzeit als "hh:mm" (Werte der Kalender-Felder).
+// Die Service-Art fragt das Formular nicht mehr ab: gespeichert wird Fernwartung.
+const emptyForm = () => ({
+  customerId: '',
+  type: TICKET_TYPES[0].value,
+  serviceType: SERVICE_TYPES[0].value,
+  urgent: false,
+  topic: '',
+  requestedBy: '',
+  startDate: todayIso(),
+  startTime: '',
+  deadline: todayIso(),
+  endTime: '',
+  details: ''
+})
 
 export default function CreateTicketModal({ isOpen, onClose, onCreate, customers = [] }) {
-  const { config } = useAdminConfig()
   const { employees } = useEmployees()
-  
-  // Verwende Config-Werte oder Fallbacks
-  const TICKET_TYPES = config?.ticketTypes || DEFAULT_TICKET_TYPES
-  const SYSTEMS = config?.systems || DEFAULT_SYSTEMS
-  const RESPONSE_LEVELS = config?.responseLevels || DEFAULT_RESPONSE_LEVELS
-  const SERVICE_TYPES = config?.serviceTypes || DEFAULT_SERVICE_TYPES
-  const PRIORITIES = config?.priorities || DEFAULT_PRIORITIES
-  const [formData, setFormData] = useState({
-    customerId: '',
-    type: '',
-    systemType: '',
-    responseLevel: '',
-    serviceType: '',
-    priority: 1,
-    topic: '',
-    requestedBy: '',
-    requestedFor: '',
-    assignedTo: '', // Zugewiesener Mitarbeiter (User ID)
-    status: 'Open', // Status wird automatisch gesetzt basierend auf assignedTo
-    startDate: today,
-    startTime: '',
-    deadline: today,
-    endTime: '',
-    estimate: '30',
-    mailCopyTo: '',
-    sendNotification: false,
-    details: ''
-  })
+
+  const [formData, setFormData] = useState(emptyForm)
+  const [recentTickets, setRecentTickets] = useState([])
 
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState('')
 
-  // Setze Default-Werte wenn Config geladen ist oder Modal geöffnet wird
+  // Reset error when modal opens
   useEffect(() => {
-    if (isOpen && (TICKET_TYPES.length > 0 || SERVICE_TYPES.length > 0)) {
-      setFormData(prev => ({
-        ...prev,
-        type: prev.type || TICKET_TYPES[0] || 'Supportrequest',
-        serviceType: prev.serviceType || SERVICE_TYPES[0] || 'Remote',
-        priority: prev.priority || (PRIORITIES.find(p => p.value === 1)?.value || 1)
-      }))
+    if (isOpen) setError('')
+  }, [isOpen])
+
+  // Namen aus den letzten Tickets fuer die Autovervollstaendigung
+  useEffect(() => {
+    if (!isOpen) return
+    let cancelled = false
+    databases
+      .listDocuments(DATABASE_ID, COLLECTIONS.WORKORDERS, [Query.orderDesc('$createdAt'), Query.limit(200)])
+      .then((response) => {
+        if (!cancelled) setRecentTickets(response.documents || [])
+      })
+      .catch((err) => console.warn('Vorschläge aus früheren Tickets nicht geladen:', err))
+    return () => {
+      cancelled = true
     }
-    // Reset error when modal opens
-    if (isOpen) {
-      setError('')
-    }
-  }, [isOpen, TICKET_TYPES, SERVICE_TYPES, PRIORITIES])
+  }, [isOpen])
+
+  const suggestions = useMemo(
+    () => buildRequesterSuggestions({ customers, employees, tickets: recentTickets }),
+    [customers, employees, recentTickets]
+  )
+  const getSuggestions = (text) => rankSuggestions(suggestions, text, { customerId: formData.customerId })
 
   const handleChange = (field, value) => {
     setFormData(prev => ({ ...prev, [field]: value }))
@@ -92,34 +77,37 @@ export default function CreateTicketModal({ isOpen, onClose, onCreate, customers
     if (error) setError('')
   }
 
+  // Das Ende darf nicht vor dem Start liegen, deshalb rueckt es mit
+  const handleStartDateChange = (value) => {
+    setFormData(prev => ({
+      ...prev,
+      startDate: value,
+      deadline: value && prev.deadline && prev.deadline < value ? value : prev.deadline
+    }))
+    if (error) setError('')
+  }
+
   const handleSubmit = async (e) => {
     e.preventDefault()
     setLoading(true)
     setError('')
-    
+
+    const customer = customers.find(c => c.$id === formData.customerId)
+    const { urgent, ...fields } = formData
     try {
-      const result = await onCreate(formData)
+      const result = await onCreate({
+        ...fields,
+        priority: priorityFor(urgent),
+        customerName: customer?.name || '',
+        customerLocation: customer?.location || '',
+        startDate: isoToGermanDate(formData.startDate),
+        startTime: timeToWoms(formData.startTime),
+        deadline: isoToGermanDate(formData.deadline),
+        endTime: timeToWoms(formData.endTime)
+      })
       if (result.success) {
         onClose()
-        setFormData({
-          customerId: '',
-          type: TICKET_TYPES[0] || 'Supportrequest',
-          systemType: '',
-          responseLevel: '',
-          serviceType: SERVICE_TYPES[0] || 'Remote',
-          priority: PRIORITIES.find(p => p.value === 1)?.value || 1,
-          topic: '',
-          requestedBy: '',
-          requestedFor: '',
-          startDate: today,
-          startTime: '',
-          deadline: today,
-          endTime: '',
-          estimate: '30',
-          mailCopyTo: '',
-          sendNotification: false,
-          details: ''
-        })
+        setFormData(emptyForm())
       } else {
         setError(result.error || 'Fehler beim Erstellen des Tickets')
       }
@@ -139,26 +127,26 @@ export default function CreateTicketModal({ isOpen, onClose, onCreate, customers
         <FaTimes />
       </span>
       <div className="overlay-content">
-        <h2 className="mb-2">Create New Ticket</h2>
-        
+        <h2 className="mb-2">Neues Ticket</h2>
+
         {error && (
           <div className="bg-red text-white p-2 mb-2" style={{ borderRadius: '4px' }}>
             {error}
           </div>
         )}
-        
+
         <form onSubmit={handleSubmit}>
           <div className="row">
             <div className="col col-6">
               <div className="form-group">
-                <label className="form-label">Customer ID</label>
+                <label className="form-label">Kunde</label>
                 <select
                   className="form-control"
                   value={formData.customerId}
                   onChange={(e) => handleChange('customerId', e.target.value)}
                   required
                 >
-                  <option value="">Affected Customer</option>
+                  <option value="">Kunde wählen</option>
                   {customers.map(c => (
                     <option key={c.$id} value={c.$id}>({c.code || ''}) {c.name || 'Unnamed'}</option>
                   ))}
@@ -166,109 +154,46 @@ export default function CreateTicketModal({ isOpen, onClose, onCreate, customers
               </div>
 
               <div className="form-group">
-                <label className="form-label">Work Order Type</label>
+                <label className="form-label">Art</label>
                 <select
                   className="form-control"
                   value={formData.type}
                   onChange={(e) => handleChange('type', e.target.value)}
                 >
                   {TICKET_TYPES.map(type => (
-                    <option key={type} value={type}>{type}</option>
+                    <option key={type.value} value={type.value}>{type.label}</option>
                   ))}
                 </select>
               </div>
 
               <div className="form-group">
-                <label className="form-label">Affected System</label>
-                <select
-                  className="form-control"
-                  value={formData.systemType}
-                  onChange={(e) => handleChange('systemType', e.target.value)}
-                  required
-                >
-                  <option value="">Affected System</option>
-                  {SYSTEMS.map(sys => (
-                    <option key={sys} value={sys}>{sys}</option>
-                  ))}
-                </select>
+                <label style={{ display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer' }}>
+                  <input
+                    type="checkbox"
+                    checked={formData.urgent}
+                    onChange={(e) => handleChange('urgent', e.target.checked)}
+                  />
+                  Dringend
+                </label>
               </div>
 
-              <div className="form-group">
-                <label className="form-label">Response Level</label>
-                <select
-                  className="form-control"
-                  value={formData.responseLevel}
-                  onChange={(e) => handleChange('responseLevel', e.target.value)}
-                >
-                  <option value="">Response Level</option>
-                  {RESPONSE_LEVELS.map(level => (
-                    <option key={level} value={level}>{level}</option>
-                  ))}
-                </select>
-              </div>
-
-              <div className="form-group">
-                <label className="form-label">Service Type</label>
-                <select
-                  className="form-control"
-                  value={formData.serviceType}
-                  onChange={(e) => handleChange('serviceType', e.target.value)}
-                >
-                  {SERVICE_TYPES.map(type => (
-                    <option key={type} value={type}>{type}</option>
-                  ))}
-                </select>
-              </div>
-
-              <div className="form-group">
-                <label className="form-label">Priority</label>
-                <select
-                  className="form-control"
-                  value={formData.priority}
-                  onChange={(e) => handleChange('priority', parseInt(e.target.value))}
-                  required
-                >
-                  <option value="">Priority Level</option>
-                  {PRIORITIES.map(p => (
-                    <option key={p.value} value={p.value}>{p.label}</option>
-                  ))}
-                </select>
-              </div>
-
-              <div className="form-group">
-                <label className="form-label">Assigned To</label>
-                <select
-                  className="form-control"
-                  value={formData.assignedTo}
-                  onChange={(e) => {
-                    const userId = e.target.value
-                    handleChange('assignedTo', userId)
-                    // Status-Automatik: Wenn Mitarbeiter zugewiesen → Status = "Assigned"
-                    // Wenn kein Mitarbeiter → Status = "Open"
-                    if (userId) {
-                      handleChange('status', 'Assigned')
-                    } else {
-                      handleChange('status', 'Open')
-                    }
-                  }}
-                >
-                  <option value="">Unassigned</option>
-                  {employees.map(emp => (
-                    <option key={emp.$id} value={emp.userId}>
-                      {emp.displayName}{emp.shortcode ? ` (${emp.shortcode})` : ''}
-                    </option>
-                  ))}
-                </select>
+              <div className="form-group automatic-assignment-note">
+                <label className="form-label">Zuweisung</label>
+                <p>
+                  {employees.length > 0
+                    ? `Automatisch an den Mitarbeiter mit der geringsten Anzahl offener Tickets (${employees.length} verfügbar).`
+                    : 'Es ist noch kein Mitarbeiter verfügbar. Das Ticket bleibt zunächst offen.'}
+                </p>
               </div>
             </div>
 
             <div className="col col-6">
               <div className="form-group">
-                <label className="form-label">Topic</label>
+                <label className="form-label">Betreff</label>
                 <input
                   type="text"
                   className="form-control"
-                  placeholder="Topic"
+                  placeholder="Worum geht es?"
                   value={formData.topic}
                   onChange={(e) => handleChange('topic', e.target.value)}
                   required
@@ -276,125 +201,62 @@ export default function CreateTicketModal({ isOpen, onClose, onCreate, customers
               </div>
 
               <div className="form-group">
-                <label className="form-label">Requested by</label>
-                <input
-                  type="text"
-                  className="form-control"
+                <label className="form-label" htmlFor="ticket-requested-by">Angefragt von</label>
+                <AutocompleteInput
+                  id="ticket-requested-by"
                   placeholder="Name"
                   value={formData.requestedBy}
-                  onChange={(e) => handleChange('requestedBy', e.target.value)}
+                  onChange={(value) => handleChange('requestedBy', value)}
+                  getSuggestions={getSuggestions}
                   required
                 />
               </div>
 
               <div className="form-group">
-                <label className="form-label">Requested for</label>
-                <input
-                  type="text"
-                  className="form-control"
-                  placeholder="Name"
-                  value={formData.requestedFor}
-                  onChange={(e) => handleChange('requestedFor', e.target.value)}
+                <label className="form-label" htmlFor="ticket-start-date">Beginn</label>
+                <DateTimeInput
+                  id="ticket-start-date"
+                  timeLabel="Uhrzeit Beginn"
+                  date={formData.startDate}
+                  time={formData.startTime}
+                  onDateChange={handleStartDateChange}
+                  onTimeChange={(value) => handleChange('startTime', value)}
                 />
               </div>
 
               <div className="form-group">
-                <label className="form-label">Start Date & Time</label>
-                <div style={{ display: 'flex', gap: '8px' }}>
-                  <input
-                    type="text"
-                    className="form-control"
-                    placeholder="dd.mm.yyyy"
-                    value={formData.startDate}
-                    onChange={(e) => handleChange('startDate', e.target.value)}
-                    style={{ flex: 1 }}
-                  />
-                  <input
-                    type="text"
-                    className="form-control"
-                    placeholder="hhmm"
-                    value={formData.startTime}
-                    onChange={(e) => handleChange('startTime', e.target.value)}
-                    style={{ flex: 1 }}
-                  />
-                </div>
-              </div>
-
-              <div className="form-group">
-                <label className="form-label">End Date & Time (Deadline)</label>
-                <div style={{ display: 'flex', gap: '8px' }}>
-                  <input
-                    type="text"
-                    className="form-control"
-                    placeholder="dd.mm.yyyy"
-                    value={formData.deadline}
-                    onChange={(e) => handleChange('deadline', e.target.value)}
-                    style={{ flex: 1 }}
-                  />
-                  <input
-                    type="text"
-                    className="form-control"
-                    placeholder="hhmm"
-                    value={formData.endTime}
-                    onChange={(e) => handleChange('endTime', e.target.value)}
-                    style={{ flex: 1 }}
-                  />
-                </div>
-              </div>
-
-              <div className="form-group">
-                <label className="form-label">Workload Estimate</label>
-                <input
-                  type="text"
-                  className="form-control"
-                  placeholder="xx minutes"
-                  value={formData.estimate}
-                  onChange={(e) => handleChange('estimate', e.target.value)}
+                <label className="form-label" htmlFor="ticket-end-date">Deadline</label>
+                <DateTimeInput
+                  id="ticket-end-date"
+                  timeLabel="Uhrzeit Deadline"
+                  min={formData.startDate}
+                  date={formData.deadline}
+                  time={formData.endTime}
+                  onDateChange={(value) => handleChange('deadline', value)}
+                  onTimeChange={(value) => handleChange('endTime', value)}
                 />
               </div>
-
-              <div className="form-group">
-                <label className="form-label">Notification Recipient(s)</label>
-                <input
-                  type="text"
-                  className="form-control"
-                  placeholder="name@domain.xx"
-                  value={formData.mailCopyTo}
-                  onChange={(e) => handleChange('mailCopyTo', e.target.value)}
-                />
-              </div>
-
-              <div className="form-group">
-                <label style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-                  <input
-                    type="checkbox"
-                    checked={formData.sendNotification}
-                    onChange={(e) => handleChange('sendNotification', e.target.checked)}
-                  />
-                  Send Notification?
-                </label>
-              </div>
             </div>
           </div>
 
           <div className="form-group">
-            <label className="form-label">Details</label>
+            <label className="form-label">Beschreibung</label>
             <textarea
               className="form-control"
               rows={5}
-              placeholder="Details"
+              placeholder="Was soll gemacht werden?"
               value={formData.details}
               onChange={(e) => handleChange('details', e.target.value)}
             />
           </div>
 
           <div className="text-center mt-2">
-            <button 
-              type="submit" 
+            <button
+              type="submit"
               className="btn btn-dark"
               disabled={loading}
             >
-              {loading ? 'Creating...' : 'CREATE NOW'}
+              {loading ? 'Wird angelegt …' : 'Ticket anlegen'}
             </button>
           </div>
         </form>

src/components/CreateWorksheetModal.jsx

@@ -1,54 +1,48 @@
 import { useState, useEffect } from 'react'
+import { FaTimes } from 'react-icons/fa'
 import { useAuth } from '../context/AuthContext'
+import { SERVICE_TYPES, todayIso, isoToGermanDate, timeToWoms, minutesBetween } from '../lib/ticketForm'
+import { TICKET_STATUSES, statusLabel } from '../lib/ticketStatus'
+import { DateTimeInput } from './ui'
 
-const SERVICE_TYPES = ['Remote', 'On Site', 'Off Site', 'COMMENT']
+// Akquise-Tickets: Ergebnis des Kundenkontakts (statt technischer Status)
+const ACQUISITION_STATUS = ['In Kontakt', 'Zugesagt', 'Abgesagt']
 
-const STATUS_OPTIONS = [
-  'Open',
-  'Closed',
-  'Awaiting',
-  'Added Info',
-  'Occupied',
-  'Halted',
-  'Cancelled',
-  'Aborted',
-  'Assigned',
-  'In Test'
-]
+// Die sechs Status; ein alter Status (z. B. "Assigned") bleibt als aktuelle Auswahl sichtbar
+function statusOptionsFor(current) {
+  if (!current || TICKET_STATUSES.some((s) => s.value === current)) return TICKET_STATUSES
+  return [{ value: current, label: `${statusLabel(current)} (bisher)` }, ...TICKET_STATUSES]
+}
 
-const RESPONSE_LEVELS = [
-  'KEY USER',
-  '1st Level',
-  '2nd Level',
-  '3rd Level',
-  'FS/FE',
-  '24/7',
-  'TECH MGMT',
-  'Backoffice',
-  'BUSI MGMT',
-  'n/a'
-]
+// Datum als "yyyy-mm-dd", Uhrzeit als "hh:mm" (Werte der Kalender-Felder).
+// Die Service-Art kommt vom Ticket; das alte "Off Site" zaehlt als Fernwartung.
+const initialForm = (workorder, newStatus) => ({
+  serviceType: SERVICE_TYPES.some(t => t.value === workorder?.serviceType)
+    ? workorder.serviceType
+    : SERVICE_TYPES[0].value,
+  newStatus,
+  totalTime: 0,
+  startDate: todayIso(),
+  startTime: '',
+  endDate: todayIso(),
+  endTime: '',
+  details: '',
+  isComment: false,
+  countsToPlan: false
+})
 
 export default function CreateWorksheetModal({ isOpen, onClose, workorder, onCreate }) {
   const { user } = useAuth()
-  const today = new Date().toLocaleDateString('de-DE', { 
-    day: '2-digit', 
-    month: '2-digit', 
-    year: 'numeric' 
-  })
 
-  const [formData, setFormData] = useState({
-    serviceType: 'Remote',
-    newStatus: workorder?.status || 'Open',
-    newResponseLevel: workorder?.responseLevel || '',
-    totalTime: 0,
-    startDate: today,
-    startTime: '',
-    endDate: today,
-    endTime: '',
-    details: '',
-    isComment: false
-  })
+  const isAcquisition = workorder?.type === 'Akquise'
+  const statusOptions = isAcquisition
+    ? ACQUISITION_STATUS.map((s) => ({ value: s, label: s }))
+    : statusOptionsFor(workorder?.status)
+  const defaultStatus = isAcquisition
+    ? (ACQUISITION_STATUS.includes(workorder?.status) ? workorder.status : 'In Kontakt')
+    : (workorder?.status || 'Open')
+
+  const [formData, setFormData] = useState(() => initialForm(workorder, defaultStatus))
 
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState('')
@@ -57,63 +51,44 @@ export default function CreateWorksheetModal({ isOpen, onClose, workorder, onCre
   // Reset form wenn Modal geöffnet wird
   useEffect(() => {
     if (isOpen && workorder) {
-      setFormData({
-        serviceType: 'Remote',
-        newStatus: workorder.status || 'Open',
-        newResponseLevel: workorder.responseLevel || '',
-        totalTime: 0,
-        startDate: today,
-        startTime: '',
-        endDate: today,
-        endTime: '',
-        details: '',
-        isComment: false
-      })
+      setFormData(initialForm(workorder, defaultStatus))
       setError('')
       setAutoCalculate(true)
     }
-  }, [isOpen, workorder, today])
+  }, [isOpen, workorder, defaultStatus])
 
   // Automatische Zeitberechnung
   useEffect(() => {
-    if (autoCalculate && formData.startTime && formData.endTime && !formData.isComment) {
-      try {
-        const startHour = parseInt(formData.startTime.substring(0, 2))
-        const startMin = parseInt(formData.startTime.substring(2, 4))
-        const endHour = parseInt(formData.endTime.substring(0, 2))
-        const endMin = parseInt(formData.endTime.substring(2, 4))
-        
-        if (!isNaN(startHour) && !isNaN(startMin) && !isNaN(endHour) && !isNaN(endMin)) {
-          const startTotal = startHour * 60 + startMin
-          const endTotal = endHour * 60 + endMin
-          
-          let diff = endTotal - startTotal
-          if (diff < 0) {
-            diff += 24 * 60 // Overnight
-          }
-          
-          setFormData(prev => ({ ...prev, totalTime: diff }))
-        }
-      } catch (err) {
-        // Ignoriere Fehler
-      }
+    if (!autoCalculate || formData.isComment) return
+    const minutes = minutesBetween(formData.startTime, formData.endTime)
+    if (minutes !== null) {
+      setFormData(prev => ({ ...prev, totalTime: minutes }))
     }
   }, [formData.startTime, formData.endTime, formData.isComment, autoCalculate])
 
   const handleChange = (field, value) => {
     setFormData(prev => ({ ...prev, [field]: value }))
-    
+
     // Wenn totalTime manuell geändert wird, deaktiviere Auto-Berechnung
     if (field === 'totalTime') {
       setAutoCalculate(false)
     }
   }
 
+  // Das Ende darf nicht vor dem Start liegen, deshalb rueckt es mit
+  const handleStartDateChange = (value) => {
+    setFormData(prev => ({
+      ...prev,
+      startDate: value,
+      endDate: value && prev.endDate && prev.endDate < value ? value : prev.endDate
+    }))
+  }
+
   const handleSubmit = async (e) => {
     e.preventDefault()
     setLoading(true)
     setError('')
-    
+
     try {
       if (!formData.details.trim()) {
         setError('Bitte Details eingeben')
@@ -127,24 +102,23 @@ export default function CreateWorksheetModal({ isOpen, onClose, workorder, onCre
         serviceType: formData.serviceType,
         oldStatus: workorder.status,
         newStatus: formData.newStatus,
-        oldResponseLevel: workorder.responseLevel || '',
-        newResponseLevel: formData.newResponseLevel,
         totalTime: formData.isComment ? 0 : parseInt(formData.totalTime) || 0,
-        startDate: formData.startDate,
-        startTime: formData.startTime,
-        endDate: formData.endDate,
-        endTime: formData.endTime,
+        startDate: isoToGermanDate(formData.startDate),
+        startTime: timeToWoms(formData.startTime),
+        endDate: isoToGermanDate(formData.endDate),
+        endTime: timeToWoms(formData.endTime),
         details: formData.details,
         isComment: formData.isComment,
+        countsToPlan: !formData.isComment && formData.countsToPlan,
         employeeShort: user?.prefs?.shortCode || '' // Aus User-Preferences
       }
 
       const result = await onCreate(worksheetData, user)
-      
+
       if (result.success) {
         onClose()
       } else {
-        setError(result.error || 'Fehler beim Erstellen des Worksheets')
+        setError(result.error || 'Fehler beim Speichern des Arbeitsblatts')
       }
     } catch (err) {
       console.error('Error creating worksheet:', err)
@@ -157,280 +131,149 @@ export default function CreateWorksheetModal({ isOpen, onClose, workorder, onCre
   if (!isOpen || !workorder) return null
 
   return (
-    <div className="overlay" style={{ 
-      width: '100%',
-      background: 'rgba(0,0,0,0.95)'
-    }}>
-      <a href="#" className="closebtn" onClick={(e) => { e.preventDefault(); onClose(); }} style={{
-        background: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
-        borderRadius: '50%',
-        width: '60px',
-        height: '60px',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        fontSize: '2rem',
-        transition: 'transform 0.2s ease'
-      }} onMouseEnter={(e) => e.currentTarget.style.transform = 'rotate(90deg)'} onMouseLeave={(e) => e.currentTarget.style.transform = 'rotate(0deg)'}>×</a>
-      
-      <div className="overlay-content text-white text-left">
-        <form onSubmit={handleSubmit}>
-          <div className="container">
-            <div className="row">
-              <div className="col-1">&nbsp;</div>
-              <div className="col-10">
-                <div className="mb-4 p-4 rounded-3" style={{
-                  background: 'linear-gradient(135deg, #2d3748 0%, #1a202c 100%)',
-                  boxShadow: '0 8px 32px rgba(45, 55, 72, 0.3)'
-                }}>
-                  <h2 className="mb-0 d-flex align-items-center">
-                    <span className="me-3" style={{
-                      background: 'rgba(16, 185, 129, 0.4)',
-                      borderRadius: '10px',
-                      padding: '10px 15px'
-                    }}>📝</span>
-                    Create New Worksheet
-                    <span className="ms-3 badge" style={{
-                      background: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
-                      fontSize: '1rem'
-                    }}>WOID {workorder.woid}</span>
-                  </h2>
-                </div>
-              </div>
-              <div className="col-1">&nbsp;</div>
-            </div>
+    <div className="overlay">
+      <span className="overlay-close" onClick={onClose}>
+        <FaTimes />
+      </span>
+      <div className="overlay-content">
+        <h2 className="mb-2">Neues Arbeitsblatt – Ticket {workorder.woid}</h2>
+
+        {error && (
+          <div className="bg-red text-white p-2 mb-2" style={{ borderRadius: '4px' }}>
+            {error}
           </div>
+        )}
 
-          {error && (
-            <div className="container">
-              <div className="row">
-                <div className="col-1">&nbsp;</div>
-                <div className="col-10">
-                  <div className="alert p-4 rounded-3 border-0" style={{
-                    background: 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)',
-                    color: 'white',
-                    boxShadow: '0 4px 16px rgba(239, 68, 68, 0.3)'
-                  }} role="alert">
-                    <strong>⚠️ {error}</strong>
-                  </div>
-                </div>
-                <div className="col-1">&nbsp;</div>
-              </div>
-            </div>
-          )}
-
-          <div className="container">
-            <div className="row">
-              <div className="col-1">&nbsp;</div>
-              
-              {/* Linke Spalte */}
-              <div className="col-5">
-                <span className="text-left">Service Type</span><br />
-                <select 
-                  className="form-select bg-dark text-white"
+        <form onSubmit={handleSubmit}>
+          <div className="row">
+            <div className="col col-6">
+              <div className="form-group">
+                <label className="form-label">Art</label>
+                <select
+                  className="form-control"
                   value={formData.serviceType}
                   onChange={(e) => handleChange('serviceType', e.target.value)}
                   required
                 >
                   {SERVICE_TYPES.map(type => (
-                    <option key={type} value={type}>{type}</option>
+                    <option key={type.value} value={type.value}>{type.label}</option>
                   ))}
                 </select>
-                <br /><br />
+              </div>
 
-                <span className="text-left">New Status</span><br />
-                <select 
-                  className="form-select bg-dark text-white"
+              <div className="form-group">
+                <label className="form-label">{isAcquisition ? 'Akquise-Ergebnis' : 'Neuer Status'}</label>
+                <select
+                  className="form-control"
                   value={formData.newStatus}
                   onChange={(e) => handleChange('newStatus', e.target.value)}
                   required
                 >
-                  {STATUS_OPTIONS.map(status => (
-                    <option key={status} value={status}>{status}</option>
+                  {statusOptions.map(status => (
+                    <option key={status.value} value={status.value}>{status.label}</option>
                   ))}
                 </select>
-                <br /><br />
+                {isAcquisition && (
+                  <small style={{ color: '#a0aec0', fontSize: '12px' }}>
+                    "Zugesagt" macht den Lead automatisch zum festen Kunden.
+                  </small>
+                )}
+              </div>
 
-                <span className="text-left">New Response Level</span><br />
-                <select 
-                  className="form-select bg-dark text-white"
-                  value={formData.newResponseLevel}
-                  onChange={(e) => handleChange('newResponseLevel', e.target.value)}
-                >
-                  <option value="">Select</option>
-                  {RESPONSE_LEVELS.map(level => (
-                    <option key={level} value={level}>{level}</option>
-                  ))}
-                </select>
-                <br /><br />
-
-                <div className="form-check">
-                  <input 
-                    type="checkbox" 
-                    className="form-check-input"
-                    id="isComment"
+              <div className="form-group">
+                <label style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                  <input
+                    type="checkbox"
                     checked={formData.isComment}
                     onChange={(e) => handleChange('isComment', e.target.checked)}
                   />
-                  <label className="form-check-label" htmlFor="isComment">
-                    Nur Kommentar (keine Arbeitszeit)
-                  </label>
-                </div>
-                <br />
+                  Nur Kommentar (keine Arbeitszeit)
+                </label>
               </div>
 
-              {/* Rechte Spalte */}
-              <div className="col-5">
-                <span className="text-left">Total Time (Minuten)</span><br />
-                <input 
+              <div className="form-group">
+                <label style={{ display: 'flex', alignItems: 'center', gap: '8px' }} title="Zeit wird vom Stundenguthaben des Wartungs-Abos abgezogen und im Kundenportal angezeigt">
+                  <input
+                    type="checkbox"
+                    checked={formData.countsToPlan && !formData.isComment}
+                    disabled={formData.isComment}
+                    onChange={(e) => handleChange('countsToPlan', e.target.checked)}
+                  />
+                  Vom Abo-Stundenkonto abziehen
+                </label>
+              </div>
+            </div>
+
+            <div className="col col-6">
+              <div className="form-group">
+                <label className="form-label" htmlFor="worksheet-start-date">Beginn</label>
+                <DateTimeInput
+                  id="worksheet-start-date"
+                  timeLabel="Uhrzeit Beginn"
+                  required
+                  date={formData.startDate}
+                  time={formData.startTime}
+                  onDateChange={handleStartDateChange}
+                  onTimeChange={(value) => handleChange('startTime', value)}
+                />
+              </div>
+
+              <div className="form-group">
+                <label className="form-label" htmlFor="worksheet-end-date">Ende</label>
+                <DateTimeInput
+                  id="worksheet-end-date"
+                  timeLabel="Uhrzeit Ende"
+                  required
+                  min={formData.startDate}
+                  date={formData.endDate}
+                  time={formData.endTime}
+                  onDateChange={(value) => handleChange('endDate', value)}
+                  onTimeChange={(value) => handleChange('endTime', value)}
+                />
+              </div>
+
+              <div className="form-group">
+                <label className="form-label">Arbeitszeit (Minuten)</label>
+                {/* Ganze Minuten: mit step 15 blockierte der Browser berechnete Zeiten wie 70 */}
+                <input
                   type="number"
-                  className="form-control bg-dark text-white"
+                  className="form-control"
                   min="0"
-                  step="15"
+                  step="1"
                   value={formData.totalTime}
                   onChange={(e) => handleChange('totalTime', e.target.value)}
                   disabled={formData.isComment}
                   placeholder="0"
                 />
-                <small className="text-muted">
-                  {autoCalculate && formData.startTime && formData.endTime 
-                    ? '✓ Automatisch berechnet' 
+                <small style={{ color: '#a0aec0', fontSize: '12px' }}>
+                  {autoCalculate && formData.startTime && formData.endTime
+                    ? '✓ Automatisch berechnet'
                     : 'Manuell eingeben'}
                 </small>
-                <br /><br />
-
-                <span className="text-left">Start Date (dd.mm.yyyy)</span><br />
-                <input 
-                  type="text"
-                  className="form-control bg-dark text-white"
-                  value={formData.startDate}
-                  onChange={(e) => handleChange('startDate', e.target.value)}
-                  pattern="^[0-3][0-9]\.[0-1][0-9]\.[1-2][0-9][0-9][0-9]$"
-                  required
-                />
-                <br /><br />
-
-                <span className="text-left">End Date (dd.mm.yyyy)</span><br />
-                <input 
-                  type="text"
-                  className="form-control bg-dark text-white"
-                  value={formData.endDate}
-                  onChange={(e) => handleChange('endDate', e.target.value)}
-                  pattern="^[0-3][0-9]\.[0-1][0-9]\.[1-2][0-9][0-9][0-9]$"
-                  required
-                />
-                <br /><br />
-
-                <span className="text-left">Start Time (hhmm)</span><br />
-                <input 
-                  type="text"
-                  className="form-control bg-dark text-white"
-                  value={formData.startTime}
-                  onChange={(e) => handleChange('startTime', e.target.value)}
-                  pattern="[0-2][0-9][0-5][0-9]"
-                  placeholder="1000"
-                  maxLength="4"
-                />
-                <br /><br />
-
-                <span className="text-left">End Time (hhmm)</span><br />
-                <input 
-                  type="text"
-                  className="form-control bg-dark text-white"
-                  value={formData.endTime}
-                  onChange={(e) => handleChange('endTime', e.target.value)}
-                  pattern="[0-2][0-9][0-5][0-9]"
-                  placeholder="1030"
-                  maxLength="4"
-                />
-                <br /><br />
               </div>
-
-              <div className="col-1">&nbsp;</div>
             </div>
           </div>
 
-          <div className="container">
-            <div className="row">
-              <div className="col-1">&nbsp;</div>
-              <div className="col-10">
-                <span className="text-left">Action Details</span><br />
-                <textarea 
-                  className="form-control bg-dark text-white"
-                  rows="10"
-                  value={formData.details}
-                  onChange={(e) => handleChange('details', e.target.value)}
-                  placeholder="Beschreibe die durchgeführten Arbeiten..."
-                  required
-                ></textarea>
-              </div>
-              <div className="col-1">&nbsp;</div>
-            </div>
+          <div className="form-group">
+            <label className="form-label">Was wurde gemacht?</label>
+            <textarea
+              className="form-control"
+              rows={5}
+              placeholder="Beschreibe die durchgeführten Arbeiten..."
+              value={formData.details}
+              onChange={(e) => handleChange('details', e.target.value)}
+              required
+            />
           </div>
 
-          <div className="container">
-            <div className="row">
-              <div className="col-1">&nbsp;</div>
-              <div className="col-10 text-center">
-                <p>&nbsp;</p>
-                <button 
-                  type="submit" 
-                  className="btn btn-lg px-5 py-3 border-0"
-                  style={{
-                    background: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
-                    color: 'white',
-                    fontSize: '1.2rem',
-                    fontWeight: 'bold',
-                    boxShadow: '0 8px 32px rgba(16, 185, 129, 0.4)',
-                    transition: 'transform 0.2s ease, box-shadow 0.2s ease'
-                  }}
-                  onMouseEnter={(e) => {
-                    e.currentTarget.style.transform = 'translateY(-2px)'
-                    e.currentTarget.style.boxShadow = '0 12px 40px rgba(16, 185, 129, 0.5)'
-                  }}
-                  onMouseLeave={(e) => {
-                    e.currentTarget.style.transform = 'translateY(0)'
-                    e.currentTarget.style.boxShadow = '0 8px 32px rgba(16, 185, 129, 0.4)'
-                  }}
-                  disabled={loading}
-                >
-                  {loading ? '⏳ Erstelle...' : '✨ CREATE NOW'}
-                </button>
-                <p>&nbsp;</p>
-              </div>
-              <div className="col-1">&nbsp;</div>
-            </div>
-          </div>
-
-          {/* Info Box */}
-          <div className="container">
-            <div className="row">
-              <div className="col-1">&nbsp;</div>
-              <div className="col-10">
-                <div className="p-4 rounded-3 border-0" style={{
-                  background: 'linear-gradient(135deg, #4a5568 0%, #2d3748 100%)',
-                  color: 'white',
-                  boxShadow: '0 4px 16px rgba(74, 85, 104, 0.3)'
-                }} role="alert">
-                  <strong className="d-block mb-2">📋 Current Work Order</strong>
-                  <div className="d-flex flex-wrap gap-3">
-                    <span className="badge px-3 py-2" style={{
-                      background: 'rgba(16, 185, 129, 0.4)',
-                      fontSize: '0.9rem'
-                    }}>WOID: {workorder.woid}</span>
-                    <span className="badge px-3 py-2" style={{
-                      background: 'rgba(16, 185, 129, 0.4)',
-                      fontSize: '0.9rem'
-                    }}>Status: {workorder.status}</span>
-                    <span className="badge px-3 py-2" style={{
-                      background: 'rgba(16, 185, 129, 0.4)',
-                      fontSize: '0.9rem'
-                    }}>Topic: {workorder.topic}</span>
-                  </div>
-                </div>
-              </div>
-              <div className="col-1">&nbsp;</div>
-            </div>
+          <div className="text-center mt-2">
+            <button
+              type="submit"
+              className="btn btn-dark"
+              disabled={loading}
+            >
+              {loading ? 'Speichert …' : 'Speichern'}
+            </button>
           </div>
         </form>
       </div>

src/components/FileUploadModal.jsx

@@ -1,96 +0,0 @@
-import { useState, useRef } from 'react'
-import { FaTimes, FaSpinner } from 'react-icons/fa'
-import { storage, BUCKET_ID, ID } from '../lib/appwrite'
-
-export default function FileUploadModal({ isOpen, onClose, workorderId, onUploadComplete }) {
-  const [uploading, setUploading] = useState(false)
-  const [dragOver, setDragOver] = useState(false)
-  const fileInputRef = useRef(null)
-
-  const handleDrop = async (e) => {
-    e.preventDefault()
-    setDragOver(false)
-    
-    const file = e.dataTransfer.files[0]
-    if (file) {
-      await uploadFile(file)
-    }
-  }
-
-  const handleFileSelect = async (e) => {
-    const file = e.target.files[0]
-    if (file) {
-      await uploadFile(file)
-    }
-  }
-
-  const uploadFile = async (file) => {
-    // Validate file type
-    const allowedTypes = ['application/pdf', 'image/gif', 'image/png', 'image/jpeg']
-    if (!allowedTypes.includes(file.type)) {
-      alert('Only PDF, GIF, PNG, and JPEG files are allowed.')
-      return
-    }
-
-    setUploading(true)
-    
-    try {
-      const response = await storage.createFile(
-        BUCKET_ID,
-        ID.unique(),
-        file
-      )
-      
-      onUploadComplete?.(response)
-      onClose()
-    } catch (error) {
-      console.error('Upload error:', error)
-      alert('Error uploading file: ' + error.message)
-    } finally {
-      setUploading(false)
-    }
-  }
-
-  if (!isOpen) return null
-
-  return (
-    <div className="overlay">
-      <span className="overlay-close" onClick={onClose}>
-        <FaTimes />
-      </span>
-      <div className="overlay-content">
-        <h2 className="text-center mb-2">UPLOAD AREA</h2>
-        <p className="mb-2">Upload Attachments for WOID {workorderId}</p>
-        
-        <div
-          className={`drop-zone ${dragOver ? 'border-green' : ''}`}
-          onDrop={handleDrop}
-          onDragOver={(e) => { e.preventDefault(); setDragOver(true) }}
-          onDragLeave={() => setDragOver(false)}
-          onClick={() => fileInputRef.current?.click()}
-        >
-          {uploading ? (
-            <div>
-              <FaSpinner className="spinner" size={32} />
-              <p className="mt-1">Uploading file...</p>
-            </div>
-          ) : (
-            <>
-              <p>Drop file here (.pdf, .gif, .png, .jpg, .jpeg)</p>
-              <p className="mt-1">or</p>
-              <button className="btn btn-dark mt-1">Select File</button>
-            </>
-          )}
-        </div>
-        
-        <input
-          ref={fileInputRef}
-          type="file"
-          accept=".pdf,.gif,.png,.jpg,.jpeg"
-          style={{ display: 'none' }}
-          onChange={handleFileSelect}
-        />
-      </div>
-    </div>
-  )
-}

src/components/Footer.jsx

@@ -1,12 +1,8 @@
 export default function Footer() {
   return (
     <footer className="footer">
-      <p>
-        WOMS 2.0 - Work Order Management System | 
-        Powered by <a href="https://appwrite.io" target="_blank" rel="noopener noreferrer">Appwrite</a> & React
-      </p>
-      <p className="text-small text-grey">
-        © {new Date().getFullYear()} - All rights reserved
+      <p className="faint" style={{ fontSize: 13, margin: 0 }}>
+        Webklar Ticket-Plattform · © {new Date().getFullYear()}
       </p>
     </footer>
   )

src/components/GiteaLinkButton.jsx

@@ -0,0 +1,30 @@
+import { SiGitea } from 'react-icons/si'
+
+export default function GiteaLinkButton({ href, title = 'In Gitea oeffnen', size = 16 }) {
+  if (!href) return null
+
+  return (
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      title={title}
+      aria-label={title}
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: 32,
+        height: 32,
+        borderRadius: 6,
+        background: 'rgba(99, 102, 241, 0.15)',
+        border: '1px solid rgba(99, 102, 241, 0.35)',
+        color: '#818cf8',
+        textDecoration: 'none',
+        flexShrink: 0,
+      }}
+    >
+      <SiGitea size={size} />
+    </a>
+  )
+}

src/components/InvoicePanel.jsx

@@ -0,0 +1,262 @@
+import { useState, useEffect, useCallback } from 'react'
+import { FaFilePdf, FaPlus, FaLink, FaSpinner, FaRotate } from 'react-icons/fa6'
+import { databases, DATABASE_ID, COLLECTIONS } from '../lib/appwrite'
+import { integrationsApi, formatMoney, INVOICE_STATUS } from '../lib/integrationsApi'
+import { useInvoices } from '../hooks/useInvoices'
+import { customerStage, isInvoiceReady } from '../lib/leads'
+
+const card = {
+  background: 'rgba(45, 55, 72, 0.5)',
+  borderRadius: '12px',
+  padding: '16px',
+  border: '1px solid rgba(16, 185, 129, 0.2)',
+}
+
+export default function InvoicePanel({ ticket }) {
+  const [customer, setCustomer] = useState(null)
+  const [customerLoading, setCustomerLoading] = useState(true)
+  const [customerError, setCustomerError] = useState(null)
+
+  const loadCustomer = useCallback(async () => {
+    if (!ticket.customerId) {
+      setCustomer(null)
+      setCustomerLoading(false)
+      return
+    }
+    setCustomerLoading(true)
+    try {
+      const doc = await databases.getDocument(DATABASE_ID, COLLECTIONS.CUSTOMERS, ticket.customerId)
+      setCustomer(doc)
+      setCustomerError(null)
+    } catch (err) {
+      setCustomerError(err.message)
+      setCustomer(null)
+    } finally {
+      setCustomerLoading(false)
+    }
+  }, [ticket.customerId])
+
+  useEffect(() => {
+    loadCustomer()
+  }, [loadCustomer])
+
+  const clientId = customer?.invoiceNinjaClientId || null
+  const { invoices, loading, error, refresh } = useInvoices(clientId)
+
+  if (customerLoading) {
+    return (
+      <div style={card}>
+        <FaSpinner className="spinner" /> Kunde wird geladen...
+      </div>
+    )
+  }
+
+  if (!ticket.customerId) {
+    return (
+      <div style={card}>
+        <p style={{ color: '#a0aec0', margin: 0 }}>Kein Kunde am Ticket verknüpft, keine Rechnungen verfügbar.</p>
+      </div>
+    )
+  }
+
+  return (
+    <div style={card}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '12px' }}>
+        <h5 style={{ color: 'var(--dark-text)', fontWeight: 'bold', margin: 0, fontSize: '16px' }}>
+          Rechnungen {customer?.name ? `- ${customer.name}` : ''}
+        </h5>
+        {clientId && (
+          <button className="btn" onClick={refresh} title="Aktualisieren"
+            style={{ background: '#374151', color: 'white', border: 'none', padding: '6px 10px', borderRadius: '6px', cursor: 'pointer' }}>
+            <FaRotate />
+          </button>
+        )}
+      </div>
+
+      {customerError && <div className="text-red" style={{ marginBottom: 8 }}>{customerError}</div>}
+
+      {customer && customerStage(customer) === 'lead' ? (
+        <p style={{ color: '#a0aec0', margin: 0 }}>
+          Dieser Kunde ist noch ein Lead. Erst zum festen Kunden machen (im Kunden-Bereich, vollständige Daten nötig), dann sind Rechnungen möglich.
+        </p>
+      ) : !clientId && !isInvoiceReady(customer) ? (
+        <p style={{ color: '#a0aec0', margin: 0 }}>
+          Rechnungsdaten unvollständig. Bitte im Kunden-Bereich Unternehmen, E-Mail, Straße, PLZ und Stadt ergänzen.
+        </p>
+      ) : !clientId ? (
+        <LinkClient customer={customer} onLinked={loadCustomer} />
+      ) : (
+        <InvoiceList invoices={invoices} loading={loading} error={error} />
+      )}
+    </div>
+  )
+}
+
+// ---------------------------------------------------- Verknuepfung -----------
+function LinkClient({ customer, onLinked }) {
+  const [search, setSearch] = useState(customer?.name || '')
+  const [results, setResults] = useState([])
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState(null)
+  const [saving, setSaving] = useState(false)
+
+  const doSearch = async () => {
+    setBusy(true)
+    setError(null)
+    try {
+      const data = await integrationsApi.listClients(search)
+      setResults(data.clients || [])
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  useEffect(() => {
+    doSearch()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const saveMapping = async (clientId) => {
+    setSaving(true)
+    setError(null)
+    try {
+      await databases.updateDocument(DATABASE_ID, COLLECTIONS.CUSTOMERS, customer.$id, {
+        invoiceNinjaClientId: clientId,
+      })
+      onLinked()
+    } catch (err) {
+      setError(err.message)
+      setSaving(false)
+    }
+  }
+
+  const createAndLink = async () => {
+    setSaving(true)
+    setError(null)
+    try {
+      const data = await integrationsApi.createClient({
+        name: customer.name || customer.companyName || 'Neuer Kunde',
+        email: customer.email || '',
+        phone: customer.phone || '',
+        address: customer.location || '',
+      })
+      if (data.client?.id) {
+        await saveMapping(data.client.id)
+      } else {
+        throw new Error('Client konnte nicht angelegt werden')
+      }
+    } catch (err) {
+      setError(err.message)
+      setSaving(false)
+    }
+  }
+
+  return (
+    <div>
+      <p style={{ color: '#a0aec0', fontSize: '13px', marginTop: 0 }}>
+        Dieser Kunde ist noch nicht mit InvoiceNinja verknüpft.
+      </p>
+      <div style={{ display: 'flex', gap: '8px', marginBottom: '10px' }}>
+        <input
+          className="form-control"
+          style={{ margin: 0 }}
+          placeholder="InvoiceNinja-Kunde suchen …"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          onKeyDown={(e) => e.key === 'Enter' && doSearch()}
+        />
+        <button className="btn btn-green" style={{ margin: 0 }} onClick={doSearch} disabled={busy}>
+          {busy ? <FaSpinner className="spinner" /> : 'Suchen'}
+        </button>
+      </div>
+
+      {error && <div className="text-red" style={{ marginBottom: 8 }}>{error}</div>}
+
+      <div style={{ maxHeight: '180px', overflowY: 'auto', marginBottom: '10px' }}>
+        {results.map((c) => (
+          <div key={c.id} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '8px', borderBottom: '1px solid rgba(255,255,255,0.06)' }}>
+            <div>
+              <strong style={{ color: 'var(--dark-text)' }}>{c.name}</strong>
+              {c.number ? <span style={{ color: '#a0aec0' }}> · {c.number}</span> : null}
+              {c.email ? <div style={{ color: '#a0aec0', fontSize: '12px' }}>{c.email}</div> : null}
+            </div>
+            <button className="btn btn-green" style={{ margin: 0 }} disabled={saving} onClick={() => saveMapping(c.id)}>
+              <FaLink /> Verknüpfen
+            </button>
+          </div>
+        ))}
+        {!busy && results.length === 0 && (
+          <p style={{ color: '#a0aec0', fontSize: '13px' }}>Keine Treffer.</p>
+        )}
+      </div>
+
+      <button className="btn" style={{ background: '#3b82f6', color: 'white', border: 'none', padding: '10px 16px', borderRadius: '8px', cursor: 'pointer' }} disabled={saving} onClick={createAndLink}>
+        {saving ? <FaSpinner className="spinner" /> : <><FaPlus /> Neuen InvoiceNinja-Kunden anlegen &amp; verknüpfen</>}
+      </button>
+    </div>
+  )
+}
+
+// ---------------------------------------------------- Rechnungsliste ---------
+// Nur anzeigen: neue Rechnungen entstehen direkt in InvoiceNinja
+function InvoiceList({ invoices, loading, error }) {
+  const [openingId, setOpeningId] = useState(null)
+
+  const openPdf = async (id) => {
+    setOpeningId(id)
+    try {
+      await integrationsApi.openInvoicePdf(id)
+    } catch (err) {
+      alert('PDF konnte nicht geöffnet werden: ' + err.message)
+    } finally {
+      setOpeningId(null)
+    }
+  }
+
+  return (
+    <div>
+      {error && <div className="text-red" style={{ marginBottom: 8 }}>{error}</div>}
+
+      {loading ? (
+        <p style={{ color: '#a0aec0' }}><FaSpinner className="spinner" /> Rechnungen werden geladen...</p>
+      ) : invoices.length === 0 ? (
+        <p style={{ color: '#a0aec0', fontSize: '13px' }}>Noch keine Rechnungen für diesen Kunden.</p>
+      ) : (
+        <div style={{ overflowX: 'auto' }}>
+          <table className="table" style={{ width: '100%', fontSize: '13px' }}>
+            <thead>
+              <tr style={{ color: '#a0aec0', textAlign: 'left' }}>
+                <th>Nr.</th><th>Datum</th><th>Fällig</th><th>Betrag</th><th>Offen</th><th>Status</th><th></th>
+              </tr>
+            </thead>
+            <tbody>
+              {invoices.map((inv) => {
+                const st = INVOICE_STATUS[inv.status_id] || { label: '–', color: '#a0aec0' }
+                const overdue = Number(inv.balance) > 0 && inv.due_date && new Date(inv.due_date) < new Date()
+                return (
+                  <tr key={inv.id}>
+                    <td style={{ color: 'var(--dark-text)' }}>{inv.number || inv.id?.slice(-6)}</td>
+                    <td style={{ color: '#cbd5e0' }}>{inv.date || '-'}</td>
+                    <td style={{ color: overdue ? '#ef4444' : '#cbd5e0' }}>{inv.due_date || '-'}</td>
+                    <td style={{ color: 'var(--dark-text)' }}>{formatMoney(inv.amount)}</td>
+                    <td style={{ color: Number(inv.balance) > 0 ? '#f59e0b' : '#10b981' }}>{formatMoney(inv.balance)}</td>
+                    <td><span style={{ color: st.color, fontWeight: 'bold' }}>{st.label}{overdue ? ' (überfällig)' : ''}</span></td>
+                    <td>
+                      <button className="btn" title="PDF öffnen" disabled={openingId === inv.id}
+                        style={{ background: '#ef4444', color: 'white', border: 'none', padding: '6px 10px', borderRadius: '6px', cursor: 'pointer' }}
+                        onClick={() => openPdf(inv.id)}>
+                        {openingId === inv.id ? <FaSpinner className="spinner" /> : <FaFilePdf />}
+                      </button>
+                    </td>
+                  </tr>
+                )
+              })}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  )
+}

src/components/LetterGlitch.jsx

@@ -0,0 +1,245 @@
+import { useRef, useEffect } from 'react';
+
+const LetterGlitch = ({
+  glitchColors = ['#2b4539', '#61dca3', '#61b3dc'],
+  className = '',
+  glitchSpeed = 50,
+  centerVignette = false,
+  outerVignette = true,
+  smooth = true,
+  characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ!@#$&*()-_+=/[]{};:<>.,0123456789'
+}) => {
+  const canvasRef = useRef(null);
+  const animationRef = useRef(null);
+  const letters = useRef([]);
+  const grid = useRef({ columns: 0, rows: 0 });
+  const context = useRef(null);
+  const lastGlitchTime = useRef(Date.now());
+
+  const lettersAndSymbols = Array.from(characters);
+
+  const fontSize = 16;
+  const charWidth = 10;
+  const charHeight = 20;
+
+  const getRandomChar = () => {
+    return lettersAndSymbols[Math.floor(Math.random() * lettersAndSymbols.length)];
+  };
+
+  const getRandomColor = () => {
+    return glitchColors[Math.floor(Math.random() * glitchColors.length)];
+  };
+
+  const hexToRgb = hex => {
+    const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+    hex = hex.replace(shorthandRegex, (m, r, g, b) => {
+      return r + r + g + g + b + b;
+    });
+
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result
+      ? {
+          r: parseInt(result[1], 16),
+          g: parseInt(result[2], 16),
+          b: parseInt(result[3], 16)
+        }
+      : null;
+  };
+
+  const interpolateColor = (start, end, factor) => {
+    const result = {
+      r: Math.round(start.r + (end.r - start.r) * factor),
+      g: Math.round(start.g + (end.g - start.g) * factor),
+      b: Math.round(start.b + (end.b - start.b) * factor)
+    };
+    return `rgb(${result.r}, ${result.g}, ${result.b})`;
+  };
+
+  const calculateGrid = (width, height) => {
+    const columns = Math.ceil(width / charWidth);
+    const rows = Math.ceil(height / charHeight);
+    return { columns, rows };
+  };
+
+  const initializeLetters = (columns, rows) => {
+    grid.current = { columns, rows };
+    const totalLetters = columns * rows;
+    letters.current = Array.from({ length: totalLetters }, () => ({
+      char: getRandomChar(),
+      color: getRandomColor(),
+      targetColor: getRandomColor(),
+      colorProgress: 1
+    }));
+  };
+
+  const resizeCanvas = () => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const parent = canvas.parentElement;
+    if (!parent) return;
+
+    const dpr = window.devicePixelRatio || 1;
+    const rect = parent.getBoundingClientRect();
+
+    canvas.width = rect.width * dpr;
+    canvas.height = rect.height * dpr;
+
+    canvas.style.width = `${rect.width}px`;
+    canvas.style.height = `${rect.height}px`;
+
+    if (context.current) {
+      context.current.setTransform(dpr, 0, 0, dpr, 0, 0);
+    }
+
+    const { columns, rows } = calculateGrid(rect.width, rect.height);
+    initializeLetters(columns, rows);
+
+    drawLetters();
+  };
+
+  const drawLetters = () => {
+    if (!context.current || letters.current.length === 0) return;
+    const ctx = context.current;
+    const { width, height } = canvasRef.current.getBoundingClientRect();
+    ctx.clearRect(0, 0, width, height);
+    ctx.font = `${fontSize}px monospace`;
+    ctx.textBaseline = 'top';
+
+    letters.current.forEach((letter, index) => {
+      const x = (index % grid.current.columns) * charWidth;
+      const y = Math.floor(index / grid.current.columns) * charHeight;
+      ctx.fillStyle = letter.color;
+      ctx.fillText(letter.char, x, y);
+    });
+  };
+
+  const updateLetters = () => {
+    if (!letters.current || letters.current.length === 0) return;
+
+    const updateCount = Math.max(1, Math.floor(letters.current.length * 0.05));
+
+    for (let i = 0; i < updateCount; i++) {
+      const index = Math.floor(Math.random() * letters.current.length);
+      if (!letters.current[index]) continue;
+
+      letters.current[index].char = getRandomChar();
+      letters.current[index].targetColor = getRandomColor();
+
+      if (!smooth) {
+        letters.current[index].color = letters.current[index].targetColor;
+        letters.current[index].colorProgress = 1;
+      } else {
+        letters.current[index].colorProgress = 0;
+      }
+    }
+  };
+
+  const handleSmoothTransitions = () => {
+    let needsRedraw = false;
+    letters.current.forEach(letter => {
+      if (letter.colorProgress < 1) {
+        letter.colorProgress += 0.05;
+        if (letter.colorProgress > 1) letter.colorProgress = 1;
+
+        const startRgb = hexToRgb(letter.color);
+        const endRgb = hexToRgb(letter.targetColor);
+        if (startRgb && endRgb) {
+          letter.color = interpolateColor(startRgb, endRgb, letter.colorProgress);
+          needsRedraw = true;
+        }
+      }
+    });
+
+    if (needsRedraw) {
+      drawLetters();
+    }
+  };
+
+  const animate = () => {
+    const now = Date.now();
+    if (now - lastGlitchTime.current >= glitchSpeed) {
+      updateLetters();
+      drawLetters();
+      lastGlitchTime.current = now;
+    }
+
+    if (smooth) {
+      handleSmoothTransitions();
+    }
+
+    animationRef.current = requestAnimationFrame(animate);
+  };
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    context.current = canvas.getContext('2d');
+    resizeCanvas();
+    animate();
+
+    let resizeTimeout;
+
+    const handleResize = () => {
+      clearTimeout(resizeTimeout);
+      resizeTimeout = setTimeout(() => {
+        cancelAnimationFrame(animationRef.current);
+        resizeCanvas();
+        animate();
+      }, 100);
+    };
+
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      cancelAnimationFrame(animationRef.current);
+      window.removeEventListener('resize', handleResize);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [glitchSpeed, smooth]);
+
+  const containerStyle = {
+    position: 'relative',
+    width: '100%',
+    height: '100%',
+    backgroundColor: '#000000',
+    overflow: 'hidden'
+  };
+
+  const canvasStyle = {
+    display: 'block',
+    width: '100%',
+    height: '100%'
+  };
+
+  const outerVignetteStyle = {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    pointerEvents: 'none',
+    background: 'radial-gradient(circle, rgba(0,0,0,0) 60%, rgba(0,0,0,1) 100%)'
+  };
+
+  const centerVignetteStyle = {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    pointerEvents: 'none',
+    background: 'radial-gradient(circle, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 60%)'
+  };
+
+  return (
+    <div style={containerStyle} className={className}>
+      <canvas ref={canvasRef} style={canvasStyle} />
+      {outerVignette && <div style={outerVignetteStyle}></div>}
+      {centerVignette && <div style={centerVignetteStyle}></div>}
+    </div>
+  );
+};
+
+export default LetterGlitch;
+

src/components/ModernSidebar.css

@@ -1,138 +0,0 @@
-/* Modern Sidebar Styles */
-
-.modern-sidebar-desktop {
-  height: 100vh;
-  padding: 1rem;
-  display: none;
-  flex-direction: column;
-  background: var(--sidebar-bg, #f5f5f5);
-  border-right: 1px solid var(--border-color, #e0e0e0);
-  flex-shrink: 0;
-  overflow: hidden;
-  transition: width 0.3s ease;
-}
-
-@media (min-width: 768px) {
-  .modern-sidebar-desktop {
-    display: flex;
-  }
-}
-
-/* Mobile Sidebar */
-.modern-sidebar-mobile-header {
-  height: 60px;
-  padding: 1rem;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background: var(--sidebar-bg, #f5f5f5);
-  border-bottom: 1px solid var(--border-color, #e0e0e0);
-  width: 100%;
-}
-
-@media (min-width: 768px) {
-  .modern-sidebar-mobile-header {
-    display: none;
-  }
-}
-
-.modern-sidebar-mobile-toggle {
-  display: flex;
-  justify-content: flex-end;
-  width: 100%;
-  cursor: pointer;
-  color: var(--text-color, #333);
-}
-
-.modern-sidebar-mobile-toggle svg {
-  width: 24px;
-  height: 24px;
-}
-
-.modern-sidebar-mobile-menu {
-  position: fixed;
-  height: 100vh;
-  width: 100%;
-  inset: 0;
-  background: var(--sidebar-bg, #fff);
-  padding: 2.5rem;
-  z-index: 100;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-
-.modern-sidebar-mobile-close {
-  position: absolute;
-  right: 2.5rem;
-  top: 2.5rem;
-  z-index: 50;
-  cursor: pointer;
-  color: var(--text-color, #333);
-}
-
-.modern-sidebar-mobile-close svg {
-  width: 24px;
-  height: 24px;
-}
-
-/* Sidebar Link */
-.modern-sidebar-link {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 0.5rem;
-  padding: 0.75rem 0.5rem;
-  color: var(--text-color, #333);
-  text-decoration: none;
-  border-radius: 6px;
-  transition: all 0.15s ease;
-}
-
-.modern-sidebar-link:hover {
-  background: var(--hover-bg, rgba(0, 0, 0, 0.05));
-  transform: translateX(2px);
-}
-
-.modern-sidebar-link-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.modern-sidebar-link-icon svg {
-  width: 20px;
-  height: 20px;
-}
-
-.modern-sidebar-link-label {
-  font-size: 0.875rem;
-  white-space: pre;
-  margin: 0;
-  padding: 0;
-}
-
-/* Dark mode support */
-@media (prefers-color-scheme: dark) {
-  .modern-sidebar-desktop,
-  .modern-sidebar-mobile-header,
-  .modern-sidebar-mobile-menu {
-    background: var(--dark-sidebar-bg, #1a1a1a);
-    border-color: var(--dark-border-color, #333);
-  }
-  
-  .modern-sidebar-link {
-    color: var(--dark-text-color, #e0e0e0);
-  }
-  
-  .modern-sidebar-link:hover {
-    background: var(--dark-hover-bg, rgba(255, 255, 255, 0.1));
-  }
-  
-  .modern-sidebar-mobile-toggle,
-  .modern-sidebar-mobile-close {
-    color: var(--dark-text-color, #e0e0e0);
-  }
-}
-

src/components/ModernSidebar.jsx

@@ -1,116 +0,0 @@
-import { useState, createContext, useContext } from 'react'
-import { motion, AnimatePresence } from 'motion/react'
-import { IconMenu2, IconX } from '@tabler/icons-react'
-import { cn } from '../lib/utils'
-import './ModernSidebar.css'
-
-const SidebarContext = createContext(undefined)
-
-export const useSidebar = () => {
-  const context = useContext(SidebarContext)
-  if (!context) {
-    throw new Error('useSidebar must be used within a SidebarProvider')
-  }
-  return context
-}
-
-export const SidebarProvider = ({ children, open: openProp, setOpen: setOpenProp, animate = true }) => {
-  const [openState, setOpenState] = useState(false)
-  const open = openProp !== undefined ? openProp : openState
-  const setOpen = setOpenProp !== undefined ? setOpenProp : setOpenState
-
-  return (
-    <SidebarContext.Provider value={{ open, setOpen, animate }}>
-      {children}
-    </SidebarContext.Provider>
-  )
-}
-
-export const Sidebar = ({ children, open, setOpen, animate }) => {
-  return (
-    <SidebarProvider open={open} setOpen={setOpen} animate={animate}>
-      {children}
-    </SidebarProvider>
-  )
-}
-
-export const SidebarBody = ({ className, children, ...props }) => {
-  return (
-    <>
-      <DesktopSidebar className={className} {...props}>{children}</DesktopSidebar>
-      <MobileSidebar className={className}>{children}</MobileSidebar>
-    </>
-  )
-}
-
-export const DesktopSidebar = ({ className, children, ...props }) => {
-  const { open, setOpen, animate } = useSidebar()
-  
-  return (
-    <motion.div
-      className={cn('modern-sidebar-desktop', className)}
-      animate={{
-        width: animate ? (open ? '300px' : '60px') : '300px',
-      }}
-      onMouseEnter={() => setOpen(true)}
-      onMouseLeave={() => setOpen(false)}
-      {...props}
-    >
-      {children}
-    </motion.div>
-  )
-}
-
-export const MobileSidebar = ({ className, children }) => {
-  const { open, setOpen } = useSidebar()
-  
-  return (
-    <>
-      <div className="modern-sidebar-mobile-header">
-        <div className="modern-sidebar-mobile-toggle">
-          <IconMenu2 onClick={() => setOpen(!open)} />
-        </div>
-        <AnimatePresence>
-          {open && (
-            <motion.div
-              initial={{ x: '-100%', opacity: 0 }}
-              animate={{ x: 0, opacity: 1 }}
-              exit={{ x: '-100%', opacity: 0 }}
-              transition={{ duration: 0.3, ease: 'easeInOut' }}
-              className={cn('modern-sidebar-mobile-menu', className)}
-            >
-              <div className="modern-sidebar-mobile-close" onClick={() => setOpen(!open)}>
-                <IconX />
-              </div>
-              {children}
-            </motion.div>
-          )}
-        </AnimatePresence>
-      </div>
-    </>
-  )
-}
-
-export const SidebarLink = ({ link, className, ...props }) => {
-  const { open, animate } = useSidebar()
-  
-  return (
-    <a
-      href={link.href}
-      className={cn('modern-sidebar-link', className)}
-      {...props}
-    >
-      <span className="modern-sidebar-link-icon">{link.icon}</span>
-      <motion.span
-        animate={{
-          display: animate ? (open ? 'inline-block' : 'none') : 'inline-block',
-          opacity: animate ? (open ? 1 : 0) : 1,
-        }}
-        className="modern-sidebar-link-label"
-      >
-        {link.label}
-      </motion.span>
-    </a>
-  )
-}
-

src/components/Navbar.jsx

@@ -1,174 +1,90 @@
 import { useState } from 'react'
-import { Link, useNavigate } from 'react-router-dom'
+import { Link, useLocation, useNavigate } from 'react-router-dom'
 import { useAuth } from '../context/AuthContext'
-import { motion } from 'motion/react'
-import { 
-  IconTicket, 
-  IconDeviceDesktop, 
-  IconChartBar, 
-  IconCalendar, 
-  IconFolders, 
-  IconFileText, 
-  IconBook, 
+import {
+  IconTicket,
+  IconUsers,
+  IconTargetArrow,
+  IconReportMoney,
+  IconFolders,
+  IconCalendar,
+  IconRoute,
   IconSettings,
-  IconLogout
+  IconLogout,
+  IconLayoutSidebarLeftCollapse,
+  IconLayoutSidebarLeftExpand,
 } from '@tabler/icons-react'
-import { Sidebar, SidebarBody, SidebarLink } from './ModernSidebar'
 
-export default function Navbar() {
+export default function Sidebar() {
   const { user, logout, isAdmin } = useAuth()
   const navigate = useNavigate()
-  const [open, setOpen] = useState(false)
+  const location = useLocation()
+  const [collapsed, setCollapsed] = useState(false)
 
   const handleLogout = async () => {
     await logout()
     navigate('/login')
   }
 
+  // Eine flache Liste: fuer ein kleines Team reichen acht Eintraege ohne Gruppen
   const links = [
-    {
-      label: 'Tickets',
-      href: '/tickets',
-      icon: <IconTicket className="icon" />,
-    },
-    {
-      label: 'Assets',
-      href: '/assets',
-      icon: <IconDeviceDesktop className="icon" />,
-    },
-    {
-      label: 'Dashboard',
-      href: '/dashboard',
-      icon: <IconChartBar className="icon" />,
-    },
-    {
-      label: 'Planboard',
-      href: '/planboard',
-      icon: <IconCalendar className="icon" />,
-    },
-    {
-      label: 'Projects',
-      href: '/projects',
-      icon: <IconFolders className="icon" />,
-    },
-    {
-      label: 'Reports',
-      href: '/reports',
-      icon: <IconFileText className="icon" />,
-    },
-    {
-      label: 'Docs',
-      href: '/docs',
-      icon: <IconBook className="icon" />,
-    },
+    { label: 'Tickets', href: '/tickets', icon: <IconTicket /> },
+    { label: 'Planboard', href: '/planboard', icon: <IconCalendar /> },
+    { label: 'Roadmaps', href: '/roadmaps', icon: <IconRoute /> },
+    { label: 'Projekte', href: '/projects', icon: <IconFolders /> },
+    { label: 'Kunden', href: '/customers', icon: <IconUsers /> },
+    { label: 'Leads', href: '/leads', icon: <IconTargetArrow /> },
+    { label: 'Finanzen', href: '/finance', icon: <IconReportMoney /> },
+    ...(isAdmin ? [{ label: 'Admin', href: '/admin', icon: <IconSettings /> }] : []),
   ]
 
-  // Admin link nur wenn isAdmin
-  if (isAdmin) {
-    links.push({
-      label: 'Admin',
-      href: '/admin',
-      icon: <IconSettings className="icon" />,
-    })
-  }
+  const isActive = (href) =>
+    location.pathname === href || location.pathname.startsWith(href + '/')
 
   return (
-    <Sidebar open={open} setOpen={setOpen}>
-      <SidebarBody className="justify-between gap-10">
-        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflowX: 'hidden', overflowY: 'auto' }}>
-          <Logo />
-          <div style={{ marginTop: '2rem', display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
-            {links.map((link, idx) => (
-              <SidebarLink key={idx} link={link} />
-            ))}
+    <aside className={`side ${collapsed ? 'collapsed' : ''}`}>
+      <div className="side-head">
+        <Link to="/" className="side-logo" title="Webklar">W</Link>
+        <div className="side-brand">
+          Webklar
+          <small>Ticket-Plattform</small>
+        </div>
+      </div>
+
+      <nav className="side-nav">
+        <div className="side-group">
+          {links.map((link) => (
+            <Link
+              key={link.href}
+              to={link.href}
+              className={`side-link ${isActive(link.href) ? 'active' : ''}`}
+              title={link.label}
+            >
+              {link.icon}
+              <span className="side-link-label">{link.label}</span>
+            </Link>
+          ))}
+        </div>
+      </nav>
+
+      <div className="side-foot">
+        {user && (
+          <div className="side-link" title={user.name || user.email} style={{ cursor: 'default' }}>
+            <div className="side-logo" style={{ width: 28, height: 28, fontSize: 12, background: 'linear-gradient(135deg,#667eea,#764ba2)' }}>
+              {(user.name || user.email || '?').charAt(0).toUpperCase()}
+            </div>
+            <span className="side-link-label text-ellipsis">{user.name || user.email}</span>
           </div>
-        </div>
-        <div>
-          {user ? (
-            <>
-              <SidebarLink
-                link={{
-                  label: user.name || user.email,
-                  href: '#',
-                  icon: (
-                    <div style={{
-                      height: '28px',
-                      width: '28px',
-                      borderRadius: '50%',
-                      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      color: 'white',
-                      fontSize: '12px',
-                      fontWeight: 'bold',
-                      flexShrink: 0
-                    }}>
-                      {(user.name || user.email).charAt(0).toUpperCase()}
-                    </div>
-                  ),
-                }}
-              />
-              <div onClick={handleLogout} style={{ cursor: 'pointer', marginTop: '0.5rem' }}>
-                <SidebarLink
-                  link={{
-                    label: 'Logout',
-                    href: '#',
-                    icon: <IconLogout className="icon" />,
-                  }}
-                />
-              </div>
-            </>
-          ) : (
-            <SidebarLink
-              link={{
-                label: 'Login',
-                href: '/login',
-                icon: <IconLogout className="icon" />,
-              }}
-            />
-          )}
-        </div>
-      </SidebarBody>
-    </Sidebar>
-  )
-}
-
-const Logo = () => {
-  return (
-    <Link
-      to="/"
-      style={{
-        position: 'relative',
-        zIndex: 20,
-        display: 'flex',
-        alignItems: 'center',
-        gap: '0.5rem',
-        padding: '0.25rem 0',
-        fontSize: '0.875rem',
-        fontWeight: 'normal',
-        color: 'var(--text-color, #333)',
-        textDecoration: 'none'
-      }}
-    >
-      <div style={{
-        height: '20px',
-        width: '24px',
-        flexShrink: 0,
-        borderRadius: '4px 2px 4px 2px',
-        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
-      }} />
-      <motion.span
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        style={{
-          fontWeight: 500,
-          whiteSpace: 'pre',
-          color: 'var(--text-color, #333)'
-        }}
-      >
-        Webklar
-      </motion.span>
-    </Link>
+        )}
+        <button className="side-toggle" onClick={handleLogout} title="Logout">
+          <IconLogout size={20} />
+          <span className="side-link-label">Logout</span>
+        </button>
+        <button className="side-toggle" onClick={() => setCollapsed((c) => !c)} title="Menue ein-/ausklappen">
+          {collapsed ? <IconLayoutSidebarLeftExpand size={20} /> : <IconLayoutSidebarLeftCollapse size={20} />}
+          <span className="side-link-label">Einklappen</span>
+        </button>
+      </div>
+    </aside>
   )
 }

src/components/PixelBlast.css

@@ -1,7 +0,0 @@
-.pixel-blast-container {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  overflow: hidden;
-}
-

src/components/PixelBlast.jsx

@@ -1,674 +0,0 @@
-import { useEffect, useRef } from 'react';
-import * as THREE from 'three';
-import { EffectComposer, EffectPass, RenderPass, Effect } from 'postprocessing';
-import './PixelBlast.css';
-
-const createTouchTexture = () => {
-  const size = 64;
-  const canvas = document.createElement('canvas');
-  canvas.width = size;
-  canvas.height = size;
-  const ctx = canvas.getContext('2d');
-  if (!ctx) throw new Error('2D context not available');
-
-  ctx.fillStyle = 'black';
-  ctx.fillRect(0, 0, canvas.width, canvas.height);
-
-  const texture = new THREE.Texture(canvas);
-  texture.minFilter = THREE.LinearFilter;
-  texture.magFilter = THREE.LinearFilter;
-  texture.generateMipmaps = false;
-
-  const trail = [];
-  let last = null;
-  const maxAge = 64;
-  let radius = 0.1 * size;
-  const speed = 1 / maxAge;
-
-  const clear = () => {
-    ctx.fillStyle = 'black';
-    ctx.fillRect(0, 0, canvas.width, canvas.height);
-  };
-
-  const drawPoint = p => {
-    const pos = { x: p.x * size, y: (1 - p.y) * size };
-    let intensity = 1;
-
-    const easeOutSine = t => Math.sin((t * Math.PI) / 2);
-    const easeOutQuad = t => -t * (t - 2);
-
-    if (p.age < maxAge * 0.3) intensity = easeOutSine(p.age / (maxAge * 0.3));
-    else intensity = easeOutQuad(1 - (p.age - maxAge * 0.3) / (maxAge * 0.7)) || 0;
-
-    intensity *= p.force;
-
-    const color = `${((p.vx + 1) / 2) * 255}, ${((p.vy + 1) / 2) * 255}, ${intensity * 255}`;
-    const offset = size * 5;
-    ctx.shadowOffsetX = offset;
-    ctx.shadowOffsetY = offset;
-    ctx.shadowBlur = radius;
-    ctx.shadowColor = `rgba(${color},${0.22 * intensity})`;
-
-    ctx.beginPath();
-    ctx.fillStyle = 'rgba(255,0,0,1)';
-    ctx.arc(pos.x - offset, pos.y - offset, radius, 0, Math.PI * 2);
-    ctx.fill();
-  };
-
-  const addTouch = norm => {
-    let force = 0;
-    let vx = 0;
-    let vy = 0;
-
-    if (last) {
-      const dx = norm.x - last.x;
-      const dy = norm.y - last.y;
-      if (dx === 0 && dy === 0) return;
-
-      const dd = dx * dx + dy * dy;
-      const d = Math.sqrt(dd);
-      vx = dx / (d || 1);
-      vy = dy / (d || 1);
-      force = Math.min(dd * 10000, 1);
-    }
-
-    last = { x: norm.x, y: norm.y };
-    trail.push({ x: norm.x, y: norm.y, age: 0, force, vx, vy });
-  };
-
-  const update = () => {
-    clear();
-    for (let i = trail.length - 1; i >= 0; i--) {
-      const point = trail[i];
-      const f = point.force * speed * (1 - point.age / maxAge);
-      point.x += point.vx * f;
-      point.y += point.vy * f;
-      point.age++;
-      if (point.age > maxAge) trail.splice(i, 1);
-    }
-    for (let i = 0; i < trail.length; i++) drawPoint(trail[i]);
-    texture.needsUpdate = true;
-  };
-
-  return {
-    canvas,
-    texture,
-    addTouch,
-    update,
-    set radiusScale(v) {
-      radius = 0.1 * size * v;
-    },
-    get radiusScale() {
-      return radius / (0.1 * size);
-    },
-    size
-  };
-};
-
-const createLiquidEffect = (texture, opts) => {
-  const fragment = `
-    uniform sampler2D uTexture;
-    uniform float uStrength;
-    uniform float uTime;
-    uniform float uFreq;
-
-    void mainUv(inout vec2 uv) {
-      vec4 tex = texture2D(uTexture, uv);
-      float vx = tex.r * 2.0 - 1.0;
-      float vy = tex.g * 2.0 - 1.0;
-      float intensity = tex.b;
-      float wave = 0.5 + 0.5 * sin(uTime * uFreq + intensity * 6.2831853);
-      float amt = uStrength * intensity * wave;
-      uv += vec2(vx, vy) * amt;
-    }
-    `;
-
-  return new Effect('LiquidEffect', fragment, {
-    uniforms: new Map([
-      ['uTexture', new THREE.Uniform(texture)],
-      ['uStrength', new THREE.Uniform(opts?.strength ?? 0.025)],
-      ['uTime', new THREE.Uniform(0)],
-      ['uFreq', new THREE.Uniform(opts?.freq ?? 4.5)]
-    ])
-  });
-};
-
-const SHAPE_MAP = {
-  square: 0,
-  circle: 1,
-  triangle: 2,
-  diamond: 3
-};
-
-const VERTEX_SRC = `
-void main() {
-  gl_Position = vec4(position, 1.0);
-}
-`;
-
-const FRAGMENT_SRC = `
-precision highp float;
-
-uniform vec3  uColor;
-uniform vec2  uResolution;
-uniform float uTime;
-uniform float uPixelSize;
-uniform float uScale;
-uniform float uDensity;
-uniform float uPixelJitter;
-uniform int   uEnableRipples;
-uniform float uRippleSpeed;
-uniform float uRippleThickness;
-uniform float uRippleIntensity;
-uniform float uEdgeFade;
-uniform int   uShapeType;
-
-const int SHAPE_SQUARE   = 0;
-const int SHAPE_CIRCLE   = 1;
-const int SHAPE_TRIANGLE = 2;
-const int SHAPE_DIAMOND  = 3;
-
-const int   MAX_CLICKS = 10;
-uniform vec2  uClickPos  [MAX_CLICKS];
-uniform float uClickTimes[MAX_CLICKS];
-
-out vec4 fragColor;
-
-float Bayer2(vec2 a) {
-  a = floor(a);
-  return fract(a.x / 2. + a.y * a.y * .75);
-}
-
-#define Bayer4(a) (Bayer2(.5*(a))*0.25 + Bayer2(a))
-#define Bayer8(a) (Bayer4(.5*(a))*0.25 + Bayer2(a))
-
-#define FBM_OCTAVES     5
-#define FBM_LACUNARITY  1.25
-#define FBM_GAIN        1.0
-
-float hash11(float n){ return fract(sin(n)*43758.5453); }
-
-float vnoise(vec3 p){
-  vec3 ip = floor(p);
-  vec3 fp = fract(p);
-  float n000 = hash11(dot(ip + vec3(0.0,0.0,0.0), vec3(1.0,57.0,113.0)));
-  float n100 = hash11(dot(ip + vec3(1.0,0.0,0.0), vec3(1.0,57.0,113.0)));
-  float n010 = hash11(dot(ip + vec3(0.0,1.0,0.0), vec3(1.0,57.0,113.0)));
-  float n110 = hash11(dot(ip + vec3(1.0,1.0,0.0), vec3(1.0,57.0,113.0)));
-  float n001 = hash11(dot(ip + vec3(0.0,0.0,1.0), vec3(1.0,57.0,113.0)));
-  float n101 = hash11(dot(ip + vec3(1.0,0.0,1.0), vec3(1.0,57.0,113.0)));
-  float n011 = hash11(dot(ip + vec3(0.0,1.0,1.0), vec3(1.0,57.0,113.0)));
-  float n111 = hash11(dot(ip + vec3(1.0,1.0,1.0), vec3(1.0,57.0,113.0)));
-
-  vec3 w = fp*fp*fp*(fp*(fp*6.0-15.0)+10.0);
-
-  float x00 = mix(n000, n100, w.x);
-  float x10 = mix(n010, n110, w.x);
-  float x01 = mix(n001, n101, w.x);
-  float x11 = mix(n011, n111, w.x);
-
-  float y0  = mix(x00, x10, w.y);
-  float y1  = mix(x01, x11, w.y);
-
-  return mix(y0, y1, w.z) * 2.0 - 1.0;
-}
-
-float fbm2(vec2 uv, float t){
-  vec3 p = vec3(uv * uScale, t);
-  float amp = 1.0;
-  float freq = 1.0;
-  float sum = 1.0;
-
-  for (int i = 0; i < FBM_OCTAVES; ++i){
-    sum  += amp * vnoise(p * freq);
-    freq *= FBM_LACUNARITY;
-    amp  *= FBM_GAIN;
-  }
-
-  return sum * 0.5 + 0.5;
-}
-
-float maskCircle(vec2 p, float cov){
-  float r = sqrt(cov) * .25;
-  float d = length(p - 0.5) - r;
-  float aa = 0.5 * fwidth(d);
-  return cov * (1.0 - smoothstep(-aa, aa, d * 2.0));
-}
-
-float maskTriangle(vec2 p, vec2 id, float cov){
-  bool flip = mod(id.x + id.y, 2.0) > 0.5;
-  if (flip) p.x = 1.0 - p.x;
-
-  float r = sqrt(cov);
-  float d  = p.y - r*(1.0 - p.x);
-  float aa = fwidth(d);
-
-  return cov * clamp(0.5 - d/aa, 0.0, 1.0);
-}
-
-float maskDiamond(vec2 p, float cov){
-  float r = sqrt(cov) * 0.564;
-  return step(abs(p.x - 0.49) + abs(p.y - 0.49), r);
-}
-
-void main(){
-  float pixelSize = uPixelSize;
-
-  vec2 fragCoord = gl_FragCoord.xy - uResolution * .5;
-  float aspectRatio = uResolution.x / uResolution.y;
-
-  vec2 pixelId = floor(fragCoord / pixelSize);
-  vec2 pixelUV = fract(fragCoord / pixelSize);
-
-  float cellPixelSize = 8.0 * pixelSize;
-  vec2 cellId = floor(fragCoord / cellPixelSize);
-  vec2 cellCoord = cellId * cellPixelSize;
-
-  vec2 uv = cellCoord / uResolution * vec2(aspectRatio, 1.0);
-
-  float base = fbm2(uv, uTime * 0.05);
-  base = base * 0.5 - 0.65;
-
-  float feed = base + (uDensity - 0.5) * 0.3;
-
-  float speed     = uRippleSpeed;
-  float thickness = uRippleThickness;
-  const float dampT     = 1.0;
-  const float dampR     = 10.0;
-
-  if (uEnableRipples == 1) {
-    for (int i = 0; i < MAX_CLICKS; ++i){
-      vec2 pos = uClickPos[i];
-      if (pos.x < 0.0) continue;
-
-      float cellPixelSize = 8.0 * pixelSize;
-      vec2 cuv = (((pos - uResolution * .5 - cellPixelSize * .5) / (uResolution))) * vec2(aspectRatio, 1.0);
-
-      float t = max(uTime - uClickTimes[i], 0.0);
-      float r = distance(uv, cuv);
-
-      float waveR = speed * t;
-      float ring  = exp(-pow((r - waveR) / thickness, 2.0));
-      float atten = exp(-dampT * t) * exp(-dampR * r);
-
-      feed = max(feed, ring * atten * uRippleIntensity);
-    }
-  }
-
-  float bayer = Bayer8(fragCoord / uPixelSize) - 0.5;
-  float bw = step(0.5, feed + bayer);
-
-  float h = fract(sin(dot(floor(fragCoord / uPixelSize), vec2(127.1, 311.7))) * 43758.5453);
-  float jitterScale = 1.0 + (h - 0.5) * uPixelJitter;
-  float coverage = bw * jitterScale;
-
-  float M;
-  if      (uShapeType == SHAPE_CIRCLE)   M = maskCircle (pixelUV, coverage);
-  else if (uShapeType == SHAPE_TRIANGLE) M = maskTriangle(pixelUV, pixelId, coverage);
-  else if (uShapeType == SHAPE_DIAMOND)  M = maskDiamond(pixelUV, coverage);
-  else                                   M = coverage;
-
-  if (uEdgeFade > 0.0) {
-    vec2 norm = gl_FragCoord.xy / uResolution;
-    float edge = min(min(norm.x, norm.y), min(1.0 - norm.x, 1.0 - norm.y));
-    float fade = smoothstep(0.0, uEdgeFade, edge);
-    M *= fade;
-  }
-
-  vec3 color = uColor;
-  fragColor = vec4(color, M);
-}
-`;
-
-const MAX_CLICKS = 10;
-
-const PixelBlast = ({
-  variant = 'square',
-  pixelSize = 3,
-  color = '#10b981',
-  className,
-  style,
-  antialias = true,
-  patternScale = 2,
-  patternDensity = 1,
-  liquid = false,
-  liquidStrength = 0.1,
-  liquidRadius = 1,
-  pixelSizeJitter = 0,
-  enableRipples = true,
-  rippleIntensityScale = 1,
-  rippleThickness = 0.1,
-  rippleSpeed = 0.3,
-  liquidWobbleSpeed = 4.5,
-  autoPauseOffscreen = true,
-  speed = 0.5,
-  transparent = true,
-  edgeFade = 0.5,
-  noiseAmount = 0
-}) => {
-  const containerRef = useRef(null);
-  const visibilityRef = useRef({ visible: true });
-  const speedRef = useRef(speed);
-  const threeRef = useRef(null);
-  const prevConfigRef = useRef(null);
-
-  useEffect(() => {
-    const container = containerRef.current;
-    if (!container) return;
-
-    speedRef.current = speed;
-
-    const needsReinitKeys = ['antialias', 'liquid', 'noiseAmount'];
-    const cfg = { antialias, liquid, noiseAmount };
-    let mustReinit = false;
-
-    if (!threeRef.current) mustReinit = true;
-    else if (prevConfigRef.current) {
-      for (const k of needsReinitKeys)
-        if (prevConfigRef.current[k] !== cfg[k]) {
-          mustReinit = true;
-          break;
-        }
-    }
-
-    if (mustReinit) {
-      if (threeRef.current) {
-        const t = threeRef.current;
-        t.resizeObserver?.disconnect();
-        cancelAnimationFrame(t.raf);
-        t.quad?.geometry.dispose();
-        t.material.dispose();
-        t.composer?.dispose();
-        t.renderer.dispose();
-        if (t.renderer.domElement.parentElement === container) container.removeChild(t.renderer.domElement);
-        threeRef.current = null;
-      }
-
-      const canvas = document.createElement('canvas');
-      const renderer = new THREE.WebGLRenderer({
-        canvas,
-        antialias,
-        alpha: true,
-        powerPreference: 'high-performance'
-      });
-
-      renderer.domElement.style.width = '100%';
-      renderer.domElement.style.height = '100%';
-      renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
-      container.appendChild(renderer.domElement);
-
-      if (transparent) renderer.setClearAlpha(0);
-      else renderer.setClearColor(0x000000, 1);
-
-      const uniforms = {
-        uResolution: { value: new THREE.Vector2(0, 0) },
-        uTime: { value: 0 },
-        uColor: { value: new THREE.Color(color) },
-        uClickPos: {
-          value: Array.from({ length: MAX_CLICKS }, () => new THREE.Vector2(-1, -1))
-        },
-        uClickTimes: { value: new Float32Array(MAX_CLICKS) },
-        uShapeType: { value: SHAPE_MAP[variant] ?? 0 },
-        uPixelSize: { value: pixelSize * renderer.getPixelRatio() },
-        uScale: { value: patternScale },
-        uDensity: { value: patternDensity },
-        uPixelJitter: { value: pixelSizeJitter },
-        uEnableRipples: { value: enableRipples ? 1 : 0 },
-        uRippleSpeed: { value: rippleSpeed },
-        uRippleThickness: { value: rippleThickness },
-        uRippleIntensity: { value: rippleIntensityScale },
-        uEdgeFade: { value: edgeFade }
-      };
-
-      const scene = new THREE.Scene();
-      const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
-
-      const material = new THREE.ShaderMaterial({
-        vertexShader: VERTEX_SRC,
-        fragmentShader: FRAGMENT_SRC,
-        uniforms,
-        transparent: true,
-        depthTest: false,
-        depthWrite: false,
-        glslVersion: THREE.GLSL3
-      });
-
-      const quadGeom = new THREE.PlaneGeometry(2, 2);
-      const quad = new THREE.Mesh(quadGeom, material);
-      scene.add(quad);
-
-      const clock = new THREE.Clock();
-
-      const setSize = () => {
-        const w = container.clientWidth || 1;
-        const h = container.clientHeight || 1;
-        renderer.setSize(w, h, false);
-        uniforms.uResolution.value.set(renderer.domElement.width, renderer.domElement.height);
-        if (threeRef.current?.composer)
-          threeRef.current.composer.setSize(renderer.domElement.width, renderer.domElement.height);
-        uniforms.uPixelSize.value = pixelSize * renderer.getPixelRatio();
-      };
-
-      setSize();
-
-      const ro = new ResizeObserver(setSize);
-      ro.observe(container);
-
-      const randomFloat = () => {
-        if (typeof window !== 'undefined' && window.crypto?.getRandomValues) {
-          const u32 = new Uint32Array(1);
-          window.crypto.getRandomValues(u32);
-          return u32[0] / 0xffffffff;
-        }
-        return Math.random();
-      };
-
-      const timeOffset = randomFloat() * 1000;
-
-      let composer;
-      let touch;
-      let liquidEffect;
-
-      if (liquid) {
-        touch = createTouchTexture();
-        touch.radiusScale = liquidRadius;
-
-        composer = new EffectComposer(renderer);
-        const renderPass = new RenderPass(scene, camera);
-
-        liquidEffect = createLiquidEffect(touch.texture, {
-          strength: liquidStrength,
-          freq: liquidWobbleSpeed
-        });
-
-        const effectPass = new EffectPass(camera, liquidEffect);
-        effectPass.renderToScreen = true;
-
-        composer.addPass(renderPass);
-        composer.addPass(effectPass);
-      }
-
-      if (noiseAmount > 0) {
-        if (!composer) {
-          composer = new EffectComposer(renderer);
-          composer.addPass(new RenderPass(scene, camera));
-        }
-
-        const noiseEffect = new Effect(
-          'NoiseEffect',
-          `uniform float uTime; uniform float uAmount; float hash(vec2 p){ return fract(sin(dot(p, vec2(127.1,311.7))) * 43758.5453);} void mainUv(inout vec2 uv){} void mainImage(const in vec4 inputColor,const in vec2 uv,out vec4 outputColor){ float n=hash(floor(uv*vec2(1920.0,1080.0))+floor(uTime*60.0)); float g=(n-0.5)*uAmount; outputColor=inputColor+vec4(vec3(g),0.0);} `,
-          {
-            uniforms: new Map([
-              ['uTime', new THREE.Uniform(0)],
-              ['uAmount', new THREE.Uniform(noiseAmount)]
-            ])
-          }
-        );
-
-        const noisePass = new EffectPass(camera, noiseEffect);
-        noisePass.renderToScreen = true;
-
-        if (composer && composer.passes.length > 0) composer.passes.forEach(p => (p.renderToScreen = false));
-        composer.addPass(noisePass);
-      }
-
-      if (composer) composer.setSize(renderer.domElement.width, renderer.domElement.height);
-
-      const mapToPixels = e => {
-        const rect = renderer.domElement.getBoundingClientRect();
-        const scaleX = renderer.domElement.width / rect.width;
-        const scaleY = renderer.domElement.height / rect.height;
-        const fx = (e.clientX - rect.left) * scaleX;
-        const fy = (rect.height - (e.clientY - rect.top)) * scaleY;
-        return {
-          fx,
-          fy,
-          w: renderer.domElement.width,
-          h: renderer.domElement.height
-        };
-      };
-
-      const onPointerDown = e => {
-        const { fx, fy } = mapToPixels(e);
-        const ix = threeRef.current?.clickIx ?? 0;
-        uniforms.uClickPos.value[ix].set(fx, fy);
-        uniforms.uClickTimes.value[ix] = uniforms.uTime.value;
-        if (threeRef.current) threeRef.current.clickIx = (ix + 1) % MAX_CLICKS;
-      };
-
-      const onPointerMove = e => {
-        if (!touch) return;
-        const { fx, fy, w, h } = mapToPixels(e);
-        touch.addTouch({ x: fx / w, y: fy / h });
-      };
-
-      renderer.domElement.addEventListener('pointerdown', onPointerDown, {
-        passive: true
-      });
-      renderer.domElement.addEventListener('pointermove', onPointerMove, {
-        passive: true
-      });
-
-      let raf = 0;
-
-      const animate = () => {
-        if (autoPauseOffscreen && !visibilityRef.current.visible) {
-          raf = requestAnimationFrame(animate);
-          return;
-        }
-
-        uniforms.uTime.value = timeOffset + clock.getElapsedTime() * speedRef.current;
-        if (liquidEffect) liquidEffect.uniforms.get('uTime').value = uniforms.uTime.value;
-
-        if (composer) {
-          if (touch) touch.update();
-          composer.passes.forEach(p => {
-            const effs = p.effects;
-            if (effs)
-              effs.forEach(eff => {
-                const u = eff.uniforms?.get('uTime');
-                if (u) u.value = uniforms.uTime.value;
-              });
-          });
-          composer.render();
-        } else renderer.render(scene, camera);
-
-        raf = requestAnimationFrame(animate);
-      };
-
-      raf = requestAnimationFrame(animate);
-
-      threeRef.current = {
-        renderer,
-        scene,
-        camera,
-        material,
-        clock,
-        clickIx: 0,
-        uniforms,
-        resizeObserver: ro,
-        raf,
-        quad,
-        timeOffset,
-        composer,
-        touch,
-        liquidEffect
-      };
-    } else {
-      const t = threeRef.current;
-      t.uniforms.uShapeType.value = SHAPE_MAP[variant] ?? 0;
-      t.uniforms.uPixelSize.value = pixelSize * t.renderer.getPixelRatio();
-      t.uniforms.uColor.value.set(color);
-      t.uniforms.uScale.value = patternScale;
-      t.uniforms.uDensity.value = patternDensity;
-      t.uniforms.uPixelJitter.value = pixelSizeJitter;
-      t.uniforms.uEnableRipples.value = enableRipples ? 1 : 0;
-      t.uniforms.uRippleIntensity.value = rippleIntensityScale;
-      t.uniforms.uRippleThickness.value = rippleThickness;
-      t.uniforms.uRippleSpeed.value = rippleSpeed;
-      t.uniforms.uEdgeFade.value = edgeFade;
-
-      if (transparent) t.renderer.setClearAlpha(0);
-      else t.renderer.setClearColor(0x000000, 1);
-
-      if (t.liquidEffect) {
-        const uStrength = t.liquidEffect.uniforms.get('uStrength');
-        if (uStrength) uStrength.value = liquidStrength;
-        const uFreq = t.liquidEffect.uniforms.get('uFreq');
-        if (uFreq) uFreq.value = liquidWobbleSpeed;
-      }
-
-      if (t.touch) t.touch.radiusScale = liquidRadius;
-    }
-
-    prevConfigRef.current = cfg;
-
-    return () => {
-      if (threeRef.current && mustReinit) return;
-      if (!threeRef.current) return;
-
-      const t = threeRef.current;
-      t.resizeObserver?.disconnect();
-      cancelAnimationFrame(t.raf);
-      t.quad?.geometry.dispose();
-      t.material.dispose();
-      t.composer?.dispose();
-      t.renderer.dispose();
-      if (t.renderer.domElement.parentElement === container) container.removeChild(t.renderer.domElement);
-      threeRef.current = null;
-    };
-  }, [
-    antialias,
-    liquid,
-    noiseAmount,
-    pixelSize,
-    patternScale,
-    patternDensity,
-    enableRipples,
-    rippleIntensityScale,
-    rippleThickness,
-    rippleSpeed,
-    pixelSizeJitter,
-    edgeFade,
-    transparent,
-    liquidStrength,
-    liquidRadius,
-    liquidWobbleSpeed,
-    autoPauseOffscreen,
-    variant,
-    color,
-    speed
-  ]);
-
-  return (
-    <div
-      ref={containerRef}
-      className={`pixel-blast-container ${className ?? ''}`}
-      style={style}
-      aria-label="PixelBlast interactive background"
-    />
-  );
-};
-
-export default PixelBlast;
-

src/components/PreviewLinkButton.jsx

@@ -0,0 +1,30 @@
+import { FaEye } from 'react-icons/fa6'
+
+export default function PreviewLinkButton({ href, title = 'Preview oeffnen', size = 16 }) {
+  if (!href) return null
+
+  return (
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      title={title}
+      aria-label={title}
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: 32,
+        height: 32,
+        borderRadius: 6,
+        background: 'rgba(16, 185, 129, 0.15)',
+        border: '1px solid rgba(16, 185, 129, 0.35)',
+        color: '#34d399',
+        textDecoration: 'none',
+        flexShrink: 0,
+      }}
+    >
+      <FaEye size={size} />
+    </a>
+  )
+}

src/components/PriorityDropdown.jsx

@@ -1,36 +0,0 @@
-const PRIORITIES = [
-  { value: 0, label: 'None' },
-  { value: 1, label: 'Low' },
-  { value: 2, label: 'Medium' },
-  { value: 3, label: 'High' },
-  { value: 4, label: 'Critical' }
-]
-
-const PRIORITY_LABELS = {
-  0: 'NONE',
-  1: 'LOW',
-  2: 'MEDIUM',
-  3: 'HIGH',
-  4: 'CRITICAL'
-}
-
-export default function PriorityDropdown({ value, onChange }) {
-  return (
-    <div className="dropdown">
-      <button className="btn" style={{ background: 'inherit', color: 'inherit' }}>
-        {PRIORITY_LABELS[value] || 'LOW'}
-      </button>
-      <div className="dropdown-content">
-        {PRIORITIES.map(priority => (
-          <span 
-            key={priority.value}
-            className="dropdown-item"
-            onClick={() => onChange(priority.value)}
-          >
-            {priority.label}
-          </span>
-        ))}
-      </div>
-    </div>
-  )
-}

src/components/ProjectContextPanel.jsx

@@ -0,0 +1,97 @@
+import { useEffect, useState } from 'react'
+import { Link } from 'react-router-dom'
+import { IconFolders } from '@tabler/icons-react'
+import { StatusPill } from './ui/StatusPill'
+import { databases, DATABASE_ID, COLLECTIONS, Query } from '../lib/appwrite'
+import { fetchRoadmapByTicketId } from '../lib/roadmaps'
+import { useWebsiteProjects } from '../hooks/useWebsiteProjects'
+
+/**
+ * Projekt-Kontextbox im Ticket: zeigt automatisch das zugehoerige Projekt,
+ * alle anderen Tickets desselben Kunden (klickbar) und den Link zum aktiven Plan.
+ * Rendert nichts, wenn das Ticket keinen Projektbezug hat.
+ */
+export default function ProjectContextPanel({ ticket }) {
+  const { fetchByTicketId } = useWebsiteProjects()
+  const [context, setContext] = useState(null)
+
+  useEffect(() => {
+    let cancelled = false
+    async function load() {
+      try {
+        // Projektbezug: Roadmap dieses Tickets oder direkt zugewiesenes Projekt
+        const [roadmap, assignedProjects] = await Promise.all([
+          fetchRoadmapByTicketId(ticket.$id).catch(() => null),
+          fetchByTicketId(ticket.$id),
+        ])
+        const projectName = roadmap?.projectName || assignedProjects[0]?.projectName || ''
+        if (!roadmap && !assignedProjects.length) {
+          if (!cancelled) setContext(null)
+          return
+        }
+
+        let otherTickets = []
+        if (ticket.customerId) {
+          const res = await databases.listDocuments(DATABASE_ID, COLLECTIONS.WORKORDERS, [
+            Query.equal('customerId', ticket.customerId),
+            Query.orderDesc('$createdAt'),
+            Query.limit(50),
+          ])
+          otherTickets = res.documents.filter((t) => t.$id !== ticket.$id)
+        }
+        if (!cancelled) setContext({ roadmap, projectName, otherTickets })
+      } catch {
+        if (!cancelled) setContext(null)
+      }
+    }
+    load()
+    return () => { cancelled = true }
+  }, [ticket.$id, ticket.customerId, fetchByTicketId])
+
+  if (!context) return null
+  const { roadmap, projectName, otherTickets } = context
+
+  return (
+    <div className="ui-card pad" style={{ marginTop: 16 }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12, flexWrap: 'wrap', marginBottom: 10 }}>
+        <h5 style={{ fontWeight: 700, margin: 0, display: 'flex', alignItems: 'center', gap: 8 }}>
+          <IconFolders size={18} /> Projekt: {projectName || '-'}
+        </h5>
+        {roadmap && (
+          <Link to={`/roadmaps/${roadmap.$id}`} className="ui-btn">
+            Plan: {roadmap.title}
+          </Link>
+        )}
+      </div>
+
+      {!ticket.customerId ? (
+        <p className="faint" style={{ fontSize: 13, margin: 0 }}>
+          Kein Kunde zugeordnet — andere Tickets koennen nicht automatisch verknuepft werden.
+        </p>
+      ) : !otherTickets.length ? (
+        <p className="faint" style={{ fontSize: 13, margin: 0 }}>
+          Keine weiteren Tickets zu diesem Kunden/Projekt.
+        </p>
+      ) : (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+          {otherTickets.map((t) => (
+            <Link
+              key={t.$id}
+              to={`/tickets?woid=${t.woid}`}
+              style={{
+                display: 'flex', alignItems: 'center', gap: 10, fontSize: 13,
+                padding: '6px 8px', borderRadius: 8, border: '1px solid var(--border)',
+              }}
+            >
+              <span className="muted" style={{ minWidth: 48, fontWeight: 700 }}>{t.woid}</span>
+              <span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                {t.topic || t.title || '-'}
+              </span>
+              <StatusPill status={t.status} />
+            </Link>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

src/components/QuickOverviewModal.jsx

@@ -1,89 +0,0 @@
-import { FaTimes } from 'react-icons/fa'
-import { format } from 'date-fns'
-
-const STATUS_CLASSES = {
-  'Open': 'bg-red',
-  'Occupied': 'bg-blue-grey',
-  'Assigned': 'bg-teal',
-  'Awaiting': 'bg-amber',
-  'Closed': 'bg-grey'
-}
-
-const PRIORITY_CLASSES = {
-  0: 'bg-blue',
-  1: 'bg-green',
-  2: 'bg-amber',
-  3: 'bg-orange',
-  4: 'bg-red'
-}
-
-const PRIORITY_LABELS = {
-  0: 'NONE',
-  1: 'LOW',
-  2: 'MEDIUM',
-  3: 'HIGH',
-  4: 'CRITICAL'
-}
-
-export default function QuickOverviewModal({ isOpen, onClose, workorders = [] }) {
-  if (!isOpen) return null
-
-  return (
-    <div className="overlay">
-      <span className="overlay-close" onClick={onClose}>
-        <FaTimes />
-      </span>
-      <div className="overlay-content">
-        <h3 className="mb-2">WOMS Ticket Quick Overview</h3>
-        
-        <table className="table" style={{ background: '#fff', color: '#000' }}>
-          <thead>
-            <tr className="bg-dark-grey text-white">
-              <th>WOID</th>
-              <th>Created</th>
-              <th>Type</th>
-              <th>System</th>
-              <th>CID & CLO</th>
-              <th>Requested by</th>
-              <th>Topic</th>
-              <th className="text-center">Priority</th>
-              <th className="text-right">Status</th>
-              <th>Editor</th>
-            </tr>
-          </thead>
-          <tbody>
-            {workorders.map(wo => (
-              <tr key={wo.$id} className="bg-white">
-                <td className="bg-dark-grey text-white text-small">
-                  {wo.woid || wo.$id?.slice(-5)}
-                </td>
-                <td className="bg-light-grey text-small">
-                  {format(new Date(wo.$createdAt || wo.createdAt), 'dd.MM.yyyy, HH:mm')}h
-                </td>
-                <td className="bg-light-grey text-small">{wo.type}</td>
-                <td className="bg-light-grey text-small">{wo.systemType || 'n/a'}</td>
-                <td className="text-small">{wo.customerCode} {wo.customerLocation}</td>
-                <td className="text-small">{wo.requestedBy}</td>
-                <td className="text-small">{wo.topic}</td>
-                <td className={`text-small text-center ${PRIORITY_CLASSES[wo.priority]}`}>
-                  {PRIORITY_LABELS[wo.priority]}
-                </td>
-                <td className={`text-small text-right ${STATUS_CLASSES[wo.status]}`}>
-                  {wo.status?.toUpperCase()}
-                </td>
-                <td className={`text-small ${STATUS_CLASSES[wo.status]}`}>
-                  {wo.assignedTo || '-'}
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-        
-        <p className="mt-2 text-center">
-          Summary: Listed a total of {workorders.length} Workorders!
-          <br />EOL =)
-        </p>
-      </div>
-    </div>
-  )
-}

src/components/ResponseDropdown.jsx

@@ -1,32 +0,0 @@
-const RESPONSE_LEVELS = [
-  { value: 'KEY USER', label: 'Key User' },
-  { value: 'Helpdesk', label: '1st Level' },
-  { value: 'Support', label: '2nd Level' },
-  { value: 'Admin', label: '3rd Level' },
-  { value: 'FS/FE', label: 'FS/FE' },
-  { value: '24/7', label: '24/7' },
-  { value: 'TECH MGMT', label: 'Tech Mgmt' },
-  { value: 'Backoffice', label: 'Backoffice' },
-  { value: 'BUSI MGMT', label: 'Busi Mgmt' }
-]
-
-export default function ResponseDropdown({ value, onChange }) {
-  return (
-    <div className="dropdown">
-      <button className="btn" style={{ background: 'inherit', color: 'inherit' }}>
-        {value?.toUpperCase() || 'BACKOFFICE'}
-      </button>
-      <div className="dropdown-content">
-        {RESPONSE_LEVELS.map(level => (
-          <span 
-            key={level.value}
-            className="dropdown-item"
-            onClick={() => onChange(level.value)}
-          >
-            {level.label}
-          </span>
-        ))}
-      </div>
-    </div>
-  )
-}

src/components/StatusDropdown.jsx

@@ -1,30 +1,19 @@
-const STATUSES = [
-  'Open',
-  'Occupied',
-  'Assigned',
-  'Awaiting',
-  'Added Info',
-  'In Test',
-  'Halted',
-  'Aborted',
-  'Cancelled',
-  'Closed'
-]
+import { TICKET_STATUSES, statusLabel } from '../lib/ticketStatus'
 
 export default function StatusDropdown({ value, onChange }) {
   return (
     <div className="dropdown">
       <button className="btn" style={{ background: 'inherit', color: 'inherit' }}>
-        {value?.toUpperCase() || 'OPEN'}
+        {statusLabel(value)}
       </button>
       <div className="dropdown-content">
-        {STATUSES.map(status => (
-          <span 
-            key={status}
+        {TICKET_STATUSES.map(status => (
+          <span
+            key={status.value}
             className="dropdown-item"
-            onClick={() => onChange(status)}
+            onClick={() => onChange(status.value)}
           >
-            {status}
+            {status.label}
           </span>
         ))}
       </div>

src/components/TicketCard.jsx

@@ -0,0 +1,163 @@
+import { useState } from 'react'
+import { FaChevronDown, FaPlay, FaStop, FaPlus } from 'react-icons/fa6'
+import { formatDistanceToNow, format } from 'date-fns'
+import { de } from 'date-fns/locale'
+import StatusDropdown from './StatusDropdown'
+import UrgentToggle from './UrgentToggle'
+import EditorDropdown from './EditorDropdown'
+import CreateWorksheetModal from './CreateWorksheetModal'
+import WorksheetList from './WorksheetList'
+import WorksheetTimesModal from './WorksheetTimesModal'
+import WorksheetSummary from './WorksheetSummary'
+import TicketProjects from './TicketProjects'
+import TicketRoadmapPanel from './TicketRoadmapPanel'
+import ProjectContextPanel from './ProjectContextPanel'
+import InvoicePanel from './InvoicePanel'
+import Tabs from './ui/Tabs'
+import Badge from './ui/Badge'
+import { StatusPill, UrgentPill } from './ui/StatusPill'
+import { useWorksheets } from '../hooks/useWorksheets'
+import { useAuth } from '../context/AuthContext'
+import { databases, DATABASE_ID, COLLECTIONS } from '../lib/appwrite'
+import { canEditWorksheetTimes } from '../lib/ticketForm'
+import { ticketTypeLabel } from '../lib/ticketStatus'
+
+// Projekt / Preview steht mit im Details-Reiter
+const TABS = [
+  { id: 'details', label: 'Details' },
+  { id: 'worksheets', label: 'Arbeitsblätter' },
+  { id: 'invoices', label: 'Rechnungen' },
+]
+
+export default function TicketCard({ ticket, onUpdate }) {
+  const { user, employee } = useAuth()
+  const [expanded, setExpanded] = useState(false)
+  const [activeTab, setActiveTab] = useState('details')
+  const [showCreateWorksheet, setShowCreateWorksheet] = useState(false)
+  const [editTimesWorksheet, setEditTimesWorksheet] = useState(null)
+
+  const { worksheets, loading: worksheetsLoading, createWorksheet, updateWorksheet, updateWorksheetTimes, getTotalTime } = useWorksheets(
+    expanded ? ticket.woid : null
+  )
+
+  const createdAt = new Date(ticket.$createdAt || ticket.createdAt)
+  const elapsed = formatDistanceToNow(createdAt, { locale: de, addSuffix: true })
+
+  const stop = (e) => e.stopPropagation()
+
+  // Abo-Stunden: Arbeitszeit vom Stundenguthaben des Wartungs-Abos abziehen oder nicht
+  const handleTogglePlan = (ws) => updateWorksheet(ws.$id, { countsToPlan: !ws.countsToPlan })
+
+  const handleCreateWorksheet = async (worksheetData, currentUser) => {
+    const result = await createWorksheet(worksheetData, currentUser)
+    if (result.success && worksheetData.newStatus !== ticket.status) {
+      await onUpdate(ticket.$id, { status: worksheetData.newStatus })
+    }
+    // Akquise-Automatik: Ergebnis im Worksheet steuert den Kundenstatus
+    if (result.success && ticket.type === 'Akquise' && ticket.customerId) {
+      const outcome = worksheetData.newStatus
+      const next = outcome === 'Zugesagt' ? 'customer' : outcome === 'Abgesagt' ? 'lost' : null
+      if (next) {
+        try {
+          await databases.updateDocument(DATABASE_ID, COLLECTIONS.CUSTOMERS, ticket.customerId, {
+            customerStatus: next,
+            updatedAt: new Date().toISOString(),
+          })
+        } catch { /* nicht kritisch */ }
+      }
+    }
+    return result
+  }
+
+  return (
+    <div className={`tcard ${expanded ? 'open' : ''}`}>
+      <div className="tcard-main" onClick={() => setExpanded((e) => !e)}>
+        <div className="tcard-woid">
+          <span className="id">{ticket.woid || ticket.$id?.slice(-5)}</span>
+          <span className="age">{elapsed}</span>
+        </div>
+
+        <div className="tcard-body">
+          <div className="tcard-row1">
+            <span className="tcard-customer">{ticket.customerName || 'Unbekannt'}</span>
+            {ticket.customerLocation && <span className="tcard-loc">· {ticket.customerLocation}</span>}
+          </div>
+          <div className="tcard-topic">{ticket.topic || ticket.title || 'Kein Betreff'}</div>
+          <div className="tcard-badges">
+            <StatusPill status={ticket.status} />
+            <UrgentPill priority={ticket.priority} />
+            {ticket.type && <Badge tone="muted">{ticketTypeLabel(ticket.type)}</Badge>}
+          </div>
+        </div>
+
+        <div className="tcard-side" onClick={stop}>
+          <div style={{ minWidth: 120 }}>
+            <StatusDropdown value={ticket.status} onChange={(v) => onUpdate(ticket.$id, { status: v })} />
+          </div>
+          <UrgentToggle value={ticket.priority} onChange={(v) => onUpdate(ticket.$id, { priority: v })} />
+          <FaChevronDown className={`chevron ${expanded ? 'up' : ''}`} onClick={() => setExpanded((e) => !e)} style={{ cursor: 'pointer' }} />
+        </div>
+      </div>
+
+      {expanded && (
+        <div className="tcard-detail">
+          <div className="flex gap-3 wrap" style={{ marginBottom: 16, fontSize: 13 }}>
+            <span className="muted"><FaPlay style={{ color: 'var(--ok)' }} /> {ticket.startDate || format(createdAt, 'dd.MM.yyyy')}</span>
+            <span className="muted"><FaStop style={{ color: 'var(--danger)' }} /> {ticket.deadline || '-'}</span>
+            {ticket.requestedBy && <span className="muted">Angefragt von: {ticket.requestedBy}</span>}
+            <span className="grow" />
+            <div style={{ minWidth: 150 }}><EditorDropdown value={ticket.assignedTo} onChange={(v) => onUpdate(ticket.$id, { assignedTo: v })} /></div>
+          </div>
+
+          <Tabs tabs={TABS} active={activeTab} onChange={setActiveTab} />
+
+          <div className="ticket-tab-content">
+            {activeTab === 'details' && (
+              <div>
+                <div className="ui-card pad" style={{ marginBottom: 16 }}>
+                  <h5 style={{ fontWeight: 700, marginBottom: 12 }}>Ticket-Beschreibung</h5>
+                  <p style={{ whiteSpace: 'pre-wrap', color: 'var(--text-muted)', lineHeight: 1.7, margin: 0 }}>
+                    {ticket.details || 'Keine Details vorhanden.'}
+                  </p>
+                </div>
+                <ProjectContextPanel ticket={ticket} />
+                <TicketRoadmapPanel ticket={ticket} />
+                <TicketProjects ticket={ticket} />
+              </div>
+            )}
+
+            {activeTab === 'worksheets' && (
+              <div>
+                <div className="flex gap-2" style={{ marginBottom: 16 }}>
+                  <button className="ui-btn ui-btn-primary grow" onClick={() => setShowCreateWorksheet(true)}>
+                    <FaPlus /> Arbeitsblatt hinzufügen
+                  </button>
+                </div>
+                <WorksheetSummary worksheets={worksheets} />
+                <WorksheetList
+                  worksheets={worksheets}
+                  totalTime={getTotalTime()}
+                  loading={worksheetsLoading}
+                  canEditTimes={(ws) => canEditWorksheetTimes(ws, user, employee)}
+                  onEditTimes={setEditTimesWorksheet}
+                  onTogglePlan={handleTogglePlan}
+                />
+              </div>
+            )}
+
+            {activeTab === 'invoices' && <InvoicePanel ticket={ticket} />}
+          </div>
+        </div>
+      )}
+
+      <CreateWorksheetModal isOpen={showCreateWorksheet} onClose={() => setShowCreateWorksheet(false)} workorder={ticket} onCreate={handleCreateWorksheet} />
+      {editTimesWorksheet && (
+        <WorksheetTimesModal
+          worksheet={editTimesWorksheet}
+          onClose={() => setEditTimesWorksheet(null)}
+          onSave={(ws, times) => updateWorksheetTimes(ws, times, user, employee)}
+        />
+      )}
+    </div>
+  )
+}

src/components/TicketFilters.jsx

@@ -1,177 +0,0 @@
-import { useState } from 'react'
-import { FaCaretDown } from 'react-icons/fa6'
-
-const TICKET_TYPES = [
-  'Home Office', 'Holidays', 'Trip', 'Supportrequest', 'Change Request',
-  'Maintenance', 'Project', 'Controlling', 'Development', 'Documentation',
-  'Meeting/Conference', 'IT Management', 'IT Security', 'Procurement',
-  'Rollout', 'Emergency Call', 'Other Services'
-]
-
-const SYSTEMS = [
-  'Account View', 'Client', 'Cofano', 'Credentials', 'Diamant', 'Docuware',
-  'EDI', 'eMail', 'Employee', 'Invoice', 'LBase', 'Medical Office', 'Network',
-  'O365', 'PDF Viewer', 'Printer', 'Reports', 'Server', 'Time Tracking',
-  'TK', 'TOS', 'Vivendi NG', 'VGM', '(W)LAN', '(W)WAN', 'WOMS', 'n/a'
-]
-
-const STATUSES = [
-  'Open', 'Occupied', 'Assigned', 'Awaiting', 'Added Info',
-  'In Test', 'Halted', 'Aborted', 'Cancelled', 'Closed'
-]
-
-const PRIORITIES = [
-  { value: 0, label: 'None' },
-  { value: 1, label: 'Low' },
-  { value: 2, label: 'Medium' },
-  { value: 3, label: 'High' },
-  { value: 4, label: 'Critical' }
-]
-
-export default function TicketFilters({ filters, onChange, onApply }) {
-  const [localFilters, setLocalFilters] = useState(filters)
-
-  const handleCheckboxChange = (category, value) => {
-    const current = localFilters[category] || []
-    const updated = current.includes(value)
-      ? current.filter(v => v !== value)
-      : [...current, value]
-    setLocalFilters({ ...localFilters, [category]: updated })
-  }
-
-  const handleInputChange = (field, value) => {
-    setLocalFilters({ ...localFilters, [field]: value })
-  }
-
-  const handleApply = () => {
-    onChange(localFilters)
-    onApply()
-  }
-
-  return (
-    <tr className="bg-dark-grey text-white">
-      <td className="text-center">
-        <input
-          type="text"
-          placeholder="WOID"
-          className="form-control"
-          style={{ width: '80px', background: '#616161', color: '#fff', border: 'none' }}
-          value={localFilters.woid || ''}
-          onChange={(e) => handleInputChange('woid', e.target.value)}
-        />
-      </td>
-      <td>
-        <input
-          type="text"
-          placeholder="Created"
-          className="form-control"
-          style={{ width: '100px', background: '#616161', color: '#fff', border: 'none' }}
-          value={localFilters.createdDate || ''}
-          onChange={(e) => handleInputChange('createdDate', e.target.value)}
-        />
-      </td>
-      <td>
-        <div className="dropdown">
-          <button className="btn btn-dark">
-            Type / Location <FaCaretDown />
-          </button>
-          <div className="dropdown-content" style={{ maxHeight: '300px', overflowY: 'auto' }}>
-            {TICKET_TYPES.map(type => (
-              <label key={type} className="dropdown-item" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-                <input
-                  type="checkbox"
-                  checked={(localFilters.type || []).includes(type)}
-                  onChange={() => handleCheckboxChange('type', type)}
-                />
-                {type}
-              </label>
-            ))}
-          </div>
-        </div>
-      </td>
-      <td>
-        <div className="dropdown">
-          <button className="btn btn-dark">
-            System <FaCaretDown />
-          </button>
-          <div className="dropdown-content" style={{ maxHeight: '300px', overflowY: 'auto' }}>
-            {SYSTEMS.map(system => (
-              <label key={system} className="dropdown-item" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-                <input
-                  type="checkbox"
-                  checked={(localFilters.system || []).includes(system)}
-                  onChange={() => handleCheckboxChange('system', system)}
-                />
-                {system}
-              </label>
-            ))}
-          </div>
-        </div>
-      </td>
-      <td>
-        <input
-          type="text"
-          placeholder="Customer or Location"
-          className="form-control"
-          style={{ width: '150px', background: '#616161', color: '#fff', border: 'none' }}
-          value={localFilters.customer || ''}
-          onChange={(e) => handleInputChange('customer', e.target.value)}
-        />
-      </td>
-      <td>
-        <input
-          type="text"
-          placeholder="User or Topic"
-          className="form-control"
-          style={{ width: '150px', background: '#616161', color: '#fff', border: 'none' }}
-          value={localFilters.userTopic || ''}
-          onChange={(e) => handleInputChange('userTopic', e.target.value)}
-        />
-      </td>
-      <td>
-        <div className="dropdown">
-          <button className="btn btn-dark">
-            Status <FaCaretDown />
-          </button>
-          <div className="dropdown-content">
-            {STATUSES.map(status => (
-              <label key={status} className="dropdown-item" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-                <input
-                  type="checkbox"
-                  checked={(localFilters.status || []).includes(status)}
-                  onChange={() => handleCheckboxChange('status', status)}
-                />
-                {status}
-              </label>
-            ))}
-          </div>
-        </div>
-      </td>
-      <td>
-        <div className="dropdown">
-          <button className="btn btn-dark">
-            Priority <FaCaretDown />
-          </button>
-          <div className="dropdown-content">
-            {PRIORITIES.map(p => (
-              <label key={p.value} className="dropdown-item" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-                <input
-                  type="checkbox"
-                  checked={(localFilters.priority || []).includes(p.value)}
-                  onChange={() => handleCheckboxChange('priority', p.value)}
-                />
-                {p.label}
-              </label>
-            ))}
-          </div>
-        </div>
-      </td>
-      <td className="text-center">Approval</td>
-      <td className="text-center">
-        <button className="btn btn-green" onClick={handleApply}>
-          Apply!
-        </button>
-      </td>
-    </tr>
-  )
-}

src/components/TicketProjects.jsx

@@ -0,0 +1,112 @@
+import { useState, useEffect, useCallback } from 'react'
+import { FaPlus, FaLink } from 'react-icons/fa6'
+import { useWebsiteProjects } from '../hooks/useWebsiteProjects'
+import { createProjectFromTemplate } from '../lib/projectAdminApi'
+import AssignedProjectCard from './AssignedProjectCard'
+
+function slugify(v) {
+  return String(v || '').toLowerCase().replace(/[^a-z0-9-]+/g, '-').replace(/^-+|-+$/g, '').slice(0, 100)
+}
+
+// Zuordnen lassen sich echte Repos des gleichen Kunden oder ohne Kunden, die nicht
+// archiviert, keine Vorlage und noch nicht an diesem Ticket sind
+function assignableProjects(all, ticket, assignedIds) {
+  return (all || []).filter((p) =>
+    p.repoFullName &&
+    !assignedIds.has(p.$id) &&
+    p.status !== 'archived' &&
+    !p.isTemplate &&
+    (!p.customerId || p.customerId === ticket.customerId)
+  )
+}
+
+// Projekte am Ticket: Liste, Zuweisen, Loesen und neues Projekt an einer Stelle.
+// Loesen nimmt das Projekt nur vom Ticket; die Kundenzuordnung (Sichtbarkeit im Portal) bleibt.
+export default function TicketProjects({ ticket }) {
+  const { fetchAllProjects, fetchByTicketId, assignProjects, unassignProject } = useWebsiteProjects()
+  const [assigned, setAssigned] = useState([])
+  const [available, setAvailable] = useState([])
+  const [selected, setSelected] = useState('')
+  const [showCreate, setShowCreate] = useState(false)
+  const [createForm, setCreateForm] = useState({ displayName: '', subdomain: '' })
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState('')
+
+  const load = useCallback(async () => {
+    if (!ticket?.$id) return
+    const [all, mine] = await Promise.all([fetchAllProjects(), fetchByTicketId(ticket.$id)])
+    setAssigned(mine)
+    setAvailable(assignableProjects(all, ticket, new Set(mine.map((p) => p.$id))))
+  }, [ticket, fetchAllProjects, fetchByTicketId])
+
+  useEffect(() => { load() }, [load])
+
+  const run = async (action) => {
+    setBusy(true)
+    setError('')
+    try {
+      await action()
+      await load()
+    } catch (err) {
+      setError(err.message || 'Aktion fehlgeschlagen')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const assign = () => run(async () => {
+    const r = await assignProjects([selected], { customerId: ticket.customerId || '', ticketId: ticket.$id })
+    if (!r.success) throw new Error(r.error)
+    setSelected('')
+  })
+
+  const unassign = (projectId) => run(async () => {
+    const r = await unassignProject(projectId)
+    if (!r.success) throw new Error(r.error)
+  })
+
+  const create = (e) => {
+    e.preventDefault()
+    run(async () => {
+      const subdomain = slugify(createForm.subdomain)
+      await createProjectFromTemplate({
+        repoName: subdomain,
+        displayName: createForm.displayName,
+        subdomain,
+        customerId: ticket.customerId || '',
+        ticketId: ticket.$id,
+      })
+      setCreateForm({ displayName: '', subdomain: '' })
+      setShowCreate(false)
+    })
+  }
+
+  return (
+    <div className="ui-card pad ticket-projects">
+      <h5 style={{ fontWeight: 700, marginBottom: 12 }}>Projekte ({assigned.length})</h5>
+      {error && <div className="text-red" style={{ marginBottom: 8 }}>{error}</div>}
+      {assigned.length === 0
+        ? <p className="muted" style={{ marginTop: 0 }}>Noch kein Projekt an diesem Ticket.</p>
+        : assigned.map((p) => <AssignedProjectCard key={p.$id} project={p} showActions onUnassign={unassign} />)}
+
+      <div className="ticket-projects-assign">
+        <select className="form-control" aria-label="Projekt zuweisen" value={selected} onChange={(e) => setSelected(e.target.value)}>
+          <option value="">Projekt wählen …</option>
+          {available.map((p) => (
+            <option key={p.$id} value={p.$id}>{p.projectName} ({p.subdomain || p.repoFullName})</option>
+          ))}
+        </select>
+        <button type="button" className="ui-btn" disabled={!selected || busy} onClick={assign}><FaLink /> Zuweisen</button>
+        <button type="button" className="ui-btn ui-btn-ghost" onClick={() => setShowCreate((s) => !s)}><FaPlus /> Neues Projekt</button>
+      </div>
+
+      {showCreate && (
+        <form className="ticket-projects-assign" onSubmit={create} style={{ marginTop: 8 }}>
+          <input className="form-control" placeholder="Anzeigename" value={createForm.displayName} onChange={(e) => setCreateForm((f) => ({ ...f, displayName: e.target.value }))} required />
+          <input className="form-control" placeholder="Subdomain" value={createForm.subdomain} onChange={(e) => setCreateForm((f) => ({ ...f, subdomain: e.target.value }))} required />
+          <button type="submit" className="ui-btn ui-btn-primary" disabled={busy}>{busy ? 'Wird angelegt …' : 'Anlegen & zuweisen'}</button>
+        </form>
+      )}
+    </div>
+  )
+}

src/components/TicketRoadmapPanel.jsx

@@ -0,0 +1,94 @@
+import { useEffect, useState } from 'react'
+import { Link } from 'react-router-dom'
+import { IconRoute, IconAlertTriangle } from '@tabler/icons-react'
+import RoadmapProgressBar from './roadmap/RoadmapProgressBar'
+import {
+  fetchRoadmapByTicketId,
+  fetchRoadmapNodes,
+  computeProgress,
+  isNodeOverdue,
+  NODE_KIND,
+  NODE_STATUS,
+  ROADMAP_STATUS,
+} from '../lib/roadmaps'
+
+/**
+ * Roadmap-Tracking im Projektticket: Fortschritt, Mini-Uebersicht und Link zum Board.
+ * Rendert nichts, wenn zum Ticket keine Roadmap existiert.
+ */
+export default function TicketRoadmapPanel({ ticket }) {
+  const [roadmap, setRoadmap] = useState(null)
+  const [nodes, setNodes] = useState([])
+  const [loaded, setLoaded] = useState(false)
+
+  useEffect(() => {
+    let cancelled = false
+    async function load() {
+      try {
+        const doc = await fetchRoadmapByTicketId(ticket.$id)
+        if (cancelled) return
+        setRoadmap(doc)
+        if (doc) setNodes(await fetchRoadmapNodes(doc.$id))
+      } catch {
+        /* Panel ist optional */
+      } finally {
+        if (!cancelled) setLoaded(true)
+      }
+    }
+    load()
+    return () => { cancelled = true }
+  }, [ticket.$id])
+
+  if (!loaded || !roadmap) return null
+
+  const progress = computeProgress(nodes)
+  const relevant = nodes.filter((n) => n.kind !== NODE_KIND.START)
+  const counts = {
+    open: relevant.filter((n) => (n.status || NODE_STATUS.OPEN) === NODE_STATUS.OPEN).length,
+    inProgress: relevant.filter((n) => n.status === NODE_STATUS.IN_PROGRESS).length,
+    done: relevant.filter((n) => n.status === NODE_STATUS.DONE).length,
+  }
+  const nextDue = relevant
+    .filter((n) => n.deadline && n.status !== NODE_STATUS.DONE)
+    .sort((a, b) => a.deadline.localeCompare(b.deadline))
+    .slice(0, 3)
+  const closedButActive = ticket.status === 'Closed' && roadmap.status === ROADMAP_STATUS.ACTIVE
+
+  return (
+    <div className="ui-card pad" style={{ marginBottom: 16 }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12, flexWrap: 'wrap', marginBottom: 10 }}>
+        <h5 style={{ fontWeight: 700, margin: 0, display: 'flex', alignItems: 'center', gap: 8 }}>
+          <IconRoute size={18} /> Roadmap: {roadmap.title}
+        </h5>
+        <Link to={`/roadmaps/${roadmap.$id}`} className="ui-btn">Zur Roadmap</Link>
+      </div>
+
+      <RoadmapProgressBar progress={progress} />
+
+      <div className="muted" style={{ display: 'flex', gap: 14, fontSize: 13, marginTop: 10, flexWrap: 'wrap' }}>
+        <span>Offen: {counts.open}</span>
+        <span>In Arbeit: {counts.inProgress}</span>
+        <span>Fertig: {counts.done}</span>
+        {roadmap.status === ROADMAP_STATUS.COMPLETED && <span style={{ color: '#34d399' }}>Plan abgeschlossen</span>}
+      </div>
+
+      {nextDue.length > 0 && (
+        <div style={{ marginTop: 10, fontSize: 13 }}>
+          <span className="faint">Naechste Deadlines: </span>
+          {nextDue.map((n, i) => (
+            <span key={n.$id} style={isNodeOverdue(n) ? { color: 'var(--danger, #ef4444)', fontWeight: 700 } : undefined}>
+              {i > 0 && ' · '}{n.title} ({n.deadline.split('-').reverse().join('.')})
+            </span>
+          ))}
+        </div>
+      )}
+
+      {closedButActive && (
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 12, fontSize: 13, color: '#fbbf24' }}>
+          <IconAlertTriangle size={16} style={{ flexShrink: 0 }} />
+          Ticket ist geschlossen, aber der Plan ist erst zu {progress.percent}% fertig.
+        </div>
+      )}
+    </div>
+  )
+}

src/components/TicketRow.jsx

@@ -1,264 +0,0 @@
-import { useState } from 'react'
-import { FaLock, FaLockOpen, FaPlay, FaStop, FaTruck, FaSackDollar, FaUserGear, FaPlus } from 'react-icons/fa6'
-import { formatDistanceToNow, format } from 'date-fns'
-import { de } from 'date-fns/locale'
-import StatusDropdown from './StatusDropdown'
-import PriorityDropdown from './PriorityDropdown'
-import EditorDropdown from './EditorDropdown'
-import ResponseDropdown from './ResponseDropdown'
-import CreateWorksheetModal from './CreateWorksheetModal'
-import WorksheetList from './WorksheetList'
-import WorksheetStats from './WorksheetStats'
-import { useWorksheets } from '../hooks/useWorksheets'
-
-const PRIORITY_CLASSES = {
-  0: 'priority-none',
-  1: 'priority-low',
-  2: 'priority-medium',
-  3: 'priority-high',
-  4: 'priority-critical'
-}
-
-const PRIORITY_LABELS = {
-  0: 'NONE',
-  1: 'LOW',
-  2: 'MEDIUM',
-  3: 'HIGH',
-  4: 'CRITICAL'
-}
-
-const STATUS_CLASSES = {
-  'Open': 'status-open',
-  'Occupied': 'status-occupied',
-  'Assigned': 'status-assigned',
-  'Awaiting': 'status-awaiting',
-  'Closed': 'status-closed'
-}
-
-const APPROVAL_ICONS = {
-  'pending': FaUserGear,
-  'approved': FaSackDollar,
-  'quote': FaSackDollar,
-  'shipping': FaTruck
-}
-
-export default function TicketRow({ ticket, onUpdate, onExpand }) {
-  const [expanded, setExpanded] = useState(false)
-  const [locked, setLocked] = useState(true)
-  const [showCreateWorksheet, setShowCreateWorksheet] = useState(false)
-  
-  // Worksheets für dieses Ticket laden (nur wenn expanded)
-  const { 
-    worksheets, 
-    loading: worksheetsLoading, 
-    createWorksheet,
-    getTotalTime 
-  } = useWorksheets(expanded ? ticket.woid : null)
-
-  const createdAt = new Date(ticket.$createdAt || ticket.createdAt)
-  const elapsed = formatDistanceToNow(createdAt, { locale: de })
-  
-  const handleStatusChange = (newStatus) => {
-    onUpdate(ticket.$id, { status: newStatus })
-  }
-
-  const handlePriorityChange = (newPriority) => {
-    onUpdate(ticket.$id, { priority: newPriority })
-  }
-
-  const handleEditorChange = (newEditor) => {
-    onUpdate(ticket.$id, { assignedTo: newEditor })
-  }
-
-  const handleResponseChange = (newResponse) => {
-    onUpdate(ticket.$id, { responseLevel: newResponse })
-  }
-
-  const toggleLock = () => {
-    if (locked) {
-      setExpanded(true)
-      onExpand?.(ticket.$id)
-    } else {
-      setExpanded(false)
-    }
-    setLocked(!locked)
-  }
-
-  const handleCreateWorksheet = async (worksheetData, currentUser) => {
-    const result = await createWorksheet(worksheetData, currentUser)
-    
-    // Wenn Status geändert wurde, aktualisiere Work Order
-    if (result.success && worksheetData.newStatus !== ticket.status) {
-      await onUpdate(ticket.$id, { 
-        status: worksheetData.newStatus,
-        responseLevel: worksheetData.newResponseLevel || ticket.responseLevel
-      })
-    }
-    
-    return result
-  }
-
-  const ApprovalIcon = APPROVAL_ICONS[ticket.approvalStatus] || FaUserGear
-
-  return (
-    <>
-      <tr className="ticket-row">
-        <td className="ticket-id" rowSpan={2}>
-          <div><strong>WOID:</strong> {ticket.woid || ticket.$id?.slice(-5)}</div>
-          <div className="ticket-time">{elapsed}</div>
-        </td>
-        <td className="ticket-info" rowSpan={2}>
-          <strong>{format(createdAt, 'dd.MM.yyyy')}</strong>
-        </td>
-        <td className="ticket-info" rowSpan={2}>
-          <strong>{ticket.type}</strong>
-          <br />
-          {ticket.serviceType || 'Remote'}
-          <br />
-          <FaPlay className="text-green" /> {ticket.startDate || format(createdAt, 'dd.MM.yyyy')}
-          <br />
-          <FaStop className="text-red" /> {ticket.deadline || '-'}
-        </td>
-        <td className="ticket-info" rowSpan={2}>
-          <strong>{ticket.systemType || 'n/a'}</strong>
-        </td>
-        <td rowSpan={2}>
-          <strong>{ticket.customerName || 'Unknown'}</strong>
-          <br />
-          {ticket.customerLocation || ''}
-        </td>
-        <td rowSpan={2}>
-          <strong>{ticket.requestedBy || '-'}</strong>
-          <br />
-          {ticket.requestedFor && <>Requested for: {ticket.requestedFor}<br /></>}
-          {ticket.topic}
-        </td>
-        <td className={`text-center ${STATUS_CLASSES[ticket.status] || 'status-open'}`}>
-          <StatusDropdown 
-            value={ticket.status} 
-            onChange={handleStatusChange}
-          />
-        </td>
-        <td className={`text-center ${PRIORITY_CLASSES[ticket.priority] || 'priority-low'}`}>
-          <PriorityDropdown 
-            value={ticket.priority} 
-            onChange={handlePriorityChange}
-          />
-        </td>
-        <td 
-          className={`text-center ${ticket.approvalStatus === 'approved' ? 'bg-green' : 'bg-yellow'}`}
-          rowSpan={2}
-          style={{ verticalAlign: 'middle' }}
-        >
-          <ApprovalIcon size={24} />
-        </td>
-        <td 
-          className="bg-dark-grey text-center text-white"
-          rowSpan={2}
-          style={{ verticalAlign: 'middle', cursor: 'pointer' }}
-          onClick={toggleLock}
-        >
-          {locked ? <FaLock size={24} /> : <FaLockOpen size={24} />}
-        </td>
-      </tr>
-      <tr className="ticket-row">
-        <td className={`text-center ${STATUS_CLASSES[ticket.status] || 'status-open'}`}>
-          <EditorDropdown 
-            value={ticket.assignedTo} 
-            onChange={handleEditorChange}
-          />
-        </td>
-        <td className={`text-center ${PRIORITY_CLASSES[ticket.priority] || 'priority-low'}`}>
-          <ResponseDropdown 
-            value={ticket.responseLevel} 
-            onChange={handleResponseChange}
-          />
-        </td>
-      </tr>
-      {expanded && (
-        <>
-          <tr>
-            <td colSpan={10} className="p-2">
-              <div className="card">
-                <div className="card-header d-flex justify-content-between align-items-center" style={{
-                  background: 'linear-gradient(135deg, #2d3748 0%, #1a202c 100%)',
-                  color: 'white',
-                  padding: '1rem 1.5rem'
-                }}>
-                  <span className="fs-5 fw-bold">Details - WOID {ticket.woid || ticket.$id}</span>
-                  <button 
-                    className="btn btn-sm px-4 py-2 border-0 fw-bold"
-                    style={{
-                      background: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
-                      color: 'white',
-                      transition: 'all 0.2s ease'
-                    }}
-                    onMouseEnter={(e) => {
-                      e.currentTarget.style.transform = 'translateY(-2px)'
-                      e.currentTarget.style.boxShadow = '0 4px 12px rgba(16, 185, 129, 0.4)'
-                    }}
-                    onMouseLeave={(e) => {
-                      e.currentTarget.style.transform = 'translateY(0)'
-                      e.currentTarget.style.boxShadow = 'none'
-                    }}
-                    onClick={() => setShowCreateWorksheet(true)}
-                  >
-                    <FaPlus className="me-2" /> Add Worksheet
-                  </button>
-                </div>
-                <div className="card-body">
-                  <div className="mb-4 p-4 rounded-3 shadow-sm" style={{
-                    background: 'linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%)',
-                    border: '2px solid #10b981'
-                  }}>
-                    <h5 className="mb-3" style={{ color: '#1a202c', fontWeight: 'bold' }}>
-                      📋 Ticket-Beschreibung
-                    </h5>
-                    <p style={{ 
-                      fontSize: '1.1rem', 
-                      lineHeight: '1.8',
-                      color: '#1f2937',
-                      whiteSpace: 'pre-wrap',
-                      margin: 0
-                    }}>
-                      {ticket.details || 'Keine Details vorhanden.'}
-                    </p>
-                  </div>
-                  
-                  <hr />
-                  
-                  <h5 className="mt-4 mb-3">Worksheets (Arbeitsschritte)</h5>
-                  
-                  {/* Statistiken */}
-                  {worksheets.length > 0 && (
-                    <>
-                      <WorksheetStats worksheets={worksheets} />
-                      <hr />
-                    </>
-                  )}
-                  
-                  {/* Worksheet-Liste */}
-                  <WorksheetList 
-                    worksheets={worksheets} 
-                    totalTime={getTotalTime()} 
-                    loading={worksheetsLoading}
-                  />
-                </div>
-              </div>
-            </td>
-          </tr>
-        </>
-      )}
-      
-      <CreateWorksheetModal 
-        isOpen={showCreateWorksheet}
-        onClose={() => setShowCreateWorksheet(false)}
-        workorder={ticket}
-        onCreate={handleCreateWorksheet}
-      />
-      <tr className="spacer">
-        <td colSpan={10} style={{ height: '8px', background: '#fff' }}></td>
-      </tr>
-    </>
-  )
-}

src/components/UrgentToggle.jsx

@@ -0,0 +1,17 @@
+import { isUrgent, priorityFor } from '../lib/ticketStatus'
+
+// Ein Klick markiert ein Ticket als dringend oder wieder als normal
+export default function UrgentToggle({ value, onChange }) {
+  const urgent = isUrgent(value)
+  return (
+    <button
+      type="button"
+      className={`urgent-toggle${urgent ? ' on' : ''}`}
+      aria-pressed={urgent}
+      title={urgent ? 'Nicht mehr dringend' : 'Als dringend markieren'}
+      onClick={() => onChange(priorityFor(!urgent))}
+    >
+      Dringend
+    </button>
+  )
+}

src/components/WorksheetList.jsx

@@ -1,11 +1,36 @@
-import { FaClock, FaUser, FaExchangeAlt, FaComment } from 'react-icons/fa'
+import { useState } from 'react'
+import { FaClock, FaUser, FaExchangeAlt, FaComment, FaChevronDown, FaChevronUp, FaPen, FaCheck } from 'react-icons/fa'
+import { serviceTypeLabel, needsTimeEntry, worksheetTone } from '../lib/ticketForm'
+import { statusLabel } from '../lib/ticketStatus'
 
-export default function WorksheetList({ worksheets, totalTime, loading }) {
+// Kopffarbe je Zustand (worksheetTone): orange = Git-Zeit fehlt, gruen = Git-Zeit eingetragen
+const TONES = {
+  'git-open': { border: '#f97316', base: 'linear-gradient(135deg, #f97316 0%, #ea580c 100%)', hover: 'linear-gradient(135deg, #ea580c 0%, #c2410c 100%)' },
+  'git-done': { border: '#10b981', base: 'linear-gradient(135deg, #10b981 0%, #059669 100%)', hover: 'linear-gradient(135deg, #059669 0%, #047857 100%)' },
+  comment: { border: '#3b82f6', base: 'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)', hover: 'linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%)' },
+  work: { border: '#4a5568', base: 'linear-gradient(135deg, #4a5568 0%, #2d3748 100%)', hover: 'linear-gradient(135deg, #2d3748 0%, #1a202c 100%)' },
+}
+
+// Hinweise im farbigen Kopf: mit der grauen Badge-Schrift waeren sie kaum lesbar
+const headerBadgeStyle = { background: 'rgba(255,255,255,0.3)', color: 'white', marginLeft: '8px' }
+
+const headerButtonStyle = {
+  background: 'rgba(255,255,255,0.25)',
+  color: 'white',
+  border: '1px solid rgba(255,255,255,0.4)',
+  borderRadius: '6px',
+  padding: '2px 10px',
+  fontSize: '0.8rem',
+  marginRight: '8px',
+}
+
+export default function WorksheetList({ worksheets, totalTime, loading, onTogglePlan, canEditTimes, onEditTimes }) {
+  const [expandedWorksheets, setExpandedWorksheets] = useState({})
   if (loading) {
     return (
       <div className="text-center p-4">
         <div className="spinner-border" role="status">
-          <span className="visually-hidden">Loading...</span>
+          <span className="visually-hidden">Lädt …</span>
         </div>
       </div>
     )
@@ -15,7 +40,7 @@ export default function WorksheetList({ worksheets, totalTime, loading }) {
     return (
       <div className="alert alert-info" role="alert">
         <FaComment className="me-2" />
-        Noch keine Worksheets vorhanden. Erstelle das erste Worksheet für dieses Ticket.
+        Noch keine Arbeitsblätter. Leg das erste mit „Arbeitsblatt hinzufügen“ an.
       </div>
     )
   }
@@ -34,141 +59,221 @@ export default function WorksheetList({ worksheets, totalTime, loading }) {
     return `${date} ${hours}:${mins}`
   }
 
+  const toggleWorksheet = (wsid) => {
+    setExpandedWorksheets(prev => ({
+      ...prev,
+      [wsid]: !prev[wsid]
+    }))
+  }
+
   return (
     <div className="worksheet-list">
-      {/* Gesamtzeit-Header */}
-      <div className="mb-4 p-4 rounded-3 shadow-sm" style={{
-        background: 'linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%)',
-        border: 'none'
-      }}>
-        <div className="d-flex justify-content-between align-items-center">
-          <div className="d-flex align-items-center">
-            <FaClock className="me-3" size={24} style={{ color: '#059669' }} />
-            <div>
-              <strong className="fs-5 d-block" style={{ color: '#064e3b' }}>Gesamtarbeitszeit</strong>
-              <span className="fs-3 fw-bold" style={{ color: '#059669' }}>{formatTime(totalTime)}</span>
-            </div>
-          </div>
-          <div className="text-end">
-            <span className="badge px-3 py-2" style={{ 
-              background: 'rgba(5, 150, 105, 0.2)',
-              color: '#059669',
-              fontSize: '1rem'
-            }}>
-              {worksheets.filter(ws => !ws.isComment).length} Worksheet(s)
-            </span>
-          </div>
-        </div>
-      </div>
-
       {/* Worksheet-Einträge */}
       <div className="timeline">
-        {worksheets.map((ws, index) => (
-          <div key={ws.$id} className="timeline-item mb-4" style={{
-            animation: `fadeIn 0.5s ease-in-out ${index * 0.1}s backwards`
-          }}>
-            <div className="card border-0 shadow-sm overflow-hidden" style={{
-              borderLeft: ws.isComment ? '4px solid #10b981' : '4px solid #4a5568',
-              transition: 'transform 0.2s ease, box-shadow 0.2s ease'
-            }} onMouseEnter={(e) => {
-              e.currentTarget.style.transform = 'translateY(-2px)'
-              e.currentTarget.style.boxShadow = '0 8px 16px rgba(0,0,0,0.1)'
-            }} onMouseLeave={(e) => {
-              e.currentTarget.style.transform = 'translateY(0)'
-              e.currentTarget.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)'
+        {worksheets.map((ws, index) => {
+          const isExpanded = expandedWorksheets[ws.wsid] || false
+          const isGit = ws.serviceType === 'GIT'
+          const tone = worksheetTone(ws)
+          const colors = TONES[tone]
+          
+          return (
+            <div key={ws.$id} className="timeline-item mb-4" style={{
+              animation: `fadeIn 0.5s ease-in-out ${index * 0.1}s backwards`
             }}>
-              <div className="card-header d-flex justify-content-between align-items-center py-3" style={{
-                background: ws.isComment 
-                  ? 'linear-gradient(135deg, #10b981 0%, #059669 100%)'
-                  : 'linear-gradient(135deg, #4a5568 0%, #2d3748 100%)',
-                color: 'white',
-                border: 'none'
+              <div className="card border-0 shadow-sm overflow-hidden" style={{
+                borderLeft: `4px solid ${colors.border}`,
+                borderRadius: '8px',
+                transition: 'transform 0.2s ease, box-shadow 0.2s ease'
+              }} onMouseEnter={(e) => {
+                e.currentTarget.style.transform = 'translateY(-2px)'
+                e.currentTarget.style.boxShadow = '0 8px 16px rgba(0,0,0,0.1)'
+              }} onMouseLeave={(e) => {
+                e.currentTarget.style.transform = 'translateY(0)'
+                e.currentTarget.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)'
               }}>
-                <div>
-                  <strong className="fs-6">WSID {ws.wsid}</strong>
-                  {ws.isComment && (
-                    <span className="badge ms-2" style={{ 
-                      background: 'rgba(255,255,255,0.3)'
-                    }}>
-                      <FaComment className="me-1" /> Kommentar
-                    </span>
-                  )}
-                </div>
-                <small style={{ opacity: 0.9 }}>
-                  {formatDateTime(ws.startDate, ws.startTime)}
-                </small>
-              </div>
-              
-              <div className="card-body p-4">
-                {/* Mitarbeiter & Zeit */}
-                <div className="row mb-3">
-                  <div className="col-md-6">
-                    <div className="d-flex align-items-center">
-                      <FaUser className="me-2" style={{ color: '#10b981' }} />
-                      <strong>{ws.employeeName}</strong>
-                      {ws.employeeShort && (
-                        <span className="badge ms-2" style={{ 
-                          background: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
-                          color: 'white'
-                        }}>{ws.employeeShort}</span>
+                {/* Header - Immer sichtbar, klickbar */}
+                <div 
+                  className="card-header d-flex justify-content-between align-items-center py-3"
+                  onClick={() => toggleWorksheet(ws.wsid)}
+                  style={{
+                    background: colors.base,
+                    color: 'white',
+                    border: 'none',
+                    cursor: 'pointer',
+                    userSelect: 'none',
+                    transition: 'background 0.2s ease'
+                  }}
+                  onMouseEnter={(e) => {
+                    e.currentTarget.style.background = colors.hover
+                  }}
+                  onMouseLeave={(e) => {
+                    e.currentTarget.style.background = colors.base
+                  }}
+                >
+                  <div className="d-flex align-items-center gap-3">
+                    {isExpanded ? (
+                      <FaChevronUp style={{ fontSize: '0.9rem', opacity: 0.8 }} />
+                    ) : (
+                      <FaChevronDown style={{ fontSize: '0.9rem', opacity: 0.8 }} />
+                    )}
+                    <div>
+                      <strong className="fs-6">WSID {ws.wsid}</strong>
+                      {ws.isComment && !isGit && (
+                        <span className="badge ms-2" style={headerBadgeStyle}>
+                          <FaComment className="me-1" /> Kommentar
+                        </span>
+                      )}
+                      {tone === 'git-open' && (
+                        <span className="badge ms-2" style={headerBadgeStyle}>
+                          <FaClock className="me-1" /> Zeit offen
+                        </span>
+                      )}
+                      {tone === 'git-done' && (
+                        <span className="badge ms-2" style={headerBadgeStyle}>
+                          <FaCheck className="me-1" /> Zeit eingetragen
+                        </span>
+                      )}
+                      {ws.countsToPlan && !ws.isComment && (
+                        <span className="badge ms-2" title="Wird vom Stundenguthaben des Wartungs-Abos abgezogen" style={{ ...headerBadgeStyle, background: '#9d3dfe' }}>
+                          Abo-Stunden
+                        </span>
                       )}
                     </div>
-                  </div>
-                  <div className="col-md-6 text-md-end">
-                    {!ws.isComment && (
-                      <div className="d-flex align-items-center justify-content-md-end">
-                        <FaClock className="me-2" style={{ color: '#10b981' }} />
-                        <strong className="fs-5" style={{ color: '#10b981' }}>{formatTime(ws.totalTime)}</strong>
+                    {/* Collapsed: Mitarbeiter & Zeit im Header */}
+                    {!isExpanded && (
+                      <div className="d-flex align-items-center gap-3 ms-3">
+                        <div className="d-flex align-items-center">
+                          <FaUser style={{ fontSize: '0.9rem', marginRight: '0.5rem' }} />
+                          <span style={{ fontSize: '0.9rem' }}>{ws.employeeName}</span>
+                        </div>
+                        {!ws.isComment && (
+                          <div className="d-flex align-items-center">
+                            <FaClock style={{ fontSize: '0.9rem', marginRight: '0.5rem' }} />
+                            <span style={{ fontSize: '0.9rem' }}>{formatTime(ws.totalTime)}</span>
+                          </div>
+                        )}
+                        <span className="badge" style={{
+                          background: 'rgba(255,255,255,0.2)',
+                          color: 'white',
+                          fontSize: '0.8rem'
+                        }}>{serviceTypeLabel(ws.serviceType)}</span>
                       </div>
                     )}
                   </div>
+                  <div className="d-flex align-items-center gap-2">
+                    {onEditTimes && canEditTimes?.(ws) && (
+                      <button
+                        type="button"
+                        className="btn btn-sm"
+                        title="Beginn, Ende und Arbeitszeit ändern"
+                        style={headerButtonStyle}
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          onEditTimes(ws)
+                        }}
+                      >
+                        {needsTimeEntry(ws)
+                          ? <><FaClock className="me-1" /> Zeit nachtragen</>
+                          : <><FaPen className="me-1" /> Zeiten bearbeiten</>}
+                      </button>
+                    )}
+                    {onTogglePlan && !ws.isComment && Number(ws.totalTime) > 0 && (
+                      <button
+                        type="button"
+                        className="btn btn-sm"
+                        title={ws.countsToPlan ? 'Nicht mehr vom Abo-Stundenkonto abziehen' : 'Vom Abo-Stundenkonto des Kunden abziehen'}
+                        style={{
+                          background: ws.countsToPlan ? '#9d3dfe' : 'rgba(255,255,255,0.15)',
+                          color: 'white',
+                          border: '1px solid rgba(255,255,255,0.4)',
+                          borderRadius: '6px',
+                          padding: '2px 10px',
+                          fontSize: '0.8rem',
+                          marginRight: '8px',
+                        }}
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          onTogglePlan(ws)
+                        }}
+                      >
+                        {ws.countsToPlan ? '✓ Abo' : '+ Abo'}
+                      </button>
+                    )}
+                    <small style={{ opacity: 0.9 }}>
+                      {formatDateTime(ws.startDate, ws.startTime) || formatDateTime(ws.endDate, ws.endTime)}
+                    </small>
+                  </div>
                 </div>
+                
+                {/* Body - Nur wenn expanded */}
+                {isExpanded && (
+                  <div 
+                    className="card-body p-4"
+                    style={{
+                      animation: 'slideDown 0.3s ease-out'
+                    }}
+                  >
+                    {/* Mitarbeiter & Zeit */}
+                    <div className="row mb-3">
+                      <div className="col-md-6">
+                        <div className="d-flex align-items-center">
+                          <FaUser className="me-2" style={{ color: '#10b981' }} />
+                          <strong>{ws.employeeName}</strong>
+                          {ws.employeeShort && (
+                            <span className="badge ms-2" style={{ 
+                              background: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
+                              color: 'white'
+                            }}>{ws.employeeShort}</span>
+                          )}
+                        </div>
+                      </div>
+                      <div className="col-md-6 text-md-end">
+                        {!ws.isComment && (
+                          <div className="d-flex align-items-center justify-content-md-end">
+                            <FaClock className="me-2" style={{ color: '#10b981' }} />
+                            <strong className="fs-5" style={{ color: '#10b981' }}>{formatTime(ws.totalTime)}</strong>
+                          </div>
+                        )}
+                      </div>
+                    </div>
 
-                {/* Service Type */}
-                <div className="mb-3">
-                  <span className="badge px-3 py-2" style={{ 
-                    background: 'linear-gradient(135deg, #4a5568 0%, #2d3748 100%)',
-                    color: 'white',
-                    fontSize: '0.85rem'
-                  }}>{ws.serviceType}</span>
-                </div>
+                    {/* Service Type */}
+                    <div className="mb-3">
+                      <span className="badge px-3 py-2" style={{ 
+                        background: 'linear-gradient(135deg, #4a5568 0%, #2d3748 100%)',
+                        color: 'white',
+                        fontSize: '0.85rem'
+                      }}>{serviceTypeLabel(ws.serviceType)}</span>
+                    </div>
 
-                {/* Status-Änderung */}
-                {ws.oldStatus !== ws.newStatus && (
-                  <div className="mb-3 p-3 rounded-3" style={{ 
-                    background: 'linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.1) 100%)'
-                  }}>
-                    <FaExchangeAlt className="me-2" style={{ color: '#10b981' }} />
-                    <span className="text-muted">Status:</span>{' '}
-                    <span className="badge" style={{ background: '#6b7280', color: 'white' }}>{ws.oldStatus}</span>
-                    <span className="mx-2" style={{ color: '#10b981' }}>→</span>
-                    <span className="badge" style={{ background: '#10b981', color: 'white' }}>{ws.newStatus}</span>
+                    {/* Status-Änderung */}
+                    {ws.oldStatus !== ws.newStatus && (
+                      <div className="mb-3 p-3 rounded-3" style={{ 
+                        background: 'linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.1) 100%)'
+                      }}>
+                        <FaExchangeAlt className="me-2" style={{ color: '#10b981' }} />
+                        <span className="text-muted">Status:</span>{' '}
+                        <span className="badge" style={{ background: '#6b7280', color: 'white' }}>{statusLabel(ws.oldStatus)}</span>
+                        <span className="mx-2" style={{ color: '#10b981' }}>→</span>
+                        <span className="badge" style={{ background: '#10b981', color: 'white' }}>{statusLabel(ws.newStatus)}</span>
+                      </div>
+                    )}
+
+                    {/* Details */}
+                    <div className="mt-3 p-3 rounded-3" style={{ 
+                      background: 'rgba(16, 185, 129, 0.05)',
+                      border: '1px solid rgba(16, 185, 129, 0.1)'
+                    }}>
+                      <small className="text-dark" style={{ whiteSpace: 'pre-wrap', lineHeight: '1.6' }}>
+                        {ws.details}
+                      </small>
+                    </div>
                   </div>
                 )}
-
-                {/* Response Level-Änderung */}
-                {ws.oldResponseLevel && ws.newResponseLevel && ws.oldResponseLevel !== ws.newResponseLevel && (
-                  <div className="mb-3">
-                    <span className="text-muted">Response Level:</span>{' '}
-                    <span className="badge" style={{ background: '#6b7280', color: 'white' }}>{ws.oldResponseLevel}</span>
-                    <span className="mx-2">→</span>
-                    <span className="badge" style={{ background: '#10b981', color: 'white' }}>{ws.newResponseLevel}</span>
-                  </div>
-                )}
-
-                {/* Details */}
-                <div className="mt-3 p-3 rounded-3" style={{ 
-                  background: 'rgba(16, 185, 129, 0.05)',
-                  border: '1px solid rgba(16, 185, 129, 0.1)'
-                }}>
-                  <small className="text-dark" style={{ whiteSpace: 'pre-wrap', lineHeight: '1.6' }}>
-                    {ws.details}
-                  </small>
-                </div>
               </div>
             </div>
-          </div>
-        ))}
+          )
+        })}
       </div>
       
       <style>{`
@@ -182,6 +287,18 @@ export default function WorksheetList({ worksheets, totalTime, loading }) {
             transform: translateY(0);
           }
         }
+        @keyframes slideDown {
+          from {
+            opacity: 0;
+            max-height: 0;
+            transform: translateY(-10px);
+          }
+          to {
+            opacity: 1;
+            max-height: 1000px;
+            transform: translateY(0);
+          }
+        }
       `}</style>
     </div>
   )

src/components/WorksheetStats.jsx

@@ -1,212 +0,0 @@
-import { FaClock, FaUsers, FaHistory, FaChartLine } from 'react-icons/fa'
-
-export default function WorksheetStats({ worksheets }) {
-  if (!worksheets || worksheets.length === 0) {
-    return null
-  }
-
-  // Gesamtarbeitszeit
-  const totalMinutes = worksheets
-    .filter(ws => !ws.isComment)
-    .reduce((sum, ws) => sum + (ws.totalTime || 0), 0)
-  
-  // Nach Mitarbeiter gruppieren
-  const byEmployee = worksheets.reduce((acc, ws) => {
-    const empId = ws.employeeId
-    if (!acc[empId]) {
-      acc[empId] = {
-        name: ws.employeeName,
-        short: ws.employeeShort,
-        time: 0,
-        count: 0
-      }
-    }
-    if (!ws.isComment) {
-      acc[empId].time += ws.totalTime || 0
-    }
-    acc[empId].count += 1
-    return acc
-  }, {})
-
-  // Status-Historie
-  const statusHistory = worksheets
-    .filter(ws => ws.oldStatus && ws.newStatus && ws.oldStatus !== ws.newStatus)
-    .map(ws => ({
-      date: ws.startDate,
-      time: ws.startTime,
-      from: ws.oldStatus,
-      to: ws.newStatus,
-      employee: ws.employeeName
-    }))
-
-  // Service Type Verteilung
-  const byServiceType = worksheets.reduce((acc, ws) => {
-    const type = ws.serviceType || 'Unknown'
-    acc[type] = (acc[type] || 0) + 1
-    return acc
-  }, {})
-
-  const formatTime = (minutes) => {
-    if (!minutes || minutes === 0) return '0min'
-    const hours = Math.floor(minutes / 60)
-    const mins = minutes % 60
-    return hours > 0 ? `${hours}h ${mins}min` : `${mins}min`
-  }
-
-  const formatTimeShort = (time) => {
-    if (!time || time.length !== 4) return '-'
-    return `${time.substring(0, 2)}:${time.substring(2, 4)}`
-  }
-
-  return (
-    <div className="worksheet-stats mb-4">
-      <div className="row g-4">
-        {/* Gesamtübersicht */}
-        <div className="col-lg-4 col-md-6">
-          <div className="card h-100 border-0 shadow-sm" style={{
-            background: 'linear-gradient(135deg, #2d3748 0%, #1a202c 100%)',
-            color: 'white'
-          }}>
-            <div className="card-body p-4">
-              <h6 className="card-title mb-3 d-flex align-items-center">
-                <FaChartLine className="me-2" size={20} style={{ color: '#4ade80' }} />
-                <strong>Gesamtübersicht</strong>
-              </h6>
-              <div className="mt-3">
-                <div className="d-flex justify-content-between align-items-center mb-3 pb-2" style={{ borderBottom: '1px solid rgba(255,255,255,0.2)' }}>
-                  <span style={{ opacity: 0.9 }}>Worksheets:</span>
-                  <strong className="fs-5">{worksheets.length}</strong>
-                </div>
-                <div className="d-flex justify-content-between align-items-center mb-3 pb-2" style={{ borderBottom: '1px solid rgba(255,255,255,0.2)' }}>
-                  <span style={{ opacity: 0.9 }}>Arbeitszeit:</span>
-                  <strong className="fs-5">{formatTime(totalMinutes)}</strong>
-                </div>
-                <div className="d-flex justify-content-between align-items-center mb-3 pb-2" style={{ borderBottom: '1px solid rgba(255,255,255,0.2)' }}>
-                  <span style={{ opacity: 0.9 }}>Kommentare:</span>
-                  <strong className="fs-5">{worksheets.filter(ws => ws.isComment).length}</strong>
-                </div>
-                <div className="d-flex justify-content-between align-items-center">
-                  <span style={{ opacity: 0.9 }}>Ø pro Worksheet:</span>
-                  <strong className="fs-5">
-                    {formatTime(Math.round(totalMinutes / (worksheets.filter(ws => !ws.isComment).length || 1)))}
-                  </strong>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* Nach Mitarbeiter */}
-        <div className="col-lg-4 col-md-6">
-          <div className="card h-100 border-0 shadow-sm" style={{
-            background: 'linear-gradient(135deg, #22c55e 0%, #10b981 100%)',
-            color: 'white'
-          }}>
-            <div className="card-body p-4">
-              <h6 className="card-title mb-3 d-flex align-items-center">
-                <FaUsers className="me-2" size={20} />
-                <strong>Nach Mitarbeiter</strong>
-              </h6>
-              <div className="mt-3">
-                {Object.values(byEmployee).map((emp, idx) => (
-                  <div key={idx} className="mb-3 pb-3" style={{ borderBottom: idx < Object.values(byEmployee).length - 1 ? '1px solid rgba(255,255,255,0.2)' : 'none' }}>
-                    <div className="d-flex justify-content-between align-items-center">
-                      <div>
-                        <strong className="d-block">{emp.name}</strong>
-                        {emp.short && (
-                          <span className="badge mt-1" style={{ 
-                            background: 'rgba(255,255,255,0.25)'
-                          }}>{emp.short}</span>
-                        )}
-                      </div>
-                      <div className="text-end">
-                        <div className="fs-5 fw-bold">{formatTime(emp.time)}</div>
-                        <small style={{ opacity: 0.8 }}>{emp.count} WS</small>
-                      </div>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* Service Type Verteilung */}
-        <div className="col-lg-4 col-md-6">
-          <div className="card h-100 border-0 shadow-sm" style={{
-            background: 'linear-gradient(135deg, #4a5568 0%, #2d3748 100%)',
-            color: 'white'
-          }}>
-            <div className="card-body p-4">
-              <h6 className="card-title mb-3 d-flex align-items-center">
-                <FaClock className="me-2" size={20} style={{ color: '#4ade80' }} />
-                <strong>Service Types</strong>
-              </h6>
-              <div className="mt-3">
-                {Object.entries(byServiceType).map(([type, count], idx) => (
-                  <div key={type} className="d-flex justify-content-between align-items-center mb-3 pb-3" style={{ borderBottom: idx < Object.entries(byServiceType).length - 1 ? '1px solid rgba(255,255,255,0.2)' : 'none' }}>
-                    <span className="badge px-3 py-2" style={{ 
-                      background: 'rgba(255,255,255,0.25)',
-                      fontSize: '0.9rem'
-                    }}>{type}</span>
-                    <strong className="fs-5">{count}</strong>
-                  </div>
-                ))}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Status-Historie */}
-      {statusHistory.length > 0 && (
-        <div className="card border-0 shadow-sm mt-3" style={{
-          background: 'linear-gradient(135deg, #10b981 0%, #059669 100%)'
-        }}>
-          <div className="card-body p-4">
-            <h6 className="card-title text-white mb-3 d-flex align-items-center">
-              <FaHistory className="me-2" size={20} />
-              <strong>Status-Historie</strong>
-            </h6>
-            <div className="table-responsive mt-3">
-              <table className="table table-sm" style={{ borderColor: 'rgba(255,255,255,0.2)' }}>
-                <thead>
-                  <tr style={{ color: 'white', borderColor: 'rgba(255,255,255,0.2)' }}>
-                    <th style={{ borderColor: 'rgba(255,255,255,0.2)' }}>Datum</th>
-                    <th style={{ borderColor: 'rgba(255,255,255,0.2)' }}>Zeit</th>
-                    <th style={{ borderColor: 'rgba(255,255,255,0.2)' }}>Von</th>
-                    <th style={{ borderColor: 'rgba(255,255,255,0.2)' }}></th>
-                    <th style={{ borderColor: 'rgba(255,255,255,0.2)' }}>Nach</th>
-                    <th style={{ borderColor: 'rgba(255,255,255,0.2)' }}>Mitarbeiter</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {statusHistory.reverse().map((change, idx) => (
-                    <tr key={idx} style={{ color: 'white', borderColor: 'rgba(255,255,255,0.2)' }}>
-                      <td style={{ borderColor: 'rgba(255,255,255,0.2)' }}>{change.date}</td>
-                      <td style={{ borderColor: 'rgba(255,255,255,0.2)' }}>{formatTimeShort(change.time)}</td>
-                      <td style={{ borderColor: 'rgba(255,255,255,0.2)' }}>
-                        <span className="badge" style={{ 
-                          background: 'rgba(255,255,255,0.25)'
-                        }}>{change.from}</span>
-                      </td>
-                      <td style={{ borderColor: 'rgba(255,255,255,0.2)' }}>→</td>
-                      <td style={{ borderColor: 'rgba(255,255,255,0.2)' }}>
-                        <span className="badge" style={{ 
-                          background: 'rgba(255,255,255,0.4)',
-                          fontWeight: 'bold'
-                        }}>{change.to}</span>
-                      </td>
-                      <td style={{ borderColor: 'rgba(255,255,255,0.2)' }}>{change.employee}</td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}
-

src/components/WorksheetSummary.jsx

@@ -0,0 +1,24 @@
+import { needsTimeEntry } from '../lib/ticketForm'
+
+const formatTime = (minutes) => {
+  const hours = Math.floor(minutes / 60)
+  const mins = minutes % 60
+  return hours > 0 ? `${hours}h ${mins}min` : `${mins}min`
+}
+
+// Eine Zeile ueber der Arbeitsblatt-Liste: Arbeitszeit, Anzahl, offene Git-Zeiten
+export default function WorksheetSummary({ worksheets }) {
+  if (!worksheets || worksheets.length === 0) return null
+  const minutes = worksheets
+    .filter((ws) => !ws.isComment)
+    .reduce((sum, ws) => sum + (Number(ws.totalTime) || 0), 0)
+  const open = worksheets.filter(needsTimeEntry).length
+
+  return (
+    <div className="worksheet-summary">
+      <span>Arbeitszeit gesamt <strong>{formatTime(minutes)}</strong></span>
+      <span>{worksheets.length} {worksheets.length === 1 ? 'Arbeitsblatt' : 'Arbeitsblätter'}</span>
+      {open > 0 && <span className="open">{open} {open === 1 ? 'Zeit offen' : 'Zeiten offen'}</span>}
+    </div>
+  )
+}

src/components/WorksheetTimesModal.jsx

@@ -0,0 +1,145 @@
+import { useState } from 'react'
+import { FaTimes } from 'react-icons/fa'
+import { isoToGermanDate, timeToWoms, germanDateToIso, womsTimeToInput, minutesBetween, isGitWorksheet, needsTimeEntry } from '../lib/ticketForm'
+import { DateTimeInput } from './ui'
+
+// Gespeichert ist dd.mm.yyyy / hhmm, die Kalender-Felder brauchen yyyy-mm-dd / hh:mm
+const formFromWorksheet = (worksheet) => ({
+  startDate: germanDateToIso(worksheet.startDate || worksheet.endDate),
+  startTime: womsTimeToInput(worksheet.startTime),
+  endDate: germanDateToIso(worksheet.endDate || worksheet.startDate),
+  endTime: womsTimeToInput(worksheet.endTime)
+})
+
+/**
+ * Beginn, Ende und Arbeitszeit eines Arbeitsblatts nachtraeglich aendern.
+ * Wer das darf, entscheidet canEditWorksheetTimes (lib/ticketForm).
+ */
+export default function WorksheetTimesModal({ worksheet, onClose, onSave }) {
+  const isGit = isGitWorksheet(worksheet)
+  const [formData, setFormData] = useState(() => formFromWorksheet(worksheet))
+  // null = die Arbeitszeit folgt Beginn und Ende. Passte sie schon vorher nicht dazu,
+  // wurde sie von Hand eingetragen (z.B. ohne Pause) und bleibt stehen.
+  const [manualTotal, setManualTotal] = useState(() => {
+    const stored = Number(worksheet.totalTime) || 0
+    return !stored || stored === minutesBetween(formData.startTime, formData.endTime) ? null : stored
+  })
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+
+  const calculatedTotal = minutesBetween(formData.startTime, formData.endTime)
+  const totalTime = manualTotal ?? calculatedTotal ?? 0
+
+  const handleChange = (field, value) => {
+    setFormData(prev => ({ ...prev, [field]: value }))
+  }
+
+  // Das Ende darf nicht vor dem Start liegen, deshalb rueckt es mit
+  const handleStartDateChange = (value) => {
+    setFormData(prev => ({
+      ...prev,
+      startDate: value,
+      endDate: value && prev.endDate && prev.endDate < value ? value : prev.endDate
+    }))
+  }
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    setSaving(true)
+    setError('')
+    try {
+      const result = await onSave(worksheet, {
+        startDate: isoToGermanDate(formData.startDate),
+        startTime: timeToWoms(formData.startTime),
+        endDate: isoToGermanDate(formData.endDate),
+        endTime: timeToWoms(formData.endTime),
+        totalTime: parseInt(totalTime, 10) || 0
+      })
+      if (result?.success) {
+        onClose()
+        return
+      }
+      setError(result?.error || 'Speichern fehlgeschlagen')
+    } catch (err) {
+      setError(err.message || 'Speichern fehlgeschlagen')
+    }
+    setSaving(false)
+  }
+
+  return (
+    <div className="overlay">
+      <span className="overlay-close" onClick={onClose}>
+        <FaTimes />
+      </span>
+      <div className="overlay-content" style={{ maxWidth: 560 }}>
+        {/* Kurzer Titel: auf dem Handy laeuft ein langer unter das Schliessen-X */}
+        <h2 className="mb-2">{needsTimeEntry(worksheet) ? 'Zeit nachtragen' : 'Zeiten bearbeiten'}</h2>
+        <p className="text-grey" style={{ fontSize: '14px', marginBottom: '16px' }}>
+          WSID {worksheet.wsid}
+          {isGit && <><br />Das Ende ist der Zeitpunkt des Git-Pushs. Trag ein, wann die Arbeit begonnen hat.</>}
+        </p>
+
+        {error && (
+          <div className="bg-red text-white p-2 mb-2" style={{ borderRadius: '4px' }}>
+            {error}
+          </div>
+        )}
+
+        <form onSubmit={handleSubmit}>
+          <div className="form-group">
+            <label className="form-label" htmlFor="worksheet-times-start">Beginn</label>
+            <DateTimeInput
+              id="worksheet-times-start"
+              timeLabel="Uhrzeit Beginn"
+              required
+              timeRequired={isGit}
+              date={formData.startDate}
+              time={formData.startTime}
+              onDateChange={handleStartDateChange}
+              onTimeChange={(value) => handleChange('startTime', value)}
+            />
+          </div>
+
+          <div className="form-group">
+            <label className="form-label" htmlFor="worksheet-times-end">Ende</label>
+            <DateTimeInput
+              id="worksheet-times-end"
+              timeLabel="Uhrzeit Ende"
+              required
+              min={formData.startDate}
+              date={formData.endDate}
+              time={formData.endTime}
+              onDateChange={(value) => handleChange('endDate', value)}
+              onTimeChange={(value) => handleChange('endTime', value)}
+            />
+          </div>
+
+          <div className="form-group">
+            <label className="form-label" htmlFor="worksheet-times-total">Arbeitszeit (Minuten)</label>
+            <input
+              id="worksheet-times-total"
+              type="number"
+              className="form-control"
+              min="0"
+              step="1"
+              value={totalTime}
+              onChange={(e) => setManualTotal(e.target.value)}
+              placeholder="0"
+            />
+            <small style={{ color: '#a0aec0', fontSize: '12px' }}>
+              {manualTotal === null && calculatedTotal !== null
+                ? '✓ Automatisch berechnet'
+                : 'Manuell eingeben'}
+            </small>
+          </div>
+
+          <div className="text-center mt-2">
+            <button type="submit" className="btn btn-dark" disabled={saving}>
+              {saving ? 'Speichert...' : 'Speichern'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}

src/components/roadmap/NodeDetailPanel.jsx

@@ -0,0 +1,166 @@
+import { useEffect, useState } from 'react'
+import { IconTrash, IconX } from '@tabler/icons-react'
+import { Card, Button, Field } from '../ui'
+import { useEmployees } from '../../hooks/useEmployees'
+import { NODE_KIND, NODE_STATUS, NODE_STATUS_LABELS } from '../../lib/roadmaps'
+
+const STATUS_ORDER = [NODE_STATUS.OPEN, NODE_STATUS.IN_PROGRESS, NODE_STATUS.DONE]
+
+/**
+ * Seitliches Detail-Panel fuer den ausgewaehlten Knoten:
+ * Titel, Status, Zustaendiger, Deadline, Notizen, eingehende Verbindungen.
+ */
+export default function NodeDetailPanel({
+  node,
+  nodes,
+  readOnly,
+  onClose,
+  onSave,
+  onSetStatus,
+  onDelete,
+  onDisconnect,
+}) {
+  const { employees } = useEmployees()
+  const [form, setForm] = useState({ title: '', assignedTo: '', deadline: '', notes: '' })
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+
+  useEffect(() => {
+    setForm({
+      title: node.title || '',
+      assignedTo: node.assignedTo || '',
+      deadline: node.deadline || '',
+      notes: node.notes || '',
+    })
+    setError('')
+  }, [node.$id]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  const isStart = node.kind === NODE_KIND.START
+  const incoming = (node.sourceIds || [])
+    .map((id) => nodes.find((n) => n.$id === id))
+    .filter(Boolean)
+
+  const handleSave = async () => {
+    if (!form.title.trim()) {
+      setError('Titel darf nicht leer sein.')
+      return
+    }
+    setSaving(true)
+    setError('')
+    const employee = employees.find((e) => e.userId === form.assignedTo)
+    const result = await onSave(node, {
+      title: form.title.trim(),
+      assignedTo: form.assignedTo,
+      assignedName: employee?.displayName || '',
+      deadline: form.deadline,
+      notes: form.notes,
+    })
+    setSaving(false)
+    if (!result.success) setError(result.error)
+  }
+
+  return (
+    <Card
+      title={isStart ? 'Start-Knoten' : node.kind === NODE_KIND.GOAL ? 'Ziel-Knoten' : 'Schritt'}
+      actions={<Button variant="ghost" onClick={onClose}><IconX size={16} /></Button>}
+    >
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+        <Field label="Titel">
+          <input
+            type="text"
+            value={form.title}
+            maxLength={128}
+            disabled={readOnly}
+            onChange={(e) => setForm((f) => ({ ...f, title: e.target.value }))}
+          />
+        </Field>
+
+        {!isStart && (
+          <Field label="Status">
+            <div style={{ display: 'flex', gap: 6 }}>
+              {STATUS_ORDER.map((status) => (
+                <Button
+                  key={status}
+                  variant={node.status === status ? 'primary' : 'default'}
+                  disabled={readOnly}
+                  onClick={() => onSetStatus(node, status)}
+                >
+                  {NODE_STATUS_LABELS[status]}
+                </Button>
+              ))}
+            </div>
+          </Field>
+        )}
+
+        {!isStart && (
+          <Field label="Zustaendig">
+            <select
+              value={form.assignedTo}
+              disabled={readOnly}
+              onChange={(e) => setForm((f) => ({ ...f, assignedTo: e.target.value }))}
+            >
+              <option value="">Niemand</option>
+              {employees.map((e) => (
+                <option key={e.userId} value={e.userId}>{e.displayName}</option>
+              ))}
+            </select>
+          </Field>
+        )}
+
+        {!isStart && (
+          <Field label="Deadline">
+            <input
+              type="date"
+              value={form.deadline}
+              disabled={readOnly}
+              onChange={(e) => setForm((f) => ({ ...f, deadline: e.target.value }))}
+            />
+          </Field>
+        )}
+
+        <Field label="Notizen">
+          <textarea
+            rows={4}
+            value={form.notes}
+            maxLength={2000}
+            disabled={readOnly}
+            placeholder="Details, Anforderungen, Links…"
+            onChange={(e) => setForm((f) => ({ ...f, notes: e.target.value }))}
+          />
+        </Field>
+
+        {incoming.length > 0 && (
+          <Field label="Eingehende Verbindungen">
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+              {incoming.map((source) => (
+                <div key={source.$id} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 13 }}>
+                  <span className="muted">{source.title}</span>
+                  {!readOnly && (
+                    <Button variant="ghost" title="Verbindung loesen" onClick={() => onDisconnect(source.$id, node)}>
+                      <IconX size={14} />
+                    </Button>
+                  )}
+                </div>
+              ))}
+            </div>
+          </Field>
+        )}
+
+        {error && <p style={{ color: 'var(--danger, #ef4444)', fontSize: 13 }}>{error}</p>}
+
+        {!readOnly && (
+          <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 8 }}>
+            {!isStart ? (
+              <Button variant="ghost" onClick={() => onDelete(node)} title="Knoten loeschen">
+                <IconTrash size={15} /> Loeschen
+              </Button>
+            ) : <span />}
+            <Button variant="primary" onClick={handleSave} disabled={saving}>
+              {saving ? 'Speichere…' : 'Speichern'}
+            </Button>
+          </div>
+        )}
+      </div>
+    </Card>
+  )
+}

src/components/roadmap/RoadmapBoard.jsx

@@ -0,0 +1,168 @@
+import { useLayoutEffect, useRef, useState, useCallback } from 'react'
+import { IconPlus } from '@tabler/icons-react'
+import RoadmapNodeCard from './RoadmapNodeCard'
+import { NODE_KIND } from '../../lib/roadmaps'
+
+const COLUMN_WIDTH = 230
+const COLUMN_GAP = 48
+
+/**
+ * Steckbrett: Spalten von links (Start) nach rechts (Ziele), Knoten vertikal
+ * gestapelt, Kanten als SVG-Overlay. Verbinden per Klick-Modus:
+ * Connect-Handle am Quellknoten -> gueltige Ziele (Spalte weiter rechts) anklicken.
+ */
+export default function RoadmapBoard({
+  roadmap,
+  nodes,
+  selectedNode,
+  readOnly,
+  onSelectNode,
+  onAddNode,
+  onConnect,
+}) {
+  const containerRef = useRef(null)
+  const nodeRefs = useRef({})
+  const [edges, setEdges] = useState([])
+  const [connectSource, setConnectSource] = useState(null)
+
+  const columnCount = Math.max(roadmap.columnCount || 3, 2)
+  const columns = Array.from({ length: columnCount }, (_, c) =>
+    nodes.filter((n) => n.column === c).sort((a, b) => (a.row || 0) - (b.row || 0))
+  )
+
+  const setNodeRef = useCallback((id) => (el) => {
+    if (el) nodeRefs.current[id] = el
+    else delete nodeRefs.current[id]
+  }, [])
+
+  // Kanten-Geometrie nach jedem Layout neu berechnen (Anker relativ zum Board)
+  useLayoutEffect(() => {
+    const container = containerRef.current
+    if (!container) return
+    const compute = () => {
+      const base = container.getBoundingClientRect()
+      const next = []
+      for (const node of nodes) {
+        for (const sourceId of node.sourceIds || []) {
+          const sourceEl = nodeRefs.current[sourceId]
+          const targetEl = nodeRefs.current[node.$id]
+          if (!sourceEl || !targetEl) continue
+          const s = sourceEl.getBoundingClientRect()
+          const t = targetEl.getBoundingClientRect()
+          next.push({
+            id: `${sourceId}-${node.$id}`,
+            x1: s.right - base.left,
+            y1: s.top + s.height / 2 - base.top,
+            x2: t.left - base.left,
+            y2: t.top + t.height / 2 - base.top,
+          })
+        }
+      }
+      setEdges(next)
+    }
+    compute()
+    const observer = new ResizeObserver(compute)
+    observer.observe(container)
+    return () => observer.disconnect()
+  }, [nodes, columnCount])
+
+  const handleStartConnect = (node) => setConnectSource(node)
+
+  const handleSelect = async (node) => {
+    if (connectSource) {
+      if (node.column > connectSource.column) {
+        await onConnect(connectSource, node)
+      }
+      setConnectSource(null)
+      return
+    }
+    onSelectNode(node)
+  }
+
+  const columnLabel = (c) => {
+    if (c === 0) return 'Start'
+    if (c === columnCount - 1) return 'Ziele'
+    return `Phase ${c}`
+  }
+
+  return (
+    <div style={{ overflowX: 'auto', paddingBottom: 8 }}>
+      {connectSource && (
+        <div
+          className="muted"
+          style={{ fontSize: 13, marginBottom: 8, display: 'flex', alignItems: 'center', gap: 10 }}
+        >
+          Verbinden von <strong>{connectSource.title}</strong>: Zielknoten rechts davon anklicken.
+          <button type="button" className="ui-btn" onClick={() => setConnectSource(null)}>Abbrechen</button>
+        </div>
+      )}
+      <div
+        ref={containerRef}
+        style={{
+          position: 'relative',
+          display: 'grid',
+          gridTemplateColumns: `repeat(${columnCount}, ${COLUMN_WIDTH}px)`,
+          gap: `16px ${COLUMN_GAP}px`,
+          alignItems: 'start',
+          minWidth: columnCount * (COLUMN_WIDTH + COLUMN_GAP),
+          padding: '8px 4px',
+        }}
+      >
+        <svg
+          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: 'none', zIndex: 0 }}
+        >
+          <defs>
+            <marker id="roadmap-arrow" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto">
+              <path d="M0,0 L8,4 L0,8 Z" fill="var(--text-muted, #94a3b8)" />
+            </marker>
+          </defs>
+          {edges.map((e) => {
+            const dx = Math.max((e.x2 - e.x1) / 2, 24)
+            return (
+              <path
+                key={e.id}
+                d={`M ${e.x1} ${e.y1} C ${e.x1 + dx} ${e.y1}, ${e.x2 - dx} ${e.y2}, ${e.x2} ${e.y2}`}
+                fill="none"
+                stroke="var(--text-muted, #94a3b8)"
+                strokeWidth="1.5"
+                markerEnd="url(#roadmap-arrow)"
+                opacity="0.7"
+              />
+            )
+          })}
+        </svg>
+
+        {columns.map((columnNodes, c) => (
+          <div key={c} style={{ display: 'flex', flexDirection: 'column', gap: 14, zIndex: 1 }}>
+            <div className="faint" style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 0.5 }}>
+              {columnLabel(c)}
+            </div>
+            {columnNodes.map((node) => (
+              <RoadmapNodeCard
+                key={node.$id}
+                node={node}
+                selected={selectedNode?.$id === node.$id}
+                readOnly={readOnly}
+                connectSource={connectSource}
+                isValidTarget={Boolean(connectSource) && node.column > connectSource.column}
+                onSelect={handleSelect}
+                onStartConnect={handleStartConnect}
+                nodeRef={setNodeRef(node.$id)}
+              />
+            ))}
+            {!readOnly && c > 0 && (
+              <button
+                type="button"
+                className="ui-btn"
+                style={{ borderStyle: 'dashed', fontSize: 12 }}
+                onClick={() => onAddNode(c, c === columnCount - 1 ? NODE_KIND.GOAL : NODE_KIND.STEP, columnNodes.length)}
+              >
+                <IconPlus size={14} /> {c === columnCount - 1 ? 'Ziel' : 'Schritt'}
+              </button>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

src/components/roadmap/RoadmapNodeCard.jsx

@@ -0,0 +1,101 @@
+import { IconFlag, IconPlayerPlay, IconLink } from '@tabler/icons-react'
+import { NODE_KIND, NODE_STATUS, isNodeOverdue } from '../../lib/roadmaps'
+
+const STATUS_COLORS = {
+  [NODE_STATUS.OPEN]: 'var(--text-muted, #94a3b8)',
+  [NODE_STATUS.IN_PROGRESS]: '#fbbf24',
+  [NODE_STATUS.DONE]: '#34d399',
+}
+
+/**
+ * Knoten-Kachel im Steckbrett.
+ * connectMode: Board wartet auf Zielauswahl; isValidTarget markiert erlaubte Ziele.
+ */
+export default function RoadmapNodeCard({
+  node,
+  selected,
+  readOnly,
+  connectSource,
+  isValidTarget,
+  onSelect,
+  onStartConnect,
+  nodeRef,
+}) {
+  const overdue = isNodeOverdue(node)
+  const isStart = node.kind === NODE_KIND.START
+  const isGoal = node.kind === NODE_KIND.GOAL
+  const connecting = Boolean(connectSource)
+  const isConnectSource = connectSource?.$id === node.$id
+
+  const borderColor = isConnectSource
+    ? 'var(--accent, #3b82f6)'
+    : connecting && isValidTarget
+      ? '#34d399'
+      : selected
+        ? 'var(--accent, #3b82f6)'
+        : overdue
+          ? 'var(--danger, #ef4444)'
+          : 'var(--border)'
+
+  return (
+    <div
+      ref={nodeRef}
+      onClick={() => onSelect(node)}
+      style={{
+        position: 'relative',
+        background: isGoal ? 'rgba(59,130,246,0.10)' : 'var(--surface-2, rgba(45,55,72,0.65))',
+        border: `2px solid ${borderColor}`,
+        borderRadius: 10,
+        padding: '10px 12px',
+        cursor: 'pointer',
+        opacity: connecting && !isValidTarget && !isConnectSource ? 0.45 : 1,
+        transition: 'border-color 0.15s ease, opacity 0.15s ease',
+      }}
+    >
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+        {isStart && <IconPlayerPlay size={15} style={{ flexShrink: 0 }} />}
+        {isGoal && <IconFlag size={15} style={{ flexShrink: 0, color: '#93c5fd' }} />}
+        {!isStart && (
+          <span
+            title={`Status: ${node.status || 'open'}`}
+            style={{
+              width: 10, height: 10, borderRadius: 5, flexShrink: 0,
+              background: STATUS_COLORS[node.status] || STATUS_COLORS.open,
+            }}
+          />
+        )}
+        <span style={{ fontWeight: 600, fontSize: 13, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+          {node.title}
+        </span>
+      </div>
+
+      {(node.assignedName || node.deadline) && (
+        <div style={{ display: 'flex', gap: 8, marginTop: 6, fontSize: 11 }} className="faint">
+          {node.assignedName && <span>{node.assignedName}</span>}
+          {node.deadline && (
+            <span style={overdue ? { color: 'var(--danger, #ef4444)', fontWeight: 700 } : undefined}>
+              bis {node.deadline.split('-').reverse().join('.')}
+            </span>
+          )}
+        </div>
+      )}
+
+      {!readOnly && !isGoal && !connecting && (
+        <button
+          type="button"
+          title="Verbindung von hier starten"
+          onClick={(e) => { e.stopPropagation(); onStartConnect(node) }}
+          style={{
+            position: 'absolute', right: -11, top: '50%', transform: 'translateY(-50%)',
+            width: 22, height: 22, borderRadius: 11,
+            border: '1px solid var(--border)', background: 'var(--surface, #1e293b)',
+            color: 'var(--text-muted)', display: 'flex', alignItems: 'center',
+            justifyContent: 'center', cursor: 'crosshair', padding: 0,
+          }}
+        >
+          <IconLink size={12} />
+        </button>
+      )}
+    </div>
+  )
+}

src/components/roadmap/RoadmapProgressBar.jsx

@@ -0,0 +1,23 @@
+/** Fortschrittsbalken fuer Roadmaps: Prozent + "x von y Knoten fertig". */
+export default function RoadmapProgressBar({ progress, compact = false }) {
+  const { percent, done, total } = progress || { percent: 0, done: 0, total: 0 }
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 4, minWidth: compact ? 120 : 180 }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12 }}>
+        <span className="muted">{percent}%</span>
+        {!compact && <span className="faint">{done} von {total} fertig</span>}
+      </div>
+      <div style={{ height: 6, borderRadius: 3, background: 'var(--border)', overflow: 'hidden' }}>
+        <div
+          style={{
+            width: `${percent}%`,
+            height: '100%',
+            borderRadius: 3,
+            background: percent >= 100 ? 'var(--ok, #22c55e)' : 'var(--accent, #3b82f6)',
+            transition: 'width 0.3s ease',
+          }}
+        />
+      </div>
+    </div>
+  )
+}

src/components/ui/AutocompleteInput.jsx

@@ -0,0 +1,87 @@
+import { useId, useState } from 'react'
+
+/* Textfeld mit Vorschlagsliste. Freie Eingaben bleiben erlaubt;
+   getSuggestions(text) liefert [{ value, hint }]. */
+export default function AutocompleteInput({ value, onChange, getSuggestions, id, placeholder, required }) {
+  const listId = useId()
+  const [open, setOpen] = useState(false)
+  const [active, setActive] = useState(-1)
+
+  const items = open ? getSuggestions(value) : []
+  const showList = items.length > 0
+
+  const choose = (item) => {
+    onChange(item.value)
+    setOpen(false)
+    setActive(-1)
+  }
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      setOpen(true)
+      setActive((i) => Math.min(i + 1, items.length - 1))
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      setActive((i) => Math.max(i - 1, -1))
+    } else if (e.key === 'Enter' && showList && items[active]) {
+      e.preventDefault()
+      choose(items[active])
+    } else if (e.key === 'Escape' && showList) {
+      e.preventDefault()
+      setOpen(false)
+    }
+  }
+
+  return (
+    <div className="autocomplete">
+      <input
+        type="text"
+        id={id}
+        className="form-control"
+        role="combobox"
+        aria-autocomplete="list"
+        aria-expanded={showList}
+        aria-controls={listId}
+        aria-activedescendant={showList && items[active] ? `${listId}-${active}` : undefined}
+        autoComplete="off"
+        placeholder={placeholder}
+        required={required}
+        value={value}
+        onChange={(e) => {
+          onChange(e.target.value)
+          setOpen(true)
+          setActive(-1)
+        }}
+        onFocus={() => setOpen(true)}
+        onBlur={() => {
+          setOpen(false)
+          setActive(-1)
+        }}
+        onKeyDown={handleKeyDown}
+      />
+      {showList && (
+        <ul className="autocomplete-list" id={listId} role="listbox">
+          {items.map((item, index) => (
+            <li
+              key={item.value}
+              id={`${listId}-${index}`}
+              role="option"
+              aria-selected={index === active}
+              className={`autocomplete-item${index === active ? ' active' : ''}`}
+              // mousedown statt click: sonst verliert das Feld vorher den Fokus und die Liste schliesst
+              onMouseDown={(e) => {
+                e.preventDefault()
+                choose(item)
+              }}
+              onMouseEnter={() => setActive(index)}
+            >
+              <span className="autocomplete-value">{item.value}</span>
+              {item.hint && <span className="autocomplete-hint">{item.hint}</span>}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}

src/components/ui/Badge.jsx

@@ -0,0 +1,8 @@
+export default function Badge({ tone = 'muted', dot = false, children, className = '', style }) {
+  return (
+    <span className={`badge badge-${tone} ${className}`} style={style}>
+      {dot && <span className="dot" />}
+      {children}
+    </span>
+  )
+}

src/components/ui/Button.jsx

@@ -0,0 +1,23 @@
+const VARIANTS = {
+  default: 'ui-btn',
+  primary: 'ui-btn ui-btn-primary',
+  ghost: 'ui-btn ui-btn-ghost',
+  danger: 'ui-btn ui-btn-danger',
+}
+
+export default function Button({
+  variant = 'default',
+  size,
+  as = 'button',
+  className = '',
+  children,
+  ...props
+}) {
+  const cls = `${VARIANTS[variant] || VARIANTS.default}${size === 'sm' ? ' ui-btn-sm' : ''} ${className}`
+  const Comp = as
+  return (
+    <Comp className={cls} {...props}>
+      {children}
+    </Comp>
+  )
+}

src/components/ui/Card.jsx

@@ -0,0 +1,18 @@
+export default function Card({ title, actions, children, pad = true, className = '', bodyStyle, style }) {
+  if (!title && !actions) {
+    return (
+      <div className={`ui-card ${pad ? 'pad' : ''} ${className}`} style={style}>
+        {children}
+      </div>
+    )
+  }
+  return (
+    <div className={`ui-card ${className}`} style={style}>
+      <div className="ui-card-head">
+        <h3>{title}</h3>
+        {actions && <div className="flex gap-2 items-center">{actions}</div>}
+      </div>
+      <div className="ui-card-body" style={bodyStyle}>{children}</div>
+    </div>
+  )
+}