Finanzen: Rechnung schreiben auf Dialog-Baustein (breit, Enter sendet nie, Esc schliesst Liste zuerst)

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

src/components/finance/InvoiceCreateModal.jsx

@@ -1,9 +1,7 @@
 import { useEffect, useMemo, useRef, useState } from 'react'
-import { FaPlus, FaTrashCan, FaXmark } from 'react-icons/fa6'
-import { AutocompleteInput, Button } from '../ui'
+import { AutocompleteInput, Button, Dialog, Field } from '../ui'
 import AddressWarning from './AddressWarning'
 import { useCustomers } from '../../hooks/useCustomers'
-import { useDialogFocus } from '../../hooks/useDialogFocus'
 import { useScrollIntoView } from '../../hooks/useScrollIntoView'
 import { createInvoice } from '../../lib/financeApi'
 import { canInvoice, euro } from '../../lib/financeFormat'
@@ -65,10 +63,8 @@ function InvoiceForm({ onClose, onCreated, fixedCustomer, source, onShowOverview
   const [busy, setBusy] = useState(null) // 'draft' | 'send'
   const lockRef = useRef(false)
   const aliveRef = useRef(true)
-  const dialogRef = useRef(null)
   const errorRef = useRef(null)
 
-  const onOverlayKeyDown = useDialogFocus(dialogRef)
   // Der Dialog kann höher sein als das Fenster: eine Fehlermeldung oben soll nicht außerhalb des Bildes stehen
   useScrollIntoView(errorRef, error)
 
@@ -79,14 +75,12 @@ function InvoiceForm({ onClose, onCreated, fixedCustomer, source, onShowOverview
     }
   }, [])
 
-  useEffect(() => {
-    const onKey = (e) => {
-      // Escape schließt auch die Kundenliste (Autovervollständigung): dann nicht den ganzen Dialog
-      if (e.key === 'Escape' && !e.defaultPrevented && !lockRef.current) onClose()
-    }
-    document.addEventListener('keydown', onKey)
-    return () => document.removeEventListener('keydown', onKey)
-  }, [onClose])
+  // × und Esc kommen vom Dialog (er ignoriert Esc, wenn die Kundenliste die Taste schon behandelt hat, und solange `busy` gilt).
+  // Die Sperre deckt den Augenblick zwischen Klick und erstem Zeichnen von `busy` ab.
+  const close = () => {
+    if (lockRef.current) return
+    onClose()
+  }
 
   const options = useMemo(() => customerPickerOptions(source?.customers), [source?.customers])
   const resolved = fixedCustomer
@@ -144,203 +138,183 @@ function InvoiceForm({ onClose, onCreated, fixedCustomer, source, onShowOverview
 
   const disabled = busy !== null
 
-  return (
-    <div className="overlay fin-overlay" onKeyDown={onOverlayKeyDown}>
-      <button type="button" className="overlay-close fin-close" onClick={onClose} disabled={disabled} aria-label="Schließen">
-        <FaXmark aria-hidden="true" />
-      </button>
-      <div
-        className="overlay-content fin-dialog"
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby="fin-invoice-title"
-        tabIndex={-1}
-        ref={dialogRef}
+  const footer = (
+    <div className="fin-foot">
+      <Button type="button" onClick={close} disabled={disabled}>Abbrechen</Button>
+      <Button type="button" onClick={() => submit(false)} disabled={disabled}>
+        {busy === 'draft' ? 'Speichere …' : 'Als Entwurf speichern'}
+      </Button>
+      <Button
+        type="button"
+        variant="primary"
+        onClick={() => submit(true)}
+        disabled={disabled || !gate.sendAllowed}
+        title={gate.sendAllowed ? undefined : ADDRESS_INCOMPLETE_TEXT}
       >
-        <h2 id="fin-invoice-title" className="mb-2">Rechnung schreiben</h2>
-
-        {error && (
-          <div className="fin-dialog-error" role="alert" ref={errorRef}>
-            {error}
-          </div>
-        )}
-
-        {/* Enter sendet nie (das wäre eine Mail an den Kunden): nur die beiden Knöpfe unten lösen aus */}
-        <form onSubmit={(e) => e.preventDefault()}>
-          <div className="form-group">
-            <label className="form-label" htmlFor="fin-invoice-customer">Kunde</label>
-            {fixedCustomer ? (
-              <p className="fin-fixed-customer">
-                <strong>{customerName(fixedCustomer) || 'Kunde'}</strong>
-                {fixedCustomer.email ? <span className="fin-dialog-sub"> · {fixedCustomer.email}</span> : null}
-              </p>
-            ) : source?.loading ? (
-              <p className="fin-dialog-sub" role="status">Kunden werden geladen …</p>
-            ) : source?.error ? (
-              <p className="fin-dialog-warn" role="alert">Die Kunden konnten nicht geladen werden: {source.error}</p>
-            ) : (
-              <AutocompleteInput
-                id="fin-invoice-customer"
-                value={customerText}
-                onChange={(v) => {
-                  setCustomerText(v)
-                  if (error) setError('')
-                }}
-                getSuggestions={(t) => customerSuggestions(options, t)}
-                placeholder="Kunde suchen …"
-              />
-            )}
-            {!customerBlocked.ok && (
-              <p className="fin-dialog-warn" role="alert">
-                {customerName(customer)}: {customerBlocked.reason}. Für diesen Kunden kann keine Rechnung geschrieben werden.
-              </p>
-            )}
-            {!fixedCustomer && resolved.state === 'unknown' && (
-              <p className="fin-dialog-sub">Bitte einen Kunden aus der Liste wählen. Nur feste Kunden mit E-Mail-Adresse erscheinen dort.</p>
-            )}
-            {customer && customerBlocked.ok && customer.email && !fixedCustomer && (
-              <p className="fin-dialog-sub">Die Rechnung geht an {customer.email}.</p>
-            )}
-            {gate.warn && (
-              <AddressWarning
-                customer={customer}
-                variant="dialog"
-                onShowOverview={
-                  onShowOverview
-                    ? () => {
-                        if (lockRef.current) return
-                        onClose()
-                        onShowOverview()
-                      }
-                    : undefined
-                }
-              />
-            )}
-          </div>
-
-          <fieldset className="fin-items">
-            <legend className="form-label">Positionen</legend>
-            {items.map((item, index) => {
-              const line = lineTotalCents(item)
-              const n = index + 1
-              return (
-                <div key={item.uid} className="fin-item">
-                  <div className="fin-item-field fin-item-desc">
-                    <label className="fin-item-label" htmlFor={`fin-item-desc-${item.uid}`}>Beschreibung</label>
-                    <input
-                      id={`fin-item-desc-${item.uid}`}
-                      className="form-control"
-                      maxLength={INVOICE_LIMITS.maxDescription}
-                      value={item.description}
-                      onChange={(e) => updateItem(item.uid, 'description', e.target.value)}
-                      aria-label={`Position ${n}: Beschreibung`}
-                      placeholder="z. B. Webdesign Startseite"
-                    />
-                  </div>
-                  <div className="fin-item-field fin-item-qty">
-                    <label className="fin-item-label" htmlFor={`fin-item-qty-${item.uid}`}>Menge</label>
-                    <input
-                      id={`fin-item-qty-${item.uid}`}
-                      className="form-control fin-amount"
-                      inputMode="numeric"
-                      value={item.quantity}
-                      onChange={(e) => updateItem(item.uid, 'quantity', e.target.value)}
-                      aria-label={`Position ${n}: Menge`}
-                    />
-                  </div>
-                  <div className="fin-item-field fin-item-price">
-                    <label className="fin-item-label" htmlFor={`fin-item-price-${item.uid}`}>Einzelpreis in €</label>
-                    <input
-                      id={`fin-item-price-${item.uid}`}
-                      className="form-control fin-amount"
-                      inputMode="decimal"
-                      value={item.price}
-                      onChange={(e) => updateItem(item.uid, 'price', e.target.value)}
-                      aria-label={`Position ${n}: Einzelpreis in Euro`}
-                      placeholder="0,00"
-                    />
-                  </div>
-                  <div className="fin-item-field fin-item-sum">
-                    <span className="fin-item-label">Summe</span>
-                    <span className="fin-amount fin-item-total">{line === null ? '–' : euro(line)}</span>
-                  </div>
-                  <div className="fin-item-field fin-item-remove">
-                    <button
-                      type="button"
-                      className="fin-icon-btn"
-                      onClick={() => setItems((list) => (list.length > 1 ? list.filter((it) => it.uid !== item.uid) : list))}
-                      disabled={items.length <= 1}
-                      aria-label={`Position ${n} entfernen`}
-                      title="Position entfernen"
-                    >
-                      <FaTrashCan aria-hidden="true" />
-                    </button>
-                  </div>
-                </div>
-              )
-            })}
-            <div className="fin-items-foot">
-              <Button
-                type="button"
-                size="sm"
-                variant="ghost"
-                onClick={() => setItems((list) => (list.length < INVOICE_LIMITS.maxItems ? [...list, newItem()] : list))}
-                disabled={items.length >= INVOICE_LIMITS.maxItems}
-              >
-                <FaPlus aria-hidden="true" /> Position
-              </Button>
-              <div className="fin-total" aria-live="polite">
-                <span>Summe</span>
-                <span className="fin-amount fin-total-value">{euro(total)}</span>
-              </div>
-            </div>
-            <p className="fin-dialog-sub">Gemäß § 19 UStG ohne Umsatzsteuer.</p>
-          </fieldset>
-
-          <div className="fin-dialog-row">
-            <div className="form-group fin-days">
-              <label className="form-label" htmlFor="fin-invoice-days">Zahlungsziel in Tagen</label>
-              <input
-                id="fin-invoice-days"
-                className="form-control fin-amount"
-                inputMode="numeric"
-                value={days}
-                onChange={(e) => {
-                  setDays(e.target.value)
-                  if (error) setError('')
-                }}
-              />
-            </div>
-            <div className="form-group fin-memo">
-              <label className="form-label" htmlFor="fin-invoice-memo">Notiz (erscheint auf der Rechnung)</label>
-              <textarea
-                id="fin-invoice-memo"
-                className="form-control"
-                rows={2}
-                maxLength={INVOICE_LIMITS.maxMemo}
-                value={memo}
-                onChange={(e) => setMemo(e.target.value)}
-              />
-            </div>
-          </div>
-
-          <div className="fin-dialog-actions">
-            <Button type="button" variant="ghost" onClick={onClose} disabled={disabled}>Abbrechen</Button>
-            <Button type="button" onClick={() => submit(false)} disabled={disabled}>
-              {busy === 'draft' ? 'Speichere …' : 'Als Entwurf speichern'}
-            </Button>
-            <Button
-              type="button"
-              variant="primary"
-              onClick={() => submit(true)}
-              disabled={disabled || !gate.sendAllowed}
-              title={gate.sendAllowed ? undefined : ADDRESS_INCOMPLETE_TEXT}
-            >
-              {busy === 'send' ? 'Sende …' : 'Senden'}
-            </Button>
-          </div>
-        </form>
-      </div>
+        {busy === 'send' ? 'Sende …' : 'Senden'}
+      </Button>
     </div>
   )
+
+  // Enter sendet nie (das wäre eine Mail an den Kunden): das Formular hat keinen Absenden-Knopf, jeder Knopf darin ist type="button"
+  return (
+    <Dialog as="form" wide title="Rechnung schreiben" onClose={close} busy={disabled} onSubmit={(e) => e.preventDefault()} footer={footer}>
+      {error && (
+        <div className="msg err" role="alert" ref={errorRef}>
+          {error}
+        </div>
+      )}
+
+      <Field label="Kunde" htmlFor="fin-invoice-customer">
+        {fixedCustomer ? (
+          <p className="fin-fixed-customer">
+            <strong className="strong">{customerName(fixedCustomer) || 'Kunde'}</strong>
+            {fixedCustomer.email ? <span className="msg muted"> · {fixedCustomer.email}</span> : null}
+          </p>
+        ) : source?.loading ? (
+          <p className="msg muted" role="status">Kunden werden geladen …</p>
+        ) : source?.error ? (
+          <p className="msg warn" role="alert">Die Kunden konnten nicht geladen werden: {source.error}</p>
+        ) : (
+          <AutocompleteInput
+            id="fin-invoice-customer"
+            value={customerText}
+            onChange={(v) => {
+              setCustomerText(v)
+              if (error) setError('')
+            }}
+            getSuggestions={(t) => customerSuggestions(options, t)}
+            placeholder="Kunde suchen …"
+          />
+        )}
+        {!customerBlocked.ok && (
+          <p className="msg warn" role="alert">
+            {customerName(customer)}: {customerBlocked.reason}. Für diesen Kunden kann keine Rechnung geschrieben werden.
+          </p>
+        )}
+        {!fixedCustomer && resolved.state === 'unknown' && (
+          <p className="msg muted">Bitte einen Kunden aus der Liste wählen. Nur feste Kunden mit E-Mail-Adresse erscheinen dort.</p>
+        )}
+        {customer && customerBlocked.ok && customer.email && !fixedCustomer && (
+          <p className="msg muted">Die Rechnung geht an {customer.email}.</p>
+        )}
+        {gate.warn && (
+          <AddressWarning
+            customer={customer}
+            variant="dialog"
+            onShowOverview={
+              onShowOverview
+                ? () => {
+                    if (lockRef.current) return
+                    onClose()
+                    onShowOverview()
+                  }
+                : undefined
+            }
+          />
+        )}
+      </Field>
+
+      <fieldset className="fin-items">
+        <legend>Positionen</legend>
+        {items.map((item, index) => {
+          const line = lineTotalCents(item)
+          const n = index + 1
+          return (
+            <div key={item.uid} className="fin-item">
+              <div className="fin-item-field fin-item-desc">
+                <label className="fin-item-label" htmlFor={`fin-item-desc-${item.uid}`}>Beschreibung</label>
+                <input
+                  id={`fin-item-desc-${item.uid}`}
+                  className="input"
+                  maxLength={INVOICE_LIMITS.maxDescription}
+                  value={item.description}
+                  onChange={(e) => updateItem(item.uid, 'description', e.target.value)}
+                  aria-label={`Position ${n}: Beschreibung`}
+                  placeholder="z. B. Webdesign Startseite"
+                />
+              </div>
+              <div className="fin-item-field fin-item-qty">
+                <label className="fin-item-label" htmlFor={`fin-item-qty-${item.uid}`}>Menge</label>
+                <input
+                  id={`fin-item-qty-${item.uid}`}
+                  className="input fin-amount"
+                  inputMode="numeric"
+                  value={item.quantity}
+                  onChange={(e) => updateItem(item.uid, 'quantity', e.target.value)}
+                  aria-label={`Position ${n}: Menge`}
+                />
+              </div>
+              <div className="fin-item-field fin-item-price">
+                <label className="fin-item-label" htmlFor={`fin-item-price-${item.uid}`}>Einzelpreis in €</label>
+                <input
+                  id={`fin-item-price-${item.uid}`}
+                  className="input fin-amount"
+                  inputMode="decimal"
+                  value={item.price}
+                  onChange={(e) => updateItem(item.uid, 'price', e.target.value)}
+                  aria-label={`Position ${n}: Einzelpreis in Euro`}
+                  placeholder="0,00"
+                />
+              </div>
+              <div className="fin-item-field fin-item-sum">
+                <span className="fin-item-label">Summe</span>
+                <span className="fin-amount fin-item-total">{line === null ? '–' : euro(line)}</span>
+              </div>
+              <div className="fin-item-field fin-item-remove">
+                <button
+                  type="button"
+                  className="link"
+                  onClick={() => setItems((list) => (list.length > 1 ? list.filter((it) => it.uid !== item.uid) : list))}
+                  disabled={items.length <= 1}
+                  aria-label={`Position ${n} entfernen`}
+                >
+                  Entfernen
+                </button>
+              </div>
+            </div>
+          )
+        })}
+        <div className="fin-items-foot">
+          <Button
+            type="button"
+            onClick={() => setItems((list) => (list.length < INVOICE_LIMITS.maxItems ? [...list, newItem()] : list))}
+            disabled={items.length >= INVOICE_LIMITS.maxItems}
+          >
+            + Position
+          </Button>
+          <div className="fin-total" aria-live="polite">
+            <span>Summe</span>
+            <span className="fin-amount">{euro(total)}</span>
+          </div>
+        </div>
+        <p className="msg muted">Gemäß § 19 UStG ohne Umsatzsteuer.</p>
+      </fieldset>
+
+      <div className="fin-dialog-row">
+        <Field label="Zahlungsziel in Tagen" htmlFor="fin-invoice-days">
+          <input
+            id="fin-invoice-days"
+            className="input fin-amount"
+            inputMode="numeric"
+            value={days}
+            onChange={(e) => {
+              setDays(e.target.value)
+              if (error) setError('')
+            }}
+          />
+        </Field>
+        <Field label="Notiz (erscheint auf der Rechnung)" htmlFor="fin-invoice-memo">
+          <textarea
+            id="fin-invoice-memo"
+            className="textarea"
+            rows={2}
+            maxLength={INVOICE_LIMITS.maxMemo}
+            value={memo}
+            onChange={(e) => setMemo(e.target.value)}
+          />
+        </Field>
+      </div>
+    </Dialog>
+  )
 }

src/styles/global.css

@@ -814,43 +814,29 @@ button.link-danger { background: none; border: 0; padding: 0; font: inherit; fon
   .fin-tx-action { grid-area: action; align-self: start; }
 }
 
-/* Dialoge: Rechnung schreiben, Buchung zuordnen. Overlay, Box und Schliessknopf kommen aus KOMPAT (.overlay:has(> .overlay-content), */
-/* .overlay-content, .overlay-close); hier nur, was dort fehlt. */
-.fin-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
-.fin-close:disabled { opacity: 0.4; cursor: not-allowed; }
-.fin-dialog { max-width: 760px; }
-.fin-dialog:focus { outline: none; }
-.fin-dialog-error {
-  margin-bottom: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm);
-  border: 1px solid var(--danger); background: var(--red-bg); color: var(--red-fg); overflow-wrap: anywhere;
-}
-.fin-dialog-warn { margin: 6px 0 0; font-size: 13px; color: var(--orange-fg); overflow-wrap: anywhere; }
-.fin-dialog-sub { margin: 6px 0 0; font-size: 13px; color: var(--text-muted); overflow-wrap: anywhere; }
-.fin-fixed-customer { margin: 0; overflow-wrap: anywhere; }
+/* Dialoge: Rechnung schreiben, Buchung zuordnen. Huelle, Kopf und Schliessknopf kommen vom Baustein Dialog. */
+.fin-fixed-customer { overflow-wrap: anywhere; }
 .fin-address-warn { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; overflow-wrap: anywhere; }
 .fin-address-warn-page { margin: 0 0 16px; }
 .fin-address-warn-dialog { margin: 0; }
-.fin-items { border: 0; padding: 0; margin: 0 0 var(--sp-4); min-width: 0; }
-.fin-items legend { padding: 0; }
-.fin-item {
-  display: grid; grid-template-columns: minmax(0, 1fr) 90px 130px 120px 38px; gap: 8px; align-items: end; margin-bottom: 8px;
-}
+/* Rechnung schreiben: Positionen, Summe, Zahlungsziel und Notiz */
+.fin-items { border: 0; padding: 0; margin: 0; min-width: 0; }
+.fin-items legend { padding: 0; margin-bottom: 4px; font-weight: 500; }
+.fin-items .msg { margin-top: 8px; overflow-wrap: anywhere; }
+.fin-item { display: grid; grid-template-columns: minmax(0, 1fr) 80px 120px 110px auto; gap: 8px 12px; align-items: end; }
+.fin-item + .fin-item { margin-top: 8px; }
 .fin-item-field { min-width: 0; }
-.fin-item-label { display: block; margin-bottom: 4px; font-size: 12px; color: var(--text-muted); }
-.fin-item ~ .fin-item .fin-item-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
-.fin-item .form-control.fin-amount { text-align: right; }
-.fin-item-total { display: block; padding: 10px 0; font-weight: 600; }
-.fin-icon-btn {
-  width: 38px; height: 40px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
-  background: transparent; border: 1px solid var(--border-strong); border-radius: 6px; color: var(--text-muted);
-}
-.fin-icon-btn:hover:not(:disabled) { color: var(--red-fg); border-color: var(--red-fg); }
-.fin-icon-btn:disabled { opacity: 0.35; cursor: not-allowed; }
-.fin-icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
-.fin-items-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-3); }
-.fin-total { display: flex; align-items: baseline; gap: var(--sp-4); font-size: 18px; font-weight: 700; }
-.fin-dialog-row { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--sp-4); }
-.fin-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-3); margin-top: var(--sp-4); }
+.fin-item .input { width: 100%; }
+.fin-item .fin-amount { text-align: right; }
+.fin-item-label { display: block; margin-bottom: 4px; font-size: 12px; color: var(--text-2); }
+.fin-item + .fin-item .fin-item-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+.fin-item-sum { text-align: right; }
+.fin-item-total { display: block; line-height: 32px; font-weight: 600; }
+.fin-item-remove { display: flex; align-items: center; height: 32px; }
+.fin-item-remove button:disabled { cursor: not-allowed; }
+.fin-items-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
+.fin-total { display: flex; align-items: baseline; gap: 16px; font-size: 18px; font-weight: 600; }
+.fin-dialog-row { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 12px; }
 /* Zuordnen (Dialog): Fuss, Fakten, Auswahlzeilen, Bestaetigung. Huelle, Kopf und Schliessknopf kommen vom Baustein Dialog. */
 .fin-foot { flex: 1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
 .kv .fin-tx-facts-amount { text-align: left; font-weight: 600; }
@@ -869,17 +855,15 @@ button.link-danger { background: none; border: 0; padding: 0; font: inherit; fon
 .fin-confirm p { margin: 0; }
 @media (max-width: 860px) {
   .fin-foot .btn { flex: 1 1 auto; }
-}
-@media (max-width: 640px) {
-  .fin-item { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr) minmax(0, 1fr) 38px; grid-template-areas: "desc desc desc desc" "qty price sum remove"; }
+  .fin-item { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr) minmax(0, 1fr) auto; grid-template-areas: "desc desc desc desc" "qty price sum remove"; }
+  .fin-item + .fin-item { margin-top: 16px; }
   .fin-item-desc { grid-area: desc; }
   .fin-item-qty { grid-area: qty; }
   .fin-item-price { grid-area: price; }
-  .fin-item-sum { grid-area: sum; text-align: right; }
+  .fin-item-sum { grid-area: sum; }
   .fin-item-remove { grid-area: remove; }
-  .fin-item ~ .fin-item .fin-item-label { position: static; width: auto; height: auto; margin: 0 0 4px; overflow: visible; clip: auto; white-space: normal; }
+  .fin-item + .fin-item .fin-item-label { position: static; width: auto; height: auto; margin: 0 0 4px; overflow: visible; clip: auto; white-space: normal; }
   .fin-dialog-row { grid-template-columns: minmax(0, 1fr); }
-  .fin-dialog-actions .ui-btn { flex: 1 1 auto; }
 }
 
 /* Finanzen: Einstellungen (Formular, Bankzugang, Fixkosten) */