woms 3.0

src/components/CreateWorksheetModal.jsx

@@ -0,0 +1,440 @@
+import { useState, useEffect } from 'react'
+import { useAuth } from '../context/AuthContext'
+
+const SERVICE_TYPES = ['Remote', 'On Site', 'Off Site', 'COMMENT']
+
+const STATUS_OPTIONS = [
+  'Open',
+  'Closed',
+  'Awaiting',
+  'Added Info',
+  'Occupied',
+  'Halted',
+  'Cancelled',
+  'Aborted',
+  'Assigned',
+  'In Test'
+]
+
+const RESPONSE_LEVELS = [
+  'KEY USER',
+  '1st Level',
+  '2nd Level',
+  '3rd Level',
+  'FS/FE',
+  '24/7',
+  'TECH MGMT',
+  'Backoffice',
+  'BUSI MGMT',
+  'n/a'
+]
+
+export default function CreateWorksheetModal({ isOpen, onClose, workorder, onCreate }) {
+  const { user } = useAuth()
+  const today = new Date().toLocaleDateString('de-DE', { 
+    day: '2-digit', 
+    month: '2-digit', 
+    year: 'numeric' 
+  })
+
+  const [formData, setFormData] = useState({
+    serviceType: 'Remote',
+    newStatus: workorder?.status || 'Open',
+    newResponseLevel: workorder?.responseLevel || '',
+    totalTime: 0,
+    startDate: today,
+    startTime: '',
+    endDate: today,
+    endTime: '',
+    details: '',
+    isComment: false
+  })
+
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState('')
+  const [autoCalculate, setAutoCalculate] = useState(true)
+
+  // Reset form wenn Modal geöffnet wird
+  useEffect(() => {
+    if (isOpen && workorder) {
+      setFormData({
+        serviceType: 'Remote',
+        newStatus: workorder.status || 'Open',
+        newResponseLevel: workorder.responseLevel || '',
+        totalTime: 0,
+        startDate: today,
+        startTime: '',
+        endDate: today,
+        endTime: '',
+        details: '',
+        isComment: false
+      })
+      setError('')
+      setAutoCalculate(true)
+    }
+  }, [isOpen, workorder, today])
+
+  // Automatische Zeitberechnung
+  useEffect(() => {
+    if (autoCalculate && formData.startTime && formData.endTime && !formData.isComment) {
+      try {
+        const startHour = parseInt(formData.startTime.substring(0, 2))
+        const startMin = parseInt(formData.startTime.substring(2, 4))
+        const endHour = parseInt(formData.endTime.substring(0, 2))
+        const endMin = parseInt(formData.endTime.substring(2, 4))
+        
+        if (!isNaN(startHour) && !isNaN(startMin) && !isNaN(endHour) && !isNaN(endMin)) {
+          const startTotal = startHour * 60 + startMin
+          const endTotal = endHour * 60 + endMin
+          
+          let diff = endTotal - startTotal
+          if (diff < 0) {
+            diff += 24 * 60 // Overnight
+          }
+          
+          setFormData(prev => ({ ...prev, totalTime: diff }))
+        }
+      } catch (err) {
+        // Ignoriere Fehler
+      }
+    }
+  }, [formData.startTime, formData.endTime, formData.isComment, autoCalculate])
+
+  const handleChange = (field, value) => {
+    setFormData(prev => ({ ...prev, [field]: value }))
+    
+    // Wenn totalTime manuell geändert wird, deaktiviere Auto-Berechnung
+    if (field === 'totalTime') {
+      setAutoCalculate(false)
+    }
+  }
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    setLoading(true)
+    setError('')
+    
+    try {
+      if (!formData.details.trim()) {
+        setError('Bitte Details eingeben')
+        setLoading(false)
+        return
+      }
+
+      const worksheetData = {
+        woid: workorder.woid,
+        workorderId: workorder.$id,
+        serviceType: formData.serviceType,
+        oldStatus: workorder.status,
+        newStatus: formData.newStatus,
+        oldResponseLevel: workorder.responseLevel || '',
+        newResponseLevel: formData.newResponseLevel,
+        totalTime: formData.isComment ? 0 : parseInt(formData.totalTime) || 0,
+        startDate: formData.startDate,
+        startTime: formData.startTime,
+        endDate: formData.endDate,
+        endTime: formData.endTime,
+        details: formData.details,
+        isComment: formData.isComment,
+        employeeShort: user?.prefs?.shortCode || '' // Aus User-Preferences
+      }
+
+      const result = await onCreate(worksheetData, user)
+      
+      if (result.success) {
+        onClose()
+      } else {
+        setError(result.error || 'Fehler beim Erstellen des Worksheets')
+      }
+    } catch (err) {
+      console.error('Error creating worksheet:', err)
+      setError(err.message || 'Ein unerwarteter Fehler ist aufgetreten')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  if (!isOpen || !workorder) return null
+
+  return (
+    <div className="overlay" style={{ 
+      width: '100%',
+      background: 'rgba(0,0,0,0.95)'
+    }}>
+      <a href="#" className="closebtn" onClick={(e) => { e.preventDefault(); onClose(); }} style={{
+        background: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
+        borderRadius: '50%',
+        width: '60px',
+        height: '60px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontSize: '2rem',
+        transition: 'transform 0.2s ease'
+      }} onMouseEnter={(e) => e.currentTarget.style.transform = 'rotate(90deg)'} onMouseLeave={(e) => e.currentTarget.style.transform = 'rotate(0deg)'}>×</a>
+      
+      <div className="overlay-content text-white text-left">
+        <form onSubmit={handleSubmit}>
+          <div className="container">
+            <div className="row">
+              <div className="col-1">&nbsp;</div>
+              <div className="col-10">
+                <div className="mb-4 p-4 rounded-3" style={{
+                  background: 'linear-gradient(135deg, #2d3748 0%, #1a202c 100%)',
+                  boxShadow: '0 8px 32px rgba(45, 55, 72, 0.3)'
+                }}>
+                  <h2 className="mb-0 d-flex align-items-center">
+                    <span className="me-3" style={{
+                      background: 'rgba(16, 185, 129, 0.4)',
+                      borderRadius: '10px',
+                      padding: '10px 15px'
+                    }}>📝</span>
+                    Create New Worksheet
+                    <span className="ms-3 badge" style={{
+                      background: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
+                      fontSize: '1rem'
+                    }}>WOID {workorder.woid}</span>
+                  </h2>
+                </div>
+              </div>
+              <div className="col-1">&nbsp;</div>
+            </div>
+          </div>
+
+          {error && (
+            <div className="container">
+              <div className="row">
+                <div className="col-1">&nbsp;</div>
+                <div className="col-10">
+                  <div className="alert p-4 rounded-3 border-0" style={{
+                    background: 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)',
+                    color: 'white',
+                    boxShadow: '0 4px 16px rgba(239, 68, 68, 0.3)'
+                  }} role="alert">
+                    <strong>⚠️ {error}</strong>
+                  </div>
+                </div>
+                <div className="col-1">&nbsp;</div>
+              </div>
+            </div>
+          )}
+
+          <div className="container">
+            <div className="row">
+              <div className="col-1">&nbsp;</div>
+              
+              {/* Linke Spalte */}
+              <div className="col-5">
+                <span className="text-left">Service Type</span><br />
+                <select 
+                  className="form-select bg-dark text-white"
+                  value={formData.serviceType}
+                  onChange={(e) => handleChange('serviceType', e.target.value)}
+                  required
+                >
+                  {SERVICE_TYPES.map(type => (
+                    <option key={type} value={type}>{type}</option>
+                  ))}
+                </select>
+                <br /><br />
+
+                <span className="text-left">New Status</span><br />
+                <select 
+                  className="form-select bg-dark text-white"
+                  value={formData.newStatus}
+                  onChange={(e) => handleChange('newStatus', e.target.value)}
+                  required
+                >
+                  {STATUS_OPTIONS.map(status => (
+                    <option key={status} value={status}>{status}</option>
+                  ))}
+                </select>
+                <br /><br />
+
+                <span className="text-left">New Response Level</span><br />
+                <select 
+                  className="form-select bg-dark text-white"
+                  value={formData.newResponseLevel}
+                  onChange={(e) => handleChange('newResponseLevel', e.target.value)}
+                >
+                  <option value="">Select</option>
+                  {RESPONSE_LEVELS.map(level => (
+                    <option key={level} value={level}>{level}</option>
+                  ))}
+                </select>
+                <br /><br />
+
+                <div className="form-check">
+                  <input 
+                    type="checkbox" 
+                    className="form-check-input"
+                    id="isComment"
+                    checked={formData.isComment}
+                    onChange={(e) => handleChange('isComment', e.target.checked)}
+                  />
+                  <label className="form-check-label" htmlFor="isComment">
+                    Nur Kommentar (keine Arbeitszeit)
+                  </label>
+                </div>
+                <br />
+              </div>
+
+              {/* Rechte Spalte */}
+              <div className="col-5">
+                <span className="text-left">Total Time (Minuten)</span><br />
+                <input 
+                  type="number"
+                  className="form-control bg-dark text-white"
+                  min="0"
+                  step="15"
+                  value={formData.totalTime}
+                  onChange={(e) => handleChange('totalTime', e.target.value)}
+                  disabled={formData.isComment}
+                  placeholder="0"
+                />
+                <small className="text-muted">
+                  {autoCalculate && formData.startTime && formData.endTime 
+                    ? '✓ Automatisch berechnet' 
+                    : 'Manuell eingeben'}
+                </small>
+                <br /><br />
+
+                <span className="text-left">Start Date (dd.mm.yyyy)</span><br />
+                <input 
+                  type="text"
+                  className="form-control bg-dark text-white"
+                  value={formData.startDate}
+                  onChange={(e) => handleChange('startDate', e.target.value)}
+                  pattern="^[0-3][0-9]\.[0-1][0-9]\.[1-2][0-9][0-9][0-9]$"
+                  required
+                />
+                <br /><br />
+
+                <span className="text-left">End Date (dd.mm.yyyy)</span><br />
+                <input 
+                  type="text"
+                  className="form-control bg-dark text-white"
+                  value={formData.endDate}
+                  onChange={(e) => handleChange('endDate', e.target.value)}
+                  pattern="^[0-3][0-9]\.[0-1][0-9]\.[1-2][0-9][0-9][0-9]$"
+                  required
+                />
+                <br /><br />
+
+                <span className="text-left">Start Time (hhmm)</span><br />
+                <input 
+                  type="text"
+                  className="form-control bg-dark text-white"
+                  value={formData.startTime}
+                  onChange={(e) => handleChange('startTime', e.target.value)}
+                  pattern="[0-2][0-9][0-5][0-9]"
+                  placeholder="1000"
+                  maxLength="4"
+                />
+                <br /><br />
+
+                <span className="text-left">End Time (hhmm)</span><br />
+                <input 
+                  type="text"
+                  className="form-control bg-dark text-white"
+                  value={formData.endTime}
+                  onChange={(e) => handleChange('endTime', e.target.value)}
+                  pattern="[0-2][0-9][0-5][0-9]"
+                  placeholder="1030"
+                  maxLength="4"
+                />
+                <br /><br />
+              </div>
+
+              <div className="col-1">&nbsp;</div>
+            </div>
+          </div>
+
+          <div className="container">
+            <div className="row">
+              <div className="col-1">&nbsp;</div>
+              <div className="col-10">
+                <span className="text-left">Action Details</span><br />
+                <textarea 
+                  className="form-control bg-dark text-white"
+                  rows="10"
+                  value={formData.details}
+                  onChange={(e) => handleChange('details', e.target.value)}
+                  placeholder="Beschreibe die durchgeführten Arbeiten..."
+                  required
+                ></textarea>
+              </div>
+              <div className="col-1">&nbsp;</div>
+            </div>
+          </div>
+
+          <div className="container">
+            <div className="row">
+              <div className="col-1">&nbsp;</div>
+              <div className="col-10 text-center">
+                <p>&nbsp;</p>
+                <button 
+                  type="submit" 
+                  className="btn btn-lg px-5 py-3 border-0"
+                  style={{
+                    background: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
+                    color: 'white',
+                    fontSize: '1.2rem',
+                    fontWeight: 'bold',
+                    boxShadow: '0 8px 32px rgba(16, 185, 129, 0.4)',
+                    transition: 'transform 0.2s ease, box-shadow 0.2s ease'
+                  }}
+                  onMouseEnter={(e) => {
+                    e.currentTarget.style.transform = 'translateY(-2px)'
+                    e.currentTarget.style.boxShadow = '0 12px 40px rgba(16, 185, 129, 0.5)'
+                  }}
+                  onMouseLeave={(e) => {
+                    e.currentTarget.style.transform = 'translateY(0)'
+                    e.currentTarget.style.boxShadow = '0 8px 32px rgba(16, 185, 129, 0.4)'
+                  }}
+                  disabled={loading}
+                >
+                  {loading ? '⏳ Erstelle...' : '✨ CREATE NOW'}
+                </button>
+                <p>&nbsp;</p>
+              </div>
+              <div className="col-1">&nbsp;</div>
+            </div>
+          </div>
+
+          {/* Info Box */}
+          <div className="container">
+            <div className="row">
+              <div className="col-1">&nbsp;</div>
+              <div className="col-10">
+                <div className="p-4 rounded-3 border-0" style={{
+                  background: 'linear-gradient(135deg, #4a5568 0%, #2d3748 100%)',
+                  color: 'white',
+                  boxShadow: '0 4px 16px rgba(74, 85, 104, 0.3)'
+                }} role="alert">
+                  <strong className="d-block mb-2">📋 Current Work Order</strong>
+                  <div className="d-flex flex-wrap gap-3">
+                    <span className="badge px-3 py-2" style={{
+                      background: 'rgba(16, 185, 129, 0.4)',
+                      fontSize: '0.9rem'
+                    }}>WOID: {workorder.woid}</span>
+                    <span className="badge px-3 py-2" style={{
+                      background: 'rgba(16, 185, 129, 0.4)',
+                      fontSize: '0.9rem'
+                    }}>Status: {workorder.status}</span>
+                    <span className="badge px-3 py-2" style={{
+                      background: 'rgba(16, 185, 129, 0.4)',
+                      fontSize: '0.9rem'
+                    }}>Topic: {workorder.topic}</span>
+                  </div>
+                </div>
+              </div>
+              <div className="col-1">&nbsp;</div>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}
+