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

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

src/components/finance/LiquidityHead.jsx

@@ -1,8 +1,8 @@
 import { useId, useState } from 'react'
-import { FaChevronDown, FaChevronUp } from 'react-icons/fa6'
-import { Kpi } from '../ui'
+import { Stat } from '../ui'
 import { euroWhole } from '../../lib/financeFormat'
 import { breakdownRows, lowPointLines } from '../../lib/financeView'
+import { isNegText } from '../../lib/financeUi'
 
 const isNum = (v) => typeof v === 'number' && Number.isFinite(v)
 
@@ -15,20 +15,21 @@ export default function LiquidityHead({ kopf }) {
   const hasBalance = isNum(k.kontostandCents)
   const shortfall = isNum(k.verfuegbarCents) && k.verfuegbarCents < 0
   const lows = lowPointLines(k)
-  const anyLowNegative = lows.some((l) => l && l.negative)
+  const balanceText = euroWhole(k.kontostandCents)
 
   return (
-    <div className="kpi-grid fin-head">
-      <Kpi
+    <div className="stats fin-head">
+      <Stat
         label="Kontostand"
-        value={euroWhole(k.kontostandCents)}
+        value={balanceText}
+        tone={isNegText(balanceText) ? 'neg' : ''}
         sub={hasBalance ? 'gebucht' : 'Noch kein Kontostand abgerufen'}
       />
 
-      <Kpi
+      <Stat
         label="Verfügbar nach Rücklagen"
         value={euroWhole(k.verfuegbarCents)}
-        accent={shortfall ? 'var(--danger)' : 'var(--accent)'}
+        tone={shortfall ? 'neg' : ''}
         sub={
           <>
             {shortfall && <div className="fin-flag">Rücklagen nicht gedeckt</div>}
@@ -36,12 +37,12 @@ export default function LiquidityHead({ kopf }) {
               <>
                 <button
                   type="button"
-                  className="fin-link"
+                  className="link"
                   aria-expanded={open}
                   aria-controls={listId}
                   onClick={() => setOpen((v) => !v)}
                 >
-                  Aufschlüsselung {open ? <FaChevronUp aria-hidden="true" /> : <FaChevronDown aria-hidden="true" />}
+                  Aufschlüsselung <span aria-hidden="true">{open ? '▴' : '▾'}</span>
                 </button>
                 {open && (
                   <ul id={listId} className="fin-breakdown">
@@ -60,9 +61,8 @@ export default function LiquidityHead({ kopf }) {
         }
       />
 
-      <Kpi
+      <Stat
         label="Tiefster Stand in 30 Tagen"
-        accent={anyLowNegative ? 'var(--danger)' : 'var(--info)'}
         value={
           lows.some(Boolean) ? (
             <div className="fin-lows">
@@ -71,7 +71,7 @@ export default function LiquidityHead({ kopf }) {
                   low && (
                     <div key={low.key} className="fin-low">
                       <span className="fin-low-label">{low.label}:</span>
-                      <span className="fin-amount">{low.amountText}</span>
+                      <span className={`fin-amount${low.negative ? ' fin-neg' : ''}`}>{low.amountText}</span>
                       <span className="fin-low-when">
                         am {low.dateText}
                         {low.negative && <span className="fin-flag"> · im Minus</span>}

src/components/finance/StatusLine.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from 'react'
-import { FaRotate, FaTriangleExclamation } from 'react-icons/fa6'
 import { Button } from '../ui'
 import { statusItems } from '../../lib/financeView'
+import { noticeProps } from '../../lib/financeUi'
 
 /**
  * Block 0: Stand von Bank und Stripe in einer Zeile und der Knopf „Aktualisieren“.
@@ -37,21 +37,15 @@ export default function StatusLine({ stand, onRefresh, refreshing = false }) {
         <div className="fin-status-items">
           {items.map((item) => (
             <span key={item.key} className={`fin-status-item${item.ok ? '' : ' fin-status-warn'}`}>
-              {!item.ok && <FaTriangleExclamation aria-hidden="true" />}
               {item.text}
             </span>
           ))}
         </div>
-        <Button size="sm" variant="ghost" onClick={handleRefresh} disabled={refreshing}>
-          <FaRotate className={refreshing ? 'fin-spin' : undefined} aria-hidden="true" />{' '}
+        <Button onClick={handleRefresh} disabled={refreshing}>
           {refreshing ? 'Aktualisiere …' : 'Aktualisieren'}
         </Button>
       </div>
-      {hint && (
-        <p className={`fin-hint${hint.limited ? '' : ' fin-hint-warn'}`} role={hint.limited ? 'status' : 'alert'}>
-          {hint.text}
-        </p>
-      )}
+      {hint && <p {...noticeProps(hint.limited ? 'info' : 'warn', 'fin-notice')}>{hint.text}</p>}
     </div>
   )
 }

src/components/finance/TodoList.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react'
-import { Badge, Button, Card, EmptyState } from '../ui'
+import { Badge, Card, EmptyState } from '../ui'
 import { TODO_LIMIT, todoButtonLabel, todoKey, urgencyOf, visibleTodos } from '../../lib/financeView'
 
 /**
@@ -35,12 +35,7 @@ export default function TodoList({ aufgaben, onAction }) {
   }
 
   return (
-    <Card
-      title="Zu erledigen"
-      actions={total > 0 ? <Badge tone="muted">{total} offen</Badge> : null}
-      className="fin-todo-card"
-      bodyStyle={{ padding: 0 }}
-    >
+    <Card title="Zu erledigen" actions={total > 0 ? <Badge tone="muted">{total} offen</Badge> : null}>
       {total === 0 ? (
         <EmptyState title="Nichts offen" />
       ) : (
@@ -51,31 +46,31 @@ export default function TodoList({ aufgaben, onAction }) {
               const urgency = urgencyOf(todo)
               const label = todoButtonLabel(todo)
               return (
-                <li key={key} className={`fin-todo fin-todo-${todo.dringlichkeit || 'info'}`}>
+                <li key={key} className="fin-todo">
                   <Badge tone={urgency.tone}>{urgency.label}</Badge>
-                  <div className="fin-todo-main">
+                  <div>
                     <div className="fin-todo-title">{todo.titel}</div>
                     {todo.text && <div className="fin-todo-text muted">{todo.text}</div>}
                     {failure?.key === key && (
-                      <div className="fin-hint fin-hint-warn" role="alert">
+                      <div className="msg warn" role="alert">
                         {failure.message}
                       </div>
                     )}
                   </div>
                   {label && (
-                    <Button size="sm" onClick={() => run(todo, key)} disabled={running !== null}>
+                    <button type="button" className="link" onClick={() => run(todo, key)} disabled={running !== null}>
                       {running === key ? 'Moment …' : label}
-                    </Button>
+                    </button>
                   )}
                 </li>
               )
             })}
           </ul>
           {total > TODO_LIMIT && (
-            <div className="fin-todos-more">
-              <Button size="sm" variant="ghost" onClick={() => setExpanded((v) => !v)}>
+            <div className="table-foot">
+              <button type="button" className="link" onClick={() => setExpanded((v) => !v)}>
                 {expanded ? 'Weniger anzeigen' : `Alle ${total} anzeigen`}
-              </Button>
+              </button>
             </div>
           )}
         </>

src/components/ui/Kpi.jsx

@@ -1,6 +0,0 @@
-import Stat from './Stat'
-
-// Altname fuer Stat (wird in P7 geloescht); "icon" wird ignoriert, die Warnfarbe wird zu 'neg'
-export default function Kpi({ label, value, sub, icon, accent }) {
-  return <Stat label={label} value={value} sub={sub} tone={accent === 'var(--danger)' ? 'neg' : ''} />
-}

src/components/ui/index.js

@@ -7,7 +7,6 @@ export { default as Tabs } from './Tabs'
 export { default as EmptyState } from './EmptyState'
 export { default as Field } from './Field'
 export { default as Stat } from './Stat'
-export { default as Kpi } from './Kpi'
 export { default as AutocompleteInput } from './AutocompleteInput'
 export { default as DateTimeInput } from './DateTimeInput'
 export { default as DurationSelect } from './DurationSelect'