144 lines
5.1 KiB
JavaScript
144 lines
5.1 KiB
JavaScript
import { FaTimes } from 'react-icons/fa'
|
|
import { format } from 'date-fns'
|
|
|
|
export default function StatusHistoryModal({ isOpen, onClose, worksheets, ticket }) {
|
|
if (!isOpen) return null
|
|
|
|
// Extrahiere Status-Änderungen aus Worksheets
|
|
const statusHistory = worksheets
|
|
.filter(ws => ws.oldStatus && ws.newStatus && ws.oldStatus !== ws.newStatus)
|
|
.map(ws => ({
|
|
date: ws.startDate,
|
|
time: ws.startTime,
|
|
from: ws.oldStatus,
|
|
to: ws.newStatus,
|
|
employee: ws.employeeName || ws.employeeShort || 'Unknown',
|
|
details: ws.details,
|
|
wsid: ws.wsid
|
|
}))
|
|
.sort((a, b) => {
|
|
// Sortiere nach Datum und Zeit (älteste zuerst)
|
|
const dateA = `${a.date} ${a.time || '0000'}`
|
|
const dateB = `${b.date} ${b.time || '0000'}`
|
|
return dateA.localeCompare(dateB)
|
|
})
|
|
|
|
// Füge aktuellen Status hinzu
|
|
const currentStatus = ticket?.status || 'Open'
|
|
|
|
return (
|
|
<div className="overlay">
|
|
<span className="overlay-close" onClick={onClose}>
|
|
<FaTimes />
|
|
</span>
|
|
<div className="overlay-content">
|
|
<h2 className="mb-2">Status History - WOID {ticket?.woid || ticket?.$id}</h2>
|
|
|
|
<div style={{ marginBottom: '24px' }}>
|
|
<div style={{
|
|
background: 'rgba(45, 55, 72, 0.95)',
|
|
borderRadius: '8px',
|
|
padding: '16px',
|
|
border: '1px solid rgba(16, 185, 129, 0.2)',
|
|
marginBottom: '16px'
|
|
}}>
|
|
<strong style={{ color: 'var(--green-primary)' }}>Current Status:</strong>
|
|
<span style={{
|
|
marginLeft: '12px',
|
|
padding: '4px 12px',
|
|
borderRadius: '4px',
|
|
background: 'rgba(16, 185, 129, 0.2)',
|
|
color: 'var(--dark-text)',
|
|
fontWeight: 'bold'
|
|
}}>
|
|
{currentStatus}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{statusHistory.length === 0 ? (
|
|
<div style={{
|
|
background: 'rgba(45, 55, 72, 0.95)',
|
|
borderRadius: '8px',
|
|
padding: '24px',
|
|
textAlign: 'center',
|
|
color: '#a0aec0'
|
|
}}>
|
|
No status changes recorded yet.
|
|
</div>
|
|
) : (
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
|
|
{statusHistory.map((entry, index) => (
|
|
<div
|
|
key={index}
|
|
style={{
|
|
background: 'rgba(45, 55, 72, 0.95)',
|
|
borderRadius: '8px',
|
|
padding: '16px',
|
|
border: '1px solid rgba(16, 185, 129, 0.2)',
|
|
borderLeft: '4px solid var(--green-primary)'
|
|
}}
|
|
>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start', marginBottom: '8px' }}>
|
|
<div>
|
|
<div style={{ fontSize: '14px', color: '#a0aec0', marginBottom: '4px' }}>
|
|
{entry.date} {entry.time ? `${entry.time.substring(0, 2)}:${entry.time.substring(2, 4)}` : ''}
|
|
</div>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
|
|
<span style={{
|
|
padding: '4px 8px',
|
|
borderRadius: '4px',
|
|
background: 'rgba(74, 85, 104, 0.5)',
|
|
color: 'var(--dark-text)',
|
|
fontSize: '12px'
|
|
}}>
|
|
{entry.from}
|
|
</span>
|
|
<span style={{ color: 'var(--green-primary)' }}>→</span>
|
|
<span style={{
|
|
padding: '4px 8px',
|
|
borderRadius: '4px',
|
|
background: 'rgba(16, 185, 129, 0.3)',
|
|
color: 'var(--dark-text)',
|
|
fontSize: '12px',
|
|
fontWeight: 'bold'
|
|
}}>
|
|
{entry.to}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div style={{ textAlign: 'right' }}>
|
|
<div style={{ fontSize: '12px', color: '#a0aec0' }}>by</div>
|
|
<div style={{ fontWeight: 'bold', color: 'var(--dark-text)' }}>{entry.employee}</div>
|
|
{entry.wsid && (
|
|
<div style={{ fontSize: '11px', color: '#718096', marginTop: '4px' }}>
|
|
WSID: {entry.wsid}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{entry.details && (
|
|
<div style={{
|
|
marginTop: '12px',
|
|
padding: '12px',
|
|
background: 'rgba(31, 41, 55, 0.6)',
|
|
borderRadius: '6px',
|
|
fontSize: '13px',
|
|
color: '#cbd5e0',
|
|
borderLeft: '3px solid rgba(16, 185, 129, 0.4)'
|
|
}}>
|
|
{entry.details}
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
|
|
|