feat: Implement frontend production deployment and enhance admin dashboard functionality

backend/COMMON_ERRORS.md

@@ -1,131 +1,169 @@
-# Häufige Fehler und Lösungen
+# Häufige Fehler und Lösungen - Mercedes-Benz MYP Platform
 
-## API-Route-Fehler
+## JavaScript-Fehler
 
-### 1. Blueprint nicht registriert
-**Problem:** API-Blueprint wird nicht registriert, führt zu 404-Fehlern
-**Lösung:** Blueprint in app.py importieren und registrieren:
-```python
-from blueprints.api import api_bp
-app.register_blueprint(api_bp)
-```
+### 1. `animateCounters is not defined`
+**Problem:** Die Funktion `animateCounters` wird in `admin.js` aufgerufen, aber nicht definiert.
+**Lösung:** Funktion wurde hinzugefügt in `admin.js` mit Intersection Observer für bessere Performance.
 
-### 2. Fehlende CSRF-Token bei POST-Requests
-**Problem:** CSRF-Validierung schlägt fehl
-**Lösung:** CSRF-Token in Templates einbinden oder API-Routen von CSRF befreien
+### 2. `showPrinterModal is not defined`
+**Problem:** Die Funktion `showPrinterModal` wird aufgerufen, aber nicht definiert.
+**Lösung:** Vollständige Modal-Funktion mit Formular-Handling wurde hinzugefügt.
 
-### 3. Database Session nicht geschlossen
-**Problem:** Database connections leak
-**Lösung:** Immer try/finally verwenden:
-```python
-db_session = get_db_session()
-try:
-    # Database operations
-    pass
-finally:
-    db_session.close()
-```
+### 3. `JSON.parse: unexpected character at line 1 column 1`
+**Problem:** API-Aufrufe geben HTML statt JSON zurück (404-Fehler).
+**Ursache:** Frontend läuft auf Port 8443, Backend auf Port 5000.
+**Lösung:** Dynamische API-URL-Erkennung mit intelligentem Fallback implementiert.
 
-### 4. Fehlende Authentifizierung
-**Problem:** @login_required decorator fehlt
-**Lösung:** Alle geschützten Routen mit @login_required versehen
+## API-Fehler (404 NOT FOUND)
 
-### 5. Falsche JSON-Response-Struktur
-**Problem:** Frontend erwartet andere Datenstruktur
-**Lösung:** Konsistente API-Response-Struktur verwenden:
-```python
-return jsonify({
-    "success": True/False,
-    "data": {...},
-    "error": "error message" # nur bei Fehlern
-})
-```
+### 1. `/api/admin/stats/live` - 404 Fehler
+**Problem:** Live-Statistiken API gibt 404 zurück.
+**Ursache:** Port-Mismatch zwischen Frontend (8443) und Backend (5000).
+**Lösung:** 
+- Dynamische API-Base-URL-Erkennung implementiert
+- Automatischer Fallback von HTTPS:8443 zu HTTP:5000
+- Verbesserte Fehlerbehandlung in der Route
+- Sichere Admin-Berechtigung-Prüfung
 
-## Datenbankfehler
+### 2. `/api/admin/system/status` - 404 Fehler
+**Problem:** System-Status API gibt 404 zurück.
+**Lösung:**
+- Dynamische URL-Erkennung implementiert
+- Sichere psutil-Imports mit Fallback
+- Verbesserte Fehlerbehandlung
+- Graceful degradation wenn Systemüberwachung nicht verfügbar
 
-### 1. Relationship not loaded
-**Problem:** Lazy loading von Relationships
-**Lösung:** Eager loading verwenden:
-```python
-from sqlalchemy.orm import joinedload
-jobs = session.query(Job).options(joinedload(Job.user)).all()
-```
+### 3. `/api/admin/database/status` - 404 Fehler
+**Problem:** Datenbank-Status API gibt 404 zurück.
+**Lösung:**
+- Dynamische URL-Erkennung implementiert
+- Sichere Datenbankpfad-Erkennung
+- Verbesserte Verbindungstests
+- Fallback für fehlende Dateien
 
-### 2. Session closed before accessing relationships
-**Problem:** Zugriff auf Relationships nach Session.close()
-**Lösung:** Alle benötigten Daten vor Session.close() laden
+## Modal-Dialog Probleme
 
-## Logging-Fehler
+### 1. Automatische Weiterleitung zu 404-Seiten
+**Problem:** Modal-Formulare submitten automatisch und leiten zu nicht existierenden Routen weiter.
+**Ursache:** Fehlende `preventDefault()` in Form-Event-Handlers.
+**Lösung:**
+- `e.preventDefault()` zu allen Form-Submit-Handlers hinzugefügt
+- Explizite Event-Handler-Bindung statt onclick-Attribute
+- Verbesserte Modal-Schließung nach erfolgreichen Aktionen
 
-### 1. Logger nicht initialisiert
-**Problem:** Logging funktioniert nicht
-**Lösung:** Logger korrekt initialisieren:
-```python
-from utils.logging_config import get_logger
-logger = get_logger("component_name")
-```
+### 2. Modal öffnet und schließt sofort
+**Problem:** Modal-Dialoge erscheinen kurz und verschwinden dann.
+**Ursache:** Automatische Form-Submission ohne preventDefault.
+**Lösung:** Korrekte Event-Handler-Implementierung mit preventDefault.
 
-## File-Upload-Fehler
+## Port-Konfiguration Probleme
 
-### 1. Upload-Ordner existiert nicht
-**Problem:** FileNotFoundError beim Upload
-**Lösung:** Ordner erstellen:
-```python
-os.makedirs(upload_folder, exist_ok=True)
-```
+### 1. Server läuft auf Port 5000 statt 8443
+**Problem:** Logs zeigen Port 5000, aber Frontend erwartet 8443.
+**Ursache:** SSL-Konfiguration fehlgeschlagen, Fallback auf HTTP.
+**Lösung:**
+- Intelligente Port-Erkennung implementiert
+- Automatischer Fallback von HTTPS:8443 zu HTTP:5000
+- Dynamische API-Base-URL-Generierung
+- Detailliertes Logging der URL-Erkennung
 
-### 2. Unsichere Dateinamen
-**Problem:** Path traversal vulnerability
-**Lösung:** secure_filename() verwenden:
-```python
-from werkzeug.utils import secure_filename
-filename = secure_filename(file.filename)
-```
+### 2. Cross-Origin-Probleme
+**Problem:** CORS-Fehler bei API-Aufrufen zwischen verschiedenen Ports.
+**Lösung:** Dynamische URL-Erkennung verhindert Cross-Origin-Requests.
 
-## Frontend-Integration-Fehler
+### 3. Favicon 404-Fehler
+**Problem:** `/favicon.ico` gibt 404 zurück.
+**Lösung:** Route hinzugefügt die vorhandene PNG-Datei verwendet.
 
-### 1. CORS-Probleme
-**Problem:** Cross-Origin-Requests werden blockiert
-**Lösung:** CORS-Headers setzen oder Flask-CORS verwenden
+## Debugging-Strategien
 
-### 2. Inkonsistente API-Endpunkte
-**Problem:** Frontend ruft nicht existierende Endpunkte auf
-**Lösung:** Systematische Überprüfung aller Frontend-API-Calls
+### 1. Admin-API-Test-Route
+**Zweck:** Überprüfung ob Admin-API grundsätzlich funktioniert.
+**Route:** `/api/admin/test`
+**Verwendung:** Zeigt Benutzer-Status und Admin-Berechtigung an.
 
-### 3. Fehlende Error-Handling
-**Problem:** Frontend kann Fehler nicht verarbeiten
-**Lösung:** Konsistente Error-Response-Struktur implementieren
+### 2. Debug-Routen-Übersicht
+**Route:** `/debug/routes`
+**Zweck:** Zeigt alle registrierten Flask-Routen an.
 
-### 4. Admin-Dashboard-Fehler
-**Problem:** Admin-Dashboard API-Routen fehlen
-**Lösung:** Vollständige Admin-API implementieren:
-```python
-@app.route("/api/admin/users/create", methods=["POST"])
-@login_required
-def api_admin_create_user():
-    if not current_user.is_admin:
-        return jsonify({"error": "Keine Berechtigung"}), 403
-    # Implementation...
-```
+### 3. Verbesserte Fehlerbehandlung
+- Alle Admin-API-Routen haben jetzt try-catch-Blöcke
+- Detaillierte Fehlermeldungen
+- Graceful degradation bei fehlenden Abhängigkeiten
+- Intelligente URL-Erkennung mit Logging
 
-### 5. Fehlende Berechtigungsprüfung
-**Problem:** Admin-Routen ohne Berechtigungsprüfung
-**Lösung:** Immer Admin-Check einbauen:
-```python
-if not current_user.is_admin:
-    return jsonify({"error": "Keine Berechtigung"}), 403
-```
+### 4. URL-Debugging
+**Konsolen-Logs:** Alle API-Aufrufe loggen jetzt die verwendete URL
+**Port-Erkennung:** Detaillierte Informationen über erkannte Ports und Protokolle
+**Fallback-Mechanismus:** Automatische Umschaltung zwischen Ports
 
-## Performance-Probleme
+## Präventive Maßnahmen
 
-### 1. N+1 Query Problem
-**Problem:** Zu viele Datenbankabfragen
-**Lösung:** Eager loading oder batch loading verwenden
+### 1. JavaScript-Funktionen
+- Alle aufgerufenen Funktionen sind jetzt definiert
+- Fallback-Mechanismen für fehlende Elemente
+- Bessere Fehlerbehandlung in Event-Listenern
+- Korrekte Form-Event-Handler mit preventDefault
 
-### 2. Fehlende Indizes
-**Problem:** Langsame Datenbankabfragen
-**Lösung:** Indizes auf häufig abgefragte Spalten erstellen
+### 2. API-Routen
+- Konsistente Admin-Berechtigung-Prüfung
+- Sichere Datenbankzugriffe mit finally-Blöcken
+- Fallback-Werte für alle Statistiken
+- Dynamische URL-Erkennung für alle API-Aufrufe
 
-### 3. Große Response-Größen
-**Problem:** Langsame API-Responses
-**Lösung:** Pagination und Feldfilterung implementieren 
+### 3. Template-Handling
+- Alle Admin-Templates existieren
+- Korrekte Template-Pfade
+- Fehlerbehandlung für fehlende Templates
+
+### 4. Port-Management
+- Intelligente Port-Erkennung
+- Automatische Fallback-Mechanismen
+- Cross-Origin-Problem-Vermeidung
+- Detailliertes URL-Logging
+
+## Aktuelle Status
+
+✅ **Behoben:**
+- `animateCounters` Funktion hinzugefügt
+- `showPrinterModal` Funktion implementiert
+- Admin-API-Routen verbessert
+- Favicon-Route hinzugefügt
+- Fehlerbehandlung verstärkt
+- **Dynamische API-URL-Erkennung implementiert**
+- **Modal-Dialog preventDefault-Problem behoben**
+- **Port-Mismatch-Problem gelöst**
+- **JSON-Parse-Fehler behoben**
+
+🔄 **In Bearbeitung:**
+- SSL-Konfiguration optimieren
+- Live-Updates stabilisieren
+
+⚠️ **Zu überwachen:**
+- Admin-Berechtigung-Prüfung
+- Datenbankverbindung-Stabilität
+- JavaScript-Performance bei Animationen
+- **API-URL-Fallback-Mechanismus**
+
+## Nächste Schritte
+
+1. **Server-Neustart testen** - Die Port-Erkennung sollte jetzt funktionieren
+2. **Admin-Dashboard-Funktionalität verifizieren** - Alle Modals sollten funktionieren
+3. **Live-Updates überwachen** - API-Aufrufe sollten erfolgreich sein
+4. SSL-Konfiguration finalisieren
+5. Performance-Optimierungen implementieren
+
+## Technische Details
+
+### Port-Erkennung-Algorithmus
+1. **Gleicher Port:** Wenn Frontend und Backend auf gleichem Port → relative URLs
+2. **HTTPS:8443 → HTTP:5000:** Automatischer Fallback für häufigsten Fall
+3. **Andere Ports:** Standard-Backend-Port basierend auf Protokoll
+4. **Logging:** Alle Entscheidungen werden in der Konsole geloggt
+
+### Modal-Dialog-Fixes
+- `e.preventDefault()` in allen Form-Submit-Handlers
+- Explizite Event-Listener statt onclick-Attribute
+- Korrekte Modal-Schließung nach erfolgreichen API-Aufrufen
+- Verbesserte Fehlerbehandlung mit Benutzer-Feedback