Finanzen: Statuszeile, Liquiditaetskopf und Aufgabenliste
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
ClaudeandClaude Sonnet 5.5 committed
1 parent
0069a62a09
commit
88a98b858f
10 files changed
+1001
-111
No files matched your search
@@ -0,0 +1,91 @@
|
||||
import { useId, useState } from 'react'
|
||||
import { FaChevronDown, FaChevronUp } from 'react-icons/fa6'
|
||||
import { Kpi } from '../ui'
|
||||
import { euroWhole } from '../../lib/financeFormat'
|
||||
import { breakdownRows, lowPointLines } from '../../lib/financeView'
|
||||
|
||||
const isNum = (v) => typeof v === 'number' && Number.isFinite(v)
|
||||
|
||||
/** Block 1: Kontostand, „Verfügbar nach Rücklagen“ (mit Aufschlüsselung) und „Tiefster Stand in 30 Tagen“. */
|
||||
export default function LiquidityHead({ kopf }) {
|
||||
const k = kopf && typeof kopf === 'object' ? kopf : {}
|
||||
const [open, setOpen] = useState(false)
|
||||
const listId = useId()
|
||||
|
||||
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)
|
||||
|
||||
return (
|
||||
<div className="kpi-grid fin-head">
|
||||
<Kpi
|
||||
label="Kontostand"
|
||||
value={euroWhole(k.kontostandCents)}
|
||||
sub={hasBalance ? 'gebucht' : 'Noch kein Kontostand abgerufen'}
|
||||
/>
|
||||
|
||||
<Kpi
|
||||
label="Verfügbar nach Rücklagen"
|
||||
value={euroWhole(k.verfuegbarCents)}
|
||||
accent={shortfall ? 'var(--danger)' : 'var(--accent)'}
|
||||
sub={
|
||||
<>
|
||||
{shortfall && <div className="fin-flag">Rücklagen nicht gedeckt</div>}
|
||||
{isNum(k.verfuegbarCents) && (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
className="fin-link"
|
||||
aria-expanded={open}
|
||||
aria-controls={listId}
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
>
|
||||
Aufschlüsselung {open ? <FaChevronUp aria-hidden="true" /> : <FaChevronDown aria-hidden="true" />}
|
||||
</button>
|
||||
{open && (
|
||||
<ul id={listId} className="fin-breakdown">
|
||||
{breakdownRows(k.aufschluesselung, k.verfuegbarCents).map((row) => (
|
||||
<li key={row.key} className={row.total ? 'fin-breakdown-total' : undefined}>
|
||||
<span>{row.label}</span>
|
||||
<span className="fin-amount">{row.text}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{!isNum(k.verfuegbarCents) && <div>Ohne Kontostand nicht berechenbar</div>}
|
||||
</>
|
||||
}
|
||||
/>
|
||||
|
||||
<Kpi
|
||||
label="Tiefster Stand in 30 Tagen"
|
||||
accent={anyLowNegative ? 'var(--danger)' : 'var(--info)'}
|
||||
value={
|
||||
lows.some(Boolean) ? (
|
||||
<div className="fin-lows">
|
||||
{lows.map(
|
||||
(low) =>
|
||||
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-low-when">
|
||||
am {low.dateText}
|
||||
{low.negative && <span className="fin-flag"> · im Minus</span>}
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
'–'
|
||||
)
|
||||
}
|
||||
sub={lows.some(Boolean) ? '„erwartet“ zählt offene Rechnungen und Abos dazu' : 'Ohne Kontostand nicht berechenbar'}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import { FaRotate, FaTriangleExclamation } from 'react-icons/fa6'
|
||||
import { Button } from '../ui'
|
||||
import { statusItems } from '../../lib/financeView'
|
||||
|
||||
/**
|
||||
* Block 0: Stand von Bank und Stripe in einer Zeile und der Knopf „Aktualisieren“.
|
||||
* onRefresh() ruft den Bankabruf und lädt die Übersicht neu; wirft er (z. B. 429 „Bitte in N Minuten erneut
|
||||
* versuchen.“), erscheint die Meldung des Servers als Hinweis unter der Zeile.
|
||||
*/
|
||||
export default function StatusLine({ stand, onRefresh, refreshing = false }) {
|
||||
const [hint, setHint] = useState(null) // { text, limited }
|
||||
const aliveRef = useRef(true)
|
||||
useEffect(() => {
|
||||
aliveRef.current = true
|
||||
return () => {
|
||||
aliveRef.current = false
|
||||
}
|
||||
}, [])
|
||||
|
||||
const items = statusItems(stand)
|
||||
|
||||
async function handleRefresh() {
|
||||
setHint(null)
|
||||
try {
|
||||
await onRefresh()
|
||||
} catch (err) {
|
||||
if (aliveRef.current) {
|
||||
setHint({ text: err?.message || 'Der Abruf ist fehlgeschlagen.', limited: err?.status === 429 })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fin-status-wrap">
|
||||
<div className="fin-status">
|
||||
<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" />{' '}
|
||||
{refreshing ? 'Aktualisiere …' : 'Aktualisieren'}
|
||||
</Button>
|
||||
</div>
|
||||
{hint && (
|
||||
<p className={`fin-hint${hint.limited ? '' : ' fin-hint-warn'}`} role={hint.limited ? 'status' : 'alert'}>
|
||||
{hint.text}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import { Badge, Button, Card, EmptyState } from '../ui'
|
||||
import { TODO_LIMIT, todoButtonLabel, todoKey, urgencyOf, visibleTodos } from '../../lib/financeView'
|
||||
|
||||
/**
|
||||
* Block 2: „Zu erledigen“, höchstens 7 Zeilen, danach „Alle N anzeigen“. Je Zeile Dringlichkeit (Text), Titel,
|
||||
* Text und genau ein Knopf. onAction(aktion, aufgabe) darf ein Promise liefern; wirft es, steht die Meldung
|
||||
* unter der Zeile. Solange eine Aktion läuft, sind alle Knöpfe gesperrt (kein Doppelklick).
|
||||
*/
|
||||
export default function TodoList({ aufgaben, onAction }) {
|
||||
const [expanded, setExpanded] = useState(false)
|
||||
const [running, setRunning] = useState(null) // Schlüssel der laufenden Aufgabe
|
||||
const [failure, setFailure] = useState(null) // { key, message }
|
||||
const aliveRef = useRef(true)
|
||||
useEffect(() => {
|
||||
aliveRef.current = true
|
||||
return () => {
|
||||
aliveRef.current = false
|
||||
}
|
||||
}, [])
|
||||
|
||||
const { shown, total } = visibleTodos(aufgaben, expanded)
|
||||
|
||||
async function run(todo, key) {
|
||||
if (running) return
|
||||
setFailure(null)
|
||||
setRunning(key)
|
||||
try {
|
||||
await onAction(todo.aktion, todo)
|
||||
} catch (err) {
|
||||
if (aliveRef.current) setFailure({ key, message: err?.message || 'Die Aktion ist fehlgeschlagen.' })
|
||||
} finally {
|
||||
if (aliveRef.current) setRunning(null)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Card
|
||||
title="Zu erledigen"
|
||||
actions={total > 0 ? <Badge tone="muted">{total} offen</Badge> : null}
|
||||
className="fin-todo-card"
|
||||
bodyStyle={{ padding: 0 }}
|
||||
>
|
||||
{total === 0 ? (
|
||||
<EmptyState title="Nichts offen" />
|
||||
) : (
|
||||
<>
|
||||
<ul className="fin-todos">
|
||||
{shown.map((todo, index) => {
|
||||
const key = todoKey(todo, index)
|
||||
const urgency = urgencyOf(todo)
|
||||
const label = todoButtonLabel(todo)
|
||||
return (
|
||||
<li key={key} className={`fin-todo fin-todo-${todo.dringlichkeit || 'info'}`}>
|
||||
<Badge tone={urgency.tone}>{urgency.label}</Badge>
|
||||
<div className="fin-todo-main">
|
||||
<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">
|
||||
{failure.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{label && (
|
||||
<Button size="sm" onClick={() => run(todo, key)} disabled={running !== null}>
|
||||
{running === key ? 'Moment …' : label}
|
||||
</Button>
|
||||
)}
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
{total > TODO_LIMIT && (
|
||||
<div className="fin-todos-more">
|
||||
<Button size="sm" variant="ghost" onClick={() => setExpanded((v) => !v)}>
|
||||
{expanded ? 'Weniger anzeigen' : `Alle ${total} anzeigen`}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
Reference in new issue
Block a user