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 && }
{item.text}
))}
-
- {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 && (
-
{label && (
-
run(todo, key)} disabled={running !== null}>
+ run(todo, key)} disabled={running !== null}>
{running === key ? 'Moment …' : label}
-
+
)}
)
})}
{total > TODO_LIMIT && (
-
-
setExpanded((v) => !v)}>
+
+ setExpanded((v) => !v)}>
{expanded ? 'Weniger anzeigen' : `Alle ${total} anzeigen`}
-
+
)}
>
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 = (
-
-
-
Finanzen werden geladen …
+
+ Finanzen werden geladen …
)
} else if (!data) {
body = (
-
- {error || 'Die Übersicht konnte nicht geladen werden.'}
+
+
{error || 'Die Übersicht konnte nicht geladen werden.'}
Erneut versuchen
-
+
)
} else {
body = (
{error && (
-
+
Die Übersicht konnte nicht neu geladen werden: {error}{' '}
- Erneut versuchen
+ Erneut versuchen
)}
-
-
+
+
+
+
- Einstellungen
-
+ Einstellungen
}
/>
{assignNotice && (
-
+
{assignNotice}{' '}
- setAssignNotice('')}>Schließen
+ setAssignNotice('')}>Schließen
)}
{body}
diff --git a/src/styles/global.css b/src/styles/global.css
index 9dc2a9c..4b7e389 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -633,14 +633,40 @@ a.list-row:hover .cell-title { color: var(--accent-ink); }
.legal-contracts { display: block; overflow-x: auto; }
}
+/* ===== FINANZEN (P7) ===== */
/* --- Finanzen --- */
+button.link-danger { background: none; border: 0; padding: 0; font: inherit; font-weight: 500; cursor: pointer; }
+
+/* Allgemein: Seitengeruest, Betraege, Meldungen, Spalten. Rot gilt fuer einen Betrag, dessen Text mit dem Minuszeichen beginnt. */
.fin-amount { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
-.fin-stack { display: flex; flex-direction: column; gap: var(--sp-5); }
-.fin-stack .kpi-grid { margin-bottom: 0; }
+.fin-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+.fin-neg, .fin-flag { color: var(--red-fg); }
+.fin-flag { font-weight: 600; }
+.fin-stack > * + * { margin-top: 36px; }
+.fin-top { display: flex; flex-direction: column; gap: 20px; }
+.fin-block { scroll-margin-top: 16px; }
+.fin-body { container-type: inline-size; }
+.fin-table-wrap { overflow-x: auto; }
+.fin-notice, .fin-page-notice { margin: 0 0 8px; }
+.fin-page-notice { margin-bottom: 16px; }
+.fin-load-error { display: grid; gap: 12px; justify-items: start; padding: 16px 0; }
+/* Die einspaltige Reihe bekommt ihren Zeilenabstand vom Abschnittsabstand (36 px). Die Regel steht mit hoeherer Spezifitaet hier, weil KOMPAT */
+/* .fin-cols > section + section auf 0 setzt; ab 1100 px stehen die Spalten nebeneinander und beginnen auf gleicher Hoehe. */
+.fin-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 56px; align-items: start; }
+.fin-stack .fin-cols > section + section { margin-top: 36px; }
+@media (min-width: 1100px) {
+ .fin-cols { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); }
+ .fin-cols-half { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+ .fin-stack .fin-cols > section + section { margin-top: 0; }
+}
+@media (max-width: 860px) {
+ .fin-block { scroll-margin-top: 68px; } /* unter der 52 px hohen Mobil-Leiste 16 px Luft */
+}
+
+/* Uebergang: diese Regeln fallen, sobald keine Datei mehr die Klassen benutzt (Hinweis, Drehknopf, Textknopf der Tabellen und Formulare) */
.fin-spin { animation: spin 1s linear infinite; }
.fin-hint { margin: 0; font-size: 13px; color: var(--text-muted); }
.fin-hint-warn { color: var(--warn); }
-.fin-flag { color: var(--danger); font-weight: 700; }
.fin-link {
background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
color: var(--accent); display: inline-flex; align-items: center; gap: 6px;
@@ -648,61 +674,42 @@ a.list-row:hover .cell-title { color: var(--accent-ink); }
}
.fin-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
-/* Block 0: Statuszeile */
-.fin-status-wrap { display: flex; flex-direction: column; gap: var(--sp-2); }
-.fin-status {
- display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3);
- padding: 10px 14px; font-size: 13px; color: var(--text-muted);
- background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-md);
-}
-.fin-status-items { display: flex; flex-wrap: wrap; gap: 4px var(--sp-4); min-width: 0; }
-.fin-status-item { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
-.fin-status-warn { color: var(--warn); font-weight: 600; }
+/* Block 0: Statuszeile (ohne Kasten) */
+.fin-status-wrap > .fin-notice { margin: 8px 0 0; }
+.fin-status { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; color: var(--text-2); }
+.fin-status-items { display: flex; flex-wrap: wrap; gap: 4px 24px; min-width: 0; }
+.fin-status-item { min-width: 0; overflow-wrap: anywhere; }
+.fin-status-warn { color: var(--orange-fg); font-weight: 600; }
-/* Block 1: Liquiditaetskopf */
-.fin-head .kpi-value { font-variant-numeric: tabular-nums; }
-.fin-breakdown { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: grid; gap: 4px; color: var(--text-muted); }
-.fin-breakdown li { display: flex; justify-content: space-between; gap: var(--sp-3); }
+/* Block 1: Liquiditaetskopf. Die Doppelklasse schlaegt die Handy-Regel von .stats (3 Spalten wuerden die breite dritte Kennzahl abschneiden). */
+.stats.fin-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px 48px; margin: 0; }
+.stats.fin-head .sub { font-size: 13px; line-height: 20px; color: var(--text-2); }
+.fin-breakdown { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
+.fin-breakdown li { display: flex; justify-content: space-between; gap: 12px; }
.fin-breakdown .fin-amount { color: var(--text); }
-.fin-breakdown-total { border-top: 1px solid var(--border-strong); padding-top: 4px; font-weight: 700; color: var(--text); }
-.fin-lows { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 6px 10px; align-items: baseline; font-size: 14px; font-weight: 600; }
+.fin-breakdown-total { border-top: 1px solid var(--line); padding-top: 4px; font-weight: 600; color: var(--text); }
+.fin-lows { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 4px 10px; align-items: baseline; }
.fin-low { display: contents; }
-.fin-low-label { color: var(--text-muted); }
-.fin-low .fin-amount { font-size: 20px; font-weight: 800; }
-.fin-low-when { color: var(--text-muted); font-size: 13px; font-weight: 500; }
+.fin-low-label, .fin-low-when { font-size: 13px; line-height: 20px; font-weight: 400; letter-spacing: 0; color: var(--text-2); }
+.fin-low .fin-amount { font-size: 18px; line-height: 26px; font-weight: 600; }
/* Block 2: Zu erledigen */
-.fin-todo-card { overflow: hidden; }
-.fin-todos { list-style: none; margin: 0; padding: 0; }
-.fin-todo {
- display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: var(--sp-3); align-items: start;
- padding: 12px var(--sp-4); border-bottom: 1px solid var(--border); border-left: 3px solid var(--border);
-}
-.fin-todo:last-child { border-bottom: none; }
-.fin-todo-hoch { border-left-color: var(--danger); }
-.fin-todo-mittel { border-left-color: var(--warn); }
+.fin-todos { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
+.fin-todo { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; gap: 12px 16px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.fin-todo .badge { justify-self: start; }
-.fin-todo-title { font-weight: 700; }
+.fin-todo .link { justify-self: end; white-space: nowrap; }
+.fin-todo-title { font-weight: 600; }
.fin-todo-text { font-size: 13px; margin-top: 2px; overflow-wrap: anywhere; }
-.fin-todo .fin-hint { margin-top: 6px; }
-.fin-todos-more { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border); }
-@media (max-width: 720px) {
- .fin-todo { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
- .fin-todo .ui-btn { justify-self: start; }
+.fin-todo .msg { margin-top: 6px; }
+@media (max-width: 860px) {
+ .fin-todo { grid-template-columns: minmax(0, 1fr); gap: 8px; }
+ .fin-todo .link { justify-self: start; }
}
/* Bloecke 3-5: Vorschau, Steuer, Abos */
-.fin-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
-.fin-neg { color: var(--danger); }
-.fin-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
-@media (min-width: 1100px) {
- .fin-cols { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); }
- .fin-cols-half { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-}
/* Block 3: Vorschau (Tabelle; in einer schmalen Karte wird jede Zeile zweizeilig) */
.fin-forecast-card { container-type: inline-size; overflow: hidden; }
-.fin-table-wrap { overflow-x: auto; }
.fin-forecast th, .fin-forecast td { padding: 9px 10px; vertical-align: baseline; }
.fin-forecast th.fin-amount { text-align: right; }
.fin-forecast th:first-child, .fin-forecast td:first-child { padding-left: var(--sp-4); }
@@ -769,13 +776,9 @@ a.list-row:hover .cell-title { color: var(--accent-ink); }
.fin-abo-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--sp-3); font-size: 13px; }
/* Block 6 und 7: Rechnungen und Buchungen (Tabellen; in einer schmalen Karte wird jede Zeile ein Raster) */
-.fin-block { scroll-margin-top: var(--sp-4); }
.fin-invoices-card, .fin-tx-card { container-type: inline-size; overflow: hidden; }
.fin-toolbar { padding: var(--sp-3) var(--sp-4); }
.fin-toolbar .seg { flex-wrap: wrap; max-width: 100%; }
-.fin-notice { padding: var(--sp-3) var(--sp-4) var(--sp-2); }
-.fin-load-error { display: grid; gap: var(--sp-3); justify-items: start; padding: var(--sp-4); }
-.fin-page-notice { margin-bottom: var(--sp-4); }
.fin-ages {
list-style: none; margin: 0; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border);
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3);
@@ -954,6 +957,8 @@ a.list-row:hover .cell-title { color: var(--accent-ink); }
.fin-bank-facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
+/* ===== ENDE FINANZEN ===== */
+
/* ===== Tickets (P2) ===== */
/* Arbeitsblatt-Zeilen, Zeilenlinks, Nachladen und Unterstuetzungs-Zeile. Steht direkt vor KOMPAT: gewinnt ueber die Bausteinregeln */
/* oberhalb durch die Reihenfolge, nie durch eine Erzwingung. */
@@ -1340,6 +1345,4 @@ div.row { display: flex; flex-wrap: wrap; margin: 0 -8px; }
.page .field { margin-bottom: 12px; }
.dialog-body .field, .field-row .field, .field-row-3 .field, .kv .field { margin-bottom: 0; }
-/* Kennzahlen nebeneinander (LiquidityHead), bis P7 sie ersetzt */
-.kpi-grid { display: flex; flex-wrap: wrap; gap: 48px; }
/* ===== ENDE KOMPAT ===== */