fixed event join token handling in the event admin. created new seeders with new tenants and package purchases. added new playwright test scenarios.
This commit is contained in:
Codex Agent
@@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { CreditCard, Download, Loader2, RefreshCw, Sparkles } from 'lucide-react';
|
||||
import { Loader2, RefreshCw, Sparkles } from 'lucide-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
|
||||
@@ -9,21 +9,9 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
|
||||
import { AdminLayout } from '../components/AdminLayout';
|
||||
import {
|
||||
CreditLedgerEntry,
|
||||
getCreditBalance,
|
||||
getCreditLedger,
|
||||
getTenantPackagesOverview,
|
||||
PaginationMeta,
|
||||
TenantPackageSummary,
|
||||
} from '../api';
|
||||
import { getTenantPackagesOverview, 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(
|
||||
@@ -31,13 +19,10 @@ export default function BillingPage() {
|
||||
[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) => {
|
||||
@@ -57,111 +42,53 @@ export default function BillingPage() {
|
||||
[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'),
|
||||
statusActive: t('billing.sections.packages.card.statusActive'),
|
||||
statusInactive: t('billing.sections.packages.card.statusInactive'),
|
||||
used: t('billing.sections.packages.card.used'),
|
||||
available: t('billing.sections.packages.card.available'),
|
||||
expires: t('billing.sections.packages.card.expires'),
|
||||
}),
|
||||
[t]
|
||||
);
|
||||
|
||||
React.useEffect(() => {
|
||||
void loadAll();
|
||||
}, []);
|
||||
|
||||
async function loadAll() {
|
||||
const loadAll = React.useCallback(async () => {
|
||||
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 });
|
||||
}
|
||||
const packagesResult = await getTenantPackagesOverview();
|
||||
setPackages(packagesResult.packages);
|
||||
setActivePackage(packagesResult.activePackage);
|
||||
} catch (err) {
|
||||
if (!isAuthError(err)) {
|
||||
setError(t('management.billing.errors.load', 'Billing Daten konnten nicht geladen werden.'));
|
||||
setError(t('billing.errors.load'));
|
||||
}
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
}, [t]);
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
React.useEffect(() => {
|
||||
void loadAll();
|
||||
}, [loadAll]);
|
||||
|
||||
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')}
|
||||
{t('billing.actions.refresh')}
|
||||
</Button>
|
||||
);
|
||||
|
||||
return (
|
||||
<AdminLayout
|
||||
title={t('management.billing.title', 'Billing und Credits')}
|
||||
subtitle={t('management.billing.subtitle', 'Verwalte Guthaben, Pakete und Abrechnungen.')}
|
||||
title={t('billing.title')}
|
||||
subtitle={t('billing.subtitle')}
|
||||
actions={actions}
|
||||
>
|
||||
{error && (
|
||||
<Alert variant="destructive">
|
||||
<AlertTitle>{t('dashboard.alerts.errorTitle', 'Fehler')}</AlertTitle>
|
||||
<AlertTitle>{t('dashboard:alerts.errorTitle')}</AlertTitle>
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
@@ -174,43 +101,50 @@ export default function BillingPage() {
|
||||
<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')}
|
||||
<Sparkles className="h-5 w-5 text-pink-500" />
|
||||
{t('billing.sections.overview.title')}
|
||||
</CardTitle>
|
||||
<CardDescription className="text-sm text-slate-600">
|
||||
{t('management.billing.sections.overview.description', 'Dein aktuelles Guthaben und das aktive Reseller Paket.')}
|
||||
{t('billing.sections.overview.description')}
|
||||
</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'}
|
||||
{activePackage ? activePackage.package_name : t('billing.sections.overview.emptyBadge')}
|
||||
</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>
|
||||
{activePackage ? (
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<InfoCard
|
||||
label={t('billing.sections.overview.cards.package.label')}
|
||||
value={activePackage.package_name}
|
||||
tone="pink"
|
||||
helper={t('billing.sections.overview.cards.package.helper')}
|
||||
/>
|
||||
<InfoCard
|
||||
label={t('billing.sections.overview.cards.used.label')}
|
||||
value={activePackage.used_events ?? 0}
|
||||
tone="amber"
|
||||
helper={t('billing.sections.overview.cards.used.helper', {
|
||||
count: activePackage.remaining_events ?? 0,
|
||||
})}
|
||||
/>
|
||||
<InfoCard
|
||||
label={t('billing.sections.overview.cards.price.label')}
|
||||
value={formatCurrency(activePackage.price ?? null, activePackage.currency ?? 'EUR')}
|
||||
tone="sky"
|
||||
helper={activePackage.currency ?? 'EUR'}
|
||||
/>
|
||||
<InfoCard
|
||||
label={t('billing.sections.overview.cards.expires.label')}
|
||||
value={formatDate(activePackage.expires_at)}
|
||||
tone="emerald"
|
||||
helper={t('billing.sections.overview.cards.expires.helper')}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<EmptyState message={t('billing.sections.overview.empty')} />
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
@@ -218,15 +152,15 @@ export default function BillingPage() {
|
||||
<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')}
|
||||
{t('billing.sections.packages.title')}
|
||||
</CardTitle>
|
||||
<CardDescription className="text-sm text-slate-600">
|
||||
{t('management.billing.packages.description', 'Übersicht über aktive und vergangene Reseller Pakete.')}
|
||||
{t('billing.sections.packages.description')}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{packages.length === 0 ? (
|
||||
<EmptyState message={t('management.billing.packages.empty', 'Noch keine Pakete gebucht.')} />
|
||||
<EmptyState message={t('billing.sections.packages.empty')} />
|
||||
) : (
|
||||
packages.map((pkg) => (
|
||||
<PackageCard
|
||||
@@ -242,61 +176,11 @@ export default function BillingPage() {
|
||||
</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,
|
||||
@@ -372,33 +256,6 @@ function PackageCard({
|
||||
);
|
||||
}
|
||||
|
||||
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">
|
||||
|
||||
Reference in New Issue
Block a user