main page

src/components/TicketRow.jsx

@@ -0,0 +1,171 @@
+import { useState } from 'react'
+import { FaLock, FaLockOpen, FaPlay, FaStop, FaTruck, FaSackDollar, FaUserGear } from 'react-icons/fa6'
+import { formatDistanceToNow, format } from 'date-fns'
+import { de } from 'date-fns/locale'
+import StatusDropdown from './StatusDropdown'
+import PriorityDropdown from './PriorityDropdown'
+import EditorDropdown from './EditorDropdown'
+import ResponseDropdown from './ResponseDropdown'
+
+const PRIORITY_CLASSES = {
+  0: 'priority-none',
+  1: 'priority-low',
+  2: 'priority-medium',
+  3: 'priority-high',
+  4: 'priority-critical'
+}
+
+const PRIORITY_LABELS = {
+  0: 'NONE',
+  1: 'LOW',
+  2: 'MEDIUM',
+  3: 'HIGH',
+  4: 'CRITICAL'
+}
+
+const STATUS_CLASSES = {
+  'Open': 'status-open',
+  'Occupied': 'status-occupied',
+  'Assigned': 'status-assigned',
+  'Awaiting': 'status-awaiting',
+  'Closed': 'status-closed'
+}
+
+const APPROVAL_ICONS = {
+  'pending': FaUserGear,
+  'approved': FaSackDollar,
+  'quote': FaSackDollar,
+  'shipping': FaTruck
+}
+
+export default function TicketRow({ ticket, onUpdate, onExpand }) {
+  const [expanded, setExpanded] = useState(false)
+  const [locked, setLocked] = useState(true)
+
+  const createdAt = new Date(ticket.$createdAt || ticket.createdAt)
+  const elapsed = formatDistanceToNow(createdAt, { locale: de })
+  
+  const handleStatusChange = (newStatus) => {
+    onUpdate(ticket.$id, { status: newStatus })
+  }
+
+  const handlePriorityChange = (newPriority) => {
+    onUpdate(ticket.$id, { priority: newPriority })
+  }
+
+  const handleEditorChange = (newEditor) => {
+    onUpdate(ticket.$id, { assignedTo: newEditor })
+  }
+
+  const handleResponseChange = (newResponse) => {
+    onUpdate(ticket.$id, { responseLevel: newResponse })
+  }
+
+  const toggleLock = () => {
+    if (locked) {
+      setExpanded(true)
+      onExpand?.(ticket.$id)
+    } else {
+      setExpanded(false)
+    }
+    setLocked(!locked)
+  }
+
+  const ApprovalIcon = APPROVAL_ICONS[ticket.approvalStatus] || FaUserGear
+
+  return (
+    <>
+      <tr className="ticket-row">
+        <td className="ticket-id" rowSpan={2}>
+          <div>{ticket.woid || ticket.$id?.slice(-5)}</div>
+          <div className="ticket-time">{elapsed}</div>
+        </td>
+        <td className="ticket-info" rowSpan={2}>
+          <strong>{format(createdAt, 'dd.MM.yyyy')}</strong>
+        </td>
+        <td className="ticket-info" rowSpan={2}>
+          <strong>{ticket.type}</strong>
+          <br />
+          {ticket.serviceType || 'Remote'}
+          <br />
+          <FaPlay className="text-green" /> {ticket.startDate || format(createdAt, 'dd.MM.yyyy')}
+          <br />
+          <FaStop className="text-red" /> {ticket.deadline || '-'}
+        </td>
+        <td className="ticket-info" rowSpan={2}>
+          <strong>{ticket.systemType || 'n/a'}</strong>
+        </td>
+        <td rowSpan={2}>
+          <strong>{ticket.customerName || 'Unknown'}</strong>
+          <br />
+          {ticket.customerLocation || ''}
+        </td>
+        <td rowSpan={2}>
+          <strong>{ticket.requestedBy || '-'}</strong>
+          <br />
+          {ticket.requestedFor && <>Requested for: {ticket.requestedFor}<br /></>}
+          {ticket.topic}
+        </td>
+        <td className={`text-center ${STATUS_CLASSES[ticket.status] || 'status-open'}`}>
+          <StatusDropdown 
+            value={ticket.status} 
+            onChange={handleStatusChange}
+          />
+        </td>
+        <td className={`text-center ${PRIORITY_CLASSES[ticket.priority] || 'priority-low'}`}>
+          <PriorityDropdown 
+            value={ticket.priority} 
+            onChange={handlePriorityChange}
+          />
+        </td>
+        <td 
+          className={`text-center ${ticket.approvalStatus === 'approved' ? 'bg-green' : 'bg-yellow'}`}
+          rowSpan={2}
+          style={{ verticalAlign: 'middle' }}
+        >
+          <ApprovalIcon size={24} />
+        </td>
+        <td 
+          className="bg-dark-grey text-center text-white"
+          rowSpan={2}
+          style={{ verticalAlign: 'middle', cursor: 'pointer' }}
+          onClick={toggleLock}
+        >
+          {locked ? <FaLock size={24} /> : <FaLockOpen size={24} />}
+        </td>
+      </tr>
+      <tr className="ticket-row">
+        <td className={`text-center ${STATUS_CLASSES[ticket.status] || 'status-open'}`}>
+          <EditorDropdown 
+            value={ticket.assignedTo} 
+            onChange={handleEditorChange}
+          />
+        </td>
+        <td className={`text-center ${PRIORITY_CLASSES[ticket.priority] || 'priority-low'}`}>
+          <ResponseDropdown 
+            value={ticket.responseLevel} 
+            onChange={handleResponseChange}
+          />
+        </td>
+      </tr>
+      {expanded && (
+        <>
+          <tr>
+            <td colSpan={10} className="p-2">
+              <div className="card">
+                <div className="card-header">Details - WOID {ticket.woid || ticket.$id}</div>
+                <div className="card-body">
+                  <p><strong>Beschreibung:</strong></p>
+                  <p>{ticket.details || 'Keine Details vorhanden.'}</p>
+                </div>
+              </div>
+            </td>
+          </tr>
+        </>
+      )}
+      <tr className="spacer">
+        <td colSpan={10} style={{ height: '8px', background: '#fff' }}></td>
+      </tr>
+    </>
+  )
+}