coupon code system eingeführt. coupons werden vom super admin gemanaged. coupons werden mit paddle synchronisiert und dort validiert. plus: einige mobil-optimierungen im tenant admin pwa.

2025-11-09 20:26:50 +01:00
parent f3c44be76d
commit 082b78cd43
80 changed files with 4855 additions and 435 deletions
--- a/resources/js/admin/pages/EventDetailPage.tsx
+++ b/resources/js/admin/pages/EventDetailPage.tsx
@@ -6,9 +6,7 @@ import {
  ArrowLeft,
  Camera,
  CheckCircle2,
-  ChevronRight,
  Circle,
-  Download,
  Loader2,
  MessageSquare,
  Printer,
@@ -23,8 +21,6 @@ import toast from 'react-hot-toast';
 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 {
  EventToolkit,
@@ -54,6 +50,7 @@ import {
  SectionCard,
  SectionHeader,
  ActionGrid,
+  TenantHeroCard,
 } from '../components/tenant';

 type EventDetailPageProps = {
@@ -175,48 +172,6 @@ export default function EventDetailPage({ mode = 'detail' }: EventDetailPageProp
    ? t('events.workspace.toolkitSubtitle', 'Moderation, Aufgaben und Einladungen für deinen Eventtag bündeln.')
    : t('events.workspace.detailSubtitle', 'Behalte Status, Aufgaben und Einladungen deines Events im Blick.');

-  const actions = (
-    <div className="flex flex-wrap gap-2">
-      <Button variant="outline" onClick={() => navigate(ADMIN_EVENTS_PATH)} className="border-pink-200 text-pink-600 hover:bg-pink-50">
-        <ArrowLeft className="h-4 w-4" /> {t('events.actions.backToList', 'Zurück zur Liste')}
-      </Button>
-      {event && (
-        <>
-          <Button variant="outline" onClick={() => navigate(ADMIN_EVENT_EDIT_PATH(event.slug))} className="border-fuchsia-200 text-fuchsia-700 hover:bg-fuchsia-50">
-            <Sparkles className="h-4 w-4" /> {t('events.actions.edit', 'Bearbeiten')}
-          </Button>
-          <Button variant="outline" onClick={() => navigate(ADMIN_EVENT_MEMBERS_PATH(event.slug))} className="border-sky-200 text-sky-700 hover:bg-sky-50">
-            <Users className="h-4 w-4" /> {t('events.actions.members', 'Team & Rollen')}
-          </Button>
-          <Button variant="outline" onClick={() => navigate(ADMIN_EVENT_TASKS_PATH(event.slug))} className="border-amber-200 text-amber-600 hover:bg-amber-50">
-            <Sparkles className="h-4 w-4" /> {t('events.actions.tasks', 'Aufgaben verwalten')}
-          </Button>
-          <Button variant="outline" onClick={() => navigate(`${ADMIN_EVENT_INVITES_PATH(event.slug)}?tab=layout`)} className="border-amber-200 text-amber-600 hover:bg-amber-50">
-            <QrCode className="h-4 w-4" /> {t('events.actions.invites', 'Einladungen & Layouts')}
-          </Button>
-          <Button variant="outline" onClick={() => navigate(ADMIN_EVENT_PHOTOS_PATH(event.slug))} className="border-emerald-200 text-emerald-600 hover:bg-emerald-50">
-            <Camera className="h-4 w-4" /> {t('events.actions.photos', 'Fotos moderieren')}
-          </Button>
-          <Button variant="outline" onClick={() => void load()} disabled={loading}>
-            {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <RefreshCw className="h-4 w-4" />}
-            {t('events.actions.refresh', 'Aktualisieren')}
-          </Button>
-        </>
-      )}
-    </div>
-  );
-
-  if (!slug) {
-    return (
-    <AdminLayout title={t('events.errors.notFoundTitle', 'Event nicht gefunden')} subtitle={t('events.errors.notFoundCopy', 'Bitte wähle ein Event aus der Übersicht.')} actions={actions}>
-      <SectionCard>
-        <p className="text-sm text-slate-600 dark:text-slate-300">
-          {t('events.errors.notFoundBody', 'Ohne gültige Kennung können wir keine Daten laden. Kehre zur Eventliste zurück und wähle dort ein Event aus.')}
-        </p>
-      </SectionCard>
-    </AdminLayout>
-  );
-}

  const limitWarnings = React.useMemo(
    () => (event?.limits ? buildLimitWarnings(event.limits, (key, options) => tCommon(`limits.${key}`, options)) : []),
@@ -240,8 +195,23 @@ export default function EventDetailPage({ mode = 'detail' }: EventDetailPageProp
    });
  }, [limitWarnings]);

+  if (!slug) {
+    return (
+      <AdminLayout
+        title={t('events.errors.notFoundTitle', 'Event nicht gefunden')}
+        subtitle={t('events.errors.notFoundCopy', 'Bitte wähle ein Event aus der Übersicht.')}
+      >
+        <SectionCard>
+          <p className="text-sm text-slate-600 dark:text-slate-300">
+            {t('events.errors.notFoundBody', 'Ohne gültige Kennung können wir keine Daten laden. Kehre zur Eventliste zurück und wähle dort ein Event aus.')}
+          </p>
+        </SectionCard>
+      </AdminLayout>
+    );
+  }
+
  return (
-    <AdminLayout title={eventName} subtitle={subtitle} actions={actions}>
+    <AdminLayout title={eventName} subtitle={subtitle}>
      {error && (
        <Alert variant="destructive">
          <AlertTitle>{t('events.alerts.failedTitle', 'Aktion fehlgeschlagen')}</AlertTitle>
@@ -276,6 +246,14 @@ export default function EventDetailPage({ mode = 'detail' }: EventDetailPageProp
        <WorkspaceSkeleton />
      ) : event ? (
        <div className="space-y-6">
+          <EventHeroCardSection
+            event={event}
+            stats={stats}
+            onRefresh={() => { void load(); }}
+            loading={state.busy}
+            navigate={navigate}
+          />
+
          {(toolkitData?.alerts?.length ?? 0) > 0 && <AlertList alerts={toolkitData?.alerts ?? []} />}

          <div className="grid gap-6 xl:grid-cols-[minmax(0,1.6fr)_minmax(0,0.6fr)]">
@@ -332,14 +310,82 @@ function resolveName(name: TenantEvent['name']): string {
  return 'Event';
 }

+function EventHeroCardSection({ event, stats, onRefresh, loading, navigate }: {
+  event: TenantEvent;
+  stats: EventStats | null;
+  onRefresh: () => void;
+  loading: boolean;
+  navigate: ReturnType<typeof useNavigate>;
+}) {
+  const { t } = useTranslation('management');
+  const statusLabel = getStatusLabel(event, t);
+  const supporting = [
+    t('events.workspace.hero.status', { defaultValue: 'Status: {{status}}', status: statusLabel }),
+    t('events.workspace.hero.date', { defaultValue: 'Eventdatum: {{date}}', date: formatDate(event.event_date) }),
+    t('events.workspace.hero.metrics', {
+      defaultValue: 'Uploads gesamt: {{count}} · Likes: {{likes}}',
+      count: stats?.uploads_total ?? stats?.total ?? 0,
+      likes: stats?.likes_total ?? stats?.likes ?? 0,
+    }),
+  ];
+
+  const aside = (
+    <div className="space-y-3 text-sm text-slate-700 dark:text-slate-200">
+      <InfoRow
+        icon={<Sparkles className="h-4 w-4 text-pink-500" />}
+        label={t('events.workspace.fields.status', 'Status')}
+        value={statusLabel}
+      />
+      <InfoRow
+        icon={<CalendarIcon />}
+        label={t('events.workspace.fields.date', 'Eventdatum')}
+        value={formatDate(event.event_date)}
+      />
+      <InfoRow
+        icon={<Users className="h-4 w-4 text-sky-500" />}
+        label={t('events.workspace.fields.active', 'Aktiv für Gäste')}
+        value={event.is_active ? t('events.workspace.activeYes', 'Ja') : t('events.workspace.activeNo', 'Nein')}
+      />
+    </div>
+  );
+
+  return (
+    <TenantHeroCard
+      badge={t('events.workspace.hero.badge', 'Event')}
+      title={resolveName(event.name)}
+      description={t('events.workspace.hero.description', 'Konzentriere dich auf Aufgaben, Moderation und Einladungen für dieses Event.')}
+      supporting={supporting}
+      primaryAction={(
+        <Button variant="outline" onClick={() => navigate(ADMIN_EVENTS_PATH)} className="rounded-full border-pink-200 text-pink-600 hover:bg-pink-50">
+          <ArrowLeft className="h-4 w-4" /> {t('events.actions.backToList', 'Zurück zur Liste')}
+        </Button>
+      )}
+      secondaryAction={(
+        <Button variant="outline" onClick={() => navigate(ADMIN_EVENT_EDIT_PATH(event.slug))} className="rounded-full border-fuchsia-200 text-fuchsia-700 hover:bg-fuchsia-50">
+          <Sparkles className="h-4 w-4" /> {t('events.actions.edit', 'Bearbeiten')}
+        </Button>
+      )}
+      aside={aside}
+    >
+      <div className="flex flex-wrap gap-2">
+        <Button
+          variant="outline"
+          onClick={onRefresh}
+          disabled={loading}
+          className="rounded-full border-slate-200"
+        >
+          {loading ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <RefreshCw className="mr-2 h-4 w-4" />}
+          {t('events.actions.refresh', 'Aktualisieren')}
+        </Button>
+      </div>
+    </TenantHeroCard>
+  );
+}
+
 function StatusCard({ event, stats, busy, onToggle }: { event: TenantEvent; stats: EventStats | null; busy: boolean; onToggle: () => void }) {
  const { t } = useTranslation('management');

-  const statusLabel = event.status === 'published'
-    ? t('events.status.published', 'Veröffentlicht')
-    : event.status === 'draft'
-      ? t('events.status.draft', 'Entwurf')
-      : t('events.status.archived', 'Archiviert');
+  const statusLabel = getStatusLabel(event, t);

  return (
    <SectionCard className="space-y-4">
@@ -839,6 +885,16 @@ function InfoRow({ icon, label, value }: { icon: React.ReactNode; label: string;
  );
 }

+function getStatusLabel(event: TenantEvent, t: ReturnType<typeof useTranslation>['t']): string {
+  if (event.status === 'published') {
+    return t('events.status.published', 'Veröffentlicht');
+  }
+  if (event.status === 'archived') {
+    return t('events.status.archived', 'Archiviert');
+  }
+  return t('events.status.draft', 'Entwurf');
+}
+
 function formatDate(value: string | null | undefined): string {
  if (!value) return '—';
  const date = new Date(value);