- Tenant-Admin-PWA: Neues /event-admin/welcome Onboarding mit WelcomeHero, Packages-, Order-Summary- und Event-Setup-Pages, Zustandsspeicher, Routing-Guard und Dashboard-CTA für Erstnutzer; Filament-/admin-Login via Custom-View behoben.

- Brand/Theming: Marketing-Farb- und Typographievariablen in `resources/css/app.css` eingeführt, AdminLayout, Dashboardkarten und Onboarding-Komponenten entsprechend angepasst; Dokumentation (`docs/todo/tenant-admin-onboarding-fusion.md`, `docs/changes/...`) aktualisiert.
- Checkout & Payments: Checkout-, PayPal-Controller und Tests für integrierte Stripe/PayPal-Flows sowie Paket-Billing-Abläufe überarbeitet; neue PayPal SDK-Factory und Admin-API-Helper (`resources/js/admin/api.ts`) schaffen Grundlage für Billing/Members/Tasks-Seiten.
- DX & Tests: Neue Playwright/E2E-Struktur (docs/testing/e2e.md, `tests/e2e/tenant-onboarding-flow.test.ts`, Utilities), E2E-Tenant-Seeder und zusätzliche Übersetzungen/Factories zur Unterstützung der neuen Flows.
- Marketing-Kommunikation: Automatische Kontakt-Bestätigungsmail (`ContactConfirmation` + Blade-Template) implementiert; Guest-PWA unter `/event` erreichbar.
- Nebensitzung: Blogsystem gefixt und umfassenden BlogPostSeeder für Beispielinhalte angelegt.

resources/js/admin/pages/BillingPage.tsx

@@ -0,0 +1,354 @@
+import React from 'react';
+import { CreditCard, Download, Loader2, RefreshCw, Sparkles } from 'lucide-react';
+
+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 [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);
+
+  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('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('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" />}
+      Aktualisieren
+    </Button>
+  );
+
+  return (
+    <AdminLayout
+      title="Billing und Credits"
+      subtitle="Verwalte Guthaben, Pakete und Abrechnungen."
+      actions={actions}
+    >
+      {error && (
+        <Alert variant="destructive">
+          <AlertTitle>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" />
+                  Credits und Status
+                </CardTitle>
+                <CardDescription className="text-sm text-slate-600">
+                  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="Verfuegbare Credits" value={balance} tone="pink" />
+              <InfoCard
+                label="Genutzte Events"
+                value={activePackage?.used_events ?? 0}
+                tone="amber"
+                helper={`Verfuegbar: ${activePackage?.remaining_events ?? 0}`}
+              />
+              <InfoCard
+                label="Preis (netto)"
+                value={formatCurrency(activePackage?.price)}
+                tone="sky"
+                helper={activePackage?.currency ?? 'EUR'}
+              />
+              <InfoCard
+                label="Ablauf"
+                value={formatDate(activePackage?.expires_at)}
+                tone="emerald"
+                helper="Automatisch verlaengern 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" />
+                Paket Historie
+              </CardTitle>
+              <CardDescription className="text-sm text-slate-600">
+                Uebersicht ueber aktive und vergangene Reseller Pakete.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-3">
+              {packages.length === 0 ? (
+                <EmptyState message="Noch keine Pakete gebucht." />
+              ) : (
+                packages.map((pkg) => (
+                  <PackageCard key={pkg.id} pkg={pkg} isActive={pkg.active} />
+                ))
+              )}
+            </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" />
+                  Credit Ledger
+                </CardTitle>
+                <CardDescription className="text-sm text-slate-600">
+                  Alle Zu- und Abbuchungen deines Credits Kontos.
+                </CardDescription>
+              </div>
+              <Button variant="outline" size="sm">
+                <Download className="h-4 w-4" />
+                Export als CSV
+              </Button>
+            </CardHeader>
+            <CardContent className="space-y-2">
+              {ledger.entries.length === 0 ? (
+                <EmptyState message="Noch keine Ledger Eintraege vorhanden." />
+              ) : (
+                <>
+                  {ledger.entries.map((entry) => (
+                    <LedgerRow key={`${entry.id}-${entry.created_at}`} entry={entry} />
+                  ))}
+                  {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'}
+                    </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 }: { pkg: TenantPackageSummary; isActive: boolean }) {
+  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 ? 'Aktiv' : 'Inaktiv'}
+        </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>
+      </div>
+    </div>
+  );
+}
+
+function LedgerRow({ entry }: { entry: CreditLedgerEntry }) {
+  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>
+        {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>
+  );
+}
+
+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);
+}

resources/js/admin/pages/DashboardPage.tsx

@@ -0,0 +1,448 @@
+import React from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { CalendarDays, Camera, CreditCard, Sparkles, Users, Plus, Settings } from 'lucide-react';
+
+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 { AdminLayout } from '../components/AdminLayout';
+import {
+  DashboardSummary,
+  getCreditBalance,
+  getDashboardSummary,
+  getEvents,
+  getTenantPackagesOverview,
+  TenantEvent,
+  TenantPackageSummary,
+} from '../api';
+import { isAuthError } from '../auth/tokens';
+import { useAuth } from '../auth/context';
+import {
+  adminPath,
+  ADMIN_EVENT_VIEW_PATH,
+  ADMIN_EVENTS_PATH,
+  ADMIN_TASKS_PATH,
+  ADMIN_BILLING_PATH,
+  ADMIN_SETTINGS_PATH,
+  ADMIN_WELCOME_BASE_PATH,
+  ADMIN_EVENT_CREATE_PATH,
+} from '../constants';
+import { useOnboardingProgress } from '../onboarding';
+
+interface DashboardState {
+  summary: DashboardSummary | null;
+  events: TenantEvent[];
+  credits: number;
+  activePackage: TenantPackageSummary | null;
+  loading: boolean;
+  error: string | null;
+}
+
+export default function DashboardPage() {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { user } = useAuth();
+  const { progress, markStep } = useOnboardingProgress();
+  const [state, setState] = React.useState<DashboardState>({
+    summary: null,
+    events: [],
+    credits: 0,
+    activePackage: null,
+    loading: true,
+    error: null,
+  });
+
+  React.useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      try {
+        const [summary, events, credits, packages] = await Promise.all([
+          getDashboardSummary().catch(() => null),
+          getEvents().catch(() => [] as TenantEvent[]),
+          getCreditBalance().catch(() => ({ balance: 0 })),
+          getTenantPackagesOverview().catch(() => ({ packages: [], activePackage: null })),
+        ]);
+
+        if (cancelled) {
+          return;
+        }
+
+        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,
+        });
+      } catch (error) {
+        if (!isAuthError(error)) {
+          setState((prev) => ({
+            ...prev,
+            error: 'Dashboard konnte nicht geladen werden.',
+            loading: false,
+          }));
+        }
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const { summary, events, credits, activePackage, loading, error } = state;
+
+  React.useEffect(() => {
+    if (loading) {
+      return;
+    }
+    if (!progress.eventCreated && events.length === 0 && !location.pathname.startsWith(ADMIN_WELCOME_BASE_PATH)) {
+      navigate(ADMIN_WELCOME_BASE_PATH, { replace: true });
+      return;
+    }
+    if (events.length > 0 && !progress.eventCreated) {
+      markStep({ eventCreated: true });
+    }
+  }, [loading, events.length, progress.eventCreated, navigate, location.pathname, markStep]);
+
+  const upcomingEvents = getUpcomingEvents(events);
+  const publishedEvents = events.filter((event) => event.status === 'published');
+
+  const actions = (
+    <>
+      <Button
+        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
+      </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
+      </Button>
+      {events.length === 0 && (
+        <Button
+          variant="outline"
+          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
+        </Button>
+      )}
+    </>
+  );
+
+  return (
+    <AdminLayout
+      title={`Hallo ${user?.name ?? 'Tenant-Admin'}!`}
+      subtitle="Behalte deine Events, Credits und Aufgaben im Blick."
+      actions={actions}
+    >
+      {error && (
+        <Alert variant="destructive">
+          <AlertTitle>Fehler</AlertTitle>
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
+      )}
+
+      {loading ? (
+        <DashboardSkeleton />
+      ) : (
+        <>
+          {events.length === 0 && (
+            <Card className="border-0 bg-brand-card shadow-brand-primary">
+              <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
+                </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.
+                </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>
+                </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
+                </Button>
+              </CardContent>
+            </Card>
+          )}
+
+          <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="flex items-center gap-2 text-xl text-slate-900">
+                  <Sparkles className="h-5 w-5 text-brand-rose" />
+                  Kurzer Ueberblick
+                </CardTitle>
+                <CardDescription className="text-sm text-slate-600">
+                  Wichtigste Kennzahlen deines Tenants auf einen Blick.
+                </CardDescription>
+              </div>
+              <Badge className="bg-brand-rose-soft text-brand-rose">
+                {activePackage?.package_name ?? 'Kein aktives Package'}
+              </Badge>
+            </CardHeader>
+            <CardContent className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+              <StatCard
+                label="Aktive Events"
+                value={summary?.active_events ?? publishedEvents.length}
+                hint={`${publishedEvents.length} veroeffentlicht`}
+                icon={<CalendarDays className="h-5 w-5 text-brand-rose" />}
+              />
+              <StatCard
+                label="Neue Fotos (7 Tage)"
+                value={summary?.new_photos ?? 0}
+                icon={<Camera className="h-5 w-5 text-fuchsia-500" />}
+              />
+              <StatCard
+                label="Task-Fortschritt"
+                value={`${Math.round(summary?.task_progress ?? 0)}%`}
+                icon={<Users className="h-5 w-5 text-amber-500" />}
+              />
+              <StatCard
+                label="Credits"
+                value={credits}
+                hint={credits <= 1 ? 'Auffuellen empfohlen' : undefined}
+                icon={<CreditCard className="h-5 w-5 text-sky-500" />}
+              />
+            </CardContent>
+          </Card>
+
+          <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>
+                <CardDescription className="text-sm text-slate-600">
+                  Starte durch mit den wichtigsten Aktionen.
+                </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."
+                onClick={() => navigate(ADMIN_EVENT_CREATE_PATH)}
+              />
+              <QuickAction
+                icon={<Camera className="h-5 w-5" />}
+                label="Fotos moderieren"
+                description="Pruefe neue Uploads."
+                onClick={() => navigate(ADMIN_EVENTS_PATH)}
+              />
+              <QuickAction
+                icon={<Users className="h-5 w-5" />}
+                label="Tasks organisieren"
+                description="Sorge fuer klare Verantwortungen."
+                onClick={() => navigate(ADMIN_TASKS_PATH)}
+              />
+              <QuickAction
+                icon={<CreditCard className="h-5 w-5" />}
+                label="Credits verwalten"
+                description="Sieh dir Balance & Ledger an."
+                onClick={() => navigate(ADMIN_BILLING_PATH)}
+              />
+            </CardContent>
+          </Card>
+
+          <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>
+                <CardDescription className="text-sm text-slate-600">
+                  Die naechsten Termine inklusive Status & Zugriff.
+                </CardDescription>
+              </div>
+              <Button variant="outline" onClick={() => navigate(ADMIN_SETTINGS_PATH)}>
+                <Settings className="h-4 w-4" />
+                Einstellungen oeffnen
+              </Button>
+            </CardHeader>
+            <CardContent className="space-y-3">
+              {upcomingEvents.length === 0 ? (
+                <EmptyState
+                  message="Noch keine Termine geplant. Lege dein erstes Event an!"
+                  ctaLabel="Event planen"
+                  onCta={() => navigate(adminPath('/events/new'))}
+                />
+              ) : (
+                upcomingEvents.map((event) => (
+                  <UpcomingEventRow
+                    key={event.id}
+                    event={event}
+                    onView={() => navigate(ADMIN_EVENT_VIEW_PATH(event.slug))}
+                  />
+                ))
+              )}
+            </CardContent>
+          </Card>
+        </>
+      )}
+    </AdminLayout>
+  );
+}
+
+function buildSummaryFallback(
+  events: TenantEvent[],
+  balance: number,
+  activePackage: TenantPackageSummary | null
+): DashboardSummary {
+  const activeEvents = events.filter((event) => Boolean(event.is_active || event.status === 'published'));
+  const totalPhotos = events.reduce((sum, event) => sum + Number(event.photo_count ?? 0), 0);
+
+  return {
+    active_events: activeEvents.length,
+    new_photos: totalPhotos,
+    task_progress: 0,
+    credit_balance: balance,
+    upcoming_events: activeEvents.length,
+    active_package: activePackage
+      ? {
+          name: activePackage.package_name,
+          remaining_events: activePackage.remaining_events,
+          expires_at: activePackage.expires_at,
+        }
+      : null,
+  };
+}
+
+function getUpcomingEvents(events: TenantEvent[]): TenantEvent[] {
+  const now = new Date();
+  return events
+    .filter((event) => {
+      if (!event.event_date) return false;
+      const date = new Date(event.event_date);
+      return !Number.isNaN(date.getTime()) && date >= now;
+    })
+    .sort((a, b) => {
+      const dateA = a.event_date ? new Date(a.event_date).getTime() : 0;
+      const dateB = b.event_date ? new Date(b.event_date).getTime() : 0;
+      return dateA - dateB;
+    })
+    .slice(0, 4);
+}
+
+function StatCard({
+  label,
+  value,
+  hint,
+  icon,
+}: {
+  label: string;
+  value: string | number;
+  hint?: string;
+  icon: React.ReactNode;
+}) {
+  return (
+    <div className="rounded-2xl border border-brand-rose-soft bg-brand-card p-5 shadow-md shadow-pink-100/40 transition-transform hover:-translate-y-0.5 hover:shadow-lg">
+      <div className="flex items-center justify-between">
+        <span className="text-xs uppercase tracking-wide text-slate-500">{label}</span>
+        <span className="rounded-full bg-brand-rose-soft p-2 text-brand-rose">{icon}</span>
+      </div>
+      <div className="mt-4 text-2xl font-semibold text-slate-900">{value}</div>
+      {hint && <p className="mt-2 text-xs text-slate-500">{hint}</p>}
+    </div>
+  );
+}
+
+function QuickAction({
+  icon,
+  label,
+  description,
+  onClick,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  description: string;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="flex flex-col items-start gap-2 rounded-2xl border border-slate-100 bg-white/80 p-4 text-left shadow-sm transition hover:-translate-y-0.5 hover:border-brand-rose-soft hover:shadow-md focus:outline-none focus:ring-2 focus:ring-brand-rose/40"
+    >
+      <span className="rounded-full bg-brand-rose-soft p-2 text-brand-rose">{icon}</span>
+      <span className="text-sm font-semibold text-slate-900">{label}</span>
+      <span className="text-xs text-slate-600">{description}</span>
+    </button>
+  );
+}
+
+function UpcomingEventRow({ event, onView }: { event: TenantEvent; onView: () => void }) {
+  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';
+
+  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>
+    </div>
+  );
+}
+
+function EmptyState({ message, ctaLabel, onCta }: { message: string; ctaLabel: string; onCta: () => void }) {
+  return (
+    <div className="flex flex-col items-center justify-center gap-3 rounded-2xl border border-dashed border-slate-200 bg-white/70 p-10 text-center">
+      <div className="rounded-full bg-brand-rose-soft p-3 text-brand-rose shadow-inner shadow-pink-200/80">
+        <Sparkles className="h-5 w-5" />
+      </div>
+      <p className="text-sm text-slate-600">{message}</p>
+      <Button onClick={onCta} className="bg-brand-rose text-white shadow-lg shadow-rose-400/40 hover:bg-[var(--brand-rose-strong)]">
+        {ctaLabel}
+      </Button>
+    </div>
+  );
+}
+
+function DashboardSkeleton() {
+  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((__ , cardIndex) => (
+              <div
+                key={cardIndex}
+                className="h-24 animate-pulse rounded-2xl bg-gradient-to-r from-white/40 via-white/60 to-white/40"
+              />
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function renderName(name: TenantEvent['name']): string {
+  if (typeof name === 'string') {
+    return name;
+  }
+  return name?.de ?? name?.en ?? Object.values(name ?? {})[0] ?? 'Unbenanntes Event';
+}
+

resources/js/admin/pages/EventDetailPage.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 import { ArrowLeft, Camera, Heart, Loader2, RefreshCw, Share2, Sparkles } from 'lucide-react';
 
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
@@ -9,7 +9,13 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
 import { AdminLayout } from '../components/AdminLayout';
 import { createInviteLink, getEvent, getEventStats, TenantEvent, EventStats as TenantEventStats, toggleEvent } from '../api';
 import { isAuthError } from '../auth/tokens';
-import { adminPath } from '../constants';
+import {
+  ADMIN_EVENTS_PATH,
+  ADMIN_EVENT_EDIT_PATH,
+  ADMIN_EVENT_PHOTOS_PATH,
+  ADMIN_EVENT_MEMBERS_PATH,
+  ADMIN_EVENT_TASKS_PATH,
+} from '../constants';
 
 interface State {
   event: TenantEvent | null;
@@ -21,8 +27,9 @@ interface State {
 }
 
 export default function EventDetailPage() {
+  const params = useParams<{ slug?: string }>();
   const [searchParams] = useSearchParams();
-  const slug = searchParams.get('slug');
+  const slug = params.slug ?? searchParams.get('slug') ?? null;
   const navigate = useNavigate();
 
   const [state, setState] = React.useState<State>({
@@ -106,19 +113,35 @@ export default function EventDetailPage() {
     <>
       <Button
         variant="outline"
-        onClick={() => navigate(adminPath('/events'))}
+        onClick={() => navigate(ADMIN_EVENTS_PATH)}
         className="border-pink-200 text-pink-600 hover:bg-pink-50"
       >
         <ArrowLeft className="h-4 w-4" /> Zurueck zur Liste
       </Button>
       {event && (
-        <Button
-          variant="outline"
-          onClick={() => navigate(adminPath(`/events/edit?slug=${encodeURIComponent(event.slug)}`))}
-          className="border-fuchsia-200 text-fuchsia-700 hover:bg-fuchsia-50"
-        >
-          Bearbeiten
-        </Button>
+        <>
+          <Button
+            variant="outline"
+            onClick={() => navigate(ADMIN_EVENT_EDIT_PATH(event.slug))}
+            className="border-fuchsia-200 text-fuchsia-700 hover:bg-fuchsia-50"
+          >
+            Bearbeiten
+          </Button>
+          <Button
+            variant="outline"
+            onClick={() => navigate(ADMIN_EVENT_MEMBERS_PATH(event.slug))}
+            className="border-sky-200 text-sky-700 hover:bg-sky-50"
+          >
+            Mitglieder
+          </Button>
+          <Button
+            variant="outline"
+            onClick={() => navigate(ADMIN_EVENT_TASKS_PATH(event.slug))}
+            className="border-amber-200 text-amber-600 hover:bg-amber-50"
+          >
+            Tasks
+          </Button>
+        </>
       )}
     </>
   );
@@ -177,7 +200,7 @@ export default function EventDetailPage() {
                 </Button>
                 <Button
                   variant="outline"
-                  onClick={() => navigate(adminPath(`/events/photos?slug=${encodeURIComponent(event.slug)}`))}
+                  onClick={() => navigate(ADMIN_EVENT_PHOTOS_PATH(event.slug))}
                   className="border-sky-200 text-sky-700 hover:bg-sky-50"
                 >
                   <Camera className="h-4 w-4" /> Fotos moderieren

resources/js/admin/pages/EventFormPage.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 import { ArrowLeft, Loader2, Save, Sparkles, Package as PackageIcon } from 'lucide-react';
 import { useQuery } from '@tanstack/react-query';
 
@@ -15,7 +15,7 @@ import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, Di
 import { AdminLayout } from '../components/AdminLayout';
 import { createEvent, getEvent, updateEvent, getPackages } from '../api';
 import { isAuthError } from '../auth/tokens';
-import { adminPath } from '../constants';
+import { ADMIN_EVENT_VIEW_PATH, ADMIN_EVENTS_PATH } from '../constants';
 
 interface EventFormState {
   name: string;
@@ -26,8 +26,9 @@ interface EventFormState {
 }
 
 export default function EventFormPage() {
+  const params = useParams<{ slug?: string }>();
   const [searchParams] = useSearchParams();
-  const slugParam = searchParams.get('slug');
+  const slugParam = params.slug ?? searchParams.get('slug') ?? undefined;
   const isEdit = Boolean(slugParam);
   const navigate = useNavigate();
 
@@ -63,12 +64,13 @@ export default function EventFormPage() {
         const event = await getEvent(slugParam);
         if (cancelled) return;
         const name = normalizeName(event.name);
-        setForm({
+        setForm((prev) => ({
+          ...prev,
           name,
           slug: event.slug,
           date: event.event_date ? event.event_date.slice(0, 10) : '',
           isPublished: event.status === 'published',
-        });
+        }));
         setOriginalSlug(event.slug);
         setAutoSlug(false);
       } catch (err) {
@@ -117,12 +119,14 @@ export default function EventFormPage() {
     setSaving(true);
     setError(null);
 
+    const status: 'draft' | 'published' | 'archived' = form.isPublished ? 'published' : 'draft';
+
     const payload = {
       name: trimmedName,
       slug: trimmedSlug,
       package_id: form.package_id,
       date: form.date || undefined,
-      status: form.isPublished ? 'published' : 'draft',
+      status,
     };
 
     try {
@@ -130,10 +134,10 @@ export default function EventFormPage() {
         const targetSlug = originalSlug ?? slugParam!;
         const updated = await updateEvent(targetSlug, payload);
         setOriginalSlug(updated.slug);
-        navigate(adminPath(`/events/view?slug=${encodeURIComponent(updated.slug)}`));
+        navigate(ADMIN_EVENT_VIEW_PATH(updated.slug));
       } else {
         const { event: created } = await createEvent(payload);
-        navigate(adminPath(`/events/view?slug=${encodeURIComponent(created.slug)}`));
+        navigate(ADMIN_EVENT_VIEW_PATH(created.slug));
       }
     } catch (err) {
       if (!isAuthError(err)) {
@@ -147,7 +151,7 @@ export default function EventFormPage() {
   const actions = (
     <Button
       variant="outline"
-      onClick={() => navigate(adminPath('/events'))}
+      onClick={() => navigate(ADMIN_EVENTS_PATH)}
       className="border-pink-200 text-pink-600 hover:bg-pink-50"
     >
       <ArrowLeft className="h-4 w-4" /> Zurueck zur Liste

resources/js/admin/pages/EventMembersPage.tsx

@@ -0,0 +1,309 @@
+import React from 'react';
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
+import { ArrowLeft, Loader2, Mail, Sparkles, Trash2, Users } from 'lucide-react';
+
+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 { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+
+import { AdminLayout } from '../components/AdminLayout';
+import {
+  EventMember,
+  getEvent,
+  getEventMembers,
+  inviteEventMember,
+  removeEventMember,
+  TenantEvent,
+} from '../api';
+import { isAuthError } from '../auth/tokens';
+import { ADMIN_EVENTS_PATH } from '../constants';
+
+type InviteForm = {
+  email: string;
+  name: string;
+  role: string;
+};
+
+const emptyInvite: InviteForm = {
+  email: '',
+  name: '',
+  role: 'member',
+};
+
+export default function EventMembersPage() {
+  const params = useParams<{ slug?: string }>();
+  const [searchParams] = useSearchParams();
+  const slug = params.slug ?? searchParams.get('slug') ?? null;
+  const navigate = useNavigate();
+
+  const [event, setEvent] = React.useState<TenantEvent | null>(null);
+  const [members, setMembers] = React.useState<EventMember[]>([]);
+  const [loading, setLoading] = React.useState(true);
+  const [error, setError] = React.useState<string | null>(null);
+  const [invite, setInvite] = React.useState<InviteForm>(emptyInvite);
+  const [inviting, setInviting] = React.useState(false);
+  const [membersUnavailable, setMembersUnavailable] = React.useState(false);
+
+  React.useEffect(() => {
+    if (!slug) {
+      setError('Kein Event-Slug angegeben.');
+      setLoading(false);
+      return;
+    }
+
+    let cancelled = false;
+    (async () => {
+      try {
+        setLoading(true);
+        const eventData = await getEvent(slug);
+        if (cancelled) return;
+        setEvent(eventData);
+
+        const response = await getEventMembers(slug);
+        if (cancelled) return;
+        setMembers(response.data);
+        setMembersUnavailable(false);
+      } catch (err) {
+        if (err instanceof Error && err.message.includes('Mitgliederverwaltung')) {
+          setMembersUnavailable(true);
+        } else if (!isAuthError(err)) {
+          setError('Mitglieder konnten nicht geladen werden.');
+        }
+      } finally {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [slug]);
+
+  async function handleInvite(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (!slug) return;
+    if (!invite.email.trim()) {
+      setError('Bitte gib eine E-Mail-Adresse ein.');
+      return;
+    }
+    setInviting(true);
+    try {
+      const member = await inviteEventMember(slug, {
+        email: invite.email.trim(),
+        name: invite.name.trim() || undefined,
+        role: invite.role,
+      });
+      setMembers((prev) => [member, ...prev]);
+      setInvite(emptyInvite);
+      setMembersUnavailable(false);
+    } catch (err) {
+      if (err instanceof Error && err.message.includes('Mitgliederverwaltung')) {
+        setMembersUnavailable(true);
+      } else if (!isAuthError(err)) {
+        setError('Einladung konnte nicht verschickt werden.');
+      }
+    } finally {
+      setInviting(false);
+    }
+  }
+
+  async function handleRemove(member: EventMember) {
+    if (!slug) return;
+    if (!window.confirm(`${member.name} wirklich entfernen?`)) return;
+    try {
+      await removeEventMember(slug, member.id);
+      setMembers((prev) => prev.filter((entry) => entry.id !== member.id));
+    } catch (err) {
+      if (!isAuthError(err)) {
+        setError('Mitglied konnte nicht entfernt werden.');
+      }
+    }
+  }
+
+  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
+    </Button>
+  );
+
+  return (
+    <AdminLayout
+      title="Event Mitglieder"
+      subtitle="Verwalte Moderatoren, Admins und Helfer fuer dieses Event."
+      actions={actions}
+    >
+      {error && (
+        <Alert variant="destructive">
+          <AlertTitle>Fehler</AlertTitle>
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
+      )}
+
+      {loading ? (
+        <MembersSkeleton />
+      ) : !event ? (
+        <Alert variant="destructive">
+          <AlertTitle>Event nicht gefunden</AlertTitle>
+          <AlertDescription>Bitte kehre zur Eventliste zurueck.</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>
+              <CardDescription className="text-sm text-slate-600">
+                Status: {event.status === 'published' ? 'Veroeffentlicht' : 'Entwurf'}
+              </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
+                </h3>
+                {membersUnavailable ? (
+                  <Alert>
+                    <AlertTitle>Feature noch nicht aktiviert</AlertTitle>
+                    <AlertDescription>
+                      Die Mitgliederverwaltung ist fuer dieses Event noch nicht verfuegbar. Bitte kontaktiere den Support,
+                      um das Feature freizuschalten.
+                    </AlertDescription>
+                  </Alert>
+                ) : members.length === 0 ? (
+                  <EmptyState message="Noch keine Mitglieder eingeladen." />
+                ) : (
+                  <div className="space-y-2">
+                    {members.map((member) => (
+                      <div
+                        key={member.id}
+                        className="flex flex-col gap-3 rounded-2xl border border-slate-100 bg-white/90 p-3 shadow-sm sm:flex-row sm:items-center sm:justify-between"
+                      >
+                        <div>
+                          <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>}
+                          </div>
+                        </div>
+                        <div className="flex items-center gap-2">
+                          <Badge variant="outline" className="border-pink-200 text-pink-600">
+                            {mapRole(member.role)}
+                          </Badge>
+                          <Button variant="outline" size="sm" onClick={() => void handleRemove(member)}>
+                            <Trash2 className="h-4 w-4" />
+                          </Button>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </section>
+
+              <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
+                </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>
+                    <Input
+                      id="invite-email"
+                      type="email"
+                      placeholder="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>
+                    <Input
+                      id="invite-name"
+                      placeholder="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>
+                    <Select
+                      value={invite.role}
+                      onValueChange={(value) => setInvite((prev) => ({ ...prev, role: value }))}
+                    >
+                      <SelectTrigger id="invite-role">
+                        <SelectValue placeholder="Rolle waehlen" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="tenant_admin">Tenant-Admin</SelectItem>
+                        <SelectItem value="member">Mitglied</SelectItem>
+                        <SelectItem value="guest">Gast</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
+                  </Button>
+                </form>
+              </section>
+            </CardContent>
+          </Card>
+        </>
+      )}
+    </AdminLayout>
+  );
+}
+
+function EmptyState({ message }: { message: string }) {
+  return (
+    <div className="flex flex-col items-center justify-center gap-2 rounded-2xl border border-dashed border-slate-200 bg-white/70 p-6 text-center">
+      <p className="text-xs text-slate-600">{message}</p>
+    </div>
+  );
+}
+
+function MembersSkeleton() {
+  return (
+    <div className="space-y-4">
+      {Array.from({ length: 3 }).map((_, index) => (
+        <div key={index} className="h-40 animate-pulse rounded-2xl bg-gradient-to-r from-white/40 via-white/60 to-white/40" />
+      ))}
+    </div>
+  );
+}
+
+function renderName(name: TenantEvent['name']): 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' });
+}

resources/js/admin/pages/EventPhotosPage.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 import { Camera, Loader2, Sparkles, Trash2 } from 'lucide-react';
 
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
@@ -9,11 +9,12 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
 import { AdminLayout } from '../components/AdminLayout';
 import { deletePhoto, featurePhoto, getEventPhotos, TenantPhoto, unfeaturePhoto } from '../api';
 import { isAuthError } from '../auth/tokens';
-import { adminPath } from '../constants';
+import { ADMIN_EVENTS_PATH, ADMIN_EVENT_VIEW_PATH } from '../constants';
 
 export default function EventPhotosPage() {
+  const params = useParams<{ slug?: string }>();
   const [searchParams] = useSearchParams();
-  const slug = searchParams.get('slug');
+  const slug = params.slug ?? searchParams.get('slug') ?? null;
   const navigate = useNavigate();
 
   const [photos, setPhotos] = React.useState<TenantPhoto[]>([]);
@@ -82,7 +83,7 @@ export default function EventPhotosPage() {
         <Card className="border-0 bg-white/85 shadow-xl shadow-pink-100/60">
           <CardContent className="p-6 text-sm text-slate-600">
             Kein Slug in der URL gefunden. Kehre zur Event-Liste zurueck und waehle dort ein Event aus.
-            <Button className="mt-4" onClick={() => navigate(adminPath('/events'))}>
+            <Button className="mt-4" onClick={() => navigate(ADMIN_EVENTS_PATH)}>
               Zurueck zur Liste
             </Button>
           </CardContent>
@@ -94,7 +95,7 @@ export default function EventPhotosPage() {
   const actions = (
     <Button
       variant="outline"
-      onClick={() => navigate(adminPath(`/events/view?slug=${encodeURIComponent(slug)}`))}
+      onClick={() => slug && navigate(ADMIN_EVENT_VIEW_PATH(slug))}
       className="border-pink-200 text-pink-600 hover:bg-pink-50"
     >
       Zurueck zum Event

resources/js/admin/pages/EventTasksPage.tsx

@@ -0,0 +1,230 @@
+import React from 'react';
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
+import { ArrowLeft, Loader2, PlusCircle, Sparkles } from 'lucide-react';
+
+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 { Checkbox } from '@/components/ui/checkbox';
+
+import { AdminLayout } from '../components/AdminLayout';
+import {
+  assignTasksToEvent,
+  getEvent,
+  getEventTasks,
+  getTasks,
+  TenantEvent,
+  TenantTask,
+} from '../api';
+import { isAuthError } from '../auth/tokens';
+import { ADMIN_EVENTS_PATH } from '../constants';
+
+export default function EventTasksPage() {
+  const params = useParams<{ slug?: string }>();
+  const [searchParams] = useSearchParams();
+  const slug = params.slug ?? searchParams.get('slug') ?? null;
+  const navigate = useNavigate();
+
+  const [event, setEvent] = React.useState<TenantEvent | null>(null);
+  const [assignedTasks, setAssignedTasks] = React.useState<TenantTask[]>([]);
+  const [availableTasks, setAvailableTasks] = React.useState<TenantTask[]>([]);
+  const [selected, setSelected] = React.useState<number[]>([]);
+  const [loading, setLoading] = React.useState(true);
+  const [saving, setSaving] = React.useState(false);
+  const [error, setError] = React.useState<string | null>(null);
+
+  React.useEffect(() => {
+    if (!slug) {
+      setError('Kein Event-Slug angegeben.');
+      setLoading(false);
+      return;
+    }
+
+    let cancelled = false;
+    (async () => {
+      try {
+        setLoading(true);
+        const eventData = await getEvent(slug);
+        const [eventTasksResponse, libraryTasks] = await Promise.all([
+          getEventTasks(eventData.id, 1),
+          getTasks({ per_page: 50 }),
+        ]);
+        if (cancelled) return;
+        setEvent(eventData);
+        const assignedIds = new Set(eventTasksResponse.data.map((task) => task.id));
+        setAssignedTasks(eventTasksResponse.data);
+        setAvailableTasks(libraryTasks.data.filter((task) => !assignedIds.has(task.id)));
+        setError(null);
+      } catch (err) {
+        if (!isAuthError(err)) {
+          setError('Event-Tasks konnten nicht geladen werden.');
+        }
+      } finally {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [slug]);
+
+  async function handleAssign() {
+    if (!event || selected.length === 0) return;
+    setSaving(true);
+    try {
+      await assignTasksToEvent(event.id, selected);
+      const refreshed = await getEventTasks(event.id, 1);
+      const assignedIds = new Set(refreshed.data.map((task) => task.id));
+      setAssignedTasks(refreshed.data);
+      setAvailableTasks((prev) => prev.filter((task) => !assignedIds.has(task.id)));
+      setSelected([]);
+    } catch (err) {
+      if (!isAuthError(err)) {
+        setError('Tasks konnten nicht zugewiesen werden.');
+      }
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  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
+    </Button>
+  );
+
+  return (
+    <AdminLayout
+      title="Event Tasks"
+      subtitle="Verwalte Aufgaben, die diesem Event zugeordnet sind."
+      actions={actions}
+    >
+      {error && (
+        <Alert variant="destructive">
+          <AlertTitle>Hinweis</AlertTitle>
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
+      )}
+
+      {loading ? (
+        <TaskSkeleton />
+      ) : !event ? (
+        <Alert variant="destructive">
+          <AlertTitle>Event nicht gefunden</AlertTitle>
+          <AlertDescription>Bitte kehre zur Eventliste zurueck.</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>
+              <CardDescription className="text-sm text-slate-600">
+                Status: {event.status === 'published' ? 'Veroeffentlicht' : 'Entwurf'}
+              </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
+                </h3>
+                {assignedTasks.length === 0 ? (
+                  <EmptyState message="Noch keine Tasks zugewiesen." />
+                ) : (
+                  <div className="space-y-2">
+                    {assignedTasks.map((task) => (
+                      <div key={task.id} className="rounded-2xl border border-slate-100 bg-white/90 p-3 shadow-sm">
+                        <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)}
+                          </Badge>
+                        </div>
+                        {task.description && <p className="mt-1 text-xs text-slate-600">{task.description}</p>}
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </section>
+
+              <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
+                </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." />
+                  ) : (
+                    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">
+                        <Checkbox
+                          checked={selected.includes(task.id)}
+                          onCheckedChange={(checked) =>
+                            setSelected((prev) =>
+                              checked ? [...prev, task.id] : prev.filter((id) => id !== task.id)
+                            )
+                          }
+                        />
+                        <div>
+                          <p className="text-sm font-medium text-slate-900">{task.title}</p>
+                          {task.description && <p className="text-xs text-slate-600">{task.description}</p>}
+                        </div>
+                      </label>
+                    ))
+                  )}
+                </div>
+                <Button onClick={() => void handleAssign()} disabled={saving || selected.length === 0}>
+                  {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : 'Ausgewaehlte Tasks zuweisen'}
+                </Button>
+              </section>
+            </CardContent>
+          </Card>
+        </>
+      )}
+    </AdminLayout>
+  );
+}
+
+function EmptyState({ message }: { message: string }) {
+  return (
+    <div className="flex flex-col items-center justify-center gap-2 rounded-2xl border border-dashed border-slate-200 bg-white/70 p-6 text-center">
+      <p className="text-xs text-slate-600">{message}</p>
+    </div>
+  );
+}
+
+function TaskSkeleton() {
+  return (
+    <div className="space-y-4">
+      {Array.from({ length: 2 }).map((_, index) => (
+        <div key={index} className="h-48 animate-pulse rounded-2xl bg-gradient-to-r from-white/40 via-white/60 to-white/40" />
+      ))}
+    </div>
+  );
+}
+
+function mapPriority(priority: TenantTask['priority']): string {
+  switch (priority) {
+    case 'low':
+      return 'Niedrig';
+    case 'high':
+      return 'Hoch';
+    case 'urgent':
+      return 'Dringend';
+    default:
+      return 'Mittel';
+  }
+}
+
+function renderName(name: TenantEvent['name']): string {
+  if (typeof name === 'string') {
+    return name;
+  }
+  return name?.de ?? name?.en ?? Object.values(name ?? {})[0] ?? 'Unbenanntes Event';
+}

resources/js/admin/pages/EventsPage.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { Link, useNavigate } from 'react-router-dom';
-import { ArrowRight, CalendarDays, Plus, Settings, Sparkles, Package as PackageIcon } from 'lucide-react';
-import { useQuery } from '@tanstack/react-query';
+import { ArrowRight, CalendarDays, Plus, Settings, Sparkles } from 'lucide-react';
 
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Badge } from '@/components/ui/badge';
@@ -9,9 +8,17 @@ import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 
 import { AdminLayout } from '../components/AdminLayout';
-import { getEvents, TenantEvent, getPackages } from '../api';
+import { getEvents, TenantEvent } from '../api';
 import { isAuthError } from '../auth/tokens';
-import { adminPath, ADMIN_SETTINGS_PATH } from '../constants';
+import {
+  adminPath,
+  ADMIN_SETTINGS_PATH,
+  ADMIN_EVENT_VIEW_PATH,
+  ADMIN_EVENT_EDIT_PATH,
+  ADMIN_EVENT_PHOTOS_PATH,
+  ADMIN_EVENT_MEMBERS_PATH,
+  ADMIN_EVENT_TASKS_PATH,
+} from '../constants';
 
 export default function EventsPage() {
   const [rows, setRows] = React.useState<TenantEvent[]>([]);
@@ -19,11 +26,6 @@ export default function EventsPage() {
   const [error, setError] = React.useState<string | null>(null);
   const navigate = useNavigate();
 
-  const { data: tenantPackages } = useQuery({
-    queryKey: ['tenant-packages'],
-    queryFn: () => getPackages('reseller'), // or separate endpoint
-  });
-
   React.useEffect(() => {
     (async () => {
       try {
@@ -60,33 +62,6 @@ export default function EventsPage() {
       subtitle="Plane Momente, die in Erinnerung bleiben. Hier verwaltest du alles rund um deine Veranstaltungen."
       actions={actions}
     >
-      {tenantPackages && tenantPackages.length > 0 && (
-        <Card className="mb-6 border-0 bg-white/80 shadow-xl shadow-pink-100/60">
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <PackageIcon className="h-5 w-5 text-pink-500" />
-              Aktuelles Package
-            </CardTitle>
-            <CardDescription>
-              Ihr aktuelles Reseller-Package und verbleibende Limits.
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="grid md:grid-cols-3 gap-4">
-            <div className="text-center">
-              <h3 className="font-semibold">Aktives Package</h3>
-              <p className="text-lg font-bold">{tenantPackages.find(p => p.active)?.package?.name || 'Kein aktives Package'}</p>
-            </div>
-            <div className="text-center">
-              <h3 className="font-semibold">Verbleibende Events</h3>
-              <p className="text-lg font-bold">{tenantPackages.find(p => p.active)?.remaining_events || 0}</p>
-            </div>
-            <div className="text-center">
-              <h3 className="font-semibold">Ablauf</h3>
-              <p className="text-lg font-bold">{tenantPackages.find(p => p.active)?.expires_at || 'Kein Package'}</p>
-            </div>
-          </CardContent>
-        </Card>
-      )}
       {error && (
         <Alert variant="destructive">
           <AlertTitle>Fehler beim Laden</AlertTitle>
@@ -164,17 +139,23 @@ function EventCard({ event }: { event: TenantEvent }) {
 
       <div className="mt-4 flex flex-wrap gap-2">
         <Button asChild variant="outline" className="border-pink-200 text-pink-700 hover:bg-pink-50">
-          <Link to={adminPath(`/events/view?slug=${encodeURIComponent(slug)}`)}>
+          <Link to={ADMIN_EVENT_VIEW_PATH(slug)}>
             Details <ArrowRight className="ml-1 h-3.5 w-3.5" />
           </Link>
         </Button>
         <Button asChild variant="outline" className="border-fuchsia-200 text-fuchsia-700 hover:bg-fuchsia-50">
-          <Link to={adminPath(`/events/edit?slug=${encodeURIComponent(slug)}`)}>Bearbeiten</Link>
+          <Link to={ADMIN_EVENT_EDIT_PATH(slug)}>Bearbeiten</Link>
         </Button>
         <Button asChild variant="outline" className="border-sky-200 text-sky-700 hover:bg-sky-50">
-          <Link to={adminPath(`/events/photos?slug=${encodeURIComponent(slug)}`)}>Fotos moderieren</Link>
+          <Link to={ADMIN_EVENT_PHOTOS_PATH(slug)}>Fotos moderieren</Link>
+        </Button>
+        <Button asChild variant="outline" className="border-emerald-200 text-emerald-600 hover:bg-emerald-50">
+          <Link to={ADMIN_EVENT_MEMBERS_PATH(slug)}>Mitglieder</Link>
         </Button>
         <Button asChild variant="outline" className="border-amber-200 text-amber-600 hover:bg-amber-50">
+          <Link to={ADMIN_EVENT_TASKS_PATH(slug)}>Tasks</Link>
+        </Button>
+        <Button asChild variant="outline" className="border-slate-200 text-slate-700 hover:bg-slate-50">
           <a href={`/e/${slug}`} target="_blank" rel="noreferrer">
             Oeffnen im Gastportal
           </a>

resources/js/admin/pages/TasksPage.tsx

@@ -0,0 +1,453 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { CheckCircle2, Circle, Loader2, Pencil, Plus, Trash2 } from 'lucide-react';
+
+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 { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Switch } from '@/components/ui/switch';
+
+import { AdminLayout } from '../components/AdminLayout';
+import {
+  createTask,
+  deleteTask,
+  getTasks,
+  PaginationMeta,
+  TenantTask,
+  TaskPayload,
+  updateTask,
+} from '../api';
+import { isAuthError } from '../auth/tokens';
+import { ADMIN_EVENTS_PATH } from '../constants';
+
+type TaskFormState = {
+  title: string;
+  description: string;
+  priority: TaskPayload['priority'];
+  due_date: string;
+  is_completed: boolean;
+};
+
+const INITIAL_FORM: TaskFormState = {
+  title: '',
+  description: '',
+  priority: 'medium',
+  due_date: '',
+  is_completed: false,
+};
+
+export default function TasksPage() {
+  const navigate = useNavigate();
+  const [tasks, setTasks] = React.useState<TenantTask[]>([]);
+  const [meta, setMeta] = React.useState<PaginationMeta | null>(null);
+  const [page, setPage] = React.useState(1);
+  const [search, setSearch] = React.useState('');
+  const [loading, setLoading] = React.useState(true);
+  const [error, setError] = React.useState<string | null>(null);
+  const [dialogOpen, setDialogOpen] = React.useState(false);
+  const [editingTask, setEditingTask] = React.useState<TenantTask | null>(null);
+  const [form, setForm] = React.useState<TaskFormState>(INITIAL_FORM);
+  const [saving, setSaving] = React.useState(false);
+
+  React.useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+
+    getTasks({ page, search: search.trim() || undefined })
+      .then((result) => {
+        if (cancelled) return;
+        setTasks(result.data);
+        setMeta(result.meta);
+      })
+      .catch((err) => {
+        if (!isAuthError(err)) {
+          setError('Tasks konnten nicht geladen werden.');
+        }
+      })
+      .finally(() => {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [page, search]);
+
+  function openCreate() {
+    setEditingTask(null);
+    setForm(INITIAL_FORM);
+    setDialogOpen(true);
+  }
+
+  function openEdit(task: TenantTask) {
+    setEditingTask(task);
+    setForm({
+      title: task.title,
+      description: task.description ?? '',
+      priority: task.priority ?? 'medium',
+      due_date: task.due_date ? task.due_date.slice(0, 10) : '',
+      is_completed: task.is_completed,
+    });
+    setDialogOpen(true);
+  }
+
+  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (!form.title.trim()) {
+      setError('Bitte gib einen Titel ein.');
+      return;
+    }
+
+    setSaving(true);
+    setError(null);
+    const payload: TaskPayload = {
+      title: form.title.trim(),
+      description: form.description.trim() || null,
+      priority: form.priority ?? undefined,
+      due_date: form.due_date || undefined,
+      is_completed: form.is_completed,
+    };
+
+    try {
+      if (editingTask) {
+        const updated = await updateTask(editingTask.id, payload);
+        setTasks((prev) => prev.map((task) => (task.id === updated.id ? updated : task)));
+      } else {
+        const created = await createTask(payload);
+        setTasks((prev) => [created, ...prev]);
+      }
+      setDialogOpen(false);
+    } catch (err) {
+      if (!isAuthError(err)) {
+        setError('Task konnte nicht gespeichert werden.');
+      }
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function handleDelete(taskId: number) {
+    if (!window.confirm('Task wirklich loeschen?')) {
+      return;
+    }
+
+    try {
+      await deleteTask(taskId);
+      setTasks((prev) => prev.filter((task) => task.id !== taskId));
+    } catch (err) {
+      if (!isAuthError(err)) {
+        setError('Task konnte nicht geloescht werden.');
+      }
+    }
+  }
+
+  async function toggleCompletion(task: TenantTask) {
+    try {
+      const updated = await updateTask(task.id, { is_completed: !task.is_completed });
+      setTasks((prev) => prev.map((entry) => (entry.id === updated.id ? updated : entry)));
+    } catch (err) {
+      if (!isAuthError(err)) {
+        setError('Status konnte nicht aktualisiert werden.');
+      }
+    }
+  }
+
+  return (
+    <AdminLayout
+      title="Task Bibliothek"
+      subtitle="Weise Aufgaben zu und tracke Fortschritt rund um deine Events."
+      actions={
+        <Button
+          className="bg-gradient-to-r from-pink-500 via-fuchsia-500 to-purple-500 text-white shadow-lg shadow-pink-500/20"
+          onClick={openCreate}
+        >
+          <Plus className="h-4 w-4" />
+          Neuer Task
+        </Button>
+      }
+    >
+      {error && (
+        <Alert variant="destructive">
+          <AlertTitle>Fehler</AlertTitle>
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
+      )}
+
+      <Card className="border-0 bg-white/85 shadow-xl shadow-pink-100/60">
+        <CardHeader>
+          <CardTitle className="text-xl text-slate-900">Tasks verwalten</CardTitle>
+          <CardDescription className="text-sm text-slate-600">
+            Erstelle Aufgaben und ordne sie deinen Events zu.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+            <Input
+              placeholder="Nach Tasks suchen..."
+              value={search}
+              onChange={(event) => setSearch(event.target.value)}
+              className="sm:max-w-sm"
+            />
+            <Button variant="outline" onClick={() => navigate(ADMIN_EVENTS_PATH)}>
+              Events oeffnen
+            </Button>
+          </div>
+
+          {loading ? (
+            <TaskSkeleton />
+          ) : tasks.length === 0 ? (
+            <EmptyTasksState onCreate={openCreate} />
+          ) : (
+            <div className="grid gap-4">
+              {tasks.map((task) => (
+                <TaskRow
+                  key={task.id}
+                  task={task}
+                  onToggle={() => void toggleCompletion(task)}
+                  onEdit={() => openEdit(task)}
+                  onDelete={() => void handleDelete(task.id)}
+                />
+              ))}
+            </div>
+          )}
+
+          {meta && meta.last_page > 1 && (
+            <div className="flex items-center justify-between">
+              <Button
+                variant="outline"
+                disabled={page <= 1}
+                onClick={() => setPage((prev) => Math.max(prev - 1, 1))}
+              >
+                Zurueck
+              </Button>
+              <span className="text-xs text-slate-500">
+                Seite {meta.current_page} von {meta.last_page}
+              </span>
+              <Button
+                variant="outline"
+                disabled={page >= meta.last_page}
+                onClick={() => setPage((prev) => Math.min(prev + 1, meta.last_page))}
+              >
+                Weiter
+              </Button>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      <TaskDialog
+        open={dialogOpen}
+        onOpenChange={setDialogOpen}
+        onSubmit={handleSubmit}
+        form={form}
+        setForm={setForm}
+        saving={saving}
+        isEditing={Boolean(editingTask)}
+      />
+    </AdminLayout>
+  );
+}
+
+function TaskRow({
+  task,
+  onToggle,
+  onEdit,
+  onDelete,
+}: {
+  task: TenantTask;
+  onToggle: () => void;
+  onEdit: () => void;
+  onDelete: () => void;
+}) {
+  const assignedCount = task.assigned_events_count ?? task.assigned_events?.length ?? 0;
+  const completed = task.is_completed;
+
+  return (
+    <div className="flex flex-col gap-3 rounded-2xl border border-slate-100 bg-white/90 p-4 shadow-sm sm:flex-row sm:items-center sm:justify-between">
+      <div className="flex flex-1 items-start gap-3">
+        <button
+          type="button"
+          onClick={onToggle}
+          className="rounded-full border border-pink-200 bg-white/80 p-2 text-pink-600 shadow-sm transition hover:bg-pink-50"
+        >
+          {completed ? <CheckCircle2 className="h-5 w-5" /> : <Circle className="h-5 w-5" />}
+        </button>
+        <div className="space-y-1">
+          <div className="flex items-center gap-2">
+            <p className={`text-sm font-semibold ${completed ? 'text-slate-500 line-through' : 'text-slate-900'}`}>
+              {task.title}
+            </p>
+            <Badge variant="outline" className="border-pink-200 text-pink-600">
+              {mapPriority(task.priority)}
+            </Badge>
+          </div>
+          {task.description && <p className="text-xs text-slate-600">{task.description}</p>}
+          <div className="flex flex-wrap items-center gap-3 text-xs text-slate-500">
+            {task.due_date && <span>Faellig: {formatDate(task.due_date)}</span>}
+            <span>Zugeordnet: {assignedCount}</span>
+          </div>
+        </div>
+      </div>
+      <div className="flex flex-wrap items-center gap-2">
+        <Button variant="outline" size="sm" onClick={onEdit}>
+          <Pencil className="h-4 w-4" />
+        </Button>
+        <Button variant="outline" size="sm" onClick={onDelete} className="text-rose-600">
+          <Trash2 className="h-4 w-4" />
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+function TaskDialog({
+  open,
+  onOpenChange,
+  onSubmit,
+  form,
+  setForm,
+  saving,
+  isEditing,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
+  form: TaskFormState;
+  setForm: React.Dispatch<React.SetStateAction<TaskFormState>>;
+  saving: boolean;
+  isEditing: boolean;
+}) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-lg">
+        <DialogHeader>
+          <DialogTitle>{isEditing ? 'Task bearbeiten' : 'Neuen Task anlegen'}</DialogTitle>
+        </DialogHeader>
+
+        <form className="space-y-4" onSubmit={onSubmit}>
+          <div className="space-y-2">
+            <Label htmlFor="task-title">Titel</Label>
+            <Input
+              id="task-title"
+              value={form.title}
+              onChange={(event) => setForm((prev) => ({ ...prev, title: event.target.value }))}
+              required
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="task-description">Beschreibung</Label>
+            <textarea
+              id="task-description"
+              value={form.description}
+              onChange={(event) => setForm((prev) => ({ ...prev, description: event.target.value }))}
+              className="min-h-[80px] w-full rounded-md border border-slate-200 bg-white/80 p-2 text-sm shadow-sm focus:border-pink-300 focus:outline-none focus:ring-2 focus:ring-pink-200"
+            />
+          </div>
+
+          <div className="grid gap-4 sm:grid-cols-2">
+            <div className="space-y-2">
+              <Label htmlFor="task-priority">Prioritaet</Label>
+              <Select
+                value={form.priority ?? 'medium'}
+                onValueChange={(value) => setForm((prev) => ({ ...prev, priority: value as TaskPayload['priority'] }))}
+              >
+                <SelectTrigger id="task-priority">
+                  <SelectValue placeholder="Prioritaet waehlen" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="low">Niedrig</SelectItem>
+                  <SelectItem value="medium">Mittel</SelectItem>
+                  <SelectItem value="high">Hoch</SelectItem>
+                  <SelectItem value="urgent">Dringend</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="task-due-date">Faellig am</Label>
+              <Input
+                id="task-due-date"
+                type="date"
+                value={form.due_date}
+                onChange={(event) => setForm((prev) => ({ ...prev, due_date: event.target.value }))}
+              />
+            </div>
+          </div>
+
+          <div className="flex items-center justify-between rounded-lg border border-pink-100 bg-pink-50/60 p-3">
+            <div>
+              <Label htmlFor="task-completed" className="text-sm font-medium text-slate-800">
+                Bereits erledigt
+              </Label>
+              <p className="text-xs text-slate-500">Markiere Task als abgeschlossen.</p>
+            </div>
+            <Switch
+              id="task-completed"
+              checked={form.is_completed}
+              onCheckedChange={(checked) => setForm((prev) => ({ ...prev, is_completed: Boolean(checked) }))}
+            />
+          </div>
+
+          <div className="flex justify-end gap-2">
+            <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
+              Abbrechen
+            </Button>
+            <Button type="submit" disabled={saving}>
+              {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : 'Speichern'}
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function EmptyTasksState({ onCreate }: { onCreate: () => void }) {
+  return (
+    <div className="flex flex-col items-center justify-center gap-3 rounded-2xl border border-dashed border-slate-200 bg-white/70 p-10 text-center">
+      <div className="rounded-full bg-pink-100 p-3 text-pink-600 shadow-inner shadow-pink-200/80">
+        <Plus className="h-5 w-5" />
+      </div>
+      <p className="text-sm text-slate-600">Noch keine Tasks angelegt. Lege deinen ersten Task an.</p>
+      <Button onClick={onCreate}>Task erstellen</Button>
+    </div>
+  );
+}
+
+function TaskSkeleton() {
+  return (
+    <div className="space-y-3">
+      {Array.from({ length: 4 }).map((_, index) => (
+        <div key={index} className="h-24 animate-pulse rounded-2xl bg-gradient-to-r from-white/40 via-white/60 to-white/40" />
+      ))}
+    </div>
+  );
+}
+
+function mapPriority(priority: TenantTask['priority']): string {
+  switch (priority) {
+    case 'low':
+      return 'Niedrig';
+    case 'high':
+      return 'Hoch';
+    case 'urgent':
+      return 'Dringend';
+    default:
+      return 'Mittel';
+  }
+}
+
+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' });
+}