Arbeitszeit nur in 15-Minuten-Schritten, berechnete Zeit wird aufgerundet

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/components/CreateWorksheetModal.jsx

@@ -3,7 +3,8 @@ import { FaTimes } from 'react-icons/fa'
 import { useAuth } from '../context/AuthContext'
 import { SERVICE_TYPES, todayIso, isoToGermanDate, timeToWoms, minutesBetween } from '../lib/ticketForm'
 import { TICKET_STATUSES, statusLabel } from '../lib/ticketStatus'
-import { DateTimeInput } from './ui'
+import { DateTimeInput, DurationSelect } from './ui'
+import { roundUpToStep, isValidStep } from '../lib/timeSteps'
 
 // Akquise-Tickets: Ergebnis des Kundenkontakts (statt technischer Status)
 const ACQUISITION_STATUS = ['In Kontakt', 'Zugesagt', 'Abgesagt']
@@ -57,12 +58,12 @@ export default function CreateWorksheetModal({ isOpen, onClose, workorder, onCre
     }
   }, [isOpen, workorder, defaultStatus])
 
-  // Automatische Zeitberechnung
+  // Automatische Zeitberechnung, aufgerundet auf 15 Minuten
   useEffect(() => {
     if (!autoCalculate || formData.isComment) return
     const minutes = minutesBetween(formData.startTime, formData.endTime)
     if (minutes !== null) {
-      setFormData(prev => ({ ...prev, totalTime: minutes }))
+      setFormData(prev => ({ ...prev, totalTime: roundUpToStep(minutes) }))
     }
   }, [formData.startTime, formData.endTime, formData.isComment, autoCalculate])
 
@@ -95,6 +96,11 @@ export default function CreateWorksheetModal({ isOpen, onClose, workorder, onCre
         setLoading(false)
         return
       }
+      if (!formData.isComment && !isValidStep(formData.totalTime)) {
+        setError('Bitte die Arbeitszeit auswählen.')
+        setLoading(false)
+        return
+      }
 
       const worksheetData = {
         woid: workorder.woid,
@@ -102,7 +108,7 @@ export default function CreateWorksheetModal({ isOpen, onClose, workorder, onCre
         serviceType: formData.serviceType,
         oldStatus: workorder.status,
         newStatus: formData.newStatus,
-        totalTime: formData.isComment ? 0 : parseInt(formData.totalTime) || 0,
+        totalTime: formData.isComment ? 0 : Number(formData.totalTime),
         startDate: isoToGermanDate(formData.startDate),
         startTime: timeToWoms(formData.startTime),
         endDate: isoToGermanDate(formData.endDate),
@@ -235,22 +241,17 @@ export default function CreateWorksheetModal({ isOpen, onClose, workorder, onCre
               </div>
 
               <div className="form-group">
-                <label className="form-label">Arbeitszeit (Minuten)</label>
-                {/* Ganze Minuten: mit step 15 blockierte der Browser berechnete Zeiten wie 70 */}
-                <input
-                  type="number"
-                  className="form-control"
-                  min="0"
-                  step="1"
-                  value={formData.totalTime}
-                  onChange={(e) => handleChange('totalTime', e.target.value)}
+                <label className="form-label" htmlFor="worksheet-total">Arbeitszeit</label>
+                <DurationSelect
+                  id="worksheet-total"
+                  value={formData.isComment ? 0 : formData.totalTime}
+                  onChange={(value) => handleChange('totalTime', value)}
                   disabled={formData.isComment}
-                  placeholder="0"
                 />
                 <small style={{ color: '#a0aec0', fontSize: '12px' }}>
                   {autoCalculate && formData.startTime && formData.endTime
-                    ? '✓ Automatisch berechnet'
-                    : 'Manuell eingeben'}
+                    ? '✓ Aus Beginn und Ende berechnet, aufgerundet auf 15 Minuten'
+                    : autoCalculate ? 'Beginn und Ende eintragen oder Zeit wählen' : 'Von Hand gewählt'}
                 </small>
               </div>
             </div>

src/components/WorksheetTimesModal.jsx

@@ -1,7 +1,8 @@
 import { useState } from 'react'
 import { FaTimes } from 'react-icons/fa'
 import { isoToGermanDate, timeToWoms, germanDateToIso, womsTimeToInput, minutesBetween, isGitWorksheet, needsTimeEntry } from '../lib/ticketForm'
-import { DateTimeInput } from './ui'
+import { DateTimeInput, DurationSelect } from './ui'
+import { roundUpToStep, isValidStep } from '../lib/timeSteps'
 
 // Gespeichert ist dd.mm.yyyy / hhmm, die Kalender-Felder brauchen yyyy-mm-dd / hh:mm
 const formFromWorksheet = (worksheet) => ({
@@ -18,16 +19,20 @@ const formFromWorksheet = (worksheet) => ({
 export default function WorksheetTimesModal({ worksheet, onClose, onSave }) {
   const isGit = isGitWorksheet(worksheet)
   const [formData, setFormData] = useState(() => formFromWorksheet(worksheet))
-  // null = die Arbeitszeit folgt Beginn und Ende. Passte sie schon vorher nicht dazu,
-  // wurde sie von Hand eingetragen (z.B. ohne Pause) und bleibt stehen.
+  // null = die Arbeitszeit folgt Beginn und Ende (aufgerundet auf 15 Minuten). Passte sie
+  // schon vorher nicht dazu, wurde sie von Hand gewaehlt (z.B. ohne Pause) und bleibt stehen.
+  // Alte Zeiten ausserhalb des Rasters (z.B. 70) werden auf den naechsten Schritt aufgerundet.
   const [manualTotal, setManualTotal] = useState(() => {
     const stored = Number(worksheet.totalTime) || 0
-    return !stored || stored === minutesBetween(formData.startTime, formData.endTime) ? null : stored
+    const calculated = minutesBetween(formData.startTime, formData.endTime)
+    if (!stored || (calculated !== null && stored === roundUpToStep(calculated))) return null
+    return isValidStep(stored) ? stored : roundUpToStep(stored)
   })
   const [saving, setSaving] = useState(false)
   const [error, setError] = useState('')
 
-  const calculatedTotal = minutesBetween(formData.startTime, formData.endTime)
+  const calculatedMinutes = minutesBetween(formData.startTime, formData.endTime)
+  const calculatedTotal = calculatedMinutes === null ? null : roundUpToStep(calculatedMinutes)
   const totalTime = manualTotal ?? calculatedTotal ?? 0
 
   const handleChange = (field, value) => {
@@ -45,6 +50,10 @@ export default function WorksheetTimesModal({ worksheet, onClose, onSave }) {
 
   const handleSubmit = async (e) => {
     e.preventDefault()
+    if (!isValidStep(totalTime)) {
+      setError('Bitte die Arbeitszeit auswählen.')
+      return
+    }
     setSaving(true)
     setError('')
     try {
@@ -53,7 +62,7 @@ export default function WorksheetTimesModal({ worksheet, onClose, onSave }) {
         startTime: timeToWoms(formData.startTime),
         endDate: isoToGermanDate(formData.endDate),
         endTime: timeToWoms(formData.endTime),
-        totalTime: parseInt(totalTime, 10) || 0
+        totalTime: Number(totalTime)
       })
       if (result?.success) {
         onClose()
@@ -115,21 +124,16 @@ export default function WorksheetTimesModal({ worksheet, onClose, onSave }) {
           </div>
 
           <div className="form-group">
-            <label className="form-label" htmlFor="worksheet-times-total">Arbeitszeit (Minuten)</label>
-            <input
+            <label className="form-label" htmlFor="worksheet-times-total">Arbeitszeit</label>
+            <DurationSelect
               id="worksheet-times-total"
-              type="number"
-              className="form-control"
-              min="0"
-              step="1"
               value={totalTime}
-              onChange={(e) => setManualTotal(e.target.value)}
-              placeholder="0"
+              onChange={(value) => setManualTotal(value)}
             />
             <small style={{ color: '#a0aec0', fontSize: '12px' }}>
               {manualTotal === null && calculatedTotal !== null
-                ? '✓ Automatisch berechnet'
-                : 'Manuell eingeben'}
+                ? '✓ Aus Beginn und Ende berechnet, aufgerundet auf 15 Minuten'
+                : 'Von Hand gewählt'}
             </small>
           </div>
 

src/components/ui/DurationSelect.jsx

@@ -0,0 +1,20 @@
+import { stepOptions } from '../../lib/timeSteps'
+
+/* Arbeitszeit nur in 15-Minuten-Schritten (15 min bis 12 h), siehe lib/timeSteps */
+export default function DurationSelect({ id, value, onChange, disabled }) {
+  return (
+    <select
+      id={id}
+      className="form-control"
+      value={value}
+      disabled={disabled}
+      onChange={(e) => onChange(Number(e.target.value))}
+    >
+      {/* Kommentar ohne Arbeitszeit */}
+      {!value && <option value={0}>–</option>}
+      {stepOptions(value).map((o) => (
+        <option key={o.value} value={o.value}>{o.label}</option>
+      ))}
+    </select>
+  )
+}

src/components/ui/index.js

@@ -9,3 +9,4 @@ export { default as Field } from './Field'
 export { default as Kpi } from './Kpi'
 export { default as AutocompleteInput } from './AutocompleteInput'
 export { default as DateTimeInput } from './DateTimeInput'
+export { default as DurationSelect } from './DurationSelect'