From 6d015df6fa66ed0c98c4c3215c4134b25d3162d3 Mon Sep 17 00:00:00 2001 From: Claude Date: Tue, 6 Oct 2026 09:58:19 +0000 Subject: [PATCH] Finanzen: Seitenkopf, Statuszeile, Kennzahlen und Aufgaben ohne Karten; Kpi entfernt Co-Authored-By: Claude Sonnet 5.5 --- src/components/finance/LiquidityHead.jsx | 26 +++--- src/components/finance/StatusLine.jsx | 12 +-- src/components/finance/TodoList.jsx | 25 +++--- src/components/ui/Kpi.jsx | 6 -- src/components/ui/index.js | 1 - src/pages/FinancePage.jsx | 33 ++++--- src/styles/global.css | 105 ++++++++++++----------- 7 files changed, 96 insertions(+), 112 deletions(-) delete mode 100644 src/components/ui/Kpi.jsx diff --git a/src/components/finance/LiquidityHead.jsx b/src/components/finance/LiquidityHead.jsx index 1c37102..d4bc362 100644 --- a/src/components/finance/LiquidityHead.jsx +++ b/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 ( -
- + - {shortfall &&
Rücklagen nicht gedeckt
} @@ -36,12 +37,12 @@ export default function LiquidityHead({ kopf }) { <> {open && (
    @@ -60,9 +61,8 @@ export default function LiquidityHead({ kopf }) { } /> - @@ -71,7 +71,7 @@ export default function LiquidityHead({ kopf }) { low && (
    {low.label}: - {low.amountText} + {low.amountText} am {low.dateText} {low.negative && · im Minus} diff --git a/src/components/finance/StatusLine.jsx b/src/components/finance/StatusLine.jsx index c83d7c0..d47910e 100644 --- a/src/components/finance/StatusLine.jsx +++ b/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 }) {
    {items.map((item) => ( - {!item.ok && ))}
    -
    - {hint && ( -

    - {hint.text} -

    - )} + {hint &&

    {hint.text}

    }
) } diff --git a/src/components/finance/TodoList.jsx b/src/components/finance/TodoList.jsx index f1533e4..371eb98 100644 --- a/src/components/finance/TodoList.jsx +++ b/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 ( - 0 ? {total} offen : null} - className="fin-todo-card" - bodyStyle={{ padding: 0 }} - > + 0 ? {total} offen : null}> {total === 0 ? ( ) : ( @@ -51,31 +46,31 @@ export default function TodoList({ aufgaben, onAction }) { const urgency = urgencyOf(todo) const label = todoButtonLabel(todo) return ( -
  • +
  • {urgency.label} -
    +
    {todo.titel}
    {todo.text &&
    {todo.text}
    } {failure?.key === key && ( -
    +
    {failure.message}
    )}
    {label && ( - + )}
    • ) })} {total > TODO_LIMIT && ( -
    - +
    )} diff --git a/src/components/ui/Kpi.jsx b/src/components/ui/Kpi.jsx deleted file mode 100644 index d2b33d9..0000000 --- a/src/components/ui/Kpi.jsx +++ /dev/null @@ -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 -} diff --git a/src/components/ui/index.js b/src/components/ui/index.js index 7a27be0..6530c56 100644 --- a/src/components/ui/index.js +++ b/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' diff --git a/src/pages/FinancePage.jsx b/src/pages/FinancePage.jsx index 7aa4004..b291013 100644 --- a/src/pages/FinancePage.jsx +++ b/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 = ( -
    -