57 lines
2.0 KiB
React
57 lines
2.0 KiB
React
import { Badge, Card, EmptyState, Stat } from '../ui'
|
|
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
|
|
* (nur wenn > 0) und die Liste Kunde · Produkt · Status · Betrag · nächste Abbuchung. Konnten die Abos nicht
|
|
* geladen werden, steht stattdessen die Meldung des Servers da (keine Zahlen).
|
|
*/
|
|
export default function AboCard({ abos }) {
|
|
const v = aboView(abos)
|
|
|
|
if (v.error) {
|
|
return (
|
|
<Card title="Abos">
|
|
<div className="fin-body">
|
|
<p className="msg warn" role="alert">
|
|
{v.error}
|
|
</p>
|
|
</div>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<Card title="Abos">
|
|
<div className="fin-body">
|
|
<div className="stats fin-abo-stats">
|
|
<Stat label="Abo-Einnahmen pro Monat" value={v.monthlyText} tone={isNegText(v.monthlyText) ? 'neg' : ''} />
|
|
<Stat label="zahlende Kunden" value={v.payingText} />
|
|
{v.atRiskText && <Stat label="gefährdet" value={v.atRiskText} tone="neg" />}
|
|
</div>
|
|
|
|
{v.rows.length === 0 ? (
|
|
<EmptyState title="Noch keine Abos." />
|
|
) : (
|
|
<ul className="fin-abos">
|
|
{v.rows.map((row) => (
|
|
<li key={row.key} className="fin-abo">
|
|
<div className="fin-abo-main">
|
|
<span className="fin-abo-customer">{row.customer}</span>
|
|
<span className="fin-abo-product muted"> · {row.product}</span>
|
|
</div>
|
|
<div className={`fin-amount fin-abo-amount${isNegText(row.amountText) ? ' fin-neg' : ''}`}>{row.amountText}</div>
|
|
<div className="fin-abo-meta">
|
|
<Badge tone={row.tone}>{row.statusLabel}</Badge>
|
|
<span className="fin-abo-next muted">nächste Abbuchung: {row.nextText}</span>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
</Card>
|
|
)
|
|
}
|