soeren/fotospiel-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added opaque join-token support across backend and frontend: new migration/model/service/endpoints, guest controllers now resolve tokens, and the demo seeder seeds a token. Tenant event details list/manage tokens with copy/revoke actions, and the guest PWA uses tokens end-to-end (routing, storage, uploads, achievements, etc.). Docs TODO updated to reflect completed steps.

Browse Source
This commit is contained in:
Codex Agent
2025-10-12 10:32:37 +02:00
parent d04e234ca0
commit 9394c3171e
73 changed files with 3277 additions and 911 deletions
Download Patch File Download Diff File Expand all files Collapse all files

199
resources/js/admin/pages/BillingPage.tsx
View File

@@ -1,5 +1,6 @@
import React from 'react';
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';
@@ -24,6 +25,12 @@ type LedgerState = {
};
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);
@@ -32,6 +39,51 @@ export default function BillingPage() {
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();
}, []);
@@ -62,7 +114,7 @@ export default function BillingPage() {
}
} catch (err) {
if (!isAuthError(err)) {
setError('Billing Daten konnten nicht geladen werden.');
setError(t('management.billing.errors.load', 'Billing Daten konnten nicht geladen werden.'));
}
} finally {
setLoading(false);
@@ -87,7 +139,7 @@ export default function BillingPage() {
});
} catch (err) {
if (!isAuthError(err)) {
setError('Weitere Ledger Eintraege konnten nicht geladen werden.');
setError(t('management.billing.errors.more', 'Weitere Ledger Eintraege konnten nicht geladen werden.'));
}
} finally {
setLoadingMore(false);
@@ -97,19 +149,19 @@ export default function BillingPage() {
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" />}
Aktualisieren
{t('management.billing.actions.refresh', 'Aktualisieren')}
</Button>
);
return (
<AdminLayout
title="Billing und Credits"
subtitle="Verwalte Guthaben, Pakete und Abrechnungen."
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>Fehler</AlertTitle>
<AlertTitle>{t('dashboard.alerts.errorTitle', 'Fehler')}</AlertTitle>
<AlertDescription>{error}</AlertDescription>
</Alert>
)}
@@ -123,10 +175,10 @@ export default function BillingPage() {
<div>
<CardTitle className="flex items-center gap-2 text-xl text-slate-900">
<CreditCard className="h-5 w-5 text-pink-500" />
Credits und Status
{t('management.billing.sections.overview.title', 'Credits und Status')}
</CardTitle>
<CardDescription className="text-sm text-slate-600">
Dein aktuelles Guthaben und das aktive Reseller Paket.
{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'}>
@@ -134,24 +186,30 @@ export default function BillingPage() {
</Badge>
</CardHeader>
<CardContent className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
<InfoCard label="Verfuegbare Credits" value={balance} tone="pink" />
<InfoCard
label="Genutzte Events"
value={activePackage?.used_events ?? 0}
tone="amber"
helper={`Verfuegbar: ${activePackage?.remaining_events ?? 0}`}
label={t('management.billing.sections.overview.cards.balance.label', 'Verfügbare Credits')}
value={balance}
tone="pink"
/>
<InfoCard
label="Preis (netto)"
value={formatCurrency(activePackage?.price)}
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="Ablauf"
label={t('management.billing.sections.overview.cards.expires.label', 'Ablauf')}
value={formatDate(activePackage?.expires_at)}
tone="emerald"
helper="Automatisch verlaengern falls aktiv"
helper={t('management.billing.sections.overview.cards.expires.helper', 'Automatisch verlängern, falls aktiv')}
/>
</CardContent>
</Card>
@@ -160,18 +218,25 @@ 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" />
Paket Historie
{t('management.billing.packages.title', 'Paket Historie')}
</CardTitle>
<CardDescription className="text-sm text-slate-600">
Uebersicht ueber aktive und vergangene Reseller Pakete.
{t('management.billing.packages.description', 'Übersicht über aktive und vergangene Reseller Pakete.')}
</CardDescription>
</CardHeader>
<CardContent className="space-y-3">
{packages.length === 0 ? (
<EmptyState message="Noch keine Pakete gebucht." />
<EmptyState message={t('management.billing.packages.empty', 'Noch keine Pakete gebucht.')} />
) : (
packages.map((pkg) => (
<PackageCard key={pkg.id} pkg={pkg} isActive={pkg.active} />
<PackageCard
key={pkg.id}
pkg={pkg}
isActive={Boolean(pkg.active)}
labels={packageLabels}
formatDate={formatDate}
formatCurrency={formatCurrency}
/>
))
)}
</CardContent>
@@ -182,28 +247,33 @@ export default function BillingPage() {
<div>
<CardTitle className="flex items-center gap-2 text-xl text-slate-900">
<Sparkles className="h-5 w-5 text-sky-500" />
Credit Ledger
{t('management.billing.ledger.title', 'Credit Ledger')}
</CardTitle>
<CardDescription className="text-sm text-slate-600">
Alle Zu- und Abbuchungen deines Credits Kontos.
{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" />
Export als CSV
{t('management.billing.actions.exportCsv', 'Export als CSV')}
</Button>
</CardHeader>
<CardContent className="space-y-2">
{ledger.entries.length === 0 ? (
<EmptyState message="Noch keine Ledger Eintraege vorhanden." />
<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} />
<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" /> : 'Mehr laden'}
{loadingMore ? <Loader2 className="h-4 w-4 animate-spin" /> : t('management.billing.ledger.loadMore', 'Mehr laden')}
</Button>
)}
</>
@@ -254,36 +324,68 @@ function InfoCard({
);
}
function PackageCard({ pkg, isActive }: { pkg: TenantPackageSummary; isActive: boolean }) {
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'}
{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 ? 'Aktiv' : 'Inaktiv'}
{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>Genutzte Events: {pkg.used_events}</span>
<span>Verfuegbar: {pkg.remaining_events ?? '--'}</span>
<span>Ablauf: {formatDate(pkg.expires_at)}</span>
<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 }: { entry: CreditLedgerEntry }) {
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">{mapReason(entry.reason)}</p>
<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">
@@ -327,28 +429,3 @@ function BillingSkeleton() {
</div>
);
}
function mapReason(reason: string): string {
switch (reason) {
case 'purchase':
return 'Credit Kauf';
case 'usage':
return 'Verbrauch';
case 'manual':
return 'Manuelle Anpassung';
default:
return reason;
}
}
function formatDate(value: string | null | undefined): string {
if (!value) return '--';
const date = new Date(value);
if (Number.isNaN(date.getTime())) return '--';
return date.toLocaleDateString('de-DE', { day: '2-digit', month: 'short', year: 'numeric' });
}
function formatCurrency(value: number | null | undefined): string {
if (value === null || value === undefined) return '--';
return new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(value);
}