soeren/fotospiel-app
1
0
Fork 0
Code Issues Pull Requests Actions 2 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);
}

164
resources/js/admin/pages/DashboardPage.tsx
View File

@@ -1,5 +1,6 @@
import React from 'react';
import React from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { CalendarDays, Camera, CreditCard, Sparkles, Users, Plus, Settings } from 'lucide-react';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
@@ -37,7 +38,7 @@ interface DashboardState {
credits: number;
activePackage: TenantPackageSummary | null;
loading: boolean;
error: string | null;
errorKey: string | null;
}
export default function DashboardPage() {
@@ -45,13 +46,14 @@ export default function DashboardPage() {
const location = useLocation();
const { user } = useAuth();
const { progress, markStep } = useOnboardingProgress();
const { t, i18n } = useTranslation(['dashboard', 'common']);
const [state, setState] = React.useState<DashboardState>({
summary: null,
events: [],
credits: 0,
activePackage: null,
loading: true,
error: null,
errorKey: null,
});
React.useEffect(() => {
@@ -71,19 +73,19 @@ export default function DashboardPage() {
const fallbackSummary = buildSummaryFallback(events, credits.balance ?? 0, packages.activePackage);
setState({
summary: summary ?? fallbackSummary,
events,
credits: credits.balance ?? 0,
activePackage: packages.activePackage,
loading: false,
error: null,
});
setState({
summary: summary ?? fallbackSummary,
events,
credits: credits.balance ?? 0,
activePackage: packages.activePackage,
loading: false,
errorKey: null,
});
} catch (error) {
if (!isAuthError(error)) {
setState((prev) => ({
...prev,
error: 'Dashboard konnte nicht geladen werden.',
errorKey: 'loadFailed',
loading: false,
}));
}
@@ -95,7 +97,7 @@ export default function DashboardPage() {
};
}, []);
const { summary, events, credits, activePackage, loading, error } = state;
const { summary, events, credits, activePackage, loading, errorKey } = state;
React.useEffect(() => {
if (loading) {
@@ -110,6 +112,12 @@ export default function DashboardPage() {
}
}, [loading, events.length, progress.eventCreated, navigate, location.pathname, markStep]);
const greetingName = user?.name ?? t('dashboard.welcome.fallbackName');
const greetingTitle = t('dashboard.welcome.greeting', { name: greetingName });
const subtitle = t('dashboard.welcome.subtitle');
const errorMessage = errorKey ? t(`dashboard.errors.${errorKey}`) : null;
const dateLocale = i18n.language?.startsWith('en') ? 'en-GB' : 'de-DE';
const upcomingEvents = getUpcomingEvents(events);
const publishedEvents = events.filter((event) => event.status === 'published');
@@ -119,10 +127,10 @@ export default function DashboardPage() {
className="bg-brand-rose text-white shadow-lg shadow-rose-400/40 hover:bg-[var(--brand-rose-strong)]"
onClick={() => navigate(ADMIN_EVENT_CREATE_PATH)}
>
<Plus className="h-4 w-4" /> Neues Event
<Plus className="h-4 w-4" /> {t('dashboard.actions.newEvent')}
</Button>
<Button variant="outline" onClick={() => navigate(ADMIN_EVENTS_PATH)} className="border-brand-rose-soft text-brand-rose">
<CalendarDays className="h-4 w-4" /> Alle Events
<CalendarDays className="h-4 w-4" /> {t('dashboard.actions.allEvents')}
</Button>
{events.length === 0 && (
<Button
@@ -130,22 +138,18 @@ export default function DashboardPage() {
onClick={() => navigate(ADMIN_WELCOME_BASE_PATH)}
className="border-brand-rose-soft text-brand-rose hover:bg-brand-rose-soft/40"
>
<Sparkles className="h-4 w-4" /> Guided Setup
<Sparkles className="h-4 w-4" /> {t('dashboard.actions.guidedSetup')}
</Button>
)}
</>
);
return (
<AdminLayout
title={`Hallo ${user?.name ?? 'Tenant-Admin'}!`}
subtitle="Behalte deine Events, Credits und Aufgaben im Blick."
actions={actions}
>
{error && (
<AdminLayout title={greetingTitle} subtitle={subtitle} actions={actions}>
{errorMessage && (
<Alert variant="destructive">
<AlertTitle>Fehler</AlertTitle>
<AlertDescription>{error}</AlertDescription>
<AlertTitle>{t('dashboard.alerts.errorTitle')}</AlertTitle>
<AlertDescription>{errorMessage}</AlertDescription>
</Alert>
)}
@@ -158,24 +162,24 @@ export default function DashboardPage() {
<CardHeader className="space-y-3">
<CardTitle className="flex items-center gap-2 text-xl text-slate-900">
<Sparkles className="h-5 w-5 text-brand-rose" />
Starte mit der Welcome Journey
{t('dashboard.welcomeCard.title')}
</CardTitle>
<CardDescription className="text-sm text-slate-600">
Lerne die Storytelling-Elemente kennen, wähle dein Paket und erstelle dein erstes Event mit
geführten Schritten.
Lerne die Storytelling-Elemente kennen, wähle dein Paket und erstelle dein erstes Event mit
geführten Schritten.
</CardDescription>
</CardHeader>
<CardContent className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
<div className="space-y-2 text-sm text-slate-600">
<p>Wir begleiten dich durch Pakete, Aufgaben und Galerie-Konfiguration, damit dein Event glänzt.</p>
<p>Du kannst jederzeit zur Welcome Journey zurückkehren, auch wenn bereits Events laufen.</p>
<p>{t('dashboard.welcomeCard.body1')}</p>
<p>{t('dashboard.welcomeCard.body2')}</p>
</div>
<Button
size="lg"
className="rounded-full bg-rose-500 text-white shadow-lg shadow-rose-400/40 hover:bg-rose-500/90"
onClick={() => navigate(ADMIN_WELCOME_BASE_PATH)}
>
Jetzt starten
{t('dashboard.welcomeCard.cta')}
</Button>
</CardContent>
</Card>
@@ -186,37 +190,37 @@ export default function DashboardPage() {
<div>
<CardTitle className="flex items-center gap-2 text-xl text-slate-900">
<Sparkles className="h-5 w-5 text-brand-rose" />
Kurzer Ueberblick
{t('dashboard.overview.title')}
</CardTitle>
<CardDescription className="text-sm text-slate-600">
Wichtigste Kennzahlen deines Tenants auf einen Blick.
{t('dashboard.overview.description')}
</CardDescription>
</div>
<Badge className="bg-brand-rose-soft text-brand-rose">
{activePackage?.package_name ?? 'Kein aktives Package'}
{activePackage?.package_name ?? t('dashboard.overview.noPackage')}
</Badge>
</CardHeader>
<CardContent className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
<StatCard
label="Aktive Events"
label={t('dashboard.overview.stats.activeEvents')}
value={summary?.active_events ?? publishedEvents.length}
hint={`${publishedEvents.length} veroeffentlicht`}
hint={t('dashboard.overview.stats.publishedHint', { count: publishedEvents.length })}
icon={<CalendarDays className="h-5 w-5 text-brand-rose" />}
/>
<StatCard
label="Neue Fotos (7 Tage)"
label={t('dashboard.overview.stats.newPhotos')}
value={summary?.new_photos ?? 0}
icon={<Camera className="h-5 w-5 text-fuchsia-500" />}
/>
<StatCard
label="Task-Fortschritt"
label={t('dashboard.overview.stats.taskProgress')}
value={`${Math.round(summary?.task_progress ?? 0)}%`}
icon={<Users className="h-5 w-5 text-amber-500" />}
/>
<StatCard
label="Credits"
label={t('dashboard.overview.stats.credits')}
value={credits}
hint={credits <= 1 ? 'Auffuellen empfohlen' : undefined}
hint={credits <= 1 ? t('dashboard.overview.stats.lowCredits') : undefined}
icon={<CreditCard className="h-5 w-5 text-sky-500" />}
/>
</CardContent>
@@ -225,35 +229,35 @@ export default function DashboardPage() {
<Card className="border-0 bg-brand-card shadow-brand-primary">
<CardHeader className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
<div>
<CardTitle className="text-xl text-slate-900">Schnellaktionen</CardTitle>
<CardTitle className="text-xl text-slate-900">{t('dashboard.quickActions.title')}</CardTitle>
<CardDescription className="text-sm text-slate-600">
Starte durch mit den wichtigsten Aktionen.
{t('dashboard.quickActions.description')}
</CardDescription>
</div>
</CardHeader>
<CardContent className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
<QuickAction
icon={<Plus className="h-5 w-5" />}
label="Event erstellen"
description="Plane dein naechstes Highlight."
label={t('dashboard.quickActions.createEvent.label')}
description={t('dashboard.quickActions.createEvent.description')}
onClick={() => navigate(ADMIN_EVENT_CREATE_PATH)}
/>
<QuickAction
icon={<Camera className="h-5 w-5" />}
label="Fotos moderieren"
description="Pruefe neue Uploads."
label={t('dashboard.quickActions.moderatePhotos.label')}
description={t('dashboard.quickActions.moderatePhotos.description')}
onClick={() => navigate(ADMIN_EVENTS_PATH)}
/>
<QuickAction
icon={<Users className="h-5 w-5" />}
label="Tasks organisieren"
description="Sorge fuer klare Verantwortungen."
label={t('dashboard.quickActions.organiseTasks.label')}
description={t('dashboard.quickActions.organiseTasks.description')}
onClick={() => navigate(ADMIN_TASKS_PATH)}
/>
<QuickAction
icon={<CreditCard className="h-5 w-5" />}
label="Credits verwalten"
description="Sieh dir Balance & Ledger an."
label={t('dashboard.quickActions.manageCredits.label')}
description={t('dashboard.quickActions.manageCredits.description')}
onClick={() => navigate(ADMIN_BILLING_PATH)}
/>
</CardContent>
@@ -262,21 +266,21 @@ export default function DashboardPage() {
<Card className="border-0 bg-brand-card shadow-brand-primary">
<CardHeader className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
<div>
<CardTitle className="text-xl text-slate-900">Kommende Events</CardTitle>
<CardTitle className="text-xl text-slate-900">{t('dashboard.upcoming.title')}</CardTitle>
<CardDescription className="text-sm text-slate-600">
Die naechsten Termine inklusive Status & Zugriff.
{t('dashboard.upcoming.description')}
</CardDescription>
</div>
<Button variant="outline" onClick={() => navigate(ADMIN_SETTINGS_PATH)}>
<Settings className="h-4 w-4" />
Einstellungen oeffnen
{t('dashboard.upcoming.settings')}
</Button>
</CardHeader>
<CardContent className="space-y-3">
{upcomingEvents.length === 0 ? (
<EmptyState
message="Noch keine Termine geplant. Lege dein erstes Event an!"
ctaLabel="Event planen"
message={t('dashboard.upcoming.empty.message')}
ctaLabel={t('dashboard.upcoming.empty.cta')}
onCta={() => navigate(adminPath('/events/new'))}
/>
) : (
@@ -285,6 +289,13 @@ export default function DashboardPage() {
key={event.id}
event={event}
onView={() => navigate(ADMIN_EVENT_VIEW_PATH(event.slug))}
locale={dateLocale}
labels={{
live: t('dashboard.upcoming.status.live'),
planning: t('dashboard.upcoming.status.planning'),
open: t('common:actions.open'),
noDate: t('dashboard.upcoming.status.noDate'),
}}
/>
))
)}
@@ -383,23 +394,44 @@ function QuickAction({
);
}
function UpcomingEventRow({ event, onView }: { event: TenantEvent; onView: () => void }) {
function UpcomingEventRow({
event,
onView,
locale,
labels,
}: {
event: TenantEvent;
onView: () => void;
locale: string;
labels: {
live: string;
planning: string;
open: string;
noDate: string;
};
}) {
const date = event.event_date ? new Date(event.event_date) : null;
const formattedDate = date
? date.toLocaleDateString('de-DE', { day: '2-digit', month: 'short', year: 'numeric' })
: 'Kein Datum';
? date.toLocaleDateString(locale, { day: '2-digit', month: 'short', year: 'numeric' })
: labels.noDate;
return (
<div className="flex flex-col gap-2 rounded-2xl border border-sky-100 bg-white/90 p-4 shadow-sm sm:flex-row sm:items-center sm:justify-between">
<div>
<div className="flex items-center gap-2">
<Badge className={event.status === 'published' ? 'bg-sky-100 text-sky-700' : 'bg-slate-100 text-slate-600'}>
{event.status === 'published' ? 'Live' : 'In Planung'}
</Badge>
<Button size="sm" variant="outline" onClick={onView} className="border-brand-rose-soft text-brand-rose hover:bg-brand-rose-soft/40">
Oeffnen
</Button>
</div>
<div className="flex flex-col gap-1">
<span className="text-xs font-medium uppercase tracking-wide text-slate-500">{formattedDate}</span>
<div className="flex items-center gap-2">
<Badge className={event.status === 'published' ? 'bg-sky-100 text-sky-700' : 'bg-slate-100 text-slate-600'}>
{event.status === 'published' ? labels.live : labels.planning}
</Badge>
<Button
size="sm"
variant="outline"
onClick={onView}
className="border-brand-rose-soft text-brand-rose hover:bg-brand-rose-soft/40"
>
{labels.open}
</Button>
</div>
</div>
</div>
);

181
resources/js/admin/pages/EventDetailPage.tsx
View File

@@ -7,7 +7,17 @@ import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { AdminLayout } from '../components/AdminLayout';
import { createInviteLink, getEvent, getEventStats, TenantEvent, EventStats as TenantEventStats, toggleEvent } from '../api';
import {
createInviteLink,
EventJoinToken,
EventStats as TenantEventStats,
getEvent,
getEventJoinTokens,
getEventStats,
TenantEvent,
toggleEvent,
revokeEventJoinToken,
} from '../api';
import { isAuthError } from '../auth/tokens';
import {
ADMIN_EVENTS_PATH,
@@ -20,6 +30,7 @@ import {
interface State {
event: TenantEvent | null;
stats: TenantEventStats | null;
tokens: EventJoinToken[];
inviteLink: string | null;
error: string | null;
loading: boolean;
@@ -35,11 +46,14 @@ export default function EventDetailPage() {
const [state, setState] = React.useState<State>({
event: null,
stats: null,
tokens: [],
inviteLink: null,
error: null,
loading: true,
busy: false,
});
const [creatingToken, setCreatingToken] = React.useState(false);
const [revokingId, setRevokingId] = React.useState<number | null>(null);
const load = React.useCallback(async () => {
if (!slug) {
@@ -49,17 +63,22 @@ export default function EventDetailPage() {
setState((prev) => ({ ...prev, loading: true, error: null }));
try {
const [eventData, statsData] = await Promise.all([getEvent(slug), getEventStats(slug)]);
const [eventData, statsData, joinTokens] = await Promise.all([
getEvent(slug),
getEventStats(slug),
getEventJoinTokens(slug),
]);
setState((prev) => ({
...prev,
event: eventData,
stats: statsData,
tokens: joinTokens,
loading: false,
inviteLink: prev.inviteLink,
}));
} catch (err) {
if (isAuthError(err)) return;
setState((prev) => ({ ...prev, error: 'Event konnte nicht geladen werden.', loading: false }));
setState((prev) => ({ ...prev, error: 'Event konnte nicht geladen werden.', loading: false, tokens: [] }));
}
}, [slug]);
@@ -88,26 +107,58 @@ export default function EventDetailPage() {
}
async function handleInvite() {
if (!slug) return;
setState((prev) => ({ ...prev, busy: true, error: null }));
if (!slug || creatingToken) return;
setCreatingToken(true);
setState((prev) => ({ ...prev, error: null }));
try {
const { link } = await createInviteLink(slug);
setState((prev) => ({ ...prev, inviteLink: link, busy: false }));
const token = await createInviteLink(slug);
setState((prev) => ({
...prev,
inviteLink: token.url,
tokens: [token, ...prev.tokens.filter((t) => t.id !== token.id)],
}));
try {
await navigator.clipboard.writeText(link);
await navigator.clipboard.writeText(token.url);
} catch {
// clipboard may be unavailable, ignore silently
}
} catch (err) {
if (!isAuthError(err)) {
setState((prev) => ({ ...prev, error: 'Einladungslink konnte nicht erzeugt werden.', busy: false }));
} else {
setState((prev) => ({ ...prev, busy: false }));
setState((prev) => ({ ...prev, error: 'Einladungslink konnte nicht erzeugt werden.' }));
}
}
setCreatingToken(false);
}
async function handleCopy(token: EventJoinToken) {
try {
await navigator.clipboard.writeText(token.url);
setState((prev) => ({ ...prev, inviteLink: token.url }));
} catch (err) {
console.warn('Clipboard copy failed', err);
}
}
const { event, stats, inviteLink, error, loading, busy } = state;
async function handleRevoke(token: EventJoinToken) {
if (!slug || token.revoked_at) return;
setRevokingId(token.id);
setState((prev) => ({ ...prev, error: null }));
try {
const updated = await revokeEventJoinToken(slug, token.id);
setState((prev) => ({
...prev,
tokens: prev.tokens.map((existing) => (existing.id === updated.id ? updated : existing)),
}));
} catch (err) {
if (!isAuthError(err)) {
setState((prev) => ({ ...prev, error: 'Token konnte nicht deaktiviert werden.' }));
}
} finally {
setRevokingId(null);
}
}
const { event, stats, tokens, inviteLink, error, loading, busy } = state;
const actions = (
<>
@@ -219,15 +270,32 @@ export default function EventDetailPage() {
</CardDescription>
</CardHeader>
<CardContent className="space-y-3 text-sm text-slate-700">
<Button onClick={handleInvite} disabled={busy} className="w-full">
{busy ? <Loader2 className="h-4 w-4 animate-spin" /> : <Share2 className="h-4 w-4" />}
Einladungslink kopieren
<Button onClick={handleInvite} disabled={creatingToken} className="w-full">
{creatingToken ? <Loader2 className="h-4 w-4 animate-spin" /> : <Share2 className="h-4 w-4" />}
Einladungslink erzeugen
</Button>
{inviteLink && (
<p className="rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 font-mono text-xs text-amber-800">
{inviteLink}
</p>
)}
<div className="space-y-3">
{tokens.length > 0 ? (
tokens.map((token) => (
<JoinTokenRow
key={token.id}
token={token}
onCopy={() => handleCopy(token)}
onRevoke={() => handleRevoke(token)}
revoking={revokingId === token.id}
/>
))
) : (
<p className="text-xs text-slate-500">
Noch keine Einladungen erstellt. Nutze den Button, um einen neuen QR-Link zu generieren.
</p>
)}
</div>
</CardContent>
</Card>
@@ -286,6 +354,63 @@ function StatChip({ label, value }: { label: string; value: string | number }) {
);
}
function JoinTokenRow({
token,
onCopy,
onRevoke,
revoking,
}: {
token: EventJoinToken;
onCopy: () => void;
onRevoke: () => void;
revoking: boolean;
}) {
const status = getTokenStatus(token);
return (
<div className="flex flex-col gap-3 rounded-xl border border-amber-100 bg-amber-50/60 p-3 md:flex-row md:items-center md:justify-between">
<div className="space-y-2">
<div className="flex items-center gap-2">
<span className="text-sm font-semibold text-slate-800">{token.label || `Einladung #${token.id}`}</span>
<span
className={`rounded-full px-2 py-0.5 text-xs font-medium ${
status === 'Aktiv'
? 'bg-emerald-100 text-emerald-700'
: status === 'Abgelaufen'
? 'bg-orange-100 text-orange-700'
: 'bg-slate-200 text-slate-700'
}`}
>
{status}
</span>
</div>
<p className="break-all font-mono text-xs text-slate-600">{token.url}</p>
<div className="flex flex-wrap gap-3 text-xs text-slate-500">
<span>
Nutzung: {token.usage_count}
{token.usage_limit ? ` / ${token.usage_limit}` : ''}
</span>
{token.expires_at && <span>Gültig bis {formatDateTime(token.expires_at)}</span>}
{token.created_at && <span>Erstellt {formatDateTime(token.created_at)}</span>}
</div>
</div>
<div className="flex gap-2">
<Button variant="outline" size="sm" onClick={onCopy} className="border-amber-200 text-amber-700 hover:bg-amber-100">
Kopieren
</Button>
<Button
variant="ghost"
size="sm"
onClick={onRevoke}
disabled={revoking || token.revoked_at !== null || !token.is_active}
className="text-slate-600 hover:bg-slate-100 disabled:opacity-50"
>
{revoking ? <Loader2 className="h-4 w-4 animate-spin" /> : 'Deaktivieren'}
</Button>
</div>
</div>
);
}
function formatDate(iso: string | null): string {
if (!iso) return 'Noch kein Datum';
const date = new Date(iso);
@@ -295,6 +420,32 @@ function formatDate(iso: string | null): string {
return date.toLocaleDateString('de-DE', { day: '2-digit', month: 'long', year: 'numeric' });
}
function formatDateTime(iso: string | null): string {
if (!iso) return 'unbekannt';
const date = new Date(iso);
if (Number.isNaN(date.getTime())) {
return 'unbekannt';
}
return date.toLocaleString('de-DE', {
day: '2-digit',
month: '2-digit',
year: 'numeric',
hour: '2-digit',
minute: '2-digit',
});
}
function getTokenStatus(token: EventJoinToken): 'Aktiv' | 'Deaktiviert' | 'Abgelaufen' {
if (token.revoked_at) return 'Deaktiviert';
if (token.expires_at) {
const expiry = new Date(token.expires_at);
if (!Number.isNaN(expiry.getTime()) && expiry.getTime() < Date.now()) {
return 'Abgelaufen';
}
}
return token.is_active ? 'Aktiv' : 'Deaktiviert';
}
function renderName(name: TenantEvent['name']): string {
if (typeof name === 'string') {
return name;

153
resources/js/admin/pages/EventMembersPage.tsx
View File

@@ -1,6 +1,7 @@
import React from 'react';
import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
import { ArrowLeft, Loader2, Mail, Sparkles, Trash2, Users } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { Badge } from '@/components/ui/badge';
@@ -35,6 +36,11 @@ const emptyInvite: InviteForm = {
};
export default function EventMembersPage() {
const { t, i18n } = useTranslation(['management', 'dashboard']);
const locale = React.useMemo(
() => (i18n.language?.startsWith('en') ? 'en-GB' : 'de-DE'),
[i18n.language]
);
const params = useParams<{ slug?: string }>();
const [searchParams] = useSearchParams();
const slug = params.slug ?? searchParams.get('slug') ?? null;
@@ -48,9 +54,52 @@ export default function EventMembersPage() {
const [inviting, setInviting] = React.useState(false);
const [membersUnavailable, setMembersUnavailable] = 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 roleLabels = React.useMemo(
() => ({
tenant_admin: t('management.members.roles.tenantAdmin', 'Tenant-Admin'),
member: t('management.members.roles.member', 'Mitglied'),
guest: t('management.members.roles.guest', 'Gast'),
}),
[t]
);
const statusLabels = React.useMemo(
() => ({
published: t('management.members.statuses.published', 'Veröffentlicht'),
draft: t('management.members.statuses.draft', 'Entwurf'),
active: t('management.members.statuses.active', 'Aktiv'),
}),
[t]
);
const resolveRole = React.useCallback(
(role: string) => roleLabels[role as keyof typeof roleLabels] ?? role,
[roleLabels]
);
const resolveMemberStatus = React.useCallback(
(status?: string | null) => {
if (!status) {
return statusLabels.active;
}
return statusLabels[status as keyof typeof statusLabels] ?? status;
},
[statusLabels]
);
React.useEffect(() => {
if (!slug) {
setError('Kein Event-Slug angegeben.');
setError(t('management.members.errors.missingSlug', 'Kein Event-Slug angegeben.'));
setLoading(false);
return;
}
@@ -71,7 +120,7 @@ export default function EventMembersPage() {
if (err instanceof Error && err.message.includes('Mitgliederverwaltung')) {
setMembersUnavailable(true);
} else if (!isAuthError(err)) {
setError('Mitglieder konnten nicht geladen werden.');
setError(t('management.members.errors.load', 'Mitglieder konnten nicht geladen werden.'));
}
} finally {
if (!cancelled) {
@@ -83,13 +132,13 @@ export default function EventMembersPage() {
return () => {
cancelled = true;
};
}, [slug]);
}, [slug, t]);
async function handleInvite(event: React.FormEvent<HTMLFormElement>) {
event.preventDefault();
if (!slug) return;
if (!invite.email.trim()) {
setError('Bitte gib eine E-Mail-Adresse ein.');
setError(t('management.members.errors.emailRequired', 'Bitte gib eine E-Mail-Adresse ein.'));
return;
}
setInviting(true);
@@ -106,7 +155,7 @@ export default function EventMembersPage() {
if (err instanceof Error && err.message.includes('Mitgliederverwaltung')) {
setMembersUnavailable(true);
} else if (!isAuthError(err)) {
setError('Einladung konnte nicht verschickt werden.');
setError(t('management.members.errors.invite', 'Einladung konnte nicht verschickt werden.'));
}
} finally {
setInviting(false);
@@ -121,7 +170,7 @@ export default function EventMembersPage() {
setMembers((prev) => prev.filter((entry) => entry.id !== member.id));
} catch (err) {
if (!isAuthError(err)) {
setError('Mitglied konnte nicht entfernt werden.');
setError(t('management.members.errors.remove', 'Mitglied konnte nicht entfernt werden.'));
}
}
}
@@ -129,19 +178,19 @@ export default function EventMembersPage() {
const actions = (
<Button variant="outline" onClick={() => navigate(ADMIN_EVENTS_PATH)} className="border-pink-200 text-pink-600">
<ArrowLeft className="h-4 w-4" />
Zurueck zur Uebersicht
{t('management.members.actions.back', 'Zurück zur Übersicht')}
</Button>
);
return (
<AdminLayout
title="Event Mitglieder"
subtitle="Verwalte Moderatoren, Admins und Helfer fuer dieses Event."
title={t('management.members.title', 'Event-Mitglieder')}
subtitle={t('management.members.subtitle', 'Verwalte Moderatoren, Admins und Helfer für dieses Event.')}
actions={actions}
>
{error && (
<Alert variant="destructive">
<AlertTitle>Fehler</AlertTitle>
<AlertTitle>{t('dashboard.alerts.errorTitle', 'Fehler')}</AlertTitle>
<AlertDescription>{error}</AlertDescription>
</Alert>
)}
@@ -150,34 +199,38 @@ export default function EventMembersPage() {
<MembersSkeleton />
) : !event ? (
<Alert variant="destructive">
<AlertTitle>Event nicht gefunden</AlertTitle>
<AlertDescription>Bitte kehre zur Eventliste zurueck.</AlertDescription>
<AlertTitle>{t('management.members.alerts.notFoundTitle', 'Event nicht gefunden')}</AlertTitle>
<AlertDescription>{t('management.members.alerts.notFoundDescription', 'Bitte kehre zur Eventliste zurück.')}</AlertDescription>
</Alert>
) : (
<>
<Card className="border-0 bg-white/85 shadow-xl shadow-pink-100/60">
<CardHeader>
<CardTitle className="text-xl text-slate-900">{renderName(event.name)}</CardTitle>
<CardTitle className="text-xl text-slate-900">{renderName(event.name, t)}</CardTitle>
<CardDescription className="text-sm text-slate-600">
Status: {event.status === 'published' ? 'Veroeffentlicht' : 'Entwurf'}
{t('management.members.eventStatus', {
status: event.status === 'published' ? statusLabels.published : statusLabels.draft,
})}
</CardDescription>
</CardHeader>
<CardContent className="grid gap-6 lg:grid-cols-2">
<section className="space-y-3">
<h3 className="flex items-center gap-2 text-sm font-semibold text-slate-900">
<Sparkles className="h-4 w-4 text-pink-500" />
Mitglieder
{t('management.members.sections.list.title', 'Mitglieder')}
</h3>
{membersUnavailable ? (
<Alert>
<AlertTitle>Feature noch nicht aktiviert</AlertTitle>
<AlertTitle>{t('management.members.alerts.lockedTitle', 'Feature noch nicht aktiviert')}</AlertTitle>
<AlertDescription>
Die Mitgliederverwaltung ist fuer dieses Event noch nicht verfuegbar. Bitte kontaktiere den Support,
um das Feature freizuschalten.
{t(
'management.members.alerts.lockedDescription',
'Die Mitgliederverwaltung ist für dieses Event noch nicht verfügbar. Bitte kontaktiere den Support, um das Feature freizuschalten.'
)}
</AlertDescription>
</Alert>
) : members.length === 0 ? (
<EmptyState message="Noch keine Mitglieder eingeladen." />
<EmptyState message={t('management.members.sections.list.empty', 'Noch keine Mitglieder eingeladen.')} />
) : (
<div className="space-y-2">
{members.map((member) => (
@@ -189,13 +242,23 @@ export default function EventMembersPage() {
<p className="text-sm font-semibold text-slate-900">{member.name}</p>
<p className="text-xs text-slate-600">{member.email}</p>
<div className="mt-1 flex flex-wrap items-center gap-2 text-xs text-slate-500">
<span>Status: {member.status ?? 'aktiv'}</span>
{member.joined_at && <span>Beigetreten: {formatDate(member.joined_at)}</span>}
<span>
{t('management.members.labels.status', {
status: resolveMemberStatus(member.status),
})}
</span>
{member.joined_at && (
<span>
{t('management.members.labels.joined', {
date: formatDate(member.joined_at),
})}
</span>
)}
</div>
</div>
<div className="flex items-center gap-2">
<Badge variant="outline" className="border-pink-200 text-pink-600">
{mapRole(member.role)}
{resolveRole(member.role)}
</Badge>
<Button variant="outline" size="sm" onClick={() => void handleRemove(member)}>
<Trash2 className="h-4 w-4" />
@@ -210,48 +273,48 @@ export default function EventMembersPage() {
<section className="space-y-3">
<h3 className="flex items-center gap-2 text-sm font-semibold text-slate-900">
<Users className="h-4 w-4 text-emerald-500" />
Neues Mitglied einladen
{t('management.members.sections.invite.title', 'Neues Mitglied einladen')}
</h3>
<form className="space-y-3 rounded-2xl border border-emerald-100 bg-white/90 p-4 shadow-sm" onSubmit={handleInvite}>
<div className="space-y-2">
<Label htmlFor="invite-email">E-Mail</Label>
<Label htmlFor="invite-email">{t('management.members.form.emailLabel', 'E-Mail')}</Label>
<Input
id="invite-email"
type="email"
placeholder="person@example.com"
placeholder={t('management.members.form.emailPlaceholder', 'person@example.com')}
value={invite.email}
onChange={(event) => setInvite((prev) => ({ ...prev, email: event.target.value }))}
required
/>
</div>
<div className="space-y-2">
<Label htmlFor="invite-name">Name (optional)</Label>
<Label htmlFor="invite-name">{t('management.members.form.nameLabel', 'Name (optional)')}</Label>
<Input
id="invite-name"
placeholder="Name"
placeholder={t('management.members.form.namePlaceholder', 'Name')}
value={invite.name}
onChange={(event) => setInvite((prev) => ({ ...prev, name: event.target.value }))}
/>
</div>
<div className="space-y-2">
<Label htmlFor="invite-role">Rolle</Label>
<Label htmlFor="invite-role">{t('management.members.form.roleLabel', 'Rolle')}</Label>
<Select
value={invite.role}
onValueChange={(value) => setInvite((prev) => ({ ...prev, role: value }))}
>
<SelectTrigger id="invite-role">
<SelectValue placeholder="Rolle waehlen" />
<SelectValue placeholder={t('management.members.form.rolePlaceholder', 'Rolle wählen')} />
</SelectTrigger>
<SelectContent>
<SelectItem value="tenant_admin">Tenant-Admin</SelectItem>
<SelectItem value="member">Mitglied</SelectItem>
<SelectItem value="guest">Gast</SelectItem>
<SelectItem value="tenant_admin">{roleLabels.tenant_admin}</SelectItem>
<SelectItem value="member">{roleLabels.member}</SelectItem>
<SelectItem value="guest">{roleLabels.guest}</SelectItem>
</SelectContent>
</Select>
</div>
<Button type="submit" className="w-full" disabled={inviting}>
{inviting ? <Loader2 className="h-4 w-4 animate-spin" /> : <Mail className="h-4 w-4" />}
{' '}Einladung senden
{' '}{t('management.members.form.submit', 'Einladung senden')}
</Button>
</form>
</section>
@@ -281,29 +344,9 @@ function MembersSkeleton() {
);
}
function renderName(name: TenantEvent['name']): string {
function renderName(name: TenantEvent['name'], translate: (key: string, defaultValue: string) => string): string {
if (typeof name === 'string') {
return name;
}
return name?.de ?? name?.en ?? Object.values(name ?? {})[0] ?? 'Unbenanntes Event';
}
function mapRole(role: string): string {
switch (role) {
case 'tenant_admin':
return 'Tenant-Admin';
case 'member':
return 'Mitglied';
case 'guest':
return 'Gast';
default:
return role;
}
}
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' });
return name?.de ?? name?.en ?? Object.values(name ?? {})[0] ?? translate('management.members.events.untitled', 'Unbenanntes Event');
}

62
resources/js/admin/pages/EventTasksPage.tsx
View File

@@ -1,6 +1,7 @@
import React from 'react';
import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
import { ArrowLeft, Loader2, PlusCircle, Sparkles } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { Badge } from '@/components/ui/badge';
@@ -21,6 +22,7 @@ import { isAuthError } from '../auth/tokens';
import { ADMIN_EVENTS_PATH } from '../constants';
export default function EventTasksPage() {
const { t } = useTranslation(['management', 'dashboard']);
const params = useParams<{ slug?: string }>();
const [searchParams] = useSearchParams();
const slug = params.slug ?? searchParams.get('slug') ?? null;
@@ -34,9 +36,17 @@ export default function EventTasksPage() {
const [saving, setSaving] = React.useState(false);
const [error, setError] = React.useState<string | null>(null);
const statusLabels = React.useMemo(
() => ({
published: t('management.members.statuses.published', 'Veröffentlicht'),
draft: t('management.members.statuses.draft', 'Entwurf'),
}),
[t]
);
React.useEffect(() => {
if (!slug) {
setError('Kein Event-Slug angegeben.');
setError(t('management.tasks.errors.missingSlug', 'Kein Event-Slug angegeben.'));
setLoading(false);
return;
}
@@ -58,7 +68,7 @@ export default function EventTasksPage() {
setError(null);
} catch (err) {
if (!isAuthError(err)) {
setError('Event-Tasks konnten nicht geladen werden.');
setError(t('management.tasks.errors.load', 'Event-Tasks konnten nicht geladen werden.'));
}
} finally {
if (!cancelled) {
@@ -70,7 +80,7 @@ export default function EventTasksPage() {
return () => {
cancelled = true;
};
}, [slug]);
}, [slug, t]);
async function handleAssign() {
if (!event || selected.length === 0) return;
@@ -84,7 +94,7 @@ export default function EventTasksPage() {
setSelected([]);
} catch (err) {
if (!isAuthError(err)) {
setError('Tasks konnten nicht zugewiesen werden.');
setError(t('management.tasks.errors.assign', 'Tasks konnten nicht zugewiesen werden.'));
}
} finally {
setSaving(false);
@@ -94,19 +104,19 @@ export default function EventTasksPage() {
const actions = (
<Button variant="outline" onClick={() => navigate(ADMIN_EVENTS_PATH)} className="border-pink-200 text-pink-600">
<ArrowLeft className="h-4 w-4" />
Zurueck zur Uebersicht
{t('management.tasks.actions.back', 'Zurück zur Übersicht')}
</Button>
);
return (
<AdminLayout
title="Event Tasks"
subtitle="Verwalte Aufgaben, die diesem Event zugeordnet sind."
title={t('management.tasks.title', 'Event-Tasks')}
subtitle={t('management.tasks.subtitle', 'Verwalte Aufgaben, die diesem Event zugeordnet sind.')}
actions={actions}
>
{error && (
<Alert variant="destructive">
<AlertTitle>Hinweis</AlertTitle>
<AlertTitle>{t('dashboard.alerts.errorTitle', 'Fehler')}</AlertTitle>
<AlertDescription>{error}</AlertDescription>
</Alert>
)}
@@ -115,26 +125,28 @@ export default function EventTasksPage() {
<TaskSkeleton />
) : !event ? (
<Alert variant="destructive">
<AlertTitle>Event nicht gefunden</AlertTitle>
<AlertDescription>Bitte kehre zur Eventliste zurueck.</AlertDescription>
<AlertTitle>{t('management.tasks.alerts.notFoundTitle', 'Event nicht gefunden')}</AlertTitle>
<AlertDescription>{t('management.tasks.alerts.notFoundDescription', 'Bitte kehre zur Eventliste zurück.')}</AlertDescription>
</Alert>
) : (
<>
<Card className="border-0 bg-white/85 shadow-xl shadow-pink-100/60">
<CardHeader>
<CardTitle className="text-xl text-slate-900">{renderName(event.name)}</CardTitle>
<CardTitle className="text-xl text-slate-900">{renderName(event.name, t)}</CardTitle>
<CardDescription className="text-sm text-slate-600">
Status: {event.status === 'published' ? 'Veroeffentlicht' : 'Entwurf'}
{t('management.tasks.eventStatus', {
status: statusLabels[event.status as keyof typeof statusLabels] ?? event.status,
})}
</CardDescription>
</CardHeader>
<CardContent className="grid gap-4 lg:grid-cols-2">
<section className="space-y-3">
<h3 className="flex items-center gap-2 text-sm font-semibold text-slate-900">
<Sparkles className="h-4 w-4 text-pink-500" />
Zugeordnete Tasks
{t('management.tasks.sections.assigned.title', 'Zugeordnete Tasks')}
</h3>
{assignedTasks.length === 0 ? (
<EmptyState message="Noch keine Tasks zugewiesen." />
<EmptyState message={t('management.tasks.sections.assigned.empty', 'Noch keine Tasks zugewiesen.')} />
) : (
<div className="space-y-2">
{assignedTasks.map((task) => (
@@ -142,7 +154,7 @@ export default function EventTasksPage() {
<div className="flex items-center justify-between">
<p className="text-sm font-medium text-slate-900">{task.title}</p>
<Badge variant="outline" className="border-pink-200 text-pink-600">
{mapPriority(task.priority)}
{mapPriority(task.priority, t)}
</Badge>
</div>
{task.description && <p className="mt-1 text-xs text-slate-600">{task.description}</p>}
@@ -155,11 +167,11 @@ export default function EventTasksPage() {
<section className="space-y-3">
<h3 className="flex items-center gap-2 text-sm font-semibold text-slate-900">
<PlusCircle className="h-4 w-4 text-emerald-500" />
Tasks aus Bibliothek hinzufuegen
{t('management.tasks.sections.library.title', 'Tasks aus Bibliothek hinzufügen')}
</h3>
<div className="space-y-2 rounded-2xl border border-emerald-100 bg-white/90 p-3 shadow-sm max-h-72 overflow-y-auto">
{availableTasks.length === 0 ? (
<EmptyState message="Keine Tasks in der Bibliothek gefunden." />
<EmptyState message={t('management.tasks.sections.library.empty', 'Keine Tasks in der Bibliothek gefunden.')} />
) : (
availableTasks.map((task) => (
<label key={task.id} className="flex items-start gap-3 rounded-xl border border-transparent p-2 transition hover:border-emerald-200">
@@ -180,7 +192,7 @@ export default function EventTasksPage() {
)}
</div>
<Button onClick={() => void handleAssign()} disabled={saving || selected.length === 0}>
{saving ? <Loader2 className="h-4 w-4 animate-spin" /> : 'Ausgewaehlte Tasks zuweisen'}
{saving ? <Loader2 className="h-4 w-4 animate-spin" /> : t('management.tasks.actions.assign', 'Ausgewählte Tasks zuweisen')}
</Button>
</section>
</CardContent>
@@ -209,22 +221,22 @@ function TaskSkeleton() {
);
}
function mapPriority(priority: TenantTask['priority']): string {
function mapPriority(priority: TenantTask['priority'], translate: (key: string, defaultValue: string) => string): string {
switch (priority) {
case 'low':
return 'Niedrig';
return translate('management.tasks.priorities.low', 'Niedrig');
case 'high':
return 'Hoch';
return translate('management.tasks.priorities.high', 'Hoch');
case 'urgent':
return 'Dringend';
return translate('management.tasks.priorities.urgent', 'Dringend');
default:
return 'Mittel';
return translate('management.tasks.priorities.medium', 'Mittel');
}
}
function renderName(name: TenantEvent['name']): string {
function renderName(name: TenantEvent['name'], translate: (key: string, defaultValue: string) => string): string {
if (typeof name === 'string') {
return name;
}
return name?.de ?? name?.en ?? Object.values(name ?? {})[0] ?? 'Unbenanntes Event';
return name?.de ?? name?.en ?? Object.values(name ?? {})[0] ?? translate('management.members.events.untitled', 'Unbenanntes Event');
}