57 lines
1.9 KiB
React
57 lines
1.9 KiB
React
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>
|
||
)
|
||
}
|