feat: Implement frontend production deployment and enhance admin dashboard functionality

myp_installer.sh

@@ -431,6 +431,147 @@ install_frontend() {
   read -p "Drücken Sie ENTER, um fortzufahren..."
 }
 
+# Frontend Produktions-Deployment
+deploy_frontend_production() {
+  show_header "Frontend Produktions-Deployment"
+  
+  echo -e "${BLUE}MYP Frontend für Produktion deployen (Port 80/443 mit SSL)${NC}"
+  echo ""
+  
+  # Docker prüfen
+  if ! check_command docker; then
+    echo -e "${RED}✗ Docker nicht gefunden. Bitte installieren Sie Docker${NC}"
+    read -p "Drücken Sie ENTER, um fortzufahren..."
+    return 1
+  fi
+  
+  if ! check_command docker-compose; then
+    echo -e "${RED}✗ Docker Compose nicht gefunden. Bitte installieren Sie Docker Compose${NC}"
+    read -p "Drücken Sie ENTER, um fortzufahren..."
+    return 1
+  fi
+  
+  echo -e "${GREEN}✓ Docker gefunden${NC}"
+  echo -e "${GREEN}✓ Docker Compose gefunden${NC}"
+  
+  # Frontend-Verzeichnis prüfen
+  if [ ! -d "$FRONTEND_DIR" ]; then
+    echo -e "${RED}✗ Frontend-Verzeichnis nicht gefunden: $FRONTEND_DIR${NC}"
+    read -p "Drücken Sie ENTER, um fortzufahren..."
+    return 1
+  fi
+  
+  cd "$FRONTEND_DIR"
+  
+  # Produktions-Konfiguration prüfen
+  if [ ! -f "docker-compose.production.yml" ]; then
+    echo -e "${RED}✗ Produktions-Konfiguration nicht gefunden: docker-compose.production.yml${NC}"
+    echo -e "${YELLOW}Bitte stellen Sie sicher, dass die Produktions-Konfiguration vorhanden ist.${NC}"
+    read -p "Drücken Sie ENTER, um fortzufahren..."
+    return 1
+  fi
+  
+  echo -e "${GREEN}✓ Produktions-Konfiguration gefunden${NC}"
+  
+  # SSL-Zertifikate-Verzeichnis erstellen
+  echo -e "${BLUE}1. SSL-Zertifikate-Verzeichnis erstellen...${NC}"
+  mkdir -p "./certs"
+  echo -e "${GREEN}✓ Zertifikate-Verzeichnis erstellt${NC}"
+  
+  # Alte Container stoppen
+  echo -e "${BLUE}2. Alte Container stoppen...${NC}"
+  exec_command "docker-compose -f docker-compose.production.yml down" "Alte Container stoppen" "true"
+  
+  # Backend-URL konfigurieren
+  echo -e "${BLUE}3. Backend-URL konfigurieren...${NC}"
+  echo -e "${WHITE}Aktuelle Backend-URLs:${NC}"
+  echo -e "${WHITE}1. Raspberry Pi (raspberrypi:443) [Standard]${NC}"
+  echo -e "${WHITE}2. Lokales Backend (localhost:443)${NC}"
+  echo -e "${WHITE}3. Benutzerdefinierte URL${NC}"
+  
+  read -p "Wählen Sie eine Option (1-3, Standard: 1): " backend_choice
+  
+  backend_url="https://raspberrypi:443"
+  
+  case $backend_choice in
+    2)
+      backend_url="https://localhost:443"
+      ;;
+    3)
+      read -p "Geben Sie die Backend-URL ein (z.B. https://192.168.1.100:443): " custom_url
+      if [ -n "$custom_url" ]; then
+        backend_url="$custom_url"
+      fi
+      ;;
+    *)
+      backend_url="https://raspberrypi:443"
+      ;;
+  esac
+  
+  echo -e "${GREEN}✓ Backend-URL konfiguriert: $backend_url${NC}"
+  
+  # Container bauen und starten
+  echo -e "${BLUE}4. Frontend-Container bauen und starten...${NC}"
+  echo -e "${YELLOW}Dies kann einige Minuten dauern...${NC}"
+  
+  # Environment-Variablen für Backend-URL setzen
+  export NEXT_PUBLIC_API_URL="$backend_url"
+  export NEXT_PUBLIC_BACKEND_HOST="${backend_url#https://}"
+  
+  exec_command "docker-compose -f docker-compose.production.yml up --build -d" "Frontend-Container starten"
+  
+  if [ $? -eq 0 ]; then
+    # Kurz warten und Status prüfen
+    echo -e "${BLUE}5. Container-Status prüfen...${NC}"
+    sleep 5
+    
+    container_status=$(docker-compose -f docker-compose.production.yml ps --services --filter "status=running")
+    
+    if [ -n "$container_status" ]; then
+      echo -e "${GREEN}✓ Container erfolgreich gestartet!${NC}"
+      
+      # Container-Details anzeigen
+      echo ""
+      echo -e "${BLUE}Container Status:${NC}"
+      docker-compose -f docker-compose.production.yml ps
+      
+      echo ""
+      echo -e "${GREEN}✅ Frontend Produktions-Deployment erfolgreich abgeschlossen!${NC}"
+      echo ""
+      echo -e "${BLUE}🌐 Frontend ist verfügbar unter:${NC}"
+      echo -e "${WHITE}   - HTTP:  http://localhost:80${NC}"
+      echo -e "${WHITE}   - HTTPS: https://localhost:443${NC}"
+      echo ""
+      echo -e "${BLUE}🔧 Backend-Verbindung:${NC}"
+      echo -e "${WHITE}   - Backend: $backend_url${NC}"
+      echo ""
+      echo -e "${BLUE}📋 Nützliche Befehle:${NC}"
+      echo -e "${WHITE}   - Logs anzeigen: docker-compose -f docker-compose.production.yml logs -f${NC}"
+      echo -e "${WHITE}   - Container stoppen: docker-compose -f docker-compose.production.yml down${NC}"
+      echo -e "${WHITE}   - Container neustarten: docker-compose -f docker-compose.production.yml restart${NC}"
+      echo ""
+      echo -e "${BLUE}🔒 SSL-Hinweise:${NC}"
+      echo -e "${WHITE}   - Caddy generiert automatisch selbstsignierte Zertifikate${NC}"
+      echo -e "${WHITE}   - Zertifikate werden in ./certs/ gespeichert${NC}"
+      echo -e "${WHITE}   - Für Produktion: Browser-Warnung bei selbstsignierten Zertifikaten acceptieren${NC}"
+      
+    else
+      echo -e "${RED}✗ Container konnten nicht gestartet werden${NC}"
+      echo -e "${YELLOW}Logs anzeigen:${NC}"
+      docker-compose -f docker-compose.production.yml logs
+      return 1
+    fi
+  else
+    echo -e "${RED}✗ Fehler beim Starten der Container${NC}"
+    return 1
+  fi
+  
+  cd "$PROJECT_DIR"
+  
+  echo ""
+  read -p "Drücken Sie ENTER, um fortzufahren..."
+}
+
 # Kiosk-Modus installieren
 install_kiosk_mode() {
   show_header "Kiosk-Modus Installation"
@@ -971,10 +1112,11 @@ start_application() {
   echo -e "${WHITE}2. Frontend-Server starten (Next.js)${NC}"
   echo -e "${WHITE}3. Kiosk-Modus starten (Backend Web Interface)${NC}"
   echo -e "${WHITE}4. Beide Server starten (Backend + Frontend)${NC}"
-  echo -e "${WHITE}5. Debug-Server starten${NC}"
-  echo -e "${WHITE}6. Zurück zum Hauptmenü${NC}"
+  echo -e "${WHITE}5. Frontend Produktions-Deployment (Port 80/443 mit SSL)${NC}"
+  echo -e "${WHITE}6. Debug-Server starten${NC}"
+  echo -e "${WHITE}7. Zurück zum Hauptmenü${NC}"
   
-  read -p "Wählen Sie eine Option (1-6): " choice
+  read -p "Wählen Sie eine Option (1-7): " choice
   
   case $choice in
     1)
@@ -1030,9 +1172,12 @@ start_application() {
       fi
       ;;
     5)
-      start_debug_server
+      deploy_frontend_production
       ;;
     6)
+      start_debug_server
+      ;;
+    7)
       return
       ;;
     *)
@@ -1429,33 +1574,34 @@ show_installation_menu() {
   echo -e "${WHITE}3.  Backend installieren (Flask API)${NC}"
   echo -e "${WHITE}4.  Frontend installieren (Next.js React)${NC}"
   echo -e "${WHITE}5.  Kiosk-Modus installieren (Backend Web Interface)${NC}"
+  echo -e "${WHITE}6.  Frontend Produktions-Deployment (Port 80/443 mit SSL)${NC}"
   echo ""
   echo -e "${WHITE}🎯 VOLLINSTALLATIONEN:${NC}"
-  echo -e "${WHITE}6.  Alles installieren (Backend + Frontend)${NC}"
-  echo -e "${WHITE}7.  Produktions-Setup (Backend + Kiosk)${NC}"
-  echo -e "${WHITE}8.  Entwicklungs-Setup (Backend + Frontend + Tools)${NC}"
+  echo -e "${WHITE}7.  Alles installieren (Backend + Frontend)${NC}"
+  echo -e "${WHITE}8.  Produktions-Setup (Backend + Kiosk)${NC}"
+  echo -e "${WHITE}9.  Entwicklungs-Setup (Backend + Frontend + Tools)${NC}"
   echo ""
   echo -e "${WHITE}⚙️  KONFIGURATION:${NC}"
-  echo -e "${WHITE}9.  SSL-Zertifikate erstellen${NC}"
-  echo -e "${WHITE}10. Host-Konfiguration einrichten${NC}"
-  echo -e "${WHITE}11. Backend-URL konfigurieren${NC}"
+  echo -e "${WHITE}10. SSL-Zertifikate erstellen${NC}"
+  echo -e "${WHITE}11. Host-Konfiguration einrichten${NC}"
+  echo -e "${WHITE}12. Backend-URL konfigurieren${NC}"
   echo ""
   echo -e "${WHITE}🔍 SYSTEM & TESTS:${NC}"
-  echo -e "${WHITE}12. Systemvoraussetzungen prüfen${NC}"
-  echo -e "${WHITE}13. Backend-Verbindung testen${NC}"
-  echo -e "${WHITE}14. SSL-Status anzeigen${NC}"
+  echo -e "${WHITE}13. Systemvoraussetzungen prüfen${NC}"
+  echo -e "${WHITE}14. Backend-Verbindung testen${NC}"
+  echo -e "${WHITE}15. SSL-Status anzeigen${NC}"
   echo ""
   echo -e "${WHITE}🚀 ANWENDUNG STARTEN:${NC}"
-  echo -e "${WHITE}15. Server starten (Backend/Frontend/Kiosk)${NC}"
+  echo -e "${WHITE}16. Server starten (Backend/Frontend/Kiosk)${NC}"
   echo ""
   echo -e "${WHITE}ℹ️  SONSTIGES:${NC}"
-  echo -e "${WHITE}16. Projekt-Informationen${NC}"
-  echo -e "${WHITE}17. Alte Dateien bereinigen${NC}"
-  echo -e "${WHITE}18. Zurück zum Hauptmenü${NC}"
+  echo -e "${WHITE}17. Projekt-Informationen${NC}"
+  echo -e "${WHITE}18. Alte Dateien bereinigen${NC}"
+  echo -e "${WHITE}19. Zurück zum Hauptmenü${NC}"
   echo -e "${WHITE}0.  Beenden${NC}"
   echo ""
   
-  read -p "Wählen Sie eine Option (0-18): " choice
+  read -p "Wählen Sie eine Option (0-19): " choice
   
   case $choice in
     1)
@@ -1479,54 +1625,57 @@ show_installation_menu() {
       show_installation_menu
       ;;
     6)
-      install_everything
+      deploy_frontend_production
       show_installation_menu
       ;;
     7)
-      install_production_setup
+      install_everything
       show_installation_menu
       ;;
     8)
-      install_development_setup
+      install_production_setup
       show_installation_menu
       ;;
     9)
-      create_ssl_certificates
+      install_development_setup
       show_installation_menu
       ;;
     10)
-      setup_hosts
+      install_development_setup
       show_installation_menu
       ;;
     11)
-      setup_backend_url
+      setup_hosts
       show_installation_menu
       ;;
     12)
-      test_dependencies
+      setup_backend_url
       show_installation_menu
       ;;
     13)
-      test_backend_connection
+      test_dependencies
       show_installation_menu
       ;;
     14)
-      show_ssl_status
+      test_backend_connection
       show_installation_menu
       ;;
     15)
-      start_application
+      show_ssl_status
       show_installation_menu
       ;;
     16)
+      start_application
+      ;;
+    17)
       show_project_info
       show_installation_menu
       ;;
-    17)
+    18)
       clean_old_files
       show_installation_menu
       ;;
-    18)
+    19)
       show_main_menu
       ;;
     0)