Kundenseite: Reiter in der Adresse, Uebersicht mit Umlaut, Protokoll der Kundenansicht

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/components/customer/CustomerViewLog.jsx

@@ -0,0 +1,56 @@
+import { useCallback, useEffect, useState } from 'react'
+import { FaSpinner, FaRotateRight } from 'react-icons/fa6'
+import { Card, Button, EmptyState } from '../ui'
+import { getCustomerViewLog } from '../../lib/teamApi'
+import { formatViewLogTime, viewLogLabel } from '../../lib/viewLog'
+
+// Reiter „Protokoll“: wer wann die Kundenansicht dieses Kunden geöffnet oder darin etwas geändert hat
+export default function CustomerViewLog({ customerId }) {
+  const [entries, setEntries] = useState(null)
+  const [error, setError] = useState(null)
+
+  const load = useCallback(async () => {
+    setError(null)
+    setEntries(null)
+    try {
+      const { entries: list } = await getCustomerViewLog(customerId)
+      setEntries(list || [])
+    } catch (err) {
+      setError(err.message || 'Protokoll konnte nicht geladen werden.')
+    }
+  }, [customerId])
+
+  useEffect(() => { load() }, [load])
+
+  if (error) {
+    return (
+      <Card>
+        <div className="flex items-center gap-2 wrap">
+          <span className="muted">{error}</span>
+          <Button variant="ghost" onClick={load}><FaRotateRight /> Erneut versuchen</Button>
+        </div>
+      </Card>
+    )
+  }
+  if (!entries) return <Card><FaSpinner className="spinner" /></Card>
+  if (entries.length === 0) {
+    return <Card><EmptyState title="Noch keine Einträge" hint="Hier steht, wer die Kundenansicht geöffnet oder darin etwas geändert hat." /></Card>
+  }
+
+  return (
+    <Card pad={false}>
+      <div className="list">
+        {entries.map((e) => (
+          <div key={e.id} className="list-row">
+            <span className="mono muted" style={{ minWidth: 130 }}>{formatViewLogTime(e.at)}</span>
+            <span style={{ minWidth: 120, fontWeight: 600 }}>{e.staffName || '–'}</span>
+            <div className="grow">
+              <div>{viewLogLabel(e.action)}</div>
+              {e.detail && <div className="muted">{e.detail}</div>}
+            </div>
+          </div>
+        ))}
+      </div>
+    </Card>
+  )
+}