Refactor CityProfile and PlayerProfile components for improved data fetching and error handling; add NPC management modals for banner, gallery, and logo with enhanced user experience and error feedback.

components/Layout.tsx

@@ -34,6 +34,10 @@ const NavItem = ({
 const Layout: React.FC<LayoutProps> = ({ children, activeTab, onNavigate }) => {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   const [user, setUser] = useState<DiscordUser | null>(null);
+  const [rememberMe, setRememberMe] = useState(() => {
+    // Load remember me preference from localStorage
+    return localStorage.getItem('rememberMe') === 'true';
+  });
 
   useEffect(() => {
     // Subscribe to auth changes
@@ -151,13 +155,28 @@ const Layout: React.FC<LayoutProps> = ({ children, activeTab, onNavigate }) => {
                           </button>
                         </div>
                       ) : (
-                        <button
-                          onClick={() => authService.login()}
-                          className="flex items-center gap-2 text-textMain hover:text-accentInfo transition-colors font-medium"
-                        >
-                          <Icons.Users className="w-4 h-4" />
-                          <span>Discord Login</span>
-                        </button>
+                        <div className="flex items-center gap-2">
+                          <button
+                            onClick={() => authService.login(rememberMe)}
+                            className="flex items-center gap-2 text-textMain hover:text-accentInfo transition-colors font-medium text-sm"
+                          >
+                            <Icons.Users className="w-4 h-4" />
+                            <span>Discord Login</span>
+                          </button>
+                          <label className="flex items-center gap-1 text-xs text-textMuted cursor-pointer">
+                            <input
+                              type="checkbox"
+                              checked={rememberMe}
+                              onChange={(e) => {
+                                setRememberMe(e.target.checked);
+                                // Store preference for next login
+                                localStorage.setItem('rememberMe', e.target.checked.toString());
+                              }}
+                              className="w-3 h-3 text-accentInfo bg-surface border-border rounded focus:ring-accentInfo"
+                            />
+                            <span>Remember me (30 days)</span>
+                          </label>
+                        </div>
                       )}
                   </div>
 

components/NpcBannerManagementModal.tsx

@@ -0,0 +1,285 @@
+import React, { useState, useEffect } from 'react';
+import { Icons } from './IconSet';
+
+interface NpcBannerManagementModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  projectId: string;
+  currentBannerUrl: string;
+  onUpdate: () => void;
+}
+
+const NpcBannerManagementModal: React.FC<NpcBannerManagementModalProps> = ({
+  isOpen,
+  onClose,
+  projectId,
+  currentBannerUrl,
+  onUpdate
+}) => {
+  const [bannerUrl, setBannerUrl] = useState(currentBannerUrl);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [previewLoading, setPreviewLoading] = useState(false);
+
+  useEffect(() => {
+    if (isOpen) {
+      setBannerUrl(currentBannerUrl);
+      setError(null);
+    }
+  }, [isOpen, currentBannerUrl]);
+
+  const updateBanner = async () => {
+    if (!bannerUrl.trim()) {
+      setError('Banner-URL ist erforderlich');
+      return;
+    }
+
+    try {
+      setLoading(true);
+      setError(null);
+
+      const response = await fetch(`https://vollidioten.ceraticsoft.de/api/projects/${projectId}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({ bannerUrl: bannerUrl.trim() })
+      });
+
+      if (response.ok) {
+        onUpdate();
+        onClose();
+      } else {
+        const errorData = await response.json();
+        setError(errorData.error || 'Fehler beim Aktualisieren des Banners');
+      }
+    } catch (err) {
+      console.error('Error updating banner:', err);
+      setError('Netzwerkfehler');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleImageLoad = () => {
+    setPreviewLoading(false);
+  };
+
+  const handleImageError = () => {
+    setPreviewLoading(false);
+    setError('Bild konnte nicht geladen werden');
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm animate-in fade-in duration-200">
+      <div className="bg-surface border border-border rounded-xl w-full max-w-2xl shadow-2xl flex flex-col max-h-[90vh]">
+        <div className="p-4 border-b border-border flex justify-between items-center bg-surfaceHighlight/20">
+          <h3 className="font-bold text-textMain flex items-center gap-2">
+            <Icons.Layers className="w-5 h-5" />
+            NPC-Banner bearbeiten
+          </h3>
+          <button onClick={onClose} className="text-textMuted hover:text-white transition-colors text-xl leading-none">&times;</button>
+        </div>
+
+        <div className="p-6 flex-1 overflow-y-auto">
+          {error && (
+            <div className="bg-red-500/10 border border-red-500/20 rounded-lg p-4 mb-6">
+              <p className="text-red-400">{error}</p>
+            </div>
+          )}
+
+          {/* Current Banner Preview */}
+          <div className="mb-6">
+            <h4 className="font-semibold text-textMain mb-3">Aktuelles Banner</h4>
+            <div className="relative h-32 rounded-lg overflow-hidden border border-border bg-surfaceHighlight/30">
+              {currentBannerUrl ? (
+                <>
+                  {previewLoading && (
+                    <div className="absolute inset-0 flex items-center justify-center">
+                      <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-accentInfo"></div>
+                    </div>
+                  )}
+                  <img
+                    src={currentBannerUrl}
+                    alt="Current banner"
+                    className="w-full h-full object-cover"
+                    onLoad={handleImageLoad}
+                    onError={handleImageError}
+                  />
+                </>
+              ) : (
+                <div className="w-full h-full flex items-center justify-center text-textMuted">
+                  <Icons.Layers className="w-8 h-8" />
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Banner URL Input */}
+          <div className="mb-6">
+            <h4 className="font-semibold text-textMain mb-3">Neue Banner-URL</h4>
+            <input
+              type="url"
+              value={bannerUrl}
+              onChange={(e) => setBannerUrl(e.target.value)}
+              placeholder="https://example.com/banner-image.jpg"
+              className="w-full bg-[#0b0b0d] border border-border rounded p-3 text-sm"
+            />
+            <p className="text-xs text-textMuted mt-2">
+              Geben Sie eine direkte URL zu einem Bild ein. Empfohlene Größe: 1200x400 Pixel oder größer.
+            </p>
+          </div>
+
+          {/* File Upload */}
+          <div className="mb-6">
+            <h4 className="font-semibold text-textMain mb-3">Oder Bild hochladen</h4>
+            <div className="border-2 border-dashed border-border rounded-lg p-6 text-center hover:border-accentInfo/50 transition-colors">
+              <input
+                type="file"
+                accept="image/*"
+                onChange={async (e) => {
+                  const file = e.target.files?.[0];
+                  if (!file) return;
+
+                  const formData = new FormData();
+                  formData.append('banner', file);
+
+                  try {
+                    setLoading(true);
+                    setError(null);
+
+                    const response = await fetch(`https://vollidioten.ceraticsoft.de/api/admin/npc-companies/${projectId}/banner/upload`, {
+                      method: 'POST',
+                      credentials: 'include',
+                      body: formData
+                    });
+
+                    if (response.ok) {
+                      const data = await response.json();
+                      setBannerUrl(data.bannerUrl);
+                      onUpdate();
+                      onClose();
+                    } else {
+                      const errorData = await response.json();
+                      setError(errorData.error || 'Fehler beim Hochladen');
+                    }
+                  } catch (err) {
+                    console.error('Error uploading banner:', err);
+                    setError('Netzwerkfehler beim Hochladen');
+                  } finally {
+                    setLoading(false);
+                  }
+                }}
+                className="hidden"
+                id="npc-banner-upload"
+              />
+              <label htmlFor="npc-banner-upload" className="cursor-pointer">
+                <div className="w-12 h-12 mx-auto mb-4 bg-surfaceHighlight rounded-full flex items-center justify-center">
+                  <svg className="w-6 h-6 text-accentInfo" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
+                  </svg>
+                </div>
+                <p className="text-sm text-textMain font-medium">Bild auswählen</p>
+                <p className="text-xs text-textMuted mt-1">Max. 10MB, nur Bilddateien</p>
+              </label>
+            </div>
+          </div>
+
+          {/* Preview */}
+          {bannerUrl && bannerUrl !== currentBannerUrl && (
+            <div className="mb-6">
+              <h4 className="font-semibold text-textMain mb-3">Vorschau</h4>
+              <div className="relative h-32 rounded-lg overflow-hidden border border-border bg-surfaceHighlight/30">
+                <img
+                  src={bannerUrl}
+                  alt="Banner preview"
+                  className="w-full h-full object-cover"
+                  onError={() => setError('Vorschau-Bild konnte nicht geladen werden')}
+                />
+              </div>
+            </div>
+          )}
+
+          {/* Common Banner Suggestions */}
+          <div className="mb-6">
+            <h4 className="font-semibold text-textMain mb-3">Beispiele</h4>
+            <div className="grid grid-cols-2 gap-2 text-xs">
+              <button
+                onClick={() => setBannerUrl('https://images.unsplash.com/photo-1449824913935-59a10b8d2000?q=80&w=1200&auto=format&fit=crop')}
+                className="p-2 bg-surfaceHighlight/50 rounded hover:bg-surfaceHighlight transition-colors text-left"
+              >
+                <div className="font-medium">Berglandschaft</div>
+                <div className="text-textMuted truncate">Unsplash</div>
+              </button>
+              <button
+                onClick={() => setBannerUrl('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?q=80&w=1200&auto=format&fit=crop')}
+                className="p-2 bg-surfaceHighlight/50 rounded hover:bg-surfaceHighlight transition-colors text-left"
+              >
+                <div className="font-medium">Stadt bei Nacht</div>
+                <div className="text-textMuted truncate">Unsplash</div>
+              </button>
+              <button
+                onClick={() => setBannerUrl('https://images.unsplash.com/photo-1542601906990-b4d3fb778b09?q=80&w=1200&auto=format&fit=crop')}
+                className="p-2 bg-surfaceHighlight/50 rounded hover:bg-surfaceHighlight transition-colors text-left"
+              >
+                <div className="font-medium">Architektur</div>
+                <div className="text-textMuted truncate">Unsplash</div>
+              </button>
+              <button
+                onClick={() => setBannerUrl('https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1200&auto=format&fit=crop')}
+                className="p-2 bg-surfaceHighlight/50 rounded hover:bg-surfaceHighlight transition-colors text-left"
+              >
+                <div className="font-medium">Abstrakt</div>
+                <div className="text-textMuted truncate">Unsplash</div>
+              </button>
+            </div>
+          </div>
+
+          {/* Info */}
+          <div className="bg-blue-500/10 border border-blue-500/20 rounded-lg p-4">
+            <div className="flex items-start gap-3">
+              <Icons.Terminal className="w-5 h-5 text-blue-400 mt-0.5" />
+              <div>
+                <h4 className="text-sm font-medium text-blue-400 mb-1">Banner-Empfehlungen</h4>
+                <ul className="text-xs text-blue-300 space-y-1">
+                  <li>• Verwenden Sie hochwertige Bilder mit 16:9 Seitenverhältnis</li>
+                  <li>• Stellen Sie sicher, dass die Bilder öffentlich zugänglich sind</li>
+                  <li>• Dunklere Bilder funktionieren oft besser mit dem Text-Overlay</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="p-4 border-t border-border flex justify-end gap-3">
+          <button
+            onClick={onClose}
+            className="px-4 py-2 text-sm font-medium text-textMuted hover:text-white transition-colors"
+          >
+            Abbrechen
+          </button>
+          <button
+            onClick={updateBanner}
+            disabled={loading || !bannerUrl.trim() || bannerUrl === currentBannerUrl}
+            className="px-6 py-2 text-sm font-medium bg-orange-500 hover:bg-orange-600 disabled:opacity-50 disabled:cursor-not-allowed text-white rounded transition-colors flex items-center gap-2"
+          >
+            {loading ? (
+              <>
+                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
+                Aktualisiere...
+              </>
+            ) : (
+              <>
+                <Icons.Layers className="w-4 h-4" />
+                Banner aktualisieren
+              </>
+            )}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default NpcBannerManagementModal;

components/NpcGalleryManagementModal.tsx

@@ -0,0 +1,271 @@
+import React, { useState, useEffect } from 'react';
+import { Icons } from './IconSet';
+
+interface GalleryImage {
+  id: string;
+  url: string;
+}
+
+interface NpcGalleryManagementModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  projectId: string;
+  onUpdate: () => void;
+}
+
+const NpcGalleryManagementModal: React.FC<NpcGalleryManagementModalProps> = ({
+  isOpen,
+  onClose,
+  projectId,
+  onUpdate
+}) => {
+  const [images, setImages] = useState<GalleryImage[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [imageUrl, setImageUrl] = useState('');
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (isOpen && projectId) {
+      loadGallery();
+    }
+  }, [isOpen, projectId]);
+
+  const loadGallery = async () => {
+    try {
+      setLoading(true);
+      const response = await fetch(`https://vollidioten.ceraticsoft.de/api/projects/${projectId}/gallery`);
+      if (response.ok) {
+        const data = await response.json();
+        setImages(data);
+      } else {
+        setError('Fehler beim Laden der Galerie');
+      }
+    } catch (err) {
+      console.error('Error loading gallery:', err);
+      setError('Netzwerkfehler');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const addImage = async () => {
+    if (!imageUrl.trim()) return;
+
+    try {
+      setLoading(true);
+      setError(null);
+
+      const response = await fetch(`https://vollidioten.ceraticsoft.de/api/projects/${projectId}/gallery`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({ imageUrl: imageUrl.trim() })
+      });
+
+      if (response.ok) {
+        await loadGallery();
+        setImageUrl('');
+        onUpdate();
+      } else {
+        const errorData = await response.json();
+        setError(errorData.error || 'Fehler beim Hinzufügen');
+      }
+    } catch (err) {
+      console.error('Error adding image:', err);
+      setError('Netzwerkfehler');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const removeImage = async (imageId: string) => {
+    try {
+      setLoading(true);
+      const response = await fetch(`https://vollidioten.ceraticsoft.de/api/projects/${projectId}/gallery/${imageId}`, {
+        method: 'DELETE',
+        credentials: 'include'
+      });
+
+      if (response.ok) {
+        await loadGallery();
+        onUpdate();
+      } else {
+        setError('Fehler beim Löschen');
+      }
+    } catch (err) {
+      console.error('Error removing image:', err);
+      setError('Netzwerkfehler');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm animate-in fade-in duration-200">
+      <div className="bg-surface border border-border rounded-xl w-full max-w-4xl shadow-2xl flex flex-col max-h-[90vh]">
+        <div className="p-4 border-b border-border flex justify-between items-center bg-surfaceHighlight/20">
+          <h3 className="font-bold text-textMain flex items-center gap-2">
+            <Icons.Layers className="w-5 h-5" />
+            NPC-Portfolio verwalten
+          </h3>
+          <button onClick={onClose} className="text-textMuted hover:text-white transition-colors text-xl leading-none">&times;</button>
+        </div>
+
+        <div className="p-6 flex-1 overflow-y-auto">
+          {error && (
+            <div className="bg-red-500/10 border border-red-500/20 rounded-lg p-4 mb-6">
+              <p className="text-red-400">{error}</p>
+            </div>
+          )}
+
+          {/* Add Image */}
+          <div className="bg-surfaceHighlight/30 border border-border rounded-lg p-4 mb-6">
+            <h4 className="font-semibold text-textMain mb-4">Bild hinzufügen</h4>
+
+            {/* URL Input */}
+            <div className="flex gap-2 mb-4">
+              <input
+                type="url"
+                value={imageUrl}
+                onChange={(e) => setImageUrl(e.target.value)}
+                placeholder="Bild-URL eingeben..."
+                className="flex-1 bg-[#0b0b0d] border border-border rounded p-2 text-sm"
+              />
+              <button
+                onClick={addImage}
+                disabled={!imageUrl.trim() || loading}
+                className="bg-accentInfo hover:bg-accentInfo/90 disabled:opacity-50 text-white px-4 py-2 rounded text-sm font-medium"
+              >
+                Hinzufügen
+              </button>
+            </div>
+            <p className="text-xs text-textMuted mb-4">
+              Geben Sie eine direkte URL zu einem Bild ein (z.B. von Imgur, Discord, etc.)
+            </p>
+
+            {/* File Upload */}
+            <div className="border-t border-border pt-4">
+              <div className="border-2 border-dashed border-border rounded-lg p-4 text-center hover:border-accentInfo/50 transition-colors">
+                <input
+                  type="file"
+                  accept="image/*"
+                  multiple
+                  onChange={async (e) => {
+                    const files = e.target.files as FileList;
+                    if (!files || files.length === 0) return;
+
+                    try {
+                      setLoading(true);
+                      setError(null);
+
+                      // Upload each file
+                      const fileArray = Array.from(files) as File[];
+                      for (const file of fileArray) {
+                        const formData = new FormData();
+                        formData.append('gallery', file);
+
+                        const response = await fetch(`https://vollidioten.ceraticsoft.de/api/admin/npc-companies/${projectId}/gallery/upload`, {
+                          method: 'POST',
+                          credentials: 'include',
+                          body: formData
+                        });
+
+                        if (!response.ok) {
+                          const errorData = await response.json();
+                          setError(errorData.error || `Fehler beim Hochladen von ${file.name}`);
+                          break;
+                        }
+                      }
+
+                      // Reload gallery after all uploads
+                      await loadGallery();
+
+                    } catch (err) {
+                      console.error('Error uploading images:', err);
+                      setError('Netzwerkfehler beim Hochladen');
+                    } finally {
+                      setLoading(false);
+                    }
+                  }}
+                  className="hidden"
+                  id="npc-gallery-upload"
+                />
+                <label htmlFor="npc-gallery-upload" className="cursor-pointer">
+                  <div className="w-10 h-10 mx-auto mb-3 bg-surfaceHighlight rounded-full flex items-center justify-center">
+                    <svg className="w-5 h-5 text-accentInfo" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
+                    </svg>
+                  </div>
+                  <p className="text-sm text-textMain font-medium">Bilder auswählen</p>
+                  <p className="text-xs text-textMuted mt-1">Max. 10MB pro Bild, Mehrfachauswahl möglich</p>
+                </label>
+              </div>
+            </div>
+          </div>
+
+          {/* Gallery Grid */}
+          <div className="mb-4">
+            <h4 className="font-semibold text-textMain mb-4">
+              Portfolio-Bilder ({images.length})
+            </h4>
+
+            {loading ? (
+              <div className="flex justify-center py-8">
+                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-accentInfo"></div>
+              </div>
+            ) : images.length === 0 ? (
+              <div className="text-center py-8 text-textMuted">
+                <p>Noch keine Bilder im Portfolio.</p>
+                <p className="text-sm mt-2">Fügen Sie Bilder hinzu, um das Portfolio Ihrer NPC-Firma zu füllen.</p>
+              </div>
+            ) : (
+              <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+                {images.map((image, index) => (
+                  <div key={image.id} className="relative group">
+                    <div className="aspect-square rounded-lg overflow-hidden border border-border bg-surfaceHighlight/30">
+                      <img
+                        src={image.url}
+                        alt={`Portfolio ${index + 1}`}
+                        className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
+                        onError={(e) => {
+                          const target = e.target as HTMLImageElement;
+                          target.src = 'https://via.placeholder.com/200x200/374151/6b7280?text=Bild+fehlerhaft';
+                        }}
+                      />
+                    </div>
+
+                    {/* Delete Button */}
+                    <button
+                      onClick={() => removeImage(image.id)}
+                      disabled={loading}
+                      className="absolute top-2 right-2 bg-red-500 hover:bg-red-600 text-white rounded-full w-6 h-6 flex items-center justify-center text-xs opacity-0 group-hover:opacity-100 transition-opacity"
+                      title="Bild entfernen"
+                    >
+                      ×
+                    </button>
+
+                    {/* Overlay on hover */}
+                    <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors rounded-lg pointer-events-none" />
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div className="p-4 border-t border-border flex justify-end">
+          <button
+            onClick={onClose}
+            className="px-4 py-2 text-sm font-medium text-textMuted hover:text-white transition-colors"
+          >
+            Schließen
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default NpcGalleryManagementModal;

components/NpcLogoManagementModal.tsx

@@ -0,0 +1,285 @@
+import React, { useState, useEffect } from 'react';
+import { Icons } from './IconSet';
+
+interface NpcLogoManagementModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  projectId: string;
+  currentLogoUrl: string;
+  onUpdate: () => void;
+}
+
+const NpcLogoManagementModal: React.FC<NpcLogoManagementModalProps> = ({
+  isOpen,
+  onClose,
+  projectId,
+  currentLogoUrl,
+  onUpdate
+}) => {
+  const [logoUrl, setLogoUrl] = useState(currentLogoUrl);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [previewLoading, setPreviewLoading] = useState(false);
+
+  useEffect(() => {
+    if (isOpen) {
+      setLogoUrl(currentLogoUrl);
+      setError(null);
+    }
+  }, [isOpen, currentLogoUrl]);
+
+  const updateLogo = async () => {
+    if (!logoUrl.trim()) {
+      setError('Logo-URL ist erforderlich');
+      return;
+    }
+
+    try {
+      setLoading(true);
+      setError(null);
+
+      const response = await fetch(`https://vollidioten.ceraticsoft.de/api/projects/${projectId}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({ logoUrl: logoUrl.trim() })
+      });
+
+      if (response.ok) {
+        onUpdate();
+        onClose();
+      } else {
+        const errorData = await response.json();
+        setError(errorData.error || 'Fehler beim Aktualisieren des Logos');
+      }
+    } catch (err) {
+      console.error('Error updating logo:', err);
+      setError('Netzwerkfehler');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleImageLoad = () => {
+    setPreviewLoading(false);
+  };
+
+  const handleImageError = () => {
+    setPreviewLoading(false);
+    setError('Bild konnte nicht geladen werden');
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm animate-in fade-in duration-200">
+      <div className="bg-surface border border-border rounded-xl w-full max-w-2xl shadow-2xl flex flex-col max-h-[90vh]">
+        <div className="p-4 border-b border-border flex justify-between items-center bg-surfaceHighlight/20">
+          <h3 className="font-bold text-textMain flex items-center gap-2">
+            <Icons.Layers className="w-5 h-5" />
+            NPC-Logo bearbeiten
+          </h3>
+          <button onClick={onClose} className="text-textMuted hover:text-white transition-colors text-xl leading-none">&times;</button>
+        </div>
+
+        <div className="p-6 flex-1 overflow-y-auto">
+          {error && (
+            <div className="bg-red-500/10 border border-red-500/20 rounded-lg p-4 mb-6">
+              <p className="text-red-400">{error}</p>
+            </div>
+          )}
+
+          {/* Current Logo Preview */}
+          <div className="mb-6">
+            <h4 className="font-semibold text-textMain mb-3">Aktuelles Logo</h4>
+            <div className="relative w-32 h-32 mx-auto rounded-lg overflow-hidden border border-border bg-surfaceHighlight/30">
+              {currentLogoUrl ? (
+                <>
+                  {previewLoading && (
+                    <div className="absolute inset-0 flex items-center justify-center">
+                      <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-accentInfo"></div>
+                    </div>
+                  )}
+                  <img
+                    src={currentLogoUrl}
+                    alt="Current logo"
+                    className="w-full h-full object-cover"
+                    onLoad={handleImageLoad}
+                    onError={handleImageError}
+                  />
+                </>
+              ) : (
+                <div className="w-full h-full flex items-center justify-center text-textMuted">
+                  <Icons.Layers className="w-8 h-8" />
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Logo URL Input */}
+          <div className="mb-6">
+            <h4 className="font-semibold text-textMain mb-3">Neue Logo-URL</h4>
+            <input
+              type="url"
+              value={logoUrl}
+              onChange={(e) => setLogoUrl(e.target.value)}
+              placeholder="https://example.com/logo-image.png"
+              className="w-full bg-[#0b0b0d] border border-border rounded p-3 text-sm"
+            />
+            <p className="text-xs text-textMuted mt-2">
+              Geben Sie eine direkte URL zu einem Bild ein. Empfohlene Größe: 200x200 Pixel oder größer, quadratisch.
+            </p>
+          </div>
+
+          {/* File Upload */}
+          <div className="mb-6">
+            <h4 className="font-semibold text-textMain mb-3">Oder Bild hochladen</h4>
+            <div className="border-2 border-dashed border-border rounded-lg p-6 text-center hover:border-accentInfo/50 transition-colors">
+              <input
+                type="file"
+                accept="image/*"
+                onChange={async (e) => {
+                  const file = e.target.files?.[0];
+                  if (!file) return;
+
+                  const formData = new FormData();
+                  formData.append('logo', file);
+
+                  try {
+                    setLoading(true);
+                    setError(null);
+
+                    const response = await fetch(`https://vollidioten.ceraticsoft.de/api/admin/npc-companies/${projectId}/logo/upload`, {
+                      method: 'POST',
+                      credentials: 'include',
+                      body: formData
+                    });
+
+                    if (response.ok) {
+                      const data = await response.json();
+                      setLogoUrl(data.logoUrl);
+                      onUpdate();
+                      onClose();
+                    } else {
+                      const errorData = await response.json();
+                      setError(errorData.error || 'Fehler beim Hochladen');
+                    }
+                  } catch (err) {
+                    console.error('Error uploading logo:', err);
+                    setError('Netzwerkfehler beim Hochladen');
+                  } finally {
+                    setLoading(false);
+                  }
+                }}
+                className="hidden"
+                id="npc-logo-upload"
+              />
+              <label htmlFor="npc-logo-upload" className="cursor-pointer">
+                <div className="w-12 h-12 mx-auto mb-4 bg-surfaceHighlight rounded-full flex items-center justify-center">
+                  <svg className="w-6 h-6 text-accentInfo" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
+                  </svg>
+                </div>
+                <p className="text-sm text-textMain font-medium">Bild auswählen</p>
+                <p className="text-xs text-textMuted mt-1">Max. 10MB, nur Bilddateien</p>
+              </label>
+            </div>
+          </div>
+
+          {/* Preview */}
+          {logoUrl && logoUrl !== currentLogoUrl && (
+            <div className="mb-6">
+              <h4 className="font-semibold text-textMain mb-3">Vorschau</h4>
+              <div className="relative w-32 h-32 mx-auto rounded-lg overflow-hidden border border-border bg-surfaceHighlight/30">
+                <img
+                  src={logoUrl}
+                  alt="Logo preview"
+                  className="w-full h-full object-cover"
+                  onError={() => setError('Vorschau-Bild konnte nicht geladen werden')}
+                />
+              </div>
+            </div>
+          )}
+
+          {/* Common Logo Suggestions */}
+          <div className="mb-6">
+            <h4 className="font-semibold text-textMain mb-3">Beispiele</h4>
+            <div className="grid grid-cols-2 gap-2 text-xs">
+              <button
+                onClick={() => setLogoUrl('https://images.unsplash.com/photo-1560472354-b33ff0c44a43?q=80&w=200&auto=format&fit=crop')}
+                className="p-2 bg-surfaceHighlight/50 rounded hover:bg-surfaceHighlight transition-colors text-left"
+              >
+                <div className="font-medium">Firmenlogo</div>
+                <div className="text-textMuted truncate">Unsplash</div>
+              </button>
+              <button
+                onClick={() => setLogoUrl('https://images.unsplash.com/photo-1559136555-9303baea8ebd?q=80&w=200&auto=format&fit=crop')}
+                className="p-2 bg-surfaceHighlight/50 rounded hover:bg-surfaceHighlight transition-colors text-left"
+              >
+                <div className="font-medium">Wappen</div>
+                <div className="text-textMuted truncate">Unsplash</div>
+              </button>
+              <button
+                onClick={() => setLogoUrl('https://images.unsplash.com/photo-1611224923853-80b023f02d71?q=80&w=200&auto=format&fit=crop')}
+                className="p-2 bg-surfaceHighlight/50 rounded hover:bg-surfaceHighlight transition-colors text-left"
+              >
+                <div className="font-medium">Schild</div>
+                <div className="text-textMuted truncate">Unsplash</div>
+              </button>
+              <button
+                onClick={() => setLogoUrl('https://images.unsplash.com/photo-1581291518857-4e27b48ff24e?q=80&w=200&auto=format&fit=crop')}
+                className="p-2 bg-surfaceHighlight/50 rounded hover:bg-surfaceHighlight transition-colors text-left"
+              >
+                <div className="font-medium">Emblem</div>
+                <div className="text-textMuted truncate">Unsplash</div>
+              </button>
+            </div>
+          </div>
+
+          {/* Info */}
+          <div className="bg-blue-500/10 border border-blue-500/20 rounded-lg p-4">
+            <div className="flex items-start gap-3">
+              <Icons.Terminal className="w-5 h-5 text-blue-400 mt-0.5" />
+              <div>
+                <h4 className="text-sm font-medium text-blue-400 mb-1">Logo-Empfehlungen</h4>
+                <ul className="text-xs text-blue-300 space-y-1">
+                  <li>• Verwenden Sie quadratische Bilder für beste Ergebnisse</li>
+                  <li>• Stellen Sie sicher, dass das Logo auf dunklen Hintergründen gut sichtbar ist</li>
+                  <li>• Vermeiden Sie zu komplexe Designs - Einfachheit ist besser</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="p-4 border-t border-border flex justify-end gap-3">
+          <button
+            onClick={onClose}
+            className="px-4 py-2 text-sm font-medium text-textMuted hover:text-white transition-colors"
+          >
+            Abbrechen
+          </button>
+          <button
+            onClick={updateLogo}
+            disabled={loading || !logoUrl.trim() || logoUrl === currentLogoUrl}
+            className="px-6 py-2 text-sm font-medium bg-orange-500 hover:bg-orange-600 disabled:opacity-50 disabled:cursor-not-allowed text-white rounded transition-colors flex items-center gap-2"
+          >
+            {loading ? (
+              <>
+                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
+                Aktualisiere...
+              </>
+            ) : (
+              <>
+                <Icons.Layers className="w-4 h-4" />
+                Logo aktualisieren
+              </>
+            )}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default NpcLogoManagementModal;