wsid update

src/components/StatusHistoryModal.jsx

@@ -0,0 +1,141 @@
+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>
+  )
+}
+