JUSN/tickte-system
0
0 Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Compare commits

base: JUSN/tickte-system:0c884a57d72c852d9b17ffddd8773fea81cf98e0
JUSN/tickte-system:test JUSN/tickte-system:better-design JUSN/tickte-system:appwrite-verbindung JUSN/tickte-system:main
...
compare: JUSN/tickte-system:7b33e3900dd340fcad0e4198e9baac235efd598c
JUSN/tickte-system:test JUSN/tickte-system:better-design JUSN/tickte-system:appwrite-verbindung JUSN/tickte-system:main
9 Commits
0c884a57d7 ... 7b33e3900d
Author SHA1 Message Date
ClaudeandClaude Opus 5.5 7b33e3900d Ungenutzte Pakete entfernt 
three, postprocessing, motion, clsx, tailwind-merge sowie @types/react
und @types/react-dom brauchte nur der gelöschte tote Code (bzw. es gibt
kein TypeScript). Das spart bei jedem Deploy die Installation von
three.js & Co. Lockfile mit Node 20 (wie der Deploy-Container) erzeugt.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
 2026-09-27 14:42:45 +00:00
ClaudeandClaude Opus 5.5 7852593a7a Veraltete Anleitungen entfernt, README neu 
20 Einrichtungs- und Fix-Notizen vom Dezember 2025 beschrieben das alte
Appwrite (cloud.appwrite.io bzw. alte Projekt-IDs), zufällige WOIDs und
Felder, die es so nicht mehr gibt. Das README beschreibt jetzt den echten
Stand: Deploy über Branch test (Achtung: jeder gepushte Branch geht live),
Datenmodell in Kurzform und das Zusammenspiel mit Kundenportal und
ticket-integrations. LOCAL_DEV.md bleibt.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
 2026-09-27 14:41:57 +00:00
ClaudeandClaude Opus 5.5 df62bcbc55 Schrift Lato vom eigenen Server statt von Google Fonts 
Bisher lud jeder Seitenaufruf Lato und das ungenutzte Open Sans von
fonts.googleapis.com; dabei gingen die IP-Adressen der Mitarbeiter an
Google. Jetzt liegt Lato Regular 1.105 (SIL Open Font License, Lizenz
daneben) im Repo. Gemessen gegen Google: gleiche Textbreite und
Zeilenhöhe; wie bisher nur der Schnitt 400.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
 2026-09-27 14:40:43 +00:00
ClaudeandClaude Opus 5.5 b758b1f9a7 Demo-Modus entfernt 
isDemoMode war nie aktiv: appwrite.js hat immer eine Projekt-ID als
Fallback. Weg sind die Demo-Zweige in Anmeldung und Hooks sowie die
Beispieldaten aus der alten IT-Welt (Serverausfall, Drucker, Kunde A–E).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
 2026-09-27 14:36:33 +00:00
ClaudeandClaude Opus 5.5 889a2f42eb Vergessenen Debug-Aufruf an 127.0.0.1 entfernt 
AuthContext schickte bei jedem Seitenaufruf einen Debug-Eintrag an
http://127.0.0.1:7284 (Überbleibsel einer Fehlersuche). Live landete er
im Nichts; neuere Browser können für solche Aufrufe ins lokale Netzwerk
eine Rückfrage anzeigen.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
 2026-09-27 14:34:16 +00:00
ClaudeandClaude Opus 5.5 d684aea576 Toten Code entfernt 
Nie importierte Dateien (rund 1.900 Zeilen): die alte Ticketzeile
TicketRow mit ihren Hilfsdialogen EditWorksheetTimeModal und
ResponseDropdown, TicketFilters, WebpageProjectPanel, ModernSidebar
(+ lib/utils), die three.js-Animation PixelBlast und createDummyTicket.
Dazu die Helfer, die nur diese Dateien benutzt haben
(isTemplateProject/getAvailableProjects, WEBPAGE_TICKET_TYPE,
PREVIEW_TEMPLATE_NAME), die nicht existierenden Collections users und
attachments, getWorksheetsByEmployee und der nur von TicketRow benutzte
zweite "Zeit nachtragen"-Weg in der Arbeitsblatt-Liste.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
 2026-09-27 14:33:37 +00:00
ClaudeandClaude Opus 5.5 8d2a99e5d6 Schnellübersicht und Status-Verlauf entfernt 
- "Schnelluebersicht" war eine englische Alt-Tabelle ("WOMS Ticket Quick
  Overview ... EOL =)"), die nur die Ticketliste wiederholte.
- Der "Verlauf"-Knopf zeigte nur Statuswechsel aus Arbeitsblättern (bisher
  zwei); jeder Wechsel steht weiterhin im jeweiligen Arbeitsblatt.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
 2026-09-27 14:32:43 +00:00
ClaudeandClaude Opus 5.5 cbf77004ad Platzhalter-Seiten Assets, Reports und Docs entfernt 
Die drei Seiten hatten keine Funktion (feste Nullen, ein alert(),
drei Beispielsätze). Alte Links und unbekannte Adressen führen jetzt
zu den Tickets statt auf eine leere Seite; Menügruppen ohne Eintrag
werden nicht mehr angezeigt.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
 2026-09-27 14:32:17 +00:00
ClaudeandClaude Opus 5.5 2d4e569cc3 Arbeitsblätter: Git-Push nach dem Nachtragen grün, Kommentare blau 
- Git-Pushes bleiben orange mit "Zeit offen", bis Beginn und Minuten
  nachgetragen sind; danach grün mit "Zeit eingetragen".
- Kommentare sind blau statt grün, damit Grün nur noch "erledigt" heißt.
- Hinweise im farbigen Kopf in weißer Schrift (vorher kaum lesbar).
- Pro Ticket werden alle Arbeitsblätter geladen (Appwrite lieferte ohne
  limit nur 25), zugeklappte Ticketkarten laden gar keine mehr.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
 2026-09-27 14:29:36 +00:00
60 changed files with 221 additions and 5849 deletions
Expand all files Collapse all files

No files matched your search

ADMIN_PANEL_SETUP.md
-116
View File
@@ -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
-74
View File
@@ -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
-102
View File
@@ -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
-81
View File
@@ -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
-86
View File
@@ -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
-200
View File
@@ -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
-63
View File
@@ -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
-75
View File
@@ -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
-134
View File
@@ -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
-215
View File
@@ -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
IMPLEMENTATION_SUMMARY.md
-207
View File
@@ -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
LOGIN_TROUBLESHOOTING.md
-117
View File
@@ -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
-76
View File
@@ -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
-142
View File
@@ -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
+32 -41
View File
@@ -1,49 +1,40 @@
# 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.
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` | Einstellungen | Prioritäten (dazu alte Listen, die nichts mehr liest) |
### 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)
und Paperless (Dokumente).
WOID_ATTRIBUTE_SETUP.md
-141
View File
@@ -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
-107
View File
@@ -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
-210
View File
@@ -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
-119
View File
@@ -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
-325
View File
@@ -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
-195
View File
@@ -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
-1
View File
@@ -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>
package-lock.json
Generated
+6 -127
View File
@@ -10,21 +10,14 @@
"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-markdown": "^10.1.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"
}
@@ -1130,26 +1123,19 @@
"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=="
"integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
"peer": 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==",
"peer": 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/@types/unist": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
@@ -1330,15 +1316,6 @@
"url": "https://github.com/sponsors/wooorm"
}
},
"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",
@@ -1377,7 +1354,8 @@
"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=="
"integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
"peer": true
},
"node_modules/date-fns": {
"version": "2.30.0",
@@ -1592,33 +1570,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",
@@ -2533,47 +2484,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",
@@ -2681,15 +2591,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/property-information": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/property-information/-/property-information-7.2.0.tgz",
@@ -2958,22 +2859,6 @@
"inline-style-parser": "0.2.7"
}
},
"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",
@@ -2999,12 +2884,6 @@
"url": "https://github.com/sponsors/wooorm"
}
},
"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/unified": {
"version": "11.0.5",
"resolved": "https://registry.npmjs.org/unified/-/unified-11.0.5.tgz",
package.json
+1 -8
View File
@@ -5,21 +5,14 @@
"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-markdown": "^10.1.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
+2 -6
View File
@@ -5,13 +5,10 @@ import Footer from './components/Footer'
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 RoadmapsPage from './pages/RoadmapsPage'
import RoadmapDetailPage from './pages/RoadmapDetailPage'
import ReportsPage from './pages/ReportsPage'
import DocsPage from './pages/DocsPage'
import AdminPage from './pages/AdminPage'
import CustomersPage from './pages/CustomersPage'
import LeadsPage from './pages/LeadsPage'
@@ -52,14 +49,13 @@ function AppRoutes() {
<Route path="/finance" element={<ProtectedRoute><FinancePage /></ProtectedRoute>} />
<Route path="/documents" element={<ProtectedRoute><DocumentsPage /></ProtectedRoute>} />
<Route path="/dashboard" element={<ProtectedRoute><DashboardPage /></ProtectedRoute>} />
<Route path="/assets" element={<ProtectedRoute><AssetsPage /></ProtectedRoute>} />
<Route path="/planboard" element={<ProtectedRoute><PlanboardPage /></ProtectedRoute>} />
<Route path="/projects" element={<ProtectedRoute><ProjectsPage /></ProtectedRoute>} />
<Route path="/roadmaps" element={<ProtectedRoute><RoadmapsPage /></ProtectedRoute>} />
<Route path="/roadmaps/:id" element={<ProtectedRoute><RoadmapDetailPage /></ProtectedRoute>} />
<Route path="/reports" element={<ProtectedRoute><ReportsPage /></ProtectedRoute>} />
<Route path="/docs" element={<ProtectedRoute><DocsPage /></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>
)
}
src/assets/fonts/OFL-Lato.txt
+94
View File
@@ -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/assets/fonts/lato-regular.ttf
BIN
View File
Binary file not shown.
src/components/CreateTicketModal.jsx
+2 -2
View File
@@ -2,7 +2,7 @@ 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, isDemoMode } from '../lib/appwrite'
import { databases, DATABASE_ID, COLLECTIONS, Query } from '../lib/appwrite'
import {
SERVICE_TYPES,
todayIso,
@@ -63,7 +63,7 @@ export default function CreateTicketModal({ isOpen, onClose, onCreate, customers
// Namen aus den letzten Tickets fuer die Autovervollstaendigung
useEffect(() => {
if (!isOpen || isDemoMode) return
if (!isOpen) return
let cancelled = false
databases
.listDocuments(DATABASE_ID, COLLECTIONS.WORKORDERS, [Query.orderDesc('$createdAt'), Query.limit(200)])
src/components/EditWorksheetTimeModal.jsx
-142
View File
@@ -1,142 +0,0 @@
import { useEffect, useMemo, useState } from 'react'
import { FaClock } from 'react-icons/fa'
/** Minuten zwischen hhmm-Zeiten, Übernacht (+24h) wie useWorksheets.calculateTime. */
function calculateMinutes(startTime, endTime) {
if (!startTime || !endTime) return null
const sh = parseInt(startTime.substring(0, 2), 10)
const sm = parseInt(startTime.substring(2, 4), 10)
const eh = parseInt(endTime.substring(0, 2), 10)
const em = parseInt(endTime.substring(2, 4), 10)
if ([sh, sm, eh, em].some(Number.isNaN)) return null
let diff = eh * 60 + em - (sh * 60 + sm)
if (diff < 0) diff += 24 * 60
return diff
}
function formatMinutes(minutes) {
if (minutes === null || minutes === undefined) return '–'
const h = Math.floor(minutes / 60)
const m = minutes % 60
return h > 0 ? `${h}h ${m}min` : `${m}min`
}
/**
* Startzeit fuer Git-Push-Worksheets nachtragen: Die Endzeit wurde beim Push
* automatisch gesetzt, hier wird der Arbeitsbeginn erfasst. Beim Speichern
* wird totalTime berechnet und isComment auf false gesetzt, damit der Eintrag
* in der Arbeitszeit-Statistik zaehlt.
*/
export default function EditWorksheetTimeModal({ isOpen, onClose, worksheet, onSave }) {
const [startDate, setStartDate] = useState('')
const [startTime, setStartTime] = useState('')
const [saving, setSaving] = useState(false)
const [error, setError] = useState('')
useEffect(() => {
if (isOpen && worksheet) {
setStartDate(worksheet.startDate || worksheet.endDate || '')
setStartTime(worksheet.startTime || '')
setError('')
}
}, [isOpen, worksheet])
const totalTime = useMemo(
() => calculateMinutes(startTime, worksheet?.endTime),
[startTime, worksheet]
)
if (!isOpen || !worksheet) return null
const handleSubmit = async (e) => {
e.preventDefault()
if (!/^\d{2}\.\d{2}\.\d{4}$/.test(startDate)) {
setError('Startdatum bitte als TT.MM.JJJJ angeben.')
return
}
if (!/^\d{4}$/.test(startTime)) {
setError('Startzeit bitte als HHMM angeben (z.B. 0930).')
return
}
if (totalTime === null) {
setError('Zeit konnte nicht berechnet werden.')
return
}
setSaving(true)
setError('')
const result = await onSave(worksheet, {
startDate,
startTime,
totalTime,
isComment: false,
})
setSaving(false)
if (result?.success) {
onClose()
} else {
setError(result?.error || 'Speichern fehlgeschlagen')
}
}
return (
<div className="overlay">
<span className="overlay-close" onClick={onClose}>
×
</span>
<div className="overlay-content">
<h2 className="mb-2">
<FaClock style={{ marginRight: 8 }} />
Zeit nachtragen – WSID {worksheet.wsid}
</h2>
<p className="text-grey" style={{ fontSize: '14px' }}>
Die Endzeit wurde beim Git-Push automatisch gesetzt
({worksheet.endDate} {worksheet.endTime ? `${worksheet.endTime.substring(0, 2)}:${worksheet.endTime.substring(2, 4)}` : ''}).
Trage hier 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">Startdatum (TT.MM.JJJJ)</label>
<input
type="text"
className="form-control"
value={startDate}
onChange={(e) => setStartDate(e.target.value)}
placeholder="11.07.2026"
required
/>
</div>
<div className="form-group">
<label className="form-label">Startzeit (HHMM)</label>
<input
type="text"
className="form-control"
value={startTime}
onChange={(e) => setStartTime(e.target.value.replace(/[^0-9]/g, '').slice(0, 4))}
placeholder="0930"
maxLength={4}
required
/>
</div>
<div className="form-group">
<label className="form-label">Berechnete Arbeitszeit</label>
<div style={{ fontSize: '18px', fontWeight: 600, color: '#10b981' }}>
{formatMinutes(totalTime)}
</div>
</div>
<div className="text-center mt-2">
<button type="submit" className="btn btn-green" disabled={saving}>
{saving ? 'Speichert...' : 'Zeit speichern'}
</button>
</div>
</form>
</div>
</div>
)
}
src/components/ModernSidebar.css
-138
View File
@@ -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
-116
View File
@@ -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
+2 -7
View File
@@ -11,10 +11,7 @@ import {
IconCalendar,
IconRoute,
IconLayoutDashboard,
IconReport,
IconDeviceDesktop,
IconSettings,
IconBook,
IconLogout,
IconLayoutSidebarLeftCollapse,
IconLayoutSidebarLeftExpand,
@@ -60,15 +57,12 @@ export default function Sidebar() {
label: 'Auswertung',
links: [
{ label: 'Dashboard', href: '/dashboard', icon: <IconLayoutDashboard /> },
{ label: 'Reports', href: '/reports', icon: <IconReport /> },
],
},
{
label: 'System',
links: [
{ label: 'Assets', href: '/assets', icon: <IconDeviceDesktop /> },
...(isAdmin ? [{ label: 'Admin', href: '/admin', icon: <IconSettings /> }] : []),
{ label: 'Docs', href: '/docs', icon: <IconBook /> },
],
},
]
@@ -87,7 +81,8 @@ export default function Sidebar() {
</div>
<nav className="side-nav">
{groups.map((group) => (
{/* Gruppen ohne Eintrag (System fuer Nicht-Admins) nicht anzeigen */}
{groups.filter((group) => group.links.length > 0).map((group) => (
<div className="side-group" key={group.label}>
<div className="side-group-label">{group.label}</div>
{group.links.map((link) => (
src/components/PixelBlast.css
-7
View File
@@ -1,7 +0,0 @@
.pixel-blast-container {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
src/components/PixelBlast.jsx
-674
View File
@@ -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/QuickOverviewModal.jsx
-87
View File
@@ -1,87 +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>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="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
-32
View File
@@ -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/StatusHistoryModal.jsx
-143
View File
@@ -1,143 +0,0 @@
import { FaTimes } from 'react-icons/fa'
import { format } from 'date-fns'
export default function StatusHistoryModal({ isOpen, onClose, worksheets, ticket }) {
if (!isOpen) return null
// Extrahiere Status-Änderungen aus Worksheets
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 || ws.employeeShort || 'Unknown',
details: ws.details,
wsid: ws.wsid
}))
.sort((a, b) => {
// Sortiere nach Datum und Zeit (älteste zuerst)
const dateA = `${a.date} ${a.time || '0000'}`
const dateB = `${b.date} ${b.time || '0000'}`
return dateA.localeCompare(dateB)
})
// Füge aktuellen Status hinzu
const currentStatus = ticket?.status || 'Open'
return (
<div className="overlay">
<span className="overlay-close" onClick={onClose}>
<FaTimes />
</span>
<div className="overlay-content">
<h2 className="mb-2">Status History - WOID {ticket?.woid || ticket?.$id}</h2>
<div style={{ marginBottom: '24px' }}>
<div style={{
background: 'rgba(45, 55, 72, 0.95)',
borderRadius: '8px',
padding: '16px',
border: '1px solid rgba(16, 185, 129, 0.2)',
marginBottom: '16px'
}}>
<strong style={{ color: 'var(--green-primary)' }}>Current Status:</strong>
<span style={{
marginLeft: '12px',
padding: '4px 12px',
borderRadius: '4px',
background: 'rgba(16, 185, 129, 0.2)',
color: 'var(--dark-text)',
fontWeight: 'bold'
}}>
{currentStatus}
</span>
</div>
</div>
{statusHistory.length === 0 ? (
<div style={{
background: 'rgba(45, 55, 72, 0.95)',
borderRadius: '8px',
padding: '24px',
textAlign: 'center',
color: '#a0aec0'
}}>
No status changes recorded yet.
</div>
) : (
<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
{statusHistory.map((entry, index) => (
<div
key={index}
style={{
background: 'rgba(45, 55, 72, 0.95)',
borderRadius: '8px',
padding: '16px',
border: '1px solid rgba(16, 185, 129, 0.2)',
borderLeft: '4px solid var(--green-primary)'
}}
>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start', marginBottom: '8px' }}>
<div>
<div style={{ fontSize: '14px', color: '#a0aec0', marginBottom: '4px' }}>
{entry.date} {entry.time ? `${entry.time.substring(0, 2)}:${entry.time.substring(2, 4)}` : ''}
</div>
<div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
<span style={{
padding: '4px 8px',
borderRadius: '4px',
background: 'rgba(74, 85, 104, 0.5)',
color: 'var(--dark-text)',
fontSize: '12px'
}}>
{entry.from}
</span>
<span style={{ color: 'var(--green-primary)' }}>→</span>
<span style={{
padding: '4px 8px',
borderRadius: '4px',
background: 'rgba(16, 185, 129, 0.3)',
color: 'var(--dark-text)',
fontSize: '12px',
fontWeight: 'bold'
}}>
{entry.to}
</span>
</div>
</div>
<div style={{ textAlign: 'right' }}>
<div style={{ fontSize: '12px', color: '#a0aec0' }}>by</div>
<div style={{ fontWeight: 'bold', color: 'var(--dark-text)' }}>{entry.employee}</div>
{entry.wsid && (
<div style={{ fontSize: '11px', color: '#718096', marginTop: '4px' }}>
WSID: {entry.wsid}
</div>
)}
</div>
</div>
{entry.details && (
<div style={{
marginTop: '12px',
padding: '12px',
background: 'rgba(31, 41, 55, 0.6)',
borderRadius: '6px',
fontSize: '13px',
color: '#cbd5e0',
borderLeft: '3px solid rgba(16, 185, 129, 0.4)'
}}>
{entry.details}
</div>
)}
</div>
))}
</div>
)}
</div>
</div>
)
}
src/components/TicketCard.jsx
+1 -5
View File
@@ -1,12 +1,11 @@
import { useState } from 'react'
import { FaChevronDown, FaPlay, FaStop, FaPlus, FaClockRotateLeft, FaPen } from 'react-icons/fa6'
import { FaChevronDown, FaPlay, FaStop, FaPlus, FaPen } 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 CreateWorksheetModal from './CreateWorksheetModal'
import StatusHistoryModal from './StatusHistoryModal'
import WorksheetList from './WorksheetList'
import WorksheetTimesModal from './WorksheetTimesModal'
import WorksheetStats from './WorksheetStats'
@@ -38,7 +37,6 @@ export default function TicketCard({ ticket, onUpdate }) {
const [activeTab, setActiveTab] = useState('details')
const [showCreateWorksheet, setShowCreateWorksheet] = useState(false)
const [editTimesWorksheet, setEditTimesWorksheet] = useState(null)
const [showHistoryModal, setShowHistoryModal] = useState(false)
const [showProjectsModal, setShowProjectsModal] = useState(false)
const [projectsRefreshKey, setProjectsRefreshKey] = useState(0)
@@ -137,7 +135,6 @@ export default function TicketCard({ ticket, onUpdate }) {
<FaPlus /> Arbeitsblatt hinzufuegen
</button>
<button className="ui-btn" onClick={() => setShowProjectsModal(true)} title="Projekte"><FaPen /></button>
<button className="ui-btn" onClick={() => setShowHistoryModal(true)} title="Verlauf"><FaClockRotateLeft /></button>
</div>
{worksheets.length > 0 && (
<div className="ui-card pad" style={{ marginBottom: 16 }}>
@@ -177,7 +174,6 @@ export default function TicketCard({ ticket, onUpdate }) {
onSave={(ws, times) => updateWorksheetTimes(ws, times, user, employee)}
/>
)}
<StatusHistoryModal isOpen={showHistoryModal} onClose={() => setShowHistoryModal(false)} worksheets={worksheets} ticket={ticket} />
<TicketProjectsModal isOpen={showProjectsModal} onClose={() => setShowProjectsModal(false)} ticket={ticket} onUpdated={() => setProjectsRefreshKey((k) => k + 1)} />
</div>
)
src/components/TicketFilters.jsx
-177
View File
@@ -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/TicketRow.jsx
-308
View File
@@ -1,308 +0,0 @@
import { useState } from 'react'
import { FaLock, FaLockOpen, FaPlay, FaStop, FaTruck, FaSackDollar, FaUserGear, FaPlus, FaClockRotateLeft, FaPen } 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 EditWorksheetTimeModal from './EditWorksheetTimeModal'
import StatusHistoryModal from './StatusHistoryModal'
import WorksheetList from './WorksheetList'
import WorksheetStats from './WorksheetStats'
import TicketAssignedProjectsPanel from './TicketAssignedProjectsPanel'
import TicketProjectsModal from './TicketProjectsModal'
import InvoicePanel from './InvoicePanel'
import DocumentsPanel from './DocumentsPanel'
import { useWorksheets } from '../hooks/useWorksheets'
const PRIORITY_CLASSES = {
0: 'priority-none',
1: 'priority-low',
2: 'priority-medium',
3: 'priority-high',
4: 'priority-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
}
const TABS = [
{ id: 'details', label: 'Details' },
{ id: 'worksheets', label: 'Arbeitsblaetter' },
{ id: 'invoices', label: 'Rechnungen' },
{ id: 'documents', label: 'Dokumente' },
{ id: 'project', label: 'Projekt / Preview' },
]
export default function TicketRow({ ticket, onUpdate, onExpand }) {
const [expanded, setExpanded] = useState(false)
const [locked, setLocked] = useState(true)
const [activeTab, setActiveTab] = useState('details')
const [showCreateWorksheet, setShowCreateWorksheet] = useState(false)
const [editTimeWorksheet, setEditTimeWorksheet] = useState(null)
const [showHistoryModal, setShowHistoryModal] = useState(false)
const [showProjectsModal, setShowProjectsModal] = useState(false)
const [projectsRefreshKey, setProjectsRefreshKey] = useState(0)
const {
worksheets,
loading: worksheetsLoading,
createWorksheet,
updateWorksheet,
getTotalTime
} = useWorksheets(expanded ? ticket.woid : null)
// Startzeit fuer Git-Push-Worksheets nachtragen (Endzeit kam vom Push)
const handleSaveWorksheetTime = async (ws, data) => updateWorksheet(ws.$id, data)
// Wartungs-Abo: Arbeitszeit aufs Stundenkonto des Kunden buchen (Kundenportal zeigt den Stand)
const handleTogglePlan = async (ws) => updateWorksheet(ws.$id, { countsToPlan: !ws.countsToPlan })
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)
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 ${expanded ? 'ticket-expanded' : 'ticket-collapsed'}`}>
<td className={`ticket-id ${expanded ? 'ticket-id-expanded' : ''}`} 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 className="worksheet-expansion">
<td colSpan={10} className="worksheet-cell">
<div className="card" style={{
borderRadius: '0 0 12px 12px',
marginTop: 0,
border: '1px solid rgba(16, 185, 129, 0.2)',
borderTop: 'none'
}}>
<div className="card-body" style={{ borderRadius: '0 0 12px 12px', padding: '20px' }}>
{/* Tab-Leiste */}
<div className="ticket-tabs">
{TABS.map((t) => (
<button
key={t.id}
type="button"
className={`ticket-tab ${activeTab === t.id ? 'ticket-tab-active' : ''}`}
onClick={() => setActiveTab(t.id)}
>
{t.label}
</button>
))}
</div>
<div className="ticket-tab-content">
{activeTab === 'details' && (
<div style={{
background: 'rgba(45, 55, 72, 0.5)',
borderRadius: '12px',
padding: '20px',
border: '1px solid rgba(16, 185, 129, 0.2)',
}}>
<h5 style={{ color: 'var(--dark-text)', fontWeight: 'bold', marginBottom: '16px', fontSize: '18px' }}>
Ticket-Beschreibung
</h5>
<p style={{ fontSize: '14px', lineHeight: '1.8', color: 'rgba(226, 232, 240, 0.85)', whiteSpace: 'pre-wrap', margin: 0 }}>
{ticket.details || 'Keine Details vorhanden.'}
</p>
</div>
)}
{activeTab === 'worksheets' && (
<div>
<div style={{ display: 'flex', gap: '8px', alignItems: 'stretch', marginBottom: '16px' }}>
<button
className="btn"
style={{
background: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
color: 'white', border: 'none', padding: '12px 20px', borderRadius: '8px',
fontWeight: 'bold', cursor: 'pointer', flex: 1
}}
onClick={() => setShowCreateWorksheet(true)}
>
<FaPlus style={{ marginRight: '8px' }} /> Add Worksheet
</button>
<button
type="button"
style={{ background: '#3b82f6', color: 'white', border: 'none', padding: '12px', borderRadius: '8px', cursor: 'pointer', minWidth: '44px' }}
onClick={() => setShowProjectsModal(true)}
title="Projekte bearbeiten"
>
<FaPen size={18} />
</button>
<button
type="button"
style={{ background: '#616161', color: 'white', border: 'none', padding: '12px', borderRadius: '8px', cursor: 'pointer', minWidth: '44px' }}
onClick={() => setShowHistoryModal(true)}
title="Status History"
>
<FaClockRotateLeft size={18} />
</button>
</div>
{worksheets.length > 0 && (
<div style={{ background: 'rgba(45, 55, 72, 0.5)', borderRadius: '12px', padding: '16px', border: '1px solid rgba(16, 185, 129, 0.2)', marginBottom: '16px' }}>
<WorksheetStats worksheets={worksheets} />
</div>
)}
<WorksheetList worksheets={worksheets} totalTime={getTotalTime()} loading={worksheetsLoading} onEditTime={setEditTimeWorksheet} onTogglePlan={handleTogglePlan} />
</div>
)}
{activeTab === 'invoices' && <InvoicePanel ticket={ticket} />}
{activeTab === 'documents' && <DocumentsPanel ticket={ticket} />}
{activeTab === 'project' && (
<div>
<button
type="button"
className="btn btn-green"
style={{ marginBottom: '12px' }}
onClick={() => setShowProjectsModal(true)}
>
<FaPen style={{ marginRight: 6 }} /> Projekte zuweisen / bearbeiten
</button>
<TicketAssignedProjectsPanel ticket={ticket} refreshKey={projectsRefreshKey} />
</div>
)}
</div>
</div>
</div>
</td>
</tr>
)}
<CreateWorksheetModal
isOpen={showCreateWorksheet}
onClose={() => setShowCreateWorksheet(false)}
workorder={ticket}
onCreate={handleCreateWorksheet}
/>
<EditWorksheetTimeModal
isOpen={Boolean(editTimeWorksheet)}
onClose={() => setEditTimeWorksheet(null)}
worksheet={editTimeWorksheet}
onSave={handleSaveWorksheetTime}
/>
<StatusHistoryModal
isOpen={showHistoryModal}
onClose={() => setShowHistoryModal(false)}
worksheets={worksheets}
ticket={ticket}
/>
<TicketProjectsModal
isOpen={showProjectsModal}
onClose={() => setShowProjectsModal(false)}
ticket={ticket}
onUpdated={() => setProjectsRefreshKey((k) => k + 1)}
/>
<tr className="spacer">
<td colSpan={10} style={{ height: '12px', background: 'transparent', border: 'none' }}></td>
</tr>
</>
)
}
src/components/WebpageProjectPanel.jsx
-109
View File
@@ -1,109 +0,0 @@
import { useState, useEffect, useCallback } from 'react'
import { FaPlus, FaTrash } from 'react-icons/fa'
import PreviewLinkButton from './PreviewLinkButton'
import { useWebsiteProjects } from '../hooks/useWebsiteProjects'
import { createProjectFromTemplate } from '../lib/projectAdminApi'
import { WEBPAGE_TICKET_TYPE } from '../lib/appwrite'
function slugify(v) {
return String(v || '').toLowerCase().replace(/[^a-z0-9-]+/g, '-').replace(/^-+|-+$/g, '').slice(0, 100)
}
export default function WebpageProjectPanel({ ticket }) {
const { fetchAllProjects, fetchByTicketId, getAvailableProjects, assignProjects, unassignProject } = useWebsiteProjects()
const [assigned, setAssigned] = useState([])
const [available, setAvailable] = useState([])
const [selectedIds, setSelectedIds] = useState([])
const [loading, setLoading] = useState(true)
const [actionLoading, setActionLoading] = useState(false)
const [error, setError] = useState('')
const [createForm, setCreateForm] = useState({ displayName: '', subdomain: '', repoName: '' })
const loadProjects = useCallback(async () => {
if (!ticket?.$id || ticket.type !== WEBPAGE_TICKET_TYPE) return
setLoading(true)
setError('')
try {
const [all, mine] = await Promise.all([fetchAllProjects(), fetchByTicketId(ticket.$id)])
setAssigned(mine)
const ids = new Set(mine.map((p) => p.$id))
setAvailable(getAvailableProjects(all, ticket.customerId).filter((p) => !ids.has(p.$id)))
} catch (err) {
setError(err.message)
} finally {
setLoading(false)
}
}, [ticket, fetchAllProjects, fetchByTicketId, getAvailableProjects])
useEffect(() => { loadProjects() }, [loadProjects])
if (ticket?.type !== WEBPAGE_TICKET_TYPE) return null
const handleAssign = async () => {
if (!selectedIds.length || !ticket.customerId) return
setActionLoading(true)
const r = await assignProjects(selectedIds, { customerId: ticket.customerId, ticketId: ticket.$id })
setActionLoading(false)
if (r.success) { setSelectedIds([]); await loadProjects() } else setError(r.error)
}
const handleCreate = async (e) => {
e.preventDefault()
if (!ticket.customerId) { setError('Kein Kunde am Ticket.'); return }
setActionLoading(true)
setError('')
try {
await createProjectFromTemplate({
repoName: createForm.repoName || createForm.subdomain,
displayName: createForm.displayName,
subdomain: slugify(createForm.subdomain),
customerId: ticket.customerId,
ticketId: ticket.$id,
})
setCreateForm({ displayName: '', subdomain: '', repoName: '' })
await loadProjects()
} catch (err) {
setError(err.message)
} finally {
setActionLoading(false)
}
}
return (
<div style={{ background: 'rgba(45,55,72,0.5)', borderRadius: 12, padding: 20, border: '1px solid rgba(59,130,246,0.3)', marginTop: 20 }}>
<h5 style={{ fontWeight: 'bold', marginBottom: 12 }}>Website-Projekte</h5>
{error && <div className="bg-red text-white p-2 mb-2">{error}</div>}
{loading ? <p className="text-grey">Laden...</p> : (
<>
<section style={{ marginBottom: 16 }}>
<h6>Zugewiesen</h6>
{assigned.length === 0 ? <p className="text-grey">Keine Projekte.</p> : assigned.map((p) => (
<div key={p.$id} style={{ display: 'flex', gap: 8, alignItems: 'center', marginBottom: 8 }}>
<span>{p.projectName} ({p.subdomain})</span>
<PreviewLinkButton href={p.previewUrl} />
<button type="button" className="btn btn-sm" onClick={() => unassignProject(p.$id).then(loadProjects)}><FaTrash /></button>
</div>
))}
</section>
<section style={{ marginBottom: 16 }}>
<h6>Verf�gbar zuweisen</h6>
{available.map((p) => (
<label key={p.$id} style={{ display: 'block' }}>
<input type="checkbox" checked={selectedIds.includes(p.$id)} onChange={() => setSelectedIds((s) => s.includes(p.$id) ? s.filter((x) => x !== p.$id) : [...s, p.$id])} />
{' '}{p.projectName} ({p.subdomain})
</label>
))}
<button type="button" className="btn btn-teal mt-2" disabled={!selectedIds.length || actionLoading} onClick={handleAssign}>Zuweisen</button>
</section>
<section>
<h6><FaPlus /> Neues Projekt</h6>
<form onSubmit={handleCreate} style={{ display: 'grid', gap: 8, maxWidth: 400 }}>
<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, repoName: f.repoName || slugify(e.target.value) }))} required />
<button type="submit" className="btn btn-dark" disabled={actionLoading}>Anlegen & zuweisen</button>
</form>
</section>
</>
)}
</div>
)
}
src/components/WorksheetList.jsx
+30 -40
View File
@@ -1,6 +1,17 @@
import { useState } from 'react'
import { FaClock, FaUser, FaExchangeAlt, FaComment, FaChevronDown, FaChevronUp, FaPen } from 'react-icons/fa'
import { serviceTypeLabel, needsTimeEntry } from '../lib/ticketForm'
import { FaClock, FaUser, FaExchangeAlt, FaComment, FaChevronDown, FaChevronUp, FaPen, FaCheck } from 'react-icons/fa'
import { serviceTypeLabel, needsTimeEntry, worksheetTone } from '../lib/ticketForm'
// 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)',
@@ -12,7 +23,7 @@ const headerButtonStyle = {
marginRight: '8px',
}
export default function WorksheetList({ worksheets, totalTime, loading, onEditTime, onTogglePlan, canEditTimes, onEditTimes }) {
export default function WorksheetList({ worksheets, totalTime, loading, onTogglePlan, canEditTimes, onEditTimes }) {
const [expandedWorksheets, setExpandedWorksheets] = useState({})
if (loading) {
return (
@@ -61,13 +72,15 @@ export default function WorksheetList({ worksheets, totalTime, loading, onEditTi
{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 border-0 shadow-sm overflow-hidden" style={{
borderLeft: isGit ? '4px solid #f97316' : ws.isComment ? '4px solid #10b981' : '4px solid #4a5568',
borderLeft: `4px solid ${colors.border}`,
borderRadius: '8px',
transition: 'transform 0.2s ease, box-shadow 0.2s ease'
}} onMouseEnter={(e) => {
@@ -82,11 +95,7 @@ export default function WorksheetList({ worksheets, totalTime, loading, onEditTi
className="card-header d-flex justify-content-between align-items-center py-3"
onClick={() => toggleWorksheet(ws.wsid)}
style={{
background: isGit
? 'linear-gradient(135deg, #f97316 0%, #ea580c 100%)'
: ws.isComment
? 'linear-gradient(135deg, #10b981 0%, #059669 100%)'
: 'linear-gradient(135deg, #4a5568 0%, #2d3748 100%)',
background: colors.base,
color: 'white',
border: 'none',
cursor: 'pointer',
@@ -94,18 +103,10 @@ export default function WorksheetList({ worksheets, totalTime, loading, onEditTi
transition: 'background 0.2s ease'
}}
onMouseEnter={(e) => {
e.currentTarget.style.background = isGit
? 'linear-gradient(135deg, #ea580c 0%, #c2410c 100%)'
: ws.isComment
? 'linear-gradient(135deg, #059669 0%, #047857 100%)'
: 'linear-gradient(135deg, #2d3748 0%, #1a202c 100%)'
e.currentTarget.style.background = colors.hover
}}
onMouseLeave={(e) => {
e.currentTarget.style.background = isGit
? 'linear-gradient(135deg, #f97316 0%, #ea580c 100%)'
: ws.isComment
? 'linear-gradient(135deg, #10b981 0%, #059669 100%)'
: 'linear-gradient(135deg, #4a5568 0%, #2d3748 100%)'
e.currentTarget.style.background = colors.base
}}
>
<div className="d-flex align-items-center gap-3">
@@ -117,19 +118,20 @@ export default function WorksheetList({ worksheets, totalTime, loading, onEditTi
<div>
<strong className="fs-6">WSID {ws.wsid}</strong>
{ws.isComment && !isGit && (
<span className="badge ms-2" style={{
background: 'rgba(255,255,255,0.3)'
}}>
<span className="badge ms-2" style={headerBadgeStyle}>
<FaComment className="me-1" /> Kommentar
</span>
)}
{needsTimeEntry(ws) && (
<span className="badge ms-2" style={{
background: 'rgba(255,255,255,0.3)'
}}>
{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={{
background: '#9d3dfe'
@@ -151,27 +153,15 @@ export default function WorksheetList({ worksheets, totalTime, loading, onEditTi
<span style={{ fontSize: '0.9rem' }}>{formatTime(ws.totalTime)}</span>
</div>
)}
<span className="badge" style={{
<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">
{needsTimeEntry(ws) && onEditTime && (
<button
type="button"
className="btn btn-sm"
style={headerButtonStyle}
onClick={(e) => {
e.stopPropagation()
onEditTime(ws)
}}
>
<FaClock className="me-1" /> Zeit nachtragen
</button>
)}
{onEditTimes && canEditTimes?.(ws) && (
<button
type="button"
src/context/AuthContext.jsx
+1 -44
View File
@@ -7,32 +7,11 @@ import {
ID,
Query,
hasAppwriteSession,
isDemoMode,
projectId as PROJECT_ID,
} from '../lib/appwrite'
const AuthContext = createContext()
const DEMO_MODE = isDemoMode
// #region agent log
if (typeof window !== 'undefined') {
fetch('http://127.0.0.1:7284/ingest/0747da40-b90b-4354-9b84-c9b550a81ec9', {
method: 'POST',
headers: { 'Content-Type': 'application/json', 'X-Debug-Session-Id': '252827' },
body: JSON.stringify({
sessionId: '252827',
runId: 'pre-fix',
hypothesisId: 'B',
location: 'AuthContext.jsx:init',
message: 'Auth DEMO_MODE resolved',
data: { DEMO_MODE, PROJECT_ID: PROJECT_ID ? PROJECT_ID.slice(0, 8) : '' },
timestamp: Date.now(),
}),
}).catch(() => {})
}
// #endregion
function clearStaleAppwriteSessions() {
if (typeof window === 'undefined' || !window.localStorage) return
try {
@@ -73,7 +52,7 @@ async function createSessionWithCleanup(email, password) {
// Hilfsfunktion: Fügt User automatisch zur employees Collection hinzu und liefert
// den Mitarbeiter-Eintrag (Kürzel = Gitea-Name, siehe isWorksheetCreator) oder null
async function ensureEmployeeExists(user) {
if (!user || DEMO_MODE) return null
if (!user) return null
try {
const response = await databases.listDocuments(
@@ -116,15 +95,6 @@ export function AuthProvider({ children }) {
}, [])
async function checkUser() {
if (DEMO_MODE) {
const demoUser = localStorage.getItem('demo_user')
if (demoUser) {
setUser(JSON.parse(demoUser))
}
setLoading(false)
return
}
if (!hasAppwriteSession()) {
setUser(null)
setLoading(false)
@@ -149,13 +119,6 @@ export function AuthProvider({ children }) {
}
async function login(email, password) {
if (DEMO_MODE) {
const demoUser = { $id: 'demo', email, name: email.split('@')[0] }
localStorage.setItem('demo_user', JSON.stringify(demoUser))
setUser(demoUser)
return { success: true }
}
try {
const normalizedEmail = email.trim()
const normalizedPassword = password.trim()
@@ -194,12 +157,6 @@ export function AuthProvider({ children }) {
}
async function logout() {
if (DEMO_MODE) {
localStorage.removeItem('demo_user')
setUser(null)
return
}
try {
await account.deleteSessions()
} catch (error) {
src/hooks/useAdminConfig.js
+2 -16
View File
@@ -1,9 +1,7 @@
import { useState, useEffect, useCallback } from 'react'
import { databases, DATABASE_ID, COLLECTIONS, ID, isDemoMode } from '../lib/appwrite'
import { databases, DATABASE_ID, COLLECTIONS, ID } from '../lib/appwrite'
const DEMO_MODE = isDemoMode
// Default-Werte für Demo-Modus
// Standardwerte, solange das Config-Dokument fehlt oder nicht lesbar ist
const DEFAULT_CONFIG = {
ticketTypes: [
'Home Office', 'Holidays', 'Trip', 'Supportrequest', 'Change Request',
@@ -54,12 +52,6 @@ export function useAdminConfig() {
const [error, setError] = useState(null)
const fetchConfig = useCallback(async () => {
if (DEMO_MODE) {
setConfig(DEFAULT_CONFIG)
setLoading(false)
return
}
try {
// Versuche Config-Dokument zu laden (ID: 'config')
try {
@@ -104,12 +96,6 @@ export function useAdminConfig() {
}, [fetchConfig])
const updateConfig = async (newConfig) => {
if (DEMO_MODE) {
setConfig(newConfig)
localStorage.setItem('admin_config', JSON.stringify(newConfig))
return { success: true }
}
try {
const configData = {
ticketTypes: newConfig.ticketTypes,
src/hooks/useCustomers.js
-44
View File
@@ -4,7 +4,6 @@ import {
DATABASE_ID,
Query,
databases,
isDemoMode,
} from '../lib/appwrite'
import {
createCustomerWithPortalAccess,
@@ -13,26 +12,12 @@ import {
updateCustomerWithPortalAccess,
} from '../lib/customerAdminApi'
const DEMO_MODE = isDemoMode
// Demo-Kunden für Testing
const DEMO_CUSTOMERS = [
{ $id: '1', code: 'C001', name: 'Kunde A', location: 'Berlin', email: 'kunde.a@example.com', phone: '030-123456' },
{ $id: '2', code: 'C002', name: 'Kunde B', location: 'München', email: 'kunde.b@example.com', phone: '089-654321' }
]
export function useCustomers() {
const [customers, setCustomers] = useState([])
const [loading, setLoading] = useState(true)
const [error, setError] = useState(null)
const fetchCustomers = useCallback(async () => {
if (DEMO_MODE) {
setCustomers(DEMO_CUSTOMERS)
setLoading(false)
return
}
try {
try {
const response = await listCustomersForAdmin()
@@ -67,17 +52,6 @@ export function useCustomers() {
}, [fetchCustomers])
const createCustomer = async (data) => {
if (DEMO_MODE) {
const { password, ...rest } = data
const newCustomer = {
...rest,
portalPassword: password || rest.portalPassword || '',
$id: Date.now().toString(),
}
setCustomers(prev => [...prev, newCustomer])
return { success: true, data: newCustomer }
}
try {
const { password, ...fields } = data
const result = await createCustomerWithPortalAccess({ ...fields, password })
@@ -93,19 +67,6 @@ export function useCustomers() {
}
const updateCustomer = async (id, data) => {
if (DEMO_MODE) {
const { password, ...rest } = data
setCustomers(prev =>
prev.map(c => {
if (c.$id !== id) return c
const next = { ...c, ...rest }
if (password) next.portalPassword = password
return next
})
)
return { success: true }
}
try {
const { password, ...fields } = data
const payload = { ...fields }
@@ -135,11 +96,6 @@ export function useCustomers() {
}
const deleteCustomer = async (id) => {
if (DEMO_MODE) {
setCustomers(prev => prev.filter(c => c.$id !== id))
return { success: true }
}
try {
await deleteCustomerWithPortalAccess(id)
setCustomers(prev => prev.filter(c => c.$id !== id))
src/hooks/useEmployees.js
+11 -51
View File
@@ -4,7 +4,6 @@ import {
DATABASE_ID,
Query,
databases,
isDemoMode,
} from '../lib/appwrite'
import {
createEmployeeWithLogin,
@@ -13,26 +12,6 @@ import {
updateEmployeeWithLogin,
} from '../lib/employeeAdminApi'
const DEMO_MODE = isDemoMode
const DEMO_EMPLOYEES = [
{
$id: '1',
userId: 'user1',
displayName: 'Kenso Grimm',
email: 'kenso@example.com',
shortcode: 'KNSO',
isAdmin: true,
},
{
$id: '2',
userId: 'user2',
displayName: 'Christian Lehmann',
email: 'christian@example.com',
shortcode: 'CHLE',
isAdmin: false,
},
]
export function useEmployees() {
const [employees, setEmployees] = useState([])
const [loading, setLoading] = useState(true)
@@ -41,20 +20,16 @@ export function useEmployees() {
const fetchEmployees = useCallback(async () => {
setLoading(true)
try {
if (DEMO_MODE) {
setEmployees(DEMO_EMPLOYEES)
} else {
try {
const result = await listEmployeesForAdmin()
setEmployees(result.employees || [])
} catch {
const result = await databases.listDocuments(
DATABASE_ID,
COLLECTIONS.EMPLOYEES,
[Query.orderAsc('displayName')]
)
setEmployees(result.documents || [])
}
try {
const result = await listEmployeesForAdmin()
setEmployees(result.employees || [])
} catch {
const result = await databases.listDocuments(
DATABASE_ID,
COLLECTIONS.EMPLOYEES,
[Query.orderAsc('displayName')]
)
setEmployees(result.documents || [])
}
setError(null)
} catch (err) {
@@ -71,15 +46,6 @@ export function useEmployees() {
const createEmployee = async (data) => {
try {
if (DEMO_MODE) {
const employee = {
...data,
userId: crypto.randomUUID(),
$id: Date.now().toString(),
}
setEmployees((current) => [...current, employee])
return { success: true, data: employee }
}
const result = await createEmployeeWithLogin(data)
setEmployees((current) => [...current, result.employee])
return { success: true, data: result.employee }
@@ -90,12 +56,6 @@ export function useEmployees() {
const updateEmployee = async (id, data) => {
try {
if (DEMO_MODE) {
setEmployees((current) =>
current.map((employee) => employee.$id === id ? { ...employee, ...data } : employee)
)
return { success: true }
}
const result = await updateEmployeeWithLogin(id, data)
setEmployees((current) =>
current.map((employee) => employee.$id === id ? result.employee : employee)
@@ -108,7 +68,7 @@ export function useEmployees() {
const deleteEmployee = async (id) => {
try {
if (!DEMO_MODE) await deleteEmployeeWithLogin(id)
await deleteEmployeeWithLogin(id)
setEmployees((current) => current.filter((employee) => employee.$id !== id))
return { success: true }
} catch (err) {
src/hooks/useRoadmapNodes.js
+2 -7
View File
@@ -1,5 +1,5 @@
import { useState, useCallback } from 'react'
import { databases, DATABASE_ID, COLLECTIONS, ID, isDemoMode } from '../lib/appwrite'
import { databases, DATABASE_ID, COLLECTIONS, ID } from '../lib/appwrite'
import {
fetchRoadmapNodes,
logNodeStatusWorksheet,
@@ -14,7 +14,7 @@ export function useRoadmapNodes() {
const [error, setError] = useState(null)
const fetchNodes = useCallback(async (roadmapId) => {
if (!roadmapId || isDemoMode) return []
if (!roadmapId) return []
setLoading(true)
setError(null)
try {
@@ -30,7 +30,6 @@ export function useRoadmapNodes() {
}, [])
const createNode = async (roadmapId, { title, column, row, kind }) => {
if (isDemoMode) return { success: false, error: 'Demo-Modus' }
try {
const now = new Date().toISOString()
const doc = await databases.createDocument(DATABASE_ID, COLLECTIONS.ROADMAP_NODES, ID.unique(), {
@@ -51,7 +50,6 @@ export function useRoadmapNodes() {
}
const updateNode = async (nodeId, data) => {
if (isDemoMode) return { success: false, error: 'Demo-Modus' }
try {
const doc = await databases.updateDocument(DATABASE_ID, COLLECTIONS.ROADMAP_NODES, nodeId, {
...data,
@@ -66,7 +64,6 @@ export function useRoadmapNodes() {
/** Knoten loeschen inkl. Bereinigung eingehender Kanten bei den Nachfolgern. */
const deleteNode = async (node) => {
if (isDemoMode) return { success: false, error: 'Demo-Modus' }
if (node.kind === NODE_KIND.START) {
return { success: false, error: 'Der Start-Knoten kann nicht geloescht werden.' }
}
@@ -96,7 +93,6 @@ export function useRoadmapNodes() {
/** Kante anlegen: immer vorwaerts (Zielspalte > Quellspalte), keine Duplikate. */
const connectNodes = async (source, target) => {
if (isDemoMode) return { success: false, error: 'Demo-Modus' }
if (source.$id === target.$id) return { success: false, error: 'Knoten kann nicht mit sich selbst verbunden werden.' }
if (target.column <= source.column) {
return { success: false, error: 'Verbindungen laufen immer vorwaerts (nach rechts).' }
@@ -113,7 +109,6 @@ export function useRoadmapNodes() {
/** Statuswechsel inkl. Worksheet-Log am Projektticket; meldet, ob alle Ziele fertig sind. */
const setNodeStatus = async (roadmap, node, newStatus, user) => {
if (isDemoMode) return { success: false, error: 'Demo-Modus' }
const oldStatus = node.status || NODE_STATUS.OPEN
if (oldStatus === newStatus) return { success: true, allGoalsDone: false }
const result = await updateNode(node.$id, { status: newStatus })
src/hooks/useRoadmaps.js
+2 -8
View File
@@ -1,5 +1,5 @@
import { useState, useCallback } from 'react'
import { databases, DATABASE_ID, COLLECTIONS, Query, isDemoMode } from '../lib/appwrite'
import { databases, DATABASE_ID, COLLECTIONS, Query } from '../lib/appwrite'
import {
createRoadmapPlan,
deleteRoadmapPlan,
@@ -13,7 +13,6 @@ export function useRoadmaps() {
const [error, setError] = useState(null)
const fetchAll = useCallback(async () => {
if (isDemoMode) return []
setLoading(true)
setError(null)
try {
@@ -32,7 +31,7 @@ export function useRoadmaps() {
}, [])
const fetchById = useCallback(async (roadmapId) => {
if (!roadmapId || isDemoMode) return null
if (!roadmapId) return null
try {
return await databases.getDocument(DATABASE_ID, COLLECTIONS.ROADMAPS, roadmapId)
} catch {
@@ -41,7 +40,6 @@ export function useRoadmaps() {
}, [])
const fetchByTicketId = useCallback(async (ticketId) => {
if (isDemoMode) return null
try {
return await fetchRoadmapByTicketId(ticketId)
} catch {
@@ -50,7 +48,6 @@ export function useRoadmaps() {
}, [])
const createRoadmap = async (project, data, user) => {
if (isDemoMode) return { success: false, error: 'Demo-Modus' }
try {
const result = await createRoadmapPlan(project, data, user)
setRoadmaps((prev) => [result.roadmap, ...prev])
@@ -61,7 +58,6 @@ export function useRoadmaps() {
}
const updateRoadmap = async (roadmapId, data) => {
if (isDemoMode) return { success: false, error: 'Demo-Modus' }
try {
const doc = await databases.updateDocument(DATABASE_ID, COLLECTIONS.ROADMAPS, roadmapId, {
...data,
@@ -75,7 +71,6 @@ export function useRoadmaps() {
}
const deleteRoadmap = async (roadmap, user) => {
if (isDemoMode) return { success: false, error: 'Demo-Modus' }
try {
await deleteRoadmapPlan(roadmap, user)
setRoadmaps((prev) => prev.filter((r) => r.$id !== roadmap.$id))
@@ -86,7 +81,6 @@ export function useRoadmaps() {
}
const completePlan = async (roadmap, user) => {
if (isDemoMode) return { success: false, error: 'Demo-Modus' }
try {
const updated = await completeRoadmap(roadmap, user)
setRoadmaps((prev) => prev.map((r) => (r.$id === updated.$id ? updated : r)))
src/hooks/useWebsiteProjects.js
+3 -16
View File
@@ -1,10 +1,5 @@
import { useState, useCallback } from 'react'
import { databases, DATABASE_ID, COLLECTIONS, Query, PREVIEW_TEMPLATE_NAME, isDemoMode } from '../lib/appwrite'
function isTemplateProject(project) {
const template = project.templateName || PREVIEW_TEMPLATE_NAME
return template === PREVIEW_TEMPLATE_NAME || Boolean(project.repoFullName)
}
import { databases, DATABASE_ID, COLLECTIONS, Query } from '../lib/appwrite'
export function useWebsiteProjects() {
const [projects, setProjects] = useState([])
@@ -12,7 +7,6 @@ export function useWebsiteProjects() {
const [error, setError] = useState(null)
const fetchAllProjects = useCallback(async () => {
if (isDemoMode) return []
setLoading(true)
setError(null)
try {
@@ -31,7 +25,7 @@ export function useWebsiteProjects() {
}, [])
const fetchByTicketId = useCallback(async (ticketId) => {
if (!ticketId || isDemoMode) return []
if (!ticketId) return []
try {
const response = await databases.listDocuments(
DATABASE_ID, COLLECTIONS.WEBSITE_PROJECTS,
@@ -43,13 +37,6 @@ export function useWebsiteProjects() {
}
}, [])
const getAvailableProjects = useCallback((allProjects, customerId) => {
return (allProjects || []).filter(isTemplateProject).filter((p) => {
if (!p.customerId) return true
return customerId && p.customerId === customerId
})
}, [])
const assignProject = async (projectId, { customerId, ticketId }) => {
try {
const response = await databases.updateDocument(
@@ -80,5 +67,5 @@ export function useWebsiteProjects() {
}
}
return { projects, loading, error, fetchAllProjects, fetchByTicketId, getAvailableProjects, assignProjects, unassignProject }
return { projects, loading, error, fetchAllProjects, fetchByTicketId, assignProjects, unassignProject }
}
src/hooks/useWorkorders.js
+2 -108
View File
@@ -1,7 +1,5 @@
import { useState, useEffect, useCallback, useMemo } from 'react'
import { databases, DATABASE_ID, COLLECTIONS, Query, ID, isDemoMode } from '../lib/appwrite'
const DEMO_MODE = isDemoMode
import { databases, DATABASE_ID, COLLECTIONS, Query, ID } from '../lib/appwrite'
function buildFiltersKey(filters = {}) {
return JSON.stringify({
@@ -15,68 +13,6 @@ function buildFiltersKey(filters = {}) {
})
}
// Demo data for testing without Appwrite
const lastWeek = new Date(Date.now() - 7 * 24 * 60 * 60 * 1000)
const DEMO_WORKORDERS = [
{
$id: 'dummy-10001',
woid: '10001',
topic: 'Kompletter Systemausfall - Server & Netzwerk',
status: 'Assigned',
priority: 4,
type: 'Emergency Call',
systemType: 'Server',
responseLevel: 'Backoffice',
serviceType: 'On Site',
customerName: 'Kunde A',
customerLocation: 'Hauptstraße 123, 12345 Musterstadt',
assignedTo: 'user-max-id',
assignedName: 'Max Mustermann',
requestedBy: 'Dr. Anna Schmidt',
requestedFor: 'IT-Abteilung Kunde A',
startDate: '30.12.2025',
startTime: '0800',
deadline: '31.12.2025',
endTime: '1800',
estimate: '480',
mailCopyTo: 'admin@kunde-a.de, it@kunde-a.de',
sendNotification: true,
details: `KRITISCHER SYSTEMAUSFALL - SOFORTIGE BEARBEITUNG ERFORDERLICH
Problembeschreibung:
- Kompletter Serverausfall im Rechenzentrum
- Alle Server sind offline (keine Verbindung möglich)
- Netzwerk-Infrastruktur betroffen
- Keine Backup-Systeme verfügbar
Betroffene Systeme:
- Hauptserver (Windows Server 2022)
- Datenbankserver (SQL Server 2019)
- Fileserver
- Exchange Server
- Netzwerk-Switches
Auswirkungen:
- Keine E-Mail-Kommunikation möglich
- Alle Anwendungen offline
- Kein Zugriff auf Datenbanken
- Produktion steht still
Dringlichkeit: KRITISCH - Produktionsausfall
Erwartete Bearbeitungszeit: 8 Stunden
Benötigte Ressourcen: 2 Techniker, Hardware-Ersatzteile`,
approvalStatus: 'approved',
$createdAt: lastWeek.toISOString(),
createdAt: lastWeek.toISOString()
},
{ $id: '2', woid: '10002', title: 'Netzwerk Problem', description: 'WLAN funktioniert nicht', status: 'Occupied', priority: 3, type: 'Support', customerName: 'Kunde B', assignedName: 'Lisa S.', response: 'Remote', $createdAt: new Date().toISOString() },
{ $id: '3', woid: '10003', title: 'Software Installation', description: 'Office 365 Setup', status: 'Assigned', priority: 1, type: 'Installation', customerName: 'Kunde C', assignedName: 'Tom K.', response: 'Onsite', $createdAt: new Date().toISOString() },
{ $id: '4', woid: '10004', title: 'Drucker defekt', description: 'Papierstau', status: 'Awaiting', priority: 2, type: 'Hardware', customerName: 'Kunde D', assignedName: '', response: 'Pickup', $createdAt: new Date().toISOString() },
{ $id: '5', woid: '10005', title: 'Kritischer Serverausfall', description: 'Produktionsserver down', status: 'Open', priority: 4, type: 'Emergency', customerName: 'Kunde E', assignedName: 'Max M.', response: 'Onsite', $createdAt: new Date().toISOString() },
]
export function useWorkorders(filters = {}) {
const [workorders, setWorkorders] = useState([])
const [loading, setLoading] = useState(true)
@@ -94,27 +30,7 @@ export function useWorkorders(filters = {}) {
const fetchWorkorders = useCallback(async () => {
const activeFilters = JSON.parse(filtersKey)
setLoading(true)
if (DEMO_MODE) {
// Filter demo data
let filtered = [...DEMO_WORKORDERS]
if (activeFilters.status?.length > 0) {
filtered = filtered.filter(wo => activeFilters.status.includes(wo.status))
}
if (activeFilters.priority?.length > 0) {
filtered = filtered.filter(wo => activeFilters.priority.includes(wo.priority))
}
if (activeFilters.woid) {
filtered = filtered.filter(wo => String(wo.woid) === String(activeFilters.woid))
}
if (activeFilters.limit) {
filtered = filtered.slice(0, activeFilters.limit)
}
setWorkorders(filtered)
setLoading(false)
return
}
try {
const queries = [Query.orderDesc('$createdAt')]
@@ -236,18 +152,6 @@ export function useWorkorders(filters = {}) {
}
const createWorkorder = async (data) => {
if (DEMO_MODE) {
// Finde höchste WOID und +1
const maxWoid = workorders.length > 0
? Math.max(...workorders.map(wo => parseInt(wo.woid)).filter(w => !isNaN(w)))
: 9999;
const nextWoid = maxWoid + 1;
const newWo = { ...data, $id: Date.now().toString(), woid: nextWoid.toString(), status: 'Open', $createdAt: new Date().toISOString() }
setWorkorders(prev => [newWo, ...prev])
return { success: true, data: newWo }
}
try {
// Validierung: Prüfe required fields
if (!data.topic || data.topic.trim() === '') {
@@ -323,11 +227,6 @@ export function useWorkorders(filters = {}) {
}
const updateWorkorder = async (id, data) => {
if (DEMO_MODE) {
setWorkorders(prev => prev.map(wo => wo.$id === id ? { ...wo, ...data } : wo))
return { success: true }
}
try {
// Status-Automatik beim Update:
// Wenn assignedTo gesetzt wird → Status = "Assigned"
@@ -361,11 +260,6 @@ export function useWorkorders(filters = {}) {
}
const deleteWorkorder = async (id) => {
if (DEMO_MODE) {
setWorkorders(prev => prev.filter(wo => wo.$id !== id))
return { success: true }
}
try {
await databases.deleteDocument(
DATABASE_ID,
src/hooks/useWorksheets.js
+9 -231
View File
@@ -1,174 +1,24 @@
import { useState, useEffect, useCallback } from 'react'
import { databases, DATABASE_ID, COLLECTIONS, Query, ID, isDemoMode } from '../lib/appwrite'
import { databases, DATABASE_ID, COLLECTIONS, Query, ID } from '../lib/appwrite'
import { canEditWorksheetTimes, isGitWorksheet } from '../lib/ticketForm'
const DEMO_MODE = isDemoMode
// Demo data für Testing - Vollständiges Dummy-Ticket 10001 mit allen Worksheets
const yesterday = new Date(Date.now() - 24 * 60 * 60 * 1000)
const twoDaysAgo = new Date(Date.now() - 48 * 60 * 60 * 1000)
const threeDaysAgo = new Date(Date.now() - 72 * 60 * 60 * 1000)
const DEMO_WORKSHEETS = [
{
$id: 'ws-10001-001',
wsid: '100001',
woid: '10001',
workorderId: 'dummy-10001',
employeeId: 'user-max-id',
employeeName: 'Max Mustermann',
employeeShort: 'MM',
serviceType: 'Remote',
oldStatus: 'Open',
newStatus: 'Occupied',
oldResponseLevel: '',
newResponseLevel: '24/7',
totalTime: 30,
startDate: '23.12.2025',
startTime: '0800',
endDate: '23.12.2025',
endTime: '0830',
details: 'Erste Analyse durchgeführt. Server komplett offline. Keine Remote-Verbindung möglich. Vor-Ort-Einsatz erforderlich.',
isComment: false,
$createdAt: threeDaysAgo.toISOString()
},
{
$id: 'ws-10001-002',
wsid: '100002',
woid: '10001',
workorderId: 'dummy-10001',
employeeId: 'user-lisa-id',
employeeName: 'Lisa Schneider',
employeeShort: 'LS',
serviceType: 'On Site',
oldStatus: 'Occupied',
newStatus: 'Assigned',
oldResponseLevel: '24/7',
newResponseLevel: '24/7',
totalTime: 120,
startDate: '23.12.2025',
startTime: '1000',
endDate: '23.12.2025',
endTime: '1200',
details: 'Vor-Ort-Einsatz: Hardware-Check durchgeführt. Netzteil des Hauptservers defekt. Ersatzteil bestellt. Notfall-Backup-Server gestartet.',
isComment: false,
$createdAt: threeDaysAgo.toISOString()
},
{
$id: 'ws-10001-003',
wsid: '100003',
woid: '10001',
workorderId: 'dummy-10001',
employeeId: 'user-tom-id',
employeeName: 'Tom Klein',
employeeShort: 'TK',
serviceType: 'On Site',
oldStatus: 'Assigned',
newStatus: 'Assigned',
oldResponseLevel: '24/7',
newResponseLevel: '24/7',
totalTime: 0,
startDate: '24.12.2025',
startTime: '1400',
endDate: '24.12.2025',
endTime: '1400',
details: 'Warte auf Ersatzteil-Lieferung. Kunde informiert. Backup-System läuft stabil.',
isComment: true,
$createdAt: twoDaysAgo.toISOString()
},
{
$id: 'ws-10001-004',
wsid: '100004',
woid: '10001',
workorderId: 'dummy-10001',
employeeId: 'user-max-id',
employeeName: 'Max Mustermann',
employeeShort: 'MM',
serviceType: 'On Site',
oldStatus: 'Assigned',
newStatus: 'In Test',
oldResponseLevel: '24/7',
newResponseLevel: '24/7',
totalTime: 180,
startDate: '25.12.2025',
startTime: '0900',
endDate: '25.12.2025',
endTime: '1200',
details: 'Ersatzteil eingebaut. Server gestartet. Alle Dienste wiederhergestellt. System-Tests durchgeführt. Datenbank-Verbindungen geprüft.',
isComment: false,
$createdAt: twoDaysAgo.toISOString()
},
{
$id: 'ws-10001-005',
wsid: '100005',
woid: '10001',
workorderId: 'dummy-10001',
employeeId: 'user-lisa-id',
employeeName: 'Lisa Schneider',
employeeShort: 'LS',
serviceType: 'Remote',
oldStatus: 'In Test',
newStatus: 'Awaiting',
oldResponseLevel: '24/7',
newResponseLevel: 'Support',
totalTime: 45,
startDate: '26.12.2025',
startTime: '1000',
endDate: '26.12.2025',
endTime: '1045',
details: 'Remote-Monitoring eingerichtet. Warte auf Kunden-Feedback nach 24h Testphase. Alle Systeme laufen stabil.',
isComment: false,
$createdAt: yesterday.toISOString()
},
{
$id: 'ws-10001-006',
wsid: '100006',
woid: '10001',
workorderId: 'dummy-10001',
employeeId: 'user-tom-id',
employeeName: 'Tom Klein',
employeeShort: 'TK',
serviceType: 'COMMENT',
oldStatus: 'Awaiting',
newStatus: 'Closed',
oldResponseLevel: 'Support',
newResponseLevel: 'Backoffice',
totalTime: 0,
startDate: '30.12.2025',
startTime: '0900',
endDate: '30.12.2025',
endTime: '0900',
details: 'Kunde bestätigt: Alle Systeme funktionieren einwandfrei. Problem vollständig behoben. Ticket kann geschlossen werden.',
isComment: true,
$createdAt: new Date().toISOString()
}
]
export function useWorksheets(woid = null) {
const [worksheets, setWorksheets] = useState([])
const [loading, setLoading] = useState(true)
const [error, setError] = useState(null)
const fetchWorksheets = useCallback(async () => {
setLoading(true)
if (DEMO_MODE) {
// Filter demo data by WOID if provided
const filtered = woid
? DEMO_WORKSHEETS.filter(ws => ws.woid === woid)
: DEMO_WORKSHEETS
setWorksheets(filtered)
// Zugeklappte Tickets uebergeben keine WOID - dann gibt es nichts zu laden
if (!woid) {
setWorksheets([])
setLoading(false)
return
}
setLoading(true)
try {
const queries = [Query.orderDesc('$createdAt')]
// Filter by WOID if provided
if (woid) {
queries.push(Query.equal('woid', woid))
}
// Ohne limit liefert Appwrite nur 25 Eintraege, ein Ticket sammelt aber viele Git-Pushes
const queries = [Query.orderDesc('$createdAt'), Query.equal('woid', woid), Query.limit(5000)]
if (import.meta.env.DEV) {
console.log('📋 Fetching worksheets:')
@@ -191,7 +41,7 @@ export function useWorksheets(woid = null) {
if (err.code === 401 || errorMessage.includes('not authorized')) {
errorMessage = 'Berechtigung fehlt: Bitte überprüfe die Read-Berechtigungen der Worksheets Collection.'
} else if (errorMessage.includes('Collection') && errorMessage.includes('not found')) {
errorMessage = 'Worksheets Collection nicht gefunden. Bitte erstelle die Collection in Appwrite (siehe WORKSHEETS_COLLECTION_SETUP.md).'
errorMessage = 'Worksheets Collection nicht gefunden. Bitte die Collection in Appwrite prüfen (Datenmodell siehe README.md).'
}
setError(errorMessage)
@@ -210,13 +60,6 @@ export function useWorksheets(woid = null) {
* Startet bei 100000 und zählt sequentiell hoch
*/
const generateWSID = useCallback(async () => {
if (DEMO_MODE) {
const maxWsid = worksheets.length > 0
? Math.max(...worksheets.map(ws => parseInt(ws.wsid)).filter(w => !isNaN(w)))
: 99999
return (maxWsid + 1).toString()
}
try {
// Hole ALLE Worksheets (nicht gefiltert) um höchste WSID zu finden
const response = await databases.listDocuments(
@@ -285,18 +128,6 @@ export function useWorksheets(woid = null) {
* Erstellt ein neues Worksheet
*/
const createWorksheet = async (data, currentUser) => {
if (DEMO_MODE) {
const wsid = await generateWSID()
const newWs = {
...data,
$id: Date.now().toString(),
wsid,
$createdAt: new Date().toISOString()
}
setWorksheets(prev => [newWs, ...prev])
return { success: true, data: newWs }
}
try {
// Validierung
if (!data.woid || data.woid.trim() === '') {
@@ -369,11 +200,6 @@ export function useWorksheets(woid = null) {
* Aktualisiert ein Worksheet
*/
const updateWorksheet = async (id, data) => {
if (DEMO_MODE) {
setWorksheets(prev => prev.map(ws => ws.$id === id ? { ...ws, ...data } : ws))
return { success: true }
}
try {
const response = await databases.updateDocument(
DATABASE_ID,
@@ -408,11 +234,6 @@ export function useWorksheets(woid = null) {
* Löscht ein Worksheet (sollte normalerweise nicht erlaubt sein - Audit Trail!)
*/
const deleteWorksheet = async (id) => {
if (DEMO_MODE) {
setWorksheets(prev => prev.filter(ws => ws.$id !== id))
return { success: true }
}
try {
await databases.deleteDocument(
DATABASE_ID,
@@ -437,47 +258,6 @@ export function useWorksheets(woid = null) {
.reduce((sum, ws) => sum + (ws.totalTime || 0), 0)
}, [worksheets])
/**
* Gruppiert Worksheets nach Mitarbeiter
* @returns Object mit employeeId als Key
*/
const getWorksheetsByEmployee = useCallback(() => {
return worksheets.reduce((acc, ws) => {
const empId = ws.employeeId
if (!acc[empId]) {
acc[empId] = {
employeeName: ws.employeeName,
employeeShort: ws.employeeShort,
worksheets: [],
totalTime: 0
}
}
acc[empId].worksheets.push(ws)
if (!ws.isComment) {
acc[empId].totalTime += ws.totalTime || 0
}
return acc
}, {})
}, [worksheets])
/**
* Gibt die Status-Historie zurück (chronologisch)
*/
const getStatusHistory = useCallback(() => {
return worksheets
.filter(ws => ws.oldStatus && ws.newStatus)
.map(ws => ({
wsid: ws.wsid,
date: ws.startDate,
time: ws.startTime,
employee: ws.employeeName,
from: ws.oldStatus,
to: ws.newStatus,
details: ws.details
}))
.reverse() // Älteste zuerst
}, [worksheets])
return {
worksheets,
loading,
@@ -488,8 +268,6 @@ export function useWorksheets(woid = null) {
deleteWorksheet,
refresh: fetchWorksheets,
getTotalTime,
getWorksheetsByEmployee,
getStatusHistory,
calculateTime
}
}
src/lib/appwrite.js
-8
View File
@@ -8,14 +8,10 @@ export const projectId = (
import.meta.env.VITE_APPWRITE_PROJECT_ID || DEFAULT_PROJECT_ID
).trim()
/** Demo-Modus nur wenn wirklich keine Projekt-ID (sollte mit Defaults nie passieren) */
export const isDemoMode = !projectId
if (import.meta.env.DEV) {
console.log('🔧 Appwrite Konfiguration:')
console.log('Endpoint:', endpoint)
console.log('Project ID:', projectId || 'NICHT GESETZT')
console.log('Demo-Modus:', isDemoMode)
console.log('Database ID:', import.meta.env.VITE_APPWRITE_DATABASE_ID || 'woms-database')
}
@@ -37,8 +33,6 @@ export const COLLECTIONS = {
CUSTOMERS: 'customers',
EMPLOYEES: 'employees',
WORKSHEETS: 'worksheets',
USERS: 'users',
ATTACHMENTS: 'attachments',
WEBSITE_PROJECTS: 'websiteProjects',
LEADS: 'leads',
LEAD_SETTINGS: 'leadSettings',
@@ -47,9 +41,7 @@ export const COLLECTIONS = {
ROADMAP_NODES: 'roadmapNodes',
}
export const WEBPAGE_TICKET_TYPE = 'Webpage'
export const PROJECT_TICKET_TYPE = 'Project'
export const PREVIEW_TEMPLATE_NAME = 'webklar-preview-template'
export const BUCKET_ID = import.meta.env.VITE_APPWRITE_BUCKET_ID || 'woms-attachments'
src/lib/ticketForm.js
+7
View File
@@ -33,6 +33,13 @@ export function needsTimeEntry(worksheet) {
return isGitWorksheet(worksheet) && (!worksheet.startTime || !Number(worksheet.totalTime))
}
// Farbe in der Arbeitsblatt-Liste: Git-Pushes sind orange, bis ihre Zeit nachgetragen
// ist, danach gruen. Kommentare blau, normale Arbeitszeit grau.
export function worksheetTone(worksheet) {
if (isGitWorksheet(worksheet)) return needsTimeEntry(worksheet) ? 'git-open' : 'git-done'
return worksheet?.isComment ? 'comment' : 'work'
}
const sameName = (a, b) => String(a || '').trim().toLowerCase() === String(b || '').trim().toLowerCase()
/* Wer hat das Arbeitsblatt erstellt? Normale Eintraege tragen die Appwrite-ID des
src/lib/utils.js
-7
View File
@@ -1,7 +0,0 @@
import { clsx } from 'clsx'
import { twMerge } from 'tailwind-merge'
export function cn(...inputs) {
return twMerge(clsx(inputs))
}
src/pages/AssetsPage.jsx
-40
View File
@@ -1,40 +0,0 @@
import { useState } from 'react'
import { FaServer, FaDesktop, FaPrint, FaNetworkWired } from 'react-icons/fa6'
import { PageHeader, Card } from '../components/ui'
export default function AssetsPage() {
const [searchTerm, setSearchTerm] = useState('')
const assetCategories = [
{ icon: FaServer, name: 'Server', count: 0 },
{ icon: FaDesktop, name: 'Arbeitsplaetze', count: 0 },
{ icon: FaPrint, name: 'Drucker', count: 0 },
{ icon: FaNetworkWired, name: 'Netzwerkgeraete', count: 0 },
]
return (
<div className="page">
<PageHeader title="Assets" subtitle="IT-Inventar und Geraete" />
<input
className="form-control"
placeholder="Assets suchen..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
style={{ maxWidth: 400, marginBottom: 16 }}
/>
<div className="kpi-grid">
{assetCategories.map(({ icon: Icon, name, count }) => (
<div key={name} className="kpi">
<span className="kpi-accent" />
<div className="kpi-label"><Icon /> {name}</div>
<div className="kpi-value">{count}</div>
</div>
))}
</div>
<Card><p className="muted" style={{ margin: 0 }}>Asset-Modul - mit Appwrite verbinden, um IT-Assets zu verwalten.</p></Card>
</div>
)
}
src/pages/DocsPage.jsx
-27
View File
@@ -1,27 +0,0 @@
import { FaBook, FaCircleQuestion, FaKeyboard } from 'react-icons/fa6'
import { PageHeader, Card } from '../components/ui'
export default function DocsPage() {
const sections = [
{ icon: FaBook, title: 'Erste Schritte', content: 'Tickets, Rechnungen und Dokumente in der Plattform verwalten.' },
{ icon: FaCircleQuestion, title: 'FAQ', content: 'Haeufige Fragen zum System.' },
{ icon: FaKeyboard, title: 'Tipps', content: 'Schneller arbeiten mit der Plattform.' },
]
return (
<div className="page">
<PageHeader title="Dokumentation" subtitle="Hilfe und Anleitungen" />
<div className="kpi-grid">
{sections.map(({ icon: Icon, title, content }) => (
<Card key={title}>
<div className="flex items-center gap-3" style={{ marginBottom: 8 }}>
<Icon size={22} style={{ color: 'var(--accent)' }} />
<strong>{title}</strong>
</div>
<p className="muted" style={{ margin: 0 }}>{content}</p>
</Card>
))}
</div>
</div>
)
}
src/pages/ReportsPage.jsx
-49
View File
@@ -1,49 +0,0 @@
import { useState } from 'react'
import { format, subDays } from 'date-fns'
import { FaFileExport, FaChartBar } from 'react-icons/fa6'
import { PageHeader, Card, Button, Field, EmptyState } from '../components/ui'
export default function ReportsPage() {
const [dateRange, setDateRange] = useState({
from: format(subDays(new Date(), 30), 'yyyy-MM-dd'),
to: format(new Date(), 'yyyy-MM-dd'),
})
const [reportType, setReportType] = useState('tickets')
const reportTypes = [
{ value: 'tickets', label: 'Ticket-Uebersicht' },
{ value: 'performance', label: 'Leistungsbericht' },
{ value: 'customer', label: 'Kundenbericht' },
{ value: 'technician', label: 'Techniker-Bericht' },
]
const handleGenerate = () => {
alert(`Bericht "${reportType}" von ${dateRange.from} bis ${dateRange.to}`)
}
return (
<div className="page">
<PageHeader title="Reports" subtitle="Auswertungen und Exporte" />
<Card title="Bericht erstellen">
<div className="flex gap-3 wrap">
<Field label="Berichtstyp">
<select className="form-control" value={reportType} onChange={(e) => setReportType(e.target.value)}>
{reportTypes.map((t) => <option key={t.value} value={t.value}>{t.label}</option>)}
</select>
</Field>
<Field label="Von"><input className="form-control" type="date" value={dateRange.from} onChange={(e) => setDateRange((p) => ({ ...p, from: e.target.value }))} /></Field>
<Field label="Bis"><input className="form-control" type="date" value={dateRange.to} onChange={(e) => setDateRange((p) => ({ ...p, to: e.target.value }))} /></Field>
</div>
<div className="flex gap-2" style={{ marginTop: 8 }}>
<Button variant="primary" onClick={handleGenerate}><FaChartBar /> Bericht erstellen</Button>
<Button variant="ghost"><FaFileExport /> Als PDF exportieren</Button>
</div>
</Card>
<div style={{ marginTop: 16 }}>
<Card><EmptyState icon={<FaChartBar />} title="Noch kein Bericht" hint="Parameter waehlen und Bericht erstellen." /></Card>
</div>
</div>
)
}
src/pages/TicketsPage.jsx
+1 -5
View File
@@ -1,11 +1,10 @@
import { useEffect, useState } from 'react'
import { useSearchParams } from 'react-router-dom'
import { FaAngleDown, FaSpinner, FaPlus, FaList, FaSliders } from 'react-icons/fa6'
import { FaAngleDown, FaSpinner, FaPlus, FaSliders } from 'react-icons/fa6'
import { useWorkorders } from '../hooks/useWorkorders'
import { useCustomers } from '../hooks/useCustomers'
import TicketCard from '../components/TicketCard'
import CreateTicketModal from '../components/CreateTicketModal'
import QuickOverviewModal from '../components/QuickOverviewModal'
import { PageHeader, Card, Button, EmptyState } from '../components/ui'
// Alle Ticket-Status; "Closed" gilt als archiviert und ist standardmaessig ausgeblendet
@@ -34,7 +33,6 @@ export default function TicketsPage() {
const { customers } = useCustomers()
const [showCreateModal, setShowCreateModal] = useState(false)
const [showOverviewModal, setShowOverviewModal] = useState(false)
const [showAdvanced, setShowAdvanced] = useState(false)
const [searchParams] = useSearchParams()
@@ -82,7 +80,6 @@ export default function TicketsPage() {
subtitle="Alle Arbeitsauftraege auf einen Blick"
actions={
<>
<Button variant="ghost" onClick={() => setShowOverviewModal(true)}><FaList /> Schnelluebersicht</Button>
<Button variant="ghost" onClick={() => setShowAdvanced((s) => !s)}><FaSliders /> Filter</Button>
<Button variant="primary" onClick={() => setShowCreateModal(true)}><FaPlus /> Neues Ticket</Button>
</>
@@ -160,7 +157,6 @@ export default function TicketsPage() {
)}
<CreateTicketModal isOpen={showCreateModal} onClose={() => setShowCreateModal(false)} onCreate={handleCreate} customers={customers} />
<QuickOverviewModal isOpen={showOverviewModal} onClose={() => setShowOverviewModal(false)} workorders={workorders} />
</div>
)
}
src/styles/global.css
+11
View File
@@ -1,3 +1,14 @@
/* Lato vom eigenen Server statt von Google Fonts (DSGVO): Lato 1 mit denselben Abmessungen
wie bei Google und wie bisher nur der normale Schnitt 400 (Fett rechnet der
Browser). Lizenz: assets/fonts/OFL-Lato.txt */
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../assets/fonts/lato-regular.ttf') format('truetype');
}
* {
margin: 0;
padding: 0;
src/utils/createDummyTicket.js
-233
View File
@@ -1,233 +0,0 @@
/**
* Erstellt ein vollständiges Dummy-Ticket mit WOID 10001
* Zeigt alle möglichen Funktionen, Felder und Kombinationen
*/
export function createDummyTicket10001() {
const now = new Date()
const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000)
const lastWeek = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000)
// Haupt-Ticket mit allen Feldern ausgefüllt
const dummyTicket = {
$id: 'dummy-10001',
woid: '10001',
topic: 'Kompletter Systemausfall - Server & Netzwerk',
status: 'Assigned',
priority: 4, // Critical
type: 'Emergency Call',
systemType: 'Server',
responseLevel: '24/7',
serviceType: 'On Site',
customerId: 'customer-a-id',
customerName: 'Kunde A',
customerLocation: 'Hauptstraße 123, 12345 Musterstadt',
assignedTo: 'user-max-id', // Max Mustermann
requestedBy: 'Dr. Anna Schmidt',
requestedFor: 'IT-Abteilung Kunde A',
startDate: '30.12.2025',
startTime: '0800',
deadline: '31.12.2025',
endTime: '1800',
estimate: '480',
mailCopyTo: 'admin@kunde-a.de, it@kunde-a.de',
sendNotification: true,
details: `KRITISCHER SYSTEMAUSFALL - SOFORTIGE BEARBEITUNG ERFORDERLICH
Problembeschreibung:
- Kompletter Serverausfall im Rechenzentrum
- Alle Server sind offline (keine Verbindung möglich)
- Netzwerk-Infrastruktur betroffen
- Keine Backup-Systeme verfügbar
Betroffene Systeme:
- Hauptserver (Windows Server 2022)
- Datenbankserver (SQL Server 2019)
- Fileserver
- Exchange Server
- Netzwerk-Switches
Auswirkungen:
- Keine E-Mail-Kommunikation möglich
- Alle Anwendungen offline
- Kein Zugriff auf Datenbanken
- Produktion steht still
Dringlichkeit: KRITISCH - Produktionsausfall
Erwartete Bearbeitungszeit: 8 Stunden
Benötigte Ressourcen: 2 Techniker, Hardware-Ersatzteile`,
approvalStatus: 'approved',
createdAt: lastWeek.toISOString(),
$createdAt: lastWeek.toISOString()
}
// Mehrere Worksheets mit verschiedenen Status-Änderungen und Benutzern
const dummyWorksheets = [
{
$id: 'ws-10001-001',
wsid: '100001',
woid: '10001',
workorderId: 'dummy-10001',
employeeId: 'user-max-id',
employeeName: 'Max Mustermann',
employeeShort: 'MM',
serviceType: 'Remote',
oldStatus: 'Open',
newStatus: 'Occupied',
oldResponseLevel: '',
newResponseLevel: '24/7',
totalTime: 30,
startDate: '23.12.2025',
startTime: '0800',
endDate: '23.12.2025',
endTime: '0830',
details: 'Erste Analyse durchgeführt. Server komplett offline. Keine Remote-Verbindung möglich. Vor-Ort-Einsatz erforderlich.',
isComment: false,
createdAt: yesterday.toISOString(),
$createdAt: yesterday.toISOString()
},
{
$id: 'ws-10001-002',
wsid: '100002',
woid: '10001',
workorderId: 'dummy-10001',
employeeId: 'user-lisa-id',
employeeName: 'Lisa Schneider',
employeeShort: 'LS',
serviceType: 'On Site',
oldStatus: 'Occupied',
newStatus: 'Assigned',
oldResponseLevel: '24/7',
newResponseLevel: '24/7',
totalTime: 120,
startDate: '23.12.2025',
startTime: '1000',
endDate: '23.12.2025',
endTime: '1200',
details: 'Vor-Ort-Einsatz: Hardware-Check durchgeführt. Netzteil des Hauptservers defekt. Ersatzteil bestellt. Notfall-Backup-Server gestartet.',
isComment: false,
createdAt: yesterday.toISOString(),
$createdAt: yesterday.toISOString()
},
{
$id: 'ws-10001-003',
wsid: '100003',
woid: '10001',
workorderId: 'dummy-10001',
employeeId: 'user-tom-id',
employeeName: 'Tom Klein',
employeeShort: 'TK',
serviceType: 'On Site',
oldStatus: 'Assigned',
newStatus: 'Assigned',
oldResponseLevel: '24/7',
newResponseLevel: '24/7',
totalTime: 0,
startDate: '24.12.2025',
startTime: '1400',
endDate: '24.12.2025',
endTime: '1400',
details: 'Warte auf Ersatzteil-Lieferung. Kunde informiert. Backup-System läuft stabil.',
isComment: true,
createdAt: new Date(yesterday.getTime() - 12 * 60 * 60 * 1000).toISOString(),
$createdAt: new Date(yesterday.getTime() - 12 * 60 * 60 * 1000).toISOString()
},
{
$id: 'ws-10001-004',
wsid: '100004',
woid: '10001',
workorderId: 'dummy-10001',
employeeId: 'user-max-id',
employeeName: 'Max Mustermann',
employeeShort: 'MM',
serviceType: 'On Site',
oldStatus: 'Assigned',
newStatus: 'In Test',
oldResponseLevel: '24/7',
newResponseLevel: '24/7',
totalTime: 180,
startDate: '25.12.2025',
startTime: '0900',
endDate: '25.12.2025',
endTime: '1200',
details: 'Ersatzteil eingebaut. Server gestartet. Alle Dienste wiederhergestellt. System-Tests durchgeführt. Datenbank-Verbindungen geprüft.',
isComment: false,
createdAt: new Date(yesterday.getTime() - 24 * 60 * 60 * 1000).toISOString(),
$createdAt: new Date(yesterday.getTime() - 24 * 60 * 60 * 1000).toISOString()
},
{
$id: 'ws-10001-005',
wsid: '100005',
woid: '10001',
workorderId: 'dummy-10001',
employeeId: 'user-lisa-id',
employeeName: 'Lisa Schneider',
employeeShort: 'LS',
serviceType: 'Remote',
oldStatus: 'In Test',
newStatus: 'Awaiting',
oldResponseLevel: '24/7',
newResponseLevel: 'Support',
totalTime: 45,
startDate: '26.12.2025',
startTime: '1000',
endDate: '26.12.2025',
endTime: '1045',
details: 'Remote-Monitoring eingerichtet. Warte auf Kunden-Feedback nach 24h Testphase. Alle Systeme laufen stabil.',
isComment: false,
createdAt: new Date(yesterday.getTime() - 48 * 60 * 60 * 1000).toISOString(),
$createdAt: new Date(yesterday.getTime() - 48 * 60 * 60 * 1000).toISOString()
},
{
$id: 'ws-10001-006',
wsid: '100006',
woid: '10001',
workorderId: 'dummy-10001',
employeeId: 'user-tom-id',
employeeName: 'Tom Klein',
employeeShort: 'TK',
serviceType: 'COMMENT',
oldStatus: 'Awaiting',
newStatus: 'Closed',
oldResponseLevel: 'Support',
newResponseLevel: 'Backoffice',
totalTime: 0,
startDate: '30.12.2025',
startTime: '0900',
endDate: '30.12.2025',
endTime: '0900',
details: 'Kunde bestätigt: Alle Systeme funktionieren einwandfrei. Problem vollständig behoben. Ticket kann geschlossen werden.',
isComment: true,
createdAt: now.toISOString(),
$createdAt: now.toISOString()
}
]
return {
ticket: dummyTicket,
worksheets: dummyWorksheets
}
}
/**
* Fügt das Dummy-Ticket zu den Demo-Daten hinzu
*/
export function addDummyTicketToDemo(workorders, worksheets) {
const { ticket, worksheets: ticketWorksheets } = createDummyTicket10001()
// Prüfe ob Ticket bereits existiert
const exists = workorders.some(wo => wo.woid === '10001')
if (exists) {
console.log('Dummy-Ticket 10001 existiert bereits')
return { workorders, worksheets }
}
return {
workorders: [ticket, ...workorders],
worksheets: [...ticketWorksheets, ...worksheets]
}
}