JUSN/tickte-system
0
0 Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Finanzen: Vorschau, Steuer und Abos ohne Karten, Container-Query auf Wrapper

Browse Source 
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
ClaudeandClaude Sonnet 5.5 committed 2026-10-06 14:38:00 +00:00
1 parent 6d015df6fa
commit bd1eccb4e3
4 files changed
+68 -75
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/finance/AboCard.jsx
+15 -20
View File
@@ -1,6 +1,6 @@
import { FaTriangleExclamation } from 'react-icons/fa6' import { Badge, Card, EmptyState, Stat } from '../ui'
import { Badge, Card, EmptyState } from '../ui'
import { aboView } from '../../lib/financeView' import { aboView } from '../../lib/financeView'
import { isNegText } from '../../lib/financeUi'
/** /**
* Block 5: „Abos“. Einnahmen pro Monat (aktiv und Zahlung fehlgeschlagen), zahlende Kunden, gefährdete Einnahmen * Block 5: „Abos“. Einnahmen pro Monat (aktiv und Zahlung fehlgeschlagen), zahlende Kunden, gefährdete Einnahmen
@@ -12,29 +12,23 @@ export default function AboCard({ abos }) {
if (v.error) { if (v.error) {
return ( return (
<Card title="Abos" className="fin-abo-card"> <Card title="Abos">
<p className="fin-hint fin-hint-warn" role="alert"> <div className="fin-body">
<FaTriangleExclamation aria-hidden="true" /> {v.error} <p className="msg warn" role="alert">
{v.error}
</p> </p>
</div>
</Card> </Card>
) )
} }
return ( return (
<Card title="Abos" className="fin-abo-card" bodyStyle={{ padding: 0 }}> <Card title="Abos">
<div className="fin-stats"> <div className="fin-body">
<span className="fin-amount fin-stat-value">{v.monthlyText}</span> <div className="stats fin-abo-stats">
<span className="fin-stat-label">Abo-Einnahmen pro Monat</span> <Stat label="Abo-Einnahmen pro Monat" value={v.monthlyText} tone={isNegText(v.monthlyText) ? 'neg' : ''} />
<span className="fin-amount fin-stat-value">{v.payingText}</span> <Stat label="zahlende Kunden" value={v.payingText} />
<span className="fin-stat-label">zahlende Kunden</span> {v.atRiskText && <Stat label="gefährdet" value={v.atRiskText} tone="neg" />}
{v.atRiskText && (
<>
<span className="fin-amount fin-stat-value fin-flag">{v.atRiskText}</span>
<span className="fin-stat-label fin-flag">
<FaTriangleExclamation aria-hidden="true" /> gefährdet
</span>
</>
)}
</div> </div>
{v.rows.length === 0 ? ( {v.rows.length === 0 ? (
@@ -47,7 +41,7 @@ export default function AboCard({ abos }) {
<span className="fin-abo-customer">{row.customer}</span> <span className="fin-abo-customer">{row.customer}</span>
<span className="fin-abo-product muted"> · {row.product}</span> <span className="fin-abo-product muted"> · {row.product}</span>
</div> </div>
<div className="fin-amount fin-abo-amount">{row.amountText}</div> <div className={`fin-amount fin-abo-amount${isNegText(row.amountText) ? ' fin-neg' : ''}`}>{row.amountText}</div>
<div className="fin-abo-meta"> <div className="fin-abo-meta">
<Badge tone={row.tone}>{row.statusLabel}</Badge> <Badge tone={row.tone}>{row.statusLabel}</Badge>
<span className="fin-abo-next muted">nächste Abbuchung: {row.nextText}</span> <span className="fin-abo-next muted">nächste Abbuchung: {row.nextText}</span>
@@ -56,6 +50,7 @@ export default function AboCard({ abos }) {
))} ))}
</ul> </ul>
)} )}
</div>
</Card> </Card>
) )
} }
src/components/finance/ForecastTable.jsx
+16 -9
View File
@@ -1,12 +1,12 @@
import { FaTriangleExclamation } from 'react-icons/fa6'
import { Badge, Card, EmptyState } from '../ui' import { Badge, Card, EmptyState } from '../ui'
import { forecastNotes, forecastRows } from '../../lib/financeView' import { forecastNotes, forecastRows } from '../../lib/financeView'
import { isNegText } from '../../lib/financeUi'
/** /**
* Block 3: „Vorschau 30 Tage“. Je Posten Datum, Bezeichnung, „sicher“/„erwartet“ (als Text), Betrag mit Vorzeichen * Block 3: „Vorschau 30 Tage“. Je Posten Datum, Bezeichnung, „sicher“/„erwartet“ (als Text), Betrag mit Vorzeichen
* und der laufende Saldo beider Linien ab dem Kontostand. Ohne Kontostand entfallen die Saldo-Spalten (mit Hinweis). * und der laufende Saldo beider Linien ab dem Kontostand. Ohne Kontostand entfallen die Saldo-Spalten (mit Hinweis).
* Darunter die Annahme des Servers und Hinweise, wenn Stripe oder die Abos fehlen. Schmal (Karte bis 560 px) * Darunter die Annahme des Servers und Hinweise, wenn Stripe oder die Abos fehlen. Schmal (Wrapper .fin-body bis
* wird jede Zeile dreizeilig: Datum, Sicherheit und Betrag / Posten / beide Salden; ohne Salden sind es zwei Zeilen. * 560 px) wird jede Zeile dreizeilig: Datum, Sicherheit und Betrag / Posten / beide Salden; ohne Salden sind es zwei Zeilen.
*/ */
export default function ForecastTable({ vorschau, kontostandCents, stripeDown = false, abosFehler = false }) { export default function ForecastTable({ vorschau, kontostandCents, stripeDown = false, abosFehler = false }) {
const v = vorschau && typeof vorschau === 'object' ? vorschau : {} const v = vorschau && typeof vorschau === 'object' ? vorschau : {}
@@ -15,12 +15,13 @@ export default function ForecastTable({ vorschau, kontostandCents, stripeDown =
const assumption = typeof v.annahme === 'string' ? v.annahme.trim() : '' const assumption = typeof v.annahme === 'string' ? v.annahme.trim() : ''
return ( return (
<Card title="Vorschau 30 Tage" className="fin-forecast-card" bodyStyle={{ padding: 0 }}> <Card title="Vorschau 30 Tage">
<div className="fin-body">
{rows.length === 0 ? ( {rows.length === 0 ? (
<EmptyState title="Keine Zahlungen in den nächsten 30 Tagen bekannt." /> <EmptyState title="Keine Zahlungen in den nächsten 30 Tagen bekannt." />
) : ( ) : (
<div className="fin-table-wrap"> <div className="fin-table-wrap">
<table className={`ui-table fin-forecast${hasBalance ? '' : ' fin-forecast-nobal'}`} role="table"> <table className={`table fin-forecast${hasBalance ? '' : ' fin-forecast-nobal'}`} role="table">
<caption className="fin-sr">Erwartete Zahlungen der nächsten 30 Tage</caption> <caption className="fin-sr">Erwartete Zahlungen der nächsten 30 Tage</caption>
<thead role="rowgroup"> <thead role="rowgroup">
<tr role="row"> <tr role="row">
@@ -44,7 +45,12 @@ export default function ForecastTable({ vorschau, kontostandCents, stripeDown =
<td role="cell" className="fin-forecast-kind"> <td role="cell" className="fin-forecast-kind">
<Badge tone={row.sicherheit === 'sicher' ? 'ok' : 'info'}>{row.sicherheit}</Badge> <Badge tone={row.sicherheit === 'sicher' ? 'ok' : 'info'}>{row.sicherheit}</Badge>
</td> </td>
<td role="cell" className="fin-amount fin-forecast-amount">{row.amountText}</td> <td
role="cell"
className={`fin-amount fin-forecast-amount${isNegText(row.amountText) ? ' fin-neg' : ''}`}
>
{row.amountText}
</td>
{hasBalance && ( {hasBalance && (
<> <>
<td <td
@@ -72,13 +78,14 @@ export default function ForecastTable({ vorschau, kontostandCents, stripeDown =
{(notes.length > 0 || assumption) && ( {(notes.length > 0 || assumption) && (
<div className="fin-forecast-foot"> <div className="fin-forecast-foot">
{notes.map((note) => ( {notes.map((note) => (
<p key={note.key} className="fin-hint fin-hint-warn" role="status"> <p key={note.key} className="msg warn" role="status">
<FaTriangleExclamation aria-hidden="true" /> {note.text} {note.text}
</p> </p>
))} ))}
{assumption && <p className="fin-hint">{assumption}</p>} {assumption && <p className="msg muted">{assumption}</p>}
</div> </div>
)} )}
</div>
</Card> </Card>
) )
} }
src/components/finance/TaxCard.jsx
+11 -4
View File
@@ -1,5 +1,6 @@
import { Card } from '../ui' import { Card } from '../ui'
import { taxView } from '../../lib/financeView' import { taxView } from '../../lib/financeView'
import { isNegText } from '../../lib/financeUi'
/** /**
* Block 4: „Steuer“. Rücklage (Betrag und woraus sie sich ergibt), Kleinunternehmer-Zähler gegen die Grenzen, * Block 4: „Steuer“. Rücklage (Betrag und woraus sie sich ergibt), Kleinunternehmer-Zähler gegen die Grenzen,
@@ -10,12 +11,15 @@ import { taxView } from '../../lib/financeView'
export default function TaxCard({ steuer }) { export default function TaxCard({ steuer }) {
const v = taxView(steuer) const v = taxView(steuer)
return ( return (
<Card title="Steuer" className="fin-tax-card"> <Card title="Steuer">
<div className="fin-body">
<div className="fin-facts"> <div className="fin-facts">
<div className="fin-fact"> <div className="fin-fact">
<div className="fin-fact-row"> <div className="fin-fact-row">
<span className="fin-fact-label">Steuer-Rücklage</span> <span className="fin-fact-label">Steuer-Rücklage</span>
<span className="fin-amount fin-fact-big">{v.reserve.amountText}</span> <span className={`fin-amount fin-fact-big${isNegText(v.reserve.amountText) ? ' fin-neg' : ''}`}>
{v.reserve.amountText}
</span>
</div> </div>
{v.reserve.basisText && <div className="fin-fact-sub">{v.reserve.basisText}</div>} {v.reserve.basisText && <div className="fin-fact-sub">{v.reserve.basisText}</div>}
</div> </div>
@@ -40,13 +44,16 @@ export default function TaxCard({ steuer }) {
<div className="fin-fact"> <div className="fin-fact">
<div className="fin-fact-row"> <div className="fin-fact-row">
<span className="fin-fact-label">Nächste ESt-Vorauszahlung</span> <span className="fin-fact-label">Nächste ESt-Vorauszahlung</span>
<span className="fin-amount fin-fact-strong">{v.prepayment.amountText}</span> <span className={`fin-amount fin-fact-strong${isNegText(v.prepayment.amountText) ? ' fin-neg' : ''}`}>
{v.prepayment.amountText}
</span>
</div> </div>
<div className="fin-fact-sub">am {v.prepayment.dateText}</div> <div className="fin-fact-sub">am {v.prepayment.dateText}</div>
</div> </div>
)} )}
<p className="fin-hint fin-tax-note">{v.noteText}</p> <p className="msg muted fin-tax-note">{v.noteText}</p>
</div>
</div> </div>
</Card> </Card>
) )
src/styles/global.css
+26 -42
View File
@@ -708,72 +708,56 @@ button.link-danger { background: none; border: 0; padding: 0; font: inherit; fon
/* Bloecke 3-5: Vorschau, Steuer, Abos */ /* Bloecke 3-5: Vorschau, Steuer, Abos */
/* Block 3: Vorschau (Tabelle; in einer schmalen Karte wird jede Zeile zweizeilig) */ /* Block 3: Vorschau. Die Tabelle liegt in .fin-body (Container); schmal wird jede Zeile ein Raster. Zellen: Abstaende wie .table, nur oben und unten 9 px. */
.fin-forecast-card { container-type: inline-size; overflow: hidden; } .fin-forecast th, .fin-forecast td { vertical-align: baseline; }
.fin-forecast th, .fin-forecast td { padding: 9px 10px; vertical-align: baseline; } .fin-forecast td { padding-block: 9px; }
.fin-forecast th.fin-amount { text-align: right; } .fin-forecast th.fin-amount { text-align: right; }
.fin-forecast th:first-child, .fin-forecast td:first-child { padding-left: var(--sp-4); }
.fin-forecast th:last-child, .fin-forecast td:last-child { padding-right: var(--sp-4); }
.fin-forecast tbody tr:last-child td { border-bottom: none; }
.fin-forecast-date { white-space: nowrap; font-variant-numeric: tabular-nums; } .fin-forecast-date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.fin-forecast-label { overflow-wrap: anywhere; } .fin-forecast-label { overflow-wrap: anywhere; }
.fin-forecast-foot { display: grid; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border); } .fin-forecast-foot { display: grid; gap: 6px; margin-top: 12px; }
.fin-forecast-foot .fin-hint svg { vertical-align: -2px; }
@container (max-width: 560px) { @container (max-width: 560px) {
.fin-forecast thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .fin-forecast thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fin-forecast, .fin-forecast tbody { display: block; } .fin-forecast, .fin-forecast tbody { display: block; }
.fin-forecast tr { .fin-forecast tr {
display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px 0; align-items: baseline; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px 0; align-items: baseline;
grid-template-areas: "date date kind kind amount amount" "label label label label label label" "sicher sicher sicher erwartet erwartet erwartet"; grid-template-areas: "date date kind kind amount amount" "label label label label label label" "sicher sicher sicher erwartet erwartet erwartet";
padding: 10px var(--sp-4); border-bottom: 1px solid var(--border); padding: 10px 0; border-bottom: 1px solid var(--line);
} }
.fin-forecast-nobal tr { grid-template-areas: "date date kind kind amount amount" "label label label label label label"; } .fin-forecast-nobal tr { grid-template-areas: "date date kind kind amount amount" "label label label label label label"; }
.fin-forecast tbody tr:last-child { border-bottom: none; }
.fin-forecast td, .fin-forecast td:first-child, .fin-forecast td:last-child { display: block; padding: 0; border: 0; min-width: 0; } .fin-forecast td, .fin-forecast td:first-child, .fin-forecast td:last-child { display: block; padding: 0; border: 0; min-width: 0; }
.fin-forecast tbody tr:hover td { background: transparent; }
.fin-forecast-date { grid-area: date; } .fin-forecast-date { grid-area: date; }
.fin-forecast-kind { grid-area: kind; } .fin-forecast-kind { grid-area: kind; }
.fin-forecast-amount { grid-area: amount; font-weight: 700; } .fin-forecast-amount { grid-area: amount; font-weight: 600; }
.fin-forecast-label { grid-area: label; } .fin-forecast-label { grid-area: label; }
.fin-forecast td.fin-forecast-sicher, .fin-forecast td.fin-forecast-erwartet { .fin-forecast td.fin-forecast-sicher, .fin-forecast td.fin-forecast-erwartet {
display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--sp-2); font-size: 13px; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; font-size: 13px;
} }
.fin-forecast-sicher { grid-area: sicher; } .fin-forecast-sicher { grid-area: sicher; }
.fin-forecast-erwartet { grid-area: erwartet; } .fin-forecast-erwartet { grid-area: erwartet; }
.fin-forecast td.fin-forecast-sicher { padding-right: var(--sp-3); } .fin-forecast td.fin-forecast-sicher { padding-right: 12px; }
.fin-forecast td.fin-forecast-erwartet { padding-left: var(--sp-3); } .fin-forecast td.fin-forecast-erwartet { padding-left: 12px; }
.fin-saldo { margin-left: auto; } .fin-saldo { margin-left: auto; }
.fin-forecast td[data-label]::before { content: attr(data-label); color: var(--text-muted); font-size: 12px; font-weight: 500; white-space: nowrap; } .fin-forecast td[data-label]::before { content: attr(data-label); color: var(--text-2); font-size: 12px; font-weight: 500; white-space: nowrap; }
} }
/* Block 4: Steuer */ /* Block 4: Steuer (Liste mit Haarlinien; die Fussnote steht nach dem letzten Posten) */
.fin-facts { display: grid; gap: var(--sp-4); } .fin-facts { display: grid; gap: 16px; }
.fin-fact { display: grid; gap: 3px; padding-bottom: var(--sp-4); border-bottom: 1px solid var(--border); } .fin-fact { display: grid; gap: 3px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.fin-fact:last-child { padding-bottom: 0; border-bottom: none; } .fin-fact:last-of-type { padding-bottom: 0; border-bottom: 0; }
.fin-fact-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); } .fin-fact-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.fin-fact-label { color: var(--text-muted); font-size: 13px; } .fin-fact-label { color: var(--text-2); font-size: 13px; }
.fin-fact-big { font-size: 24px; font-weight: 800; } .fin-fact-big { font-size: 22px; line-height: 30px; font-weight: 600; }
.fin-fact-strong { font-size: 16px; font-weight: 700; } .fin-fact-strong { font-size: 16px; font-weight: 600; }
.fin-fact-value { font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .fin-fact-value { font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fin-fact-unknown { color: var(--warn); } .fin-fact-unknown { color: var(--orange-fg); }
.fin-fact-sub { font-size: 13px; color: var(--text-muted); overflow-wrap: anywhere; } .fin-fact-sub { font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; }
.fin-fact-sub-strong { color: var(--text); } .fin-fact-sub-strong { color: var(--text); }
/* Block 5: Abos */ /* Block 5: Abos (Kennzahlen: .stats.fin-abo-stats ohne eigene Regel) */
.fin-abo-card { overflow: hidden; } .fin-abos { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.fin-stats { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px var(--sp-3); align-items: baseline; padding: var(--sp-4); border-bottom: 1px solid var(--border); } .fin-abo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); }
.fin-stat-value { font-size: 20px; font-weight: 800; } .fin-abo-customer { font-weight: 600; overflow-wrap: anywhere; }
.fin-stat-label { color: var(--text-muted); } .fin-abo-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 13px; }
.fin-stat-label.fin-flag { color: var(--danger); }
.fin-stat-label svg { vertical-align: -2px; }
.fin-abos { list-style: none; margin: 0; padding: 0; }
.fin-abo {
display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--sp-3); align-items: baseline;
padding: 11px var(--sp-4); border-bottom: 1px solid var(--border);
}
.fin-abo:last-child { border-bottom: none; }
.fin-abo-customer { font-weight: 700; overflow-wrap: anywhere; }
.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) */ /* Block 6 und 7: Rechnungen und Buchungen (Tabellen; in einer schmalen Karte wird jede Zeile ein Raster) */
.fin-invoices-card, .fin-tx-card { container-type: inline-size; overflow: hidden; } .fin-invoices-card, .fin-tx-card { container-type: inline-size; overflow: hidden; }