432 lines
16 KiB
TypeScript
432 lines
16 KiB
TypeScript
import React from 'react';
|
|
import { CreditCard, Download, Loader2, RefreshCw, Sparkles } from 'lucide-react';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Separator } from '@/components/ui/separator';
|
|
|
|
import { AdminLayout } from '../components/AdminLayout';
|
|
import {
|
|
CreditLedgerEntry,
|
|
getCreditBalance,
|
|
getCreditLedger,
|
|
getTenantPackagesOverview,
|
|
PaginationMeta,
|
|
TenantPackageSummary,
|
|
} from '../api';
|
|
import { isAuthError } from '../auth/tokens';
|
|
|
|
type LedgerState = {
|
|
entries: CreditLedgerEntry[];
|
|
meta: PaginationMeta | null;
|
|
};
|
|
|
|
export default function BillingPage() {
|
|
const { t, i18n } = useTranslation(['management', 'dashboard']);
|
|
const locale = React.useMemo(
|
|
() => (i18n.language?.startsWith('en') ? 'en-GB' : 'de-DE'),
|
|
[i18n.language]
|
|
);
|
|
|
|
const [balance, setBalance] = React.useState<number>(0);
|
|
const [packages, setPackages] = React.useState<TenantPackageSummary[]>([]);
|
|
const [activePackage, setActivePackage] = React.useState<TenantPackageSummary | null>(null);
|
|
const [ledger, setLedger] = React.useState<LedgerState>({ entries: [], meta: null });
|
|
const [loading, setLoading] = React.useState(true);
|
|
const [error, setError] = React.useState<string | null>(null);
|
|
const [loadingMore, setLoadingMore] = React.useState(false);
|
|
|
|
const formatDate = React.useCallback(
|
|
(value: string | null | undefined) => {
|
|
if (!value) return '--';
|
|
const date = new Date(value);
|
|
if (Number.isNaN(date.getTime())) return '--';
|
|
return date.toLocaleDateString(locale, { day: '2-digit', month: 'short', year: 'numeric' });
|
|
},
|
|
[locale]
|
|
);
|
|
|
|
const formatCurrency = React.useCallback(
|
|
(value: number | null | undefined, currency = 'EUR') => {
|
|
if (value === null || value === undefined) return '--';
|
|
return new Intl.NumberFormat(locale, { style: 'currency', currency }).format(value);
|
|
},
|
|
[locale]
|
|
);
|
|
|
|
const resolveReason = React.useCallback(
|
|
(reason: string) => {
|
|
switch (reason) {
|
|
case 'purchase':
|
|
return t('management.billing.ledger.reasons.purchase', 'Credit Kauf');
|
|
case 'usage':
|
|
return t('management.billing.ledger.reasons.usage', 'Verbrauch');
|
|
case 'manual':
|
|
return t('management.billing.ledger.reasons.manual', 'Manuelle Anpassung');
|
|
default:
|
|
return reason;
|
|
}
|
|
},
|
|
[t]
|
|
);
|
|
|
|
const packageLabels = React.useMemo(
|
|
() => ({
|
|
statusActive: t('management.billing.packages.card.statusActive', 'Aktiv'),
|
|
statusInactive: t('management.billing.packages.card.statusInactive', 'Inaktiv'),
|
|
used: t('management.billing.packages.card.used', 'Genutzte Events'),
|
|
available: t('management.billing.packages.card.available', 'Verfügbar'),
|
|
expires: t('management.billing.packages.card.expires', 'Ablauf'),
|
|
}),
|
|
[t]
|
|
);
|
|
|
|
React.useEffect(() => {
|
|
void loadAll();
|
|
}, []);
|
|
|
|
async function loadAll() {
|
|
setLoading(true);
|
|
setError(null);
|
|
try {
|
|
const [balanceResult, packagesResult, ledgerResult] = await Promise.all([
|
|
safeCall(() => getCreditBalance()),
|
|
safeCall(() => getTenantPackagesOverview()),
|
|
safeCall(() => getCreditLedger(1)),
|
|
]);
|
|
|
|
if (balanceResult?.balance !== undefined) {
|
|
setBalance(balanceResult.balance);
|
|
}
|
|
|
|
if (packagesResult) {
|
|
setPackages(packagesResult.packages);
|
|
setActivePackage(packagesResult.activePackage);
|
|
}
|
|
|
|
if (ledgerResult) {
|
|
setLedger({ entries: ledgerResult.data, meta: ledgerResult.meta });
|
|
} else {
|
|
setLedger({ entries: [], meta: null });
|
|
}
|
|
} catch (err) {
|
|
if (!isAuthError(err)) {
|
|
setError(t('management.billing.errors.load', 'Billing Daten konnten nicht geladen werden.'));
|
|
}
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
async function loadMore() {
|
|
if (!ledger.meta || loadingMore) {
|
|
return;
|
|
}
|
|
const { current_page, last_page } = ledger.meta;
|
|
if (current_page >= last_page) {
|
|
return;
|
|
}
|
|
|
|
setLoadingMore(true);
|
|
try {
|
|
const next = await getCreditLedger(current_page + 1);
|
|
setLedger({
|
|
entries: [...ledger.entries, ...next.data],
|
|
meta: next.meta,
|
|
});
|
|
} catch (err) {
|
|
if (!isAuthError(err)) {
|
|
setError(t('management.billing.errors.more', 'Weitere Ledger Eintraege konnten nicht geladen werden.'));
|
|
}
|
|
} finally {
|
|
setLoadingMore(false);
|
|
}
|
|
}
|
|
|
|
const actions = (
|
|
<Button variant="outline" onClick={() => void loadAll()} disabled={loading}>
|
|
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <RefreshCw className="h-4 w-4" />}
|
|
{t('management.billing.actions.refresh', 'Aktualisieren')}
|
|
</Button>
|
|
);
|
|
|
|
return (
|
|
<AdminLayout
|
|
title={t('management.billing.title', 'Billing und Credits')}
|
|
subtitle={t('management.billing.subtitle', 'Verwalte Guthaben, Pakete und Abrechnungen.')}
|
|
actions={actions}
|
|
>
|
|
{error && (
|
|
<Alert variant="destructive">
|
|
<AlertTitle>{t('dashboard.alerts.errorTitle', 'Fehler')}</AlertTitle>
|
|
<AlertDescription>{error}</AlertDescription>
|
|
</Alert>
|
|
)}
|
|
|
|
{loading ? (
|
|
<BillingSkeleton />
|
|
) : (
|
|
<>
|
|
<Card className="border-0 bg-white/85 shadow-xl shadow-pink-100/60">
|
|
<CardHeader className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
|
|
<div>
|
|
<CardTitle className="flex items-center gap-2 text-xl text-slate-900">
|
|
<CreditCard className="h-5 w-5 text-pink-500" />
|
|
{t('management.billing.sections.overview.title', 'Credits und Status')}
|
|
</CardTitle>
|
|
<CardDescription className="text-sm text-slate-600">
|
|
{t('management.billing.sections.overview.description', 'Dein aktuelles Guthaben und das aktive Reseller Paket.')}
|
|
</CardDescription>
|
|
</div>
|
|
<Badge className={activePackage ? 'bg-pink-500/10 text-pink-700' : 'bg-slate-200 text-slate-700'}>
|
|
{activePackage ? activePackage.package_name : 'Kein aktives Paket'}
|
|
</Badge>
|
|
</CardHeader>
|
|
<CardContent className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
|
<InfoCard
|
|
label={t('management.billing.sections.overview.cards.balance.label', 'Verfügbare Credits')}
|
|
value={balance}
|
|
tone="pink"
|
|
/>
|
|
<InfoCard
|
|
label={t('management.billing.sections.overview.cards.used.label', 'Genutzte Events')}
|
|
value={activePackage?.used_events ?? 0}
|
|
tone="amber"
|
|
helper={t('management.billing.sections.overview.cards.used.helper', {
|
|
count: activePackage?.remaining_events ?? 0,
|
|
})}
|
|
/>
|
|
<InfoCard
|
|
label={t('management.billing.sections.overview.cards.price.label', 'Preis (netto)')}
|
|
value={formatCurrency(activePackage?.price ?? null, activePackage?.currency ?? 'EUR')}
|
|
tone="sky"
|
|
helper={activePackage?.currency ?? 'EUR'}
|
|
/>
|
|
<InfoCard
|
|
label={t('management.billing.sections.overview.cards.expires.label', 'Ablauf')}
|
|
value={formatDate(activePackage?.expires_at)}
|
|
tone="emerald"
|
|
helper={t('management.billing.sections.overview.cards.expires.helper', 'Automatisch verlängern, falls aktiv')}
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="border-0 bg-white/85 shadow-xl shadow-amber-100/60">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2 text-xl text-slate-900">
|
|
<Sparkles className="h-5 w-5 text-amber-500" />
|
|
{t('management.billing.packages.title', 'Paket Historie')}
|
|
</CardTitle>
|
|
<CardDescription className="text-sm text-slate-600">
|
|
{t('management.billing.packages.description', 'Übersicht über aktive und vergangene Reseller Pakete.')}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
{packages.length === 0 ? (
|
|
<EmptyState message={t('management.billing.packages.empty', 'Noch keine Pakete gebucht.')} />
|
|
) : (
|
|
packages.map((pkg) => (
|
|
<PackageCard
|
|
key={pkg.id}
|
|
pkg={pkg}
|
|
isActive={Boolean(pkg.active)}
|
|
labels={packageLabels}
|
|
formatDate={formatDate}
|
|
formatCurrency={formatCurrency}
|
|
/>
|
|
))
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="border-0 bg-white/85 shadow-xl shadow-sky-100/60">
|
|
<CardHeader className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
|
|
<div>
|
|
<CardTitle className="flex items-center gap-2 text-xl text-slate-900">
|
|
<Sparkles className="h-5 w-5 text-sky-500" />
|
|
{t('management.billing.ledger.title', 'Credit Ledger')}
|
|
</CardTitle>
|
|
<CardDescription className="text-sm text-slate-600">
|
|
{t('management.billing.ledger.description', 'Alle Zu- und Abbuchungen deines Credits-Kontos.')}
|
|
</CardDescription>
|
|
</div>
|
|
<Button variant="outline" size="sm">
|
|
<Download className="h-4 w-4" />
|
|
{t('management.billing.actions.exportCsv', 'Export als CSV')}
|
|
</Button>
|
|
</CardHeader>
|
|
<CardContent className="space-y-2">
|
|
{ledger.entries.length === 0 ? (
|
|
<EmptyState message={t('management.billing.ledger.empty', 'Noch keine Ledger-Einträge vorhanden.')} />
|
|
) : (
|
|
<>
|
|
{ledger.entries.map((entry) => (
|
|
<LedgerRow
|
|
key={`${entry.id}-${entry.created_at}`}
|
|
entry={entry}
|
|
resolveReason={resolveReason}
|
|
formatDate={formatDate}
|
|
/>
|
|
))}
|
|
{ledger.meta && ledger.meta.current_page < ledger.meta.last_page && (
|
|
<Button variant="outline" className="w-full" onClick={() => void loadMore()} disabled={loadingMore}>
|
|
{loadingMore ? <Loader2 className="h-4 w-4 animate-spin" /> : t('management.billing.ledger.loadMore', 'Mehr laden')}
|
|
</Button>
|
|
)}
|
|
</>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</>
|
|
)}
|
|
</AdminLayout>
|
|
);
|
|
}
|
|
|
|
async function safeCall<T>(callback: () => Promise<T>): Promise<T | null> {
|
|
try {
|
|
return await callback();
|
|
} catch (error) {
|
|
if (!isAuthError(error)) {
|
|
console.warn('[Tenant Billing] optional endpoint fehlgeschlagen', error);
|
|
}
|
|
return null;
|
|
}
|
|
}
|
|
|
|
function InfoCard({
|
|
label,
|
|
value,
|
|
helper,
|
|
tone,
|
|
}: {
|
|
label: string;
|
|
value: string | number | null | undefined;
|
|
helper?: string;
|
|
tone: 'pink' | 'amber' | 'sky' | 'emerald';
|
|
}) {
|
|
const toneClass = {
|
|
pink: 'from-pink-50 to-rose-100 text-pink-700',
|
|
amber: 'from-amber-50 to-yellow-100 text-amber-700',
|
|
sky: 'from-sky-50 to-blue-100 text-sky-700',
|
|
emerald: 'from-emerald-50 to-green-100 text-emerald-700',
|
|
}[tone];
|
|
|
|
return (
|
|
<div className={`rounded-2xl border border-white/60 bg-gradient-to-br ${toneClass} p-5 shadow-sm`}>
|
|
<span className="text-xs uppercase tracking-wide text-slate-600/90">{label}</span>
|
|
<div className="mt-3 text-xl font-semibold">{value ?? '--'}</div>
|
|
{helper && <p className="mt-2 text-xs text-slate-600/80">{helper}</p>}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function PackageCard({
|
|
pkg,
|
|
isActive,
|
|
labels,
|
|
formatDate,
|
|
formatCurrency,
|
|
}: {
|
|
pkg: TenantPackageSummary;
|
|
isActive: boolean;
|
|
labels: {
|
|
statusActive: string;
|
|
statusInactive: string;
|
|
used: string;
|
|
available: string;
|
|
expires: string;
|
|
};
|
|
formatDate: (value: string | null | undefined) => string;
|
|
formatCurrency: (value: number | null | undefined, currency?: string) => string;
|
|
}) {
|
|
return (
|
|
<div className="rounded-2xl border border-amber-100 bg-white/90 p-4 shadow-sm">
|
|
<div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
|
|
<div>
|
|
<h3 className="text-sm font-semibold text-slate-900">{pkg.package_name}</h3>
|
|
<p className="text-xs text-slate-600">
|
|
{formatDate(pkg.purchased_at)} · {formatCurrency(pkg.price, pkg.currency ?? 'EUR')}
|
|
</p>
|
|
</div>
|
|
<Badge className={isActive ? 'bg-amber-500/10 text-amber-700' : 'bg-slate-200 text-slate-700'}>
|
|
{isActive ? labels.statusActive : labels.statusInactive}
|
|
</Badge>
|
|
</div>
|
|
<Separator className="my-3" />
|
|
<div className="grid gap-2 text-xs text-slate-600 sm:grid-cols-3">
|
|
<span>
|
|
{labels.used}: {pkg.used_events}
|
|
</span>
|
|
<span>
|
|
{labels.available}: {pkg.remaining_events ?? '--'}
|
|
</span>
|
|
<span>
|
|
{labels.expires}: {formatDate(pkg.expires_at)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function LedgerRow({
|
|
entry,
|
|
resolveReason,
|
|
formatDate,
|
|
}: {
|
|
entry: CreditLedgerEntry;
|
|
resolveReason: (reason: string) => string;
|
|
formatDate: (value: string | null | undefined) => string;
|
|
}) {
|
|
const positive = entry.delta >= 0;
|
|
return (
|
|
<div className="flex flex-col gap-2 rounded-2xl border border-slate-100 bg-white/90 p-4 shadow-sm sm:flex-row sm:items-center sm:justify-between">
|
|
<div>
|
|
<p className="text-sm font-semibold text-slate-900">{resolveReason(entry.reason)}</p>
|
|
{entry.note && <p className="text-xs text-slate-500">{entry.note}</p>}
|
|
</div>
|
|
<div className="flex items-center gap-4">
|
|
<span className={`text-sm font-semibold ${positive ? 'text-emerald-600' : 'text-rose-600'}`}>
|
|
{positive ? '+' : ''}
|
|
{entry.delta}
|
|
</span>
|
|
<span className="text-xs text-slate-500">{formatDate(entry.created_at)}</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function EmptyState({ message }: { message: string }) {
|
|
return (
|
|
<div className="flex flex-col items-center justify-center gap-3 rounded-2xl border border-dashed border-slate-200 bg-white/70 p-8 text-center">
|
|
<div className="rounded-full bg-pink-100 p-3 text-pink-600 shadow-inner shadow-pink-200/80">
|
|
<Sparkles className="h-5 w-5" />
|
|
</div>
|
|
<p className="text-sm text-slate-600">{message}</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function BillingSkeleton() {
|
|
return (
|
|
<div className="grid gap-6">
|
|
{Array.from({ length: 3 }).map((_, index) => (
|
|
<div key={index} className="space-y-4 rounded-2xl border border-white/60 bg-white/70 p-6 shadow-sm">
|
|
<div className="h-6 w-48 animate-pulse rounded bg-gradient-to-r from-white/40 via-white/60 to-white/40" />
|
|
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
|
{Array.from({ length: 4 }).map((__, placeholderIndex) => (
|
|
<div
|
|
key={placeholderIndex}
|
|
className="h-24 animate-pulse rounded-2xl bg-gradient-to-r from-white/40 via-white/60 to-white/40"
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|