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

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

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>
   )