Finanzen: Rechnungen und Buchungen als Tabellen ohne Karten, Textaktionen, Blaetterleiste

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

src/components/finance/AddressWarning.jsx

@@ -5,19 +5,20 @@ import { ADDRESS_INCOMPLETE_TEXT, addressComplete } from '../../lib/financeView'
  * Hinweis „Adresse des Kunden unvollständig (Straße, PLZ, Ort). Für den Versand bitte zuerst ergänzen.“ mit Weg zur
  * Übersicht des Kunden (dort stehen die Stammdaten). Rendert nichts, wenn die Anschrift vollständig ist. Mit
  * `onShowOverview` (Reiter am Kunden) wechselt ein Knopf zum Reiter Übersicht, sonst führt ein Link zur Kundenseite.
- * `variant`: 'dialog' (im Rechnungsdialog) oder 'page' (über der Rechnungsliste des Kunden).
+ * `variant`: 'dialog' (im Rechnungsdialog) oder 'page' (über der Rechnungsliste des Kunden). Der Knopf trägt immer
+ * type="button", denn die Variante 'dialog' steht in einem Formular.
  */
 export default function AddressWarning({ customer, onShowOverview, variant = 'page' }) {
   if (!customer || addressComplete(customer)) return null
   return (
-    <div className={`fin-address-warn fin-address-warn-${variant}`} role="alert">
+    <div className={`msg warn fin-address-warn fin-address-warn-${variant}`} role="alert">
       <span>{ADDRESS_INCOMPLETE_TEXT}</span>
       {onShowOverview ? (
-        <button type="button" className="fin-link" onClick={onShowOverview}>
+        <button type="button" className="link" onClick={onShowOverview}>
           Zur Übersicht
         </button>
       ) : customer.$id ? (
-        <Link className="fin-link" to={`/customers/${customer.$id}`}>
+        <Link className="link" to={`/customers/${customer.$id}`}>
           Zur Übersicht
         </Link>
       ) : null}

src/components/finance/CustomerInvoices.jsx

@@ -1,4 +1,4 @@
-import { Button, Card, EmptyState } from '../ui'
+import { Button, EmptyState } from '../ui'
 import AddressWarning from './AddressWarning'
 import InvoiceTable from './InvoiceTable'
 import { customerInvoicesGate } from '../../lib/financeView'
@@ -13,13 +13,11 @@ export default function CustomerInvoices({ customer, onShowOverview }) {
   const gate = customerInvoicesGate(customer)
   if (!gate.ok) {
     return (
-      <Card>
-        <EmptyState
-          title={gate.title}
-          hint={gate.hint}
-          action={onShowOverview ? <Button variant="primary" onClick={onShowOverview}>Daten erfassen</Button> : null}
-        />
-      </Card>
+      <EmptyState
+        title={gate.title}
+        hint={gate.hint}
+        action={onShowOverview ? <Button variant="primary" onClick={onShowOverview}>Daten erfassen</Button> : null}
+      />
     )
   }
   return (

src/components/finance/InvoiceTable.jsx

@@ -1,10 +1,10 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { FaPlus, FaSpinner } from 'react-icons/fa6'
-import { Badge, Button, Card, EmptyState } from '../ui'
+import { Badge, Button, Card, EmptyState, Stat } from '../ui'
 import InvoiceCreateModal from './InvoiceCreateModal'
 import Pager from './Pager'
 import { deleteInvoice, getInvoices, resendInvoice, sendInvoice, voidInvoice } from '../../lib/financeApi'
 import { pageOf } from '../../lib/financeFormat'
+import { noticeProps } from '../../lib/financeUi'
 import {
   ADDRESS_INCOMPLETE_TEXT,
   DEFAULT_INVOICE_FILTER,
@@ -33,8 +33,8 @@ const CALLS = { send: sendInvoice, resend: resendInvoice, void: voidInvoice, del
  * eine Anfrage läuft, sind alle Aktionen gesperrt. „Rechnung schreiben“ öffnet den Dialog.
  *
  * customerId filtert auf einen Kunden; `customer` (Appwrite-Dokument) legt zusätzlich den Kunden im Dialog fest
- * (Kundenansicht). onChanged() meldet jede Änderung (Übersicht neu laden). Schmal (Karte bis 700 px) wird jede
- * Zeile ein Raster: Nummer und Status / Kunde / Datum, Fällig / Betrag, Offen / Aktionen. „Senden“ eines Entwurfs
+ * (Kundenansicht). onChanged() meldet jede Änderung (Übersicht neu laden). Schmal (Wrapper .fin-body bis 860 px)
+ * 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.
  *
@@ -147,137 +147,147 @@ export default function InvoiceTable({ altersgruppen = null, customerId = null,
     changed()
   }
 
+
   return (
     <section id={filterCustomer ? undefined : INVOICES_ANCHOR} className="fin-block">
       <Card
         title="Rechnungen"
-        className="fin-invoices-card"
-        bodyStyle={{ padding: 0 }}
         actions={
-          <Button variant="primary" size="sm" onClick={() => setCreateOpen(true)}>
-            <FaPlus aria-hidden="true" /> Rechnung schreiben
+          <Button variant="primary" onClick={() => setCreateOpen(true)}>
+            Rechnung schreiben
           </Button>
         }
       >
-        {ages.length > 0 && (
-          <ul className="fin-ages" aria-label="Offene Rechnungen nach Alter">
-            {ages.map((cell) => (
-              <li key={cell.key} className="fin-age">
-                <span className="fin-age-label">{cell.label}</span>
-                <span className="fin-age-count">{cell.count} {cell.count === 1 ? 'Rechnung' : 'Rechnungen'}</span>
-                <span className="fin-amount fin-age-sum">{cell.sumText}</span>
-              </li>
-            ))}
-          </ul>
-        )}
+        <div className="fin-body">
+          {ages.length > 0 && (
+            <ul className="stats fin-ages" aria-label="Offene Rechnungen nach Alter">
+              {ages.map((cell) => (
+                <li key={cell.key}>
+                  <Stat label={cell.label} value={cell.sumText} sub={`${cell.count} ${cell.count === 1 ? 'Rechnung' : 'Rechnungen'}`} />
+                </li>
+              ))}
+            </ul>
+          )}
 
-        <div className="fin-toolbar">
-          <div className="seg" role="group" aria-label="Rechnungen filtern">
-            {INVOICE_FILTERS.map((f) => (
-              <button
-                key={f.key}
-                type="button"
-                className={status === f.key ? 'active' : ''}
-                aria-pressed={status === f.key}
-                onClick={() => pickFilter(f.key)}
-              >
-                {f.label}
-              </button>
-            ))}
+          <div className="toolbar">
+            <div className="seg" role="group" aria-label="Rechnungen filtern">
+              {INVOICE_FILTERS.map((f) => (
+                <button
+                  key={f.key}
+                  type="button"
+                  className={status === f.key ? 'on' : ''}
+                  aria-pressed={status === f.key}
+                  onClick={() => pickFilter(f.key)}
+                >
+                  {f.label}
+                </button>
+              ))}
+            </div>
           </div>
-        </div>
 
-        {message && (
-          <p className={`fin-hint fin-notice${message.tone === 'warn' ? ' fin-hint-warn' : ''}`} role={message.tone === 'warn' ? 'alert' : 'status'}>
-            {message.text}
-          </p>
-        )}
+          {message && <p {...noticeProps(message.tone, 'fin-notice')}>{message.text}</p>}
 
-        {loading ? (
-          <div className="empty" role="status">
-            <FaSpinner className="spinner" aria-hidden="true" />
-            <p className="muted">Rechnungen werden geladen …</p>
-          </div>
-        ) : loadError ? (
-          <div className="fin-load-error">
-            <p className="fin-hint fin-hint-warn" role="alert">{loadError}</p>
-            <Button size="sm" onClick={reload}>Erneut versuchen</Button>
-          </div>
-        ) : rows.length === 0 ? (
-          <EmptyState title="Keine Rechnungen in dieser Ansicht." />
-        ) : (
-          <div className="fin-table-wrap">
-            <table className="ui-table fin-invoices" role="table">
-              <caption className="fin-sr">Rechnungen, neueste zuerst</caption>
-              <thead role="rowgroup">
-                <tr role="row">
-                  <th role="columnheader" scope="col">Nr.</th>
-                  <th role="columnheader" scope="col">Kunde</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>
-                  <th role="columnheader" scope="col" className="fin-amount">Offen</th>
-                  <th role="columnheader" scope="col">Status</th>
-                  <th role="columnheader" scope="col">Aktionen</th>
-                </tr>
-              </thead>
-              <tbody role="rowgroup">
-                {paged.items.map((row) => (
-                  <tr key={row.key} role="row">
-                    <td role="cell" className="fin-inv-number">
-                      {row.numberText}
-                      {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-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>
-                    <td role="cell" className="fin-amount fin-inv-remaining" data-label="Offen">{row.remainingText}</td>
-                    <td role="cell" className="fin-inv-status">
-                      <div className="fin-inv-statusbox">
-                        <Badge tone={row.statusTone}>{row.statusLabel}</Badge>
-                        {row.statusNote && <span className="fin-inv-note muted">{row.statusNote}</span>}
-                      </div>
-                    </td>
-                    <td role="cell" className="fin-inv-actions">
-                      <div className="fin-actions">
-                        {row.actions.map((action) =>
-                          action.url ? (
-                            <Button
-                              key={action.key}
-                              as="a"
-                              size="sm"
-                              variant="ghost"
-                              href={action.url}
-                              target="_blank"
-                              rel="noopener noreferrer"
-                              aria-label={`${action.label} öffnen: ${row.numberText}, ${row.customerText}`}
-                            >
-                              {action.label}
-                            </Button>
-                          ) : (
-                            <Button
-                              key={action.key}
-                              size="sm"
-                              variant={action.key === 'delete' || action.key === 'void' ? 'danger' : 'ghost'}
-                              onClick={() => run(row, action)}
-                              disabled={busy !== null || (action.key === 'send' && sendBlocked(byId[row.id]))}
-                              title={action.key === 'send' && sendBlocked(byId[row.id]) ? ADDRESS_INCOMPLETE_TEXT : undefined}
-                              aria-label={`${action.label}: ${row.numberText}, ${row.customerText}`}
-                            >
-                              {busy === `${row.id}:${action.key}` ? RUNNING_LABEL[action.key] : action.label}
-                            </Button>
-                          )
-                        )}
-                      </div>
-                    </td>
+          {loading ? (
+            <div className="loading" role="status">Rechnungen werden geladen …</div>
+          ) : loadError ? (
+            <div className="fin-load-error">
+              <p className="msg warn" role="alert">{loadError}</p>
+              <Button onClick={reload}>Erneut versuchen</Button>
+            </div>
+          ) : rows.length === 0 ? (
+            <EmptyState title="Keine Rechnungen in dieser Ansicht." />
+          ) : (
+            <div className="fin-table-wrap">
+              <table className="table fin-invoices" role="table">
+                <caption className="fin-sr">Rechnungen, neueste zuerst</caption>
+                <thead role="rowgroup">
+                  <tr role="row">
+                    <th role="columnheader" scope="col">Nr.</th>
+                    <th role="columnheader" scope="col">Kunde</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>
+                    <th role="columnheader" scope="col" className="fin-amount">Offen</th>
+                    <th role="columnheader" scope="col">Status</th>
+                    <th role="columnheader" scope="col">Aktionen</th>
                   </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        )}
-        <Pager page={paged.page} pages={paged.pages} total={rows.length} noun="Rechnungen" onPage={setPage} />
+                </thead>
+                <tbody role="rowgroup">
+                  {paged.items.map((row) => (
+                    <tr key={row.key} role="row">
+                      <td role="cell" className="fin-inv-number">
+                        {row.numberText}
+                        {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-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>
+                      <td role="cell" className="fin-amount fin-inv-remaining" data-label="Offen">{row.remainingText}</td>
+                      <td role="cell" className="fin-inv-status">
+                        <div className="fin-inv-statusbox">
+                          <Badge tone={row.statusTone}>{row.statusLabel}</Badge>
+                          {row.statusNote && <span className="fin-inv-note muted">{row.statusNote}</span>}
+                        </div>
+                      </td>
+                      <td role="cell" className="fin-inv-actions">
+                        <div className="fin-actions">
+                          {row.actions.map((action) => {
+                            const label = `${action.label}: ${row.numberText}, ${row.customerText}`
+                            if (action.url) {
+                              return (
+                                <a
+                                  key={action.key}
+                                  className="link"
+                                  href={action.url}
+                                  target="_blank"
+                                  rel="noopener noreferrer"
+                                  aria-label={`${action.label} öffnen: ${row.numberText}, ${row.customerText}`}
+                                >
+                                  {action.label}
+                                </a>
+                              )
+                            }
+                            const running = busy === `${row.id}:${action.key}` ? RUNNING_LABEL[action.key] : action.label
+                            if (action.key === 'delete' || action.key === 'void') {
+                              return (
+                                <Button
+                                  key={action.key}
+                                  type="button"
+                                  variant="danger"
+                                  onClick={() => run(row, action)}
+                                  disabled={busy !== null}
+                                  aria-label={label}
+                                >
+                                  {running}
+                                </Button>
+                              )
+                            }
+                            const gated = action.key === 'send' && sendBlocked(byId[row.id])
+                            return (
+                              <button
+                                key={action.key}
+                                type="button"
+                                className="link"
+                                onClick={() => run(row, action)}
+                                disabled={busy !== null || gated}
+                                title={gated ? ADDRESS_INCOMPLETE_TEXT : undefined}
+                                aria-label={label}
+                              >
+                                {running}
+                              </button>
+                            )
+                          })}
+                        </div>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+          <Pager page={paged.page} pages={paged.pages} total={rows.length} noun="Rechnungen" onPage={setPage} />
+        </div>
       </Card>
 
       <InvoiceCreateModal

src/components/finance/Pager.jsx

@@ -7,15 +7,15 @@ import { Button } from '../ui'
 export default function Pager({ page, pages, total, noun = 'Einträge', onPage }) {
   if (pages <= 1) return null
   return (
-    <nav className="fin-pager" aria-label={`Seiten der ${noun}`}>
-      <Button size="sm" variant="ghost" onClick={() => onPage(page - 1)} disabled={page <= 1}>
+    <nav className="table-foot fin-pager" aria-label={`Seiten der ${noun}`}>
+      <Button type="button" variant="quiet" onClick={() => onPage(page - 1)} disabled={page <= 1}>
         Zurück
       </Button>
       <span className="fin-pager-info" aria-live="polite">
         Seite {page} von {pages}
         {typeof total === 'number' ? ` · ${total} ${noun}` : ''}
       </span>
-      <Button size="sm" variant="ghost" onClick={() => onPage(page + 1)} disabled={page >= pages}>
+      <Button type="button" variant="quiet" onClick={() => onPage(page + 1)} disabled={page >= pages}>
         Weiter
       </Button>
     </nav>

src/components/finance/TransactionTable.jsx

@@ -1,8 +1,8 @@
 import { useMemo, useState } from 'react'
-import { FaSpinner, FaTriangleExclamation } from 'react-icons/fa6'
 import { Badge, Button, Card, EmptyState } from '../ui'
 import Pager from './Pager'
 import { pageOf } from '../../lib/financeFormat'
+import { isNegText, noticeProps } from '../../lib/financeUi'
 import { transactionRows } from '../../lib/financeView'
 
 const PAGE_SIZE = 50
@@ -13,8 +13,8 @@ export const TRANSACTIONS_ANCHOR = 'finanzen-buchungen'
  * Verwendungszweck (zweizeilig), Betrag mit Vorzeichen, Zuordnung (bei offenen Buchungen der stärkste Vorschlag als
  * Text) und der Knopf „Zuordnen“ bzw. „Ändern“. Vorgemerkte Buchungen (PDNG) tragen „vorgemerkt“. Die Daten kommen
  * vom Aufrufer (useFinanceTransactions), damit Seite und Zuordnen-Dialog dieselbe Liste benutzen.
- * onAssign(buchung) öffnet den Dialog. Schmal (Karte bis 640 px) wird jede Zeile ein Raster: Datum und Betrag /
- * Gegenpartei und Verwendungszweck / Zuordnung und Knopf.
+ * onAssign(buchung) öffnet den Dialog. Schmal (Wrapper .fin-body bis 640 px) wird jede Zeile ein Raster: Datum und
+ * Betrag / Gegenpartei und Verwendungszweck / Zuordnung und Knopf. Beträge mit „−“ stehen in Rot (fin-neg).
  */
 export default function TransactionTable({ transactions, stripeFehler = '', loaded = false, loading = false, error = '', onReload, onAssign }) {
   const [page, setPage] = useState(1)
@@ -24,16 +24,13 @@ export default function TransactionTable({ transactions, stripeFehler = '', load
   let body
   if (!loaded && loading) {
     body = (
-      <div className="empty" role="status">
-        <FaSpinner className="spinner" aria-hidden="true" />
-        <p className="muted">Buchungen werden geladen …</p>
-      </div>
+      <div className="loading" role="status">Buchungen werden geladen …</div>
     )
   } else if (!loaded) {
     body = (
       <div className="fin-load-error">
-        <p className="fin-hint fin-hint-warn" role="alert">{error || 'Die Buchungen konnten nicht geladen werden.'}</p>
-        <Button size="sm" onClick={onReload}>Erneut versuchen</Button>
+        <p className="msg warn" role="alert">{error || 'Die Buchungen konnten nicht geladen werden.'}</p>
+        <Button onClick={onReload}>Erneut versuchen</Button>
       </div>
     )
   } else if (rows.length === 0) {
@@ -41,7 +38,7 @@ export default function TransactionTable({ transactions, stripeFehler = '', load
   } else {
     body = (
       <div className="fin-table-wrap">
-        <table className="ui-table fin-tx" role="table">
+        <table className="table fin-tx" role="table">
           <caption className="fin-sr">Buchungen, neueste zuerst</caption>
           <thead role="rowgroup">
             <tr role="row">
@@ -62,7 +59,12 @@ export default function TransactionTable({ transactions, stripeFehler = '', load
                     <div className="fin-tx-remittance muted" title={row.remittance}>{row.remittance}</div>
                   )}
                 </td>
-                <td role="cell" className={`fin-amount fin-tx-amount${row.incoming ? '' : ' fin-tx-out'}`}>{row.amountText}</td>
+                <td
+                  role="cell"
+                  className={`fin-amount fin-tx-amount${row.incoming ? '' : ' fin-tx-out'}${isNegText(row.amountText) ? ' fin-neg' : ''}`}
+                >
+                  {row.amountText}
+                </td>
                 <td role="cell" className="fin-tx-assign">
                   <div className="fin-tx-badges">
                     <Badge tone={row.assigned ? 'ok' : 'warn'}>{row.assignmentText}</Badge>
@@ -73,14 +75,14 @@ export default function TransactionTable({ transactions, stripeFehler = '', load
                 </td>
                 <td role="cell" className="fin-tx-action">
                   {row.action && (
-                    <Button
-                      size="sm"
-                      variant={row.action === 'assign' ? 'default' : 'ghost'}
+                    <button
+                      type="button"
+                      className="link"
                       onClick={() => onAssign(row.tx)}
                       aria-label={`${row.actionLabel}: ${row.amountText} ${row.counterparty}`}
                     >
                       {row.actionLabel}
-                    </Button>
+                    </button>
                   )}
                 </td>
               </tr>
@@ -93,20 +95,22 @@ export default function TransactionTable({ transactions, stripeFehler = '', load
 
   return (
     <section id={TRANSACTIONS_ANCHOR} className="fin-block">
-      <Card title="Buchungen" className="fin-tx-card" bodyStyle={{ padding: 0 }}>
-        {loaded && error && (
-          <p className="fin-hint fin-hint-warn fin-notice" role="alert">
-            Die Buchungen konnten nicht neu geladen werden: {error}{' '}
-            <Button size="sm" variant="ghost" onClick={onReload} disabled={loading}>Erneut versuchen</Button>
-          </p>
-        )}
-        {stripeFehler && (
-          <p className="fin-hint fin-hint-warn fin-notice" role="status">
-            <FaTriangleExclamation aria-hidden="true" /> {stripeFehler}
-          </p>
-        )}
-        {body}
-        <Pager page={paged.page} pages={paged.pages} total={rows.length} noun="Buchungen" onPage={setPage} />
+      <Card title="Buchungen">
+        <div className="fin-body">
+          {loaded && error && (
+            <p {...noticeProps('warn', 'fin-notice')}>
+              Die Buchungen konnten nicht neu geladen werden: {error}{' '}
+              <button type="button" className="link" onClick={onReload} disabled={loading}>Erneut versuchen</button>
+            </p>
+          )}
+          {stripeFehler && (
+            <p className="msg warn fin-notice" role="status">
+              {stripeFehler}
+            </p>
+          )}
+          {body}
+          <Pager page={paged.page} pages={paged.pages} total={rows.length} noun="Buchungen" onPage={setPage} />
+        </div>
       </Card>
     </section>
   )