Rechnungstabelle: Spalten Projekt und Art, Knopf Rechnung schreiben öffnet den neuen Dialog

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

src/components/auftraege/rechnung-dialog.css

@@ -47,3 +47,13 @@
 /* Fuß des Dialogs */
 .rd-foot { display: flex; flex: 1; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
 @media (max-width: 860px) { .rd-foot .btn { flex: 1 1 auto; } }
+
+/* Rechnungstabelle (InvoiceTable): Spalten Projekt und Art. Zwei Klassen vor dem Elementnamen, damit diese Rasterflächen
+   die Regel .fin-invoices tr aus global.css überstimmen (dieses Stylesheet steht davor im Bundle). */
+.fin-block .fin-inv-project { overflow-wrap: anywhere; }
+.fin-block .fin-inv-art { white-space: nowrap; }
+@container (max-width: 860px) {
+  .fin-block .fin-invoices tr { grid-template-areas: "number status" "customer customer" "projekt art" "created due" "total remaining" "actions actions"; }
+  .fin-block .fin-inv-project { grid-area: projekt; }
+  .fin-block .fin-inv-art { grid-area: art; }
+}

src/components/finance/InvoiceTable.jsx

@@ -1,10 +1,11 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Badge, Button, Card, EmptyState, Stat } from '../ui'
-import InvoiceCreateModal from './InvoiceCreateModal'
+import RechnungDialog from '../auftraege/RechnungDialog'
 import Pager from './Pager'
 import { deleteInvoice, getInvoices, resendInvoice, sendInvoice, voidInvoice } from '../../lib/financeApi'
 import { pageOf } from '../../lib/financeFormat'
 import { noticeProps } from '../../lib/financeUi'
+import { artLabel, projektSpalte } from '../../lib/projektkontoView'
 import {
   ADDRESS_INCOMPLETE_TEXT,
   DEFAULT_INVOICE_FILTER,
@@ -37,6 +38,8 @@ const CALLS = { send: sendInvoice, resend: resendInvoice, void: voidInvoice, del
  * wird jede Zeile ein Raster: Nummer und Status / Kunde / Datum, Fällig / Betrag, Offen / Aktionen. „Senden“ eines Entwurfs
  * fragt vorher nach. In der Kundenansicht ist „Senden“ gesperrt, solange dem Kunden die Anschrift fehlt und der
  * Entwurf über 250 € liegt (§ 14 Abs. 4 Nr. 1 UStG); `onShowOverview` führt dann im Dialog zur Übersicht.
+ * Die Tabelle zeigt zusätzlich die Spalten Projekt und Art; „Rechnung schreiben“ öffnet den Dialog `RechnungDialog`
+ * (Projektwahl, Arten, Vorschau).
  *
  * „Offen“ zeigt offene und überfällige Rechnungen (zwei Abrufe, zusammengeführt, neueste zuerst). Ändert sich
  * `refreshToken` (die Seite lädt nach Zuordnen, Bankabruf usw. alles neu), lädt auch die Liste neu.
@@ -204,6 +207,8 @@ export default function InvoiceTable({ altersgruppen = null, customerId = null,
                   <tr role="row">
                     <th role="columnheader" scope="col">Nr.</th>
                     <th role="columnheader" scope="col">Kunde</th>
+                    <th role="columnheader" scope="col">Projekt</th>
+                    <th role="columnheader" scope="col">Art</th>
                     <th role="columnheader" scope="col">Datum</th>
                     <th role="columnheader" scope="col">Fällig</th>
                     <th role="columnheader" scope="col" className="fin-amount">Betrag</th>
@@ -220,6 +225,8 @@ export default function InvoiceTable({ altersgruppen = null, customerId = null,
                         {row.isAbo && <span className="fin-inv-abo muted"> · Abo</span>}
                       </td>
                       <td role="cell" className="fin-inv-customer">{row.customerText}</td>
+                      <td role="cell" className="fin-inv-project" data-label="Projekt">{projektSpalte(byId[row.id])}</td>
+                      <td role="cell" className="fin-inv-art" data-label="Art">{artLabel(byId[row.id]?.art)}</td>
                       <td role="cell" className="fin-inv-created" data-label="Datum">{row.createdText}</td>
                       <td role="cell" className="fin-inv-due" data-label="Fällig">{row.dueText}</td>
                       <td role="cell" className="fin-amount fin-inv-total" data-label="Betrag">{row.totalText}</td>
@@ -290,11 +297,11 @@ export default function InvoiceTable({ altersgruppen = null, customerId = null,
         </div>
       </Card>
 
-      <InvoiceCreateModal
+      <RechnungDialog
         open={createOpen}
         onClose={() => setCreateOpen(false)}
         onCreated={handleCreated}
-        fixedCustomer={customer}
+        kunde={customer}
         onShowOverview={onShowOverview}
       />
     </section>