Finanzen: Seitenkopf, Statuszeile, Kennzahlen und Aufgaben ohne Karten; Kpi entfernt

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

src/pages/FinancePage.jsx

@@ -1,7 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { Link, useNavigate } from 'react-router-dom'
-import { FaGear, FaSpinner } from 'react-icons/fa6'
-import { PageHeader, Card, Button } from '../components/ui'
+import { PageHeader, Button } from '../components/ui'
 import StatusLine from '../components/finance/StatusLine'
 import LiquidityHead from '../components/finance/LiquidityHead'
 import TodoList from '../components/finance/TodoList'
@@ -16,6 +15,7 @@ import { useFinanceTransactions } from '../hooks/useFinanceTransactions'
 import { useOpenInvoices } from '../hooks/useOpenInvoices'
 import { createFixedCost, refreshBank, startBankAuth } from '../lib/financeApi'
 import { planTodoAction, safeUrl } from '../lib/financeView'
+import { noticeProps } from '../lib/financeUi'
 
 export default function FinancePage() {
   const navigate = useNavigate()
@@ -139,29 +139,30 @@ export default function FinancePage() {
   let body
   if (!data && loading) {
     body = (
-      <div className="empty" role="status">
-        <FaSpinner className="spinner" aria-hidden="true" />
-        <p className="muted">Finanzen werden geladen …</p>
+      <div className="loading" role="status">
+        Finanzen werden geladen …
       </div>
     )
   } else if (!data) {
     body = (
-      <Card>
-        <p role="alert" style={{ fontWeight: 600, marginTop: 0 }}>{error || 'Die Übersicht konnte nicht geladen werden.'}</p>
+      <div className="fin-load-error">
+        <p className="msg err" role="alert">{error || 'Die Übersicht konnte nicht geladen werden.'}</p>
         <Button variant="primary" onClick={reload}>Erneut versuchen</Button>
-      </Card>
+      </div>
     )
   } else {
     body = (
       <div className="fin-stack">
         {error && (
-          <p className="fin-hint fin-hint-warn" role="alert">
+          <p {...noticeProps('warn')}>
             Die Übersicht konnte nicht neu geladen werden: {error}{' '}
-            <Button size="sm" variant="ghost" onClick={reload} disabled={loading}>Erneut versuchen</Button>
+            <button type="button" className="link" onClick={reload} disabled={loading}>Erneut versuchen</button>
           </p>
         )}
-        <StatusLine stand={data.stand} onRefresh={refresh} refreshing={refreshing} />
-        <LiquidityHead kopf={data.kopf} />
+        <div className="fin-top">
+          <StatusLine stand={data.stand} onRefresh={refresh} refreshing={refreshing} />
+          <LiquidityHead kopf={data.kopf} />
+        </div>
         <TodoList aufgaben={data.aufgaben} onAction={handleAction} />
         <div className="fin-cols">
           <ForecastTable
@@ -195,15 +196,13 @@ export default function FinancePage() {
         title="Finanzen"
         subtitle="Kontostand, Aufgaben und Zahlungen im Blick"
         actions={
-          <Button as={Link} variant="ghost" to="/finance/einstellungen">
-            <FaGear aria-hidden="true" /> Einstellungen
-          </Button>
+          <Button as={Link} to="/finance/einstellungen">Einstellungen</Button>
         }
       />
       {assignNotice && (
-        <p className="fin-hint fin-hint-warn fin-page-notice" role="alert">
+        <p {...noticeProps('warn', 'fin-page-notice')}>
           {assignNotice}{' '}
-          <Button size="sm" variant="ghost" onClick={() => setAssignNotice('')}>Schließen</Button>
+          <button type="button" className="link" onClick={() => setAssignNotice('')}>Schließen</button>
         </p>
       )}
       {body}