fix: CustomerAssign in WindowsPanel identisch mit AgentPanel (onChange direkt, kein OK-Button)

frontend/src/components/WindowsPanel.jsx

@@ -7,7 +7,7 @@ import ScriptModal from './ScriptModal'
 import {
   X, Cpu, MemoryStick, HardDrive, Monitor, Server, Settings,
   Download, Trash2, RefreshCw, Package, Search, Play,
-  ShieldCheck, Bot, Cable, CalendarClock, ChevronRight,
+  ShieldCheck, Bot, Cable, CalendarClock,
 } from 'lucide-react'
 
 // ── Navigation ────────────────────────────────────────────────────────────────
@@ -48,32 +48,52 @@ function Panel({ onClose, children }) {
 
 function CustomerAssign({ agent, customers, current, onReload }) {
   const [editing, setEditing] = useState(false)
-  const [val, setVal] = useState(current?.id?.toString() || '')
+  const [saving, setSaving] = useState(false)
 
-  const save = async () => {
-    if (val === '') await api.unassignAgentCustomer(agent.id)
-    else await api.assignAgentCustomer(agent.id, parseInt(val))
-    setEditing(false)
-    if (onReload) onReload()
+  const handleChange = async (e) => {
+    const val = e.target.value
+    setSaving(true)
+    try {
+      if (val === '') await api.unassignCustomer(agent.id)
+      else await api.assignCustomer(agent.id, parseInt(val))
+      if (onReload) onReload()
+    } catch (err) {
+      console.error(err)
+    } finally {
+      setSaving(false)
+      setEditing(false)
+    }
   }
 
-  if (!editing) return (
-    <button onClick={() => setEditing(true)}
-      className="text-xs text-gray-500 hover:text-orange-400 transition-colors mt-0.5 flex items-center gap-1">
-      {current ? `${current.number} — ${current.name}` : 'Kein Kunde'}
-      <ChevronRight className="w-3 h-3" />
-    </button>
+  if (editing) return (
+    <div className="flex items-center gap-2 mt-0.5">
+      <select
+        value={agent.customer_id || ''}
+        onChange={handleChange}
+        disabled={saving}
+        className="bg-gray-900 border border-gray-700 rounded px-2 py-1 text-sm text-white focus:outline-none focus:border-sky-500"
+        autoFocus
+        onBlur={() => !saving && setEditing(false)}
+      >
+        <option value="">— Nicht zugewiesen —</option>
+        {customers.sort((a, b) => a.number.localeCompare(b.number)).map(c => (
+          <option key={c.id} value={c.id}>{c.number} — {c.name}</option>
+        ))}
+      </select>
+      {saving && <span className="text-xs text-gray-500">Speichere...</span>}
+    </div>
   )
 
   return (
-    <div className="flex items-center gap-2 mt-1">
-      <select value={val} onChange={e => setVal(e.target.value)}
-        className="bg-gray-800 border border-gray-700 rounded px-2 py-0.5 text-xs text-white focus:outline-none">
-        <option value="">Kein Kunde</option>
-        {customers.map(c => <option key={c.id} value={c.id}>{c.number} — {c.name}</option>)}
-      </select>
-      <button onClick={save} className="text-green-400 text-xs">OK</button>
-      <button onClick={() => setEditing(false)} className="text-gray-500 text-xs">Abbrechen</button>
+    <div
+      className="text-sm mt-0.5 cursor-pointer hover:underline"
+      onClick={() => setEditing(true)}
+      title="Kunde aendern"
+    >
+      {current
+        ? <span className="text-sky-400">{current.number} — {current.name}</span>
+        : <span className="text-gray-500 italic">Kein Kunde zugewiesen (klicken zum Zuweisen)</span>
+      }
     </div>
   )
 }