Tickets: vier Ticket-Dialoge auf Dialog (Esc, Sperre beim Speichern), Unterstuetzung als Feldblock

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

src/components/CreateWorksheetModal.jsx

@@ -1,9 +1,9 @@
-import { useState, useEffect } from 'react'
-import { FaTimes } from 'react-icons/fa'
+import { useState, useEffect, useRef } from 'react'
+import { useScrollIntoView } from '../hooks/useScrollIntoView'
 import { useAuth } from '../context/AuthContext'
 import { SERVICE_TYPES, todayIso, isoToGermanDate, timeToWoms, minutesBetween } from '../lib/ticketForm'
 import { TICKET_STATUSES, statusLabel } from '../lib/ticketStatus'
-import { DateTimeInput, DurationSelect } from './ui'
+import { Button, DateTimeInput, Dialog, DurationSelect, Field } from './ui'
 import { roundUpToStep, isValidStep } from '../lib/timeSteps'
 import { validateSupporters } from '../lib/support'
 import SupportersEditor from './SupportersEditor'
@@ -35,7 +35,10 @@ const initialForm = (workorder, newStatus) => ({
   supporters: []
 })
 
-export default function CreateWorksheetModal({ isOpen, onClose, workorder, onCreate, aboHoursAllowed = true }) {
+// Mitarbeiterliste der Seite (useEmployees laeuft dort einmal); der Editor ruft den Hook nicht selbst auf
+const NO_EMPLOYEES_STATE = { employees: [], loading: false, error: null }
+
+export default function CreateWorksheetModal({ isOpen, onClose, workorder, onCreate, aboHoursAllowed = true, employeesState = NO_EMPLOYEES_STATE }) {
   const { user } = useAuth()
 
   const isAcquisition = workorder?.type === 'Akquise'
@@ -51,6 +54,8 @@ export default function CreateWorksheetModal({ isOpen, onClose, workorder, onCre
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState('')
   const [autoCalculate, setAutoCalculate] = useState(true)
+  const errorRef = useRef(null)
+  useScrollIntoView(errorRef, error)
 
   // Reset form wenn Modal geöffnet wird
   useEffect(() => {
@@ -148,159 +153,146 @@ export default function CreateWorksheetModal({ isOpen, onClose, workorder, onCre
   if (!isOpen || !workorder) return null
 
   return (
-    <div className="overlay">
-      <span className="overlay-close" onClick={onClose}>
-        <FaTimes />
-      </span>
-      <div className="overlay-content">
-        <h2 className="mb-2">Neues Arbeitsblatt – Ticket {workorder.woid}</h2>
+    <Dialog
+      as="form"
+      wide
+      title={`Neues Arbeitsblatt – Ticket ${workorder.woid}`}
+      busy={loading}
+      onClose={onClose}
+      onSubmit={handleSubmit}
+      footer={
+        <>
+          <span className="grow" />
+          <Button variant="primary" type="submit" disabled={loading}>
+            {loading ? 'Speichert …' : 'Speichern'}
+          </Button>
+        </>
+      }
+    >
+      {error && (
+        <div className="msg err" role="alert" ref={errorRef}>
+          {error}
+        </div>
+      )}
 
-        {error && (
-          <div className="bg-red text-white p-2 mb-2" style={{ borderRadius: '4px' }}>
-            {error}
-          </div>
-        )}
+      <div className="field-row">
+        <Field label="Art" htmlFor="worksheet-service-type">
+          <select
+            id="worksheet-service-type"
+            className="select"
+            value={formData.serviceType}
+            onChange={(e) => handleChange('serviceType', e.target.value)}
+            required
+          >
+            {SERVICE_TYPES.map(type => (
+              <option key={type.value} value={type.value}>{type.label}</option>
+            ))}
+          </select>
+        </Field>
 
-        <form onSubmit={handleSubmit}>
-          <div className="row">
-            <div className="col col-6">
-              <div className="form-group">
-                <label className="form-label">Art</label>
-                <select
-                  className="form-control"
-                  value={formData.serviceType}
-                  onChange={(e) => handleChange('serviceType', e.target.value)}
-                  required
-                >
-                  {SERVICE_TYPES.map(type => (
-                    <option key={type.value} value={type.value}>{type.label}</option>
-                  ))}
-                </select>
-              </div>
-
-              <div className="form-group">
-                <label className="form-label">{isAcquisition ? 'Akquise-Ergebnis' : 'Neuer Status'}</label>
-                <select
-                  className="form-control"
-                  value={formData.newStatus}
-                  onChange={(e) => handleChange('newStatus', e.target.value)}
-                  required
-                >
-                  {statusOptions.map(status => (
-                    <option key={status.value} value={status.value}>{status.label}</option>
-                  ))}
-                </select>
-                {isAcquisition && (
-                  <small style={{ color: 'var(--text-2)', fontSize: '12px' }}>
-                    "Zugesagt" macht den Lead automatisch zum festen Kunden.
-                  </small>
-                )}
-              </div>
-
-              <div className="form-group">
-                <label style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-                  <input
-                    type="checkbox"
-                    checked={formData.isComment}
-                    onChange={(e) => handleChange('isComment', e.target.checked)}
-                  />
-                  Nur Kommentar (keine Arbeitszeit)
-                </label>
-              </div>
-
-              {aboHoursAllowed && (
-                <div className="form-group">
-                  <label style={{ display: 'flex', alignItems: 'center', gap: '8px' }} title="Zeit wird vom Stundenguthaben des Wartungs-Abos abgezogen und im Kundenportal angezeigt">
-                    <input
-                      type="checkbox"
-                      checked={formData.countsToPlan && !formData.isComment}
-                      disabled={formData.isComment}
-                      onChange={(e) => handleChange('countsToPlan', e.target.checked)}
-                    />
-                    Vom Abo-Stundenkonto abziehen
-                  </label>
-                </div>
-              )}
-            </div>
-
-            <div className="col col-6">
-              <div className="form-group">
-                <label className="form-label" htmlFor="worksheet-start-date">Beginn</label>
-                <DateTimeInput
-                  id="worksheet-start-date"
-                  timeLabel="Uhrzeit Beginn"
-                  required
-                  date={formData.startDate}
-                  time={formData.startTime}
-                  onDateChange={handleStartDateChange}
-                  onTimeChange={(value) => handleChange('startTime', value)}
-                />
-              </div>
-
-              <div className="form-group">
-                <label className="form-label" htmlFor="worksheet-end-date">Ende</label>
-                <DateTimeInput
-                  id="worksheet-end-date"
-                  timeLabel="Uhrzeit Ende"
-                  required
-                  min={formData.startDate}
-                  date={formData.endDate}
-                  time={formData.endTime}
-                  onDateChange={(value) => handleChange('endDate', value)}
-                  onTimeChange={(value) => handleChange('endTime', value)}
-                />
-              </div>
-
-              <div className="form-group">
-                <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}
-                />
-                <small style={{ color: 'var(--text-2)', fontSize: '12px' }}>
-                  {autoCalculate && formData.startTime && formData.endTime
-                    ? '✓ 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>
-          </div>
-
-          {!formData.isComment && (
-            <SupportersEditor
-              value={formData.supporters}
-              onChange={(list) => handleChange('supporters', list)}
-              excludeUserId={user?.$id}
-              minutes={formData.totalTime}
-            />
-          )}
-
-          <div className="form-group">
-            <label className="form-label">Was wurde gemacht?</label>
-            <textarea
-              className="form-control"
-              rows={5}
-              placeholder="Beschreibe die durchgeführten Arbeiten..."
-              value={formData.details}
-              onChange={(e) => handleChange('details', e.target.value)}
-              required
-            />
-          </div>
-
-          <div className="text-center mt-2">
-            <button
-              type="submit"
-              className="btn btn-dark"
-              disabled={loading}
-            >
-              {loading ? 'Speichert …' : 'Speichern'}
-            </button>
-          </div>
-        </form>
+        <Field
+          label={isAcquisition ? 'Akquise-Ergebnis' : 'Neuer Status'}
+          htmlFor="worksheet-new-status"
+          hint={isAcquisition ? '"Zugesagt" macht den Lead automatisch zum festen Kunden.' : undefined}
+        >
+          <select
+            id="worksheet-new-status"
+            className="select"
+            value={formData.newStatus}
+            onChange={(e) => handleChange('newStatus', e.target.value)}
+            required
+          >
+            {statusOptions.map(status => (
+              <option key={status.value} value={status.value}>{status.label}</option>
+            ))}
+          </select>
+        </Field>
       </div>
-    </div>
+
+      <label className="check">
+        <input
+          type="checkbox"
+          checked={formData.isComment}
+          onChange={(e) => handleChange('isComment', e.target.checked)}
+        />
+        Nur Kommentar (keine Arbeitszeit)
+      </label>
+
+      {aboHoursAllowed && (
+        <label className="check" title="Zeit wird vom Stundenguthaben des Wartungs-Abos abgezogen und im Kundenportal angezeigt">
+          <input
+            type="checkbox"
+            checked={formData.countsToPlan && !formData.isComment}
+            disabled={formData.isComment}
+            onChange={(e) => handleChange('countsToPlan', e.target.checked)}
+          />
+          Vom Abo-Stundenkonto abziehen
+        </label>
+      )}
+
+      <div className="field-row">
+        <Field label="Beginn" htmlFor="worksheet-start-date">
+          <DateTimeInput
+            id="worksheet-start-date"
+            timeLabel="Uhrzeit Beginn"
+            required
+            date={formData.startDate}
+            time={formData.startTime}
+            onDateChange={handleStartDateChange}
+            onTimeChange={(value) => handleChange('startTime', value)}
+          />
+        </Field>
+
+        <Field label="Ende" htmlFor="worksheet-end-date">
+          <DateTimeInput
+            id="worksheet-end-date"
+            timeLabel="Uhrzeit Ende"
+            required
+            min={formData.startDate}
+            date={formData.endDate}
+            time={formData.endTime}
+            onDateChange={(value) => handleChange('endDate', value)}
+            onTimeChange={(value) => handleChange('endTime', value)}
+          />
+        </Field>
+      </div>
+
+      <Field
+        label="Arbeitszeit"
+        htmlFor="worksheet-total"
+        hint={autoCalculate && formData.startTime && formData.endTime
+          ? 'Aus Beginn und Ende berechnet, aufgerundet auf 15 Minuten'
+          : autoCalculate ? 'Beginn und Ende eintragen oder Zeit wählen' : 'Von Hand gewählt'}
+      >
+        <DurationSelect
+          id="worksheet-total"
+          value={formData.isComment ? 0 : formData.totalTime}
+          onChange={(value) => handleChange('totalTime', value)}
+          disabled={formData.isComment}
+        />
+      </Field>
+
+      {!formData.isComment && (
+        <SupportersEditor
+          value={formData.supporters}
+          onChange={(list) => handleChange('supporters', list)}
+          excludeUserId={user?.$id}
+          minutes={formData.totalTime}
+          employeesState={employeesState}
+        />
+      )}
+
+      <Field label="Was wurde gemacht?" htmlFor="worksheet-details">
+        <textarea
+          id="worksheet-details"
+          className="textarea"
+          rows={5}
+          placeholder="Beschreibe die durchgeführten Arbeiten..."
+          value={formData.details}
+          onChange={(e) => handleChange('details', e.target.value)}
+          required
+        />
+      </Field>
+    </Dialog>
   )
 }
-