feat(tenant-admin): refresh event management experience

resources/js/admin/pages/EventDetailPage.tsx

@@ -1,124 +1,282 @@
 import React from 'react';
-import { Button } from '@/components/ui/button';
 import { useNavigate, useSearchParams } from 'react-router-dom';
-import { createInviteLink, getEvent, getEventStats, toggleEvent } from '../api';
+import { ArrowLeft, Camera, Heart, Loader2, RefreshCw, Share2, Sparkles } from 'lucide-react';
+
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+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 { isAuthError } from '../auth/tokens';
 
+interface State {
+  event: TenantEvent | null;
+  stats: TenantEventStats | null;
+  inviteLink: string | null;
+  error: string | null;
+  loading: boolean;
+  busy: boolean;
+}
+
 export default function EventDetailPage() {
-  const [sp] = useSearchParams();
-  const id = Number(sp.get('id'));
-  const nav = useNavigate();
-  const [ev, setEv] = React.useState<any | null>(null);
-  const [stats, setStats] = React.useState<{ total: number; featured: number; likes: number } | null>(null);
-  const [invite, setInvite] = React.useState<string | null>(null);
+  const [searchParams] = useSearchParams();
+  const slug = searchParams.get('slug');
+  const navigate = useNavigate();
+
+  const [state, setState] = React.useState<State>({
+    event: null,
+    stats: null,
+    inviteLink: null,
+    error: null,
+    loading: true,
+    busy: false,
+  });
 
   const load = React.useCallback(async () => {
-    try {
-      const event = await getEvent(id);
-      setEv(event);
-      setStats(await getEventStats(id));
-    } catch (error) {
-      if (!isAuthError(error)) {
-        console.error(error);
-      }
+    if (!slug) {
+      setState((prev) => ({ ...prev, loading: false, error: 'Kein Event-Slug angegeben.' }));
+      return;
     }
-  }, [id]);
+
+    setState((prev) => ({ ...prev, loading: true, error: null }));
+    try {
+      const [eventData, statsData] = await Promise.all([getEvent(slug), getEventStats(slug)]);
+      setState((prev) => ({
+        ...prev,
+        event: eventData,
+        stats: statsData,
+        loading: false,
+        inviteLink: prev.inviteLink,
+      }));
+    } catch (err) {
+      if (isAuthError(err)) return;
+      setState((prev) => ({ ...prev, error: 'Event konnte nicht geladen werden.', loading: false }));
+    }
+  }, [slug]);
 
   React.useEffect(() => {
     load();
   }, [load]);
 
-  async function onToggle() {
+  async function handleToggle() {
+    if (!slug) return;
+    setState((prev) => ({ ...prev, busy: true, error: null }));
     try {
-      const isActive = await toggleEvent(id);
-      setEv((previous: any) => ({ ...(previous || {}), is_active: isActive }));
-    } catch (error) {
-      if (!isAuthError(error)) {
-        console.error(error);
+      const updated = await toggleEvent(slug);
+      setState((prev) => ({
+        ...prev,
+        event: updated,
+        stats: prev.stats ? { ...prev.stats, status: updated.status, is_active: Boolean(updated.is_active) } : prev.stats,
+        busy: false,
+      }));
+    } catch (err) {
+      if (!isAuthError(err)) {
+        setState((prev) => ({ ...prev, error: 'Status konnte nicht angepasst werden.', busy: false }));
+      } else {
+        setState((prev) => ({ ...prev, busy: false }));
       }
     }
   }
 
-  async function onInvite() {
+  async function handleInvite() {
+    if (!slug) return;
+    setState((prev) => ({ ...prev, busy: true, error: null }));
     try {
-      const link = await createInviteLink(id);
-      setInvite(link);
+      const { link } = await createInviteLink(slug);
+      setState((prev) => ({ ...prev, inviteLink: link, busy: false }));
       try {
         await navigator.clipboard.writeText(link);
       } catch {
-        // clipboard may be unavailable
+        // clipboard may be unavailable, ignore silently
       }
-    } catch (error) {
-      if (!isAuthError(error)) {
-        console.error(error);
+    } catch (err) {
+      if (!isAuthError(err)) {
+        setState((prev) => ({ ...prev, error: 'Einladungslink konnte nicht erzeugt werden.', busy: false }));
+      } else {
+        setState((prev) => ({ ...prev, busy: false }));
       }
     }
   }
 
-  if (!ev) {
-        return <div className="p-4">Lade ...</div>;
+  const { event, stats, inviteLink, error, loading, busy } = state;
+
+  const actions = (
+    <>
+      <Button
+        variant="outline"
+        onClick={() => navigate('/admin/events')}
+        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(`/admin/events/edit?slug=${encodeURIComponent(event.slug)}`)}
+          className="border-fuchsia-200 text-fuchsia-700 hover:bg-fuchsia-50"
+        >
+          Bearbeiten
+        </Button>
+      )}
+    </>
+  );
+
+  if (!slug) {
+    return (
+      <AdminLayout title="Event nicht gefunden" subtitle="Bitte waehle ein Event aus der Uebersicht." actions={actions}>
+        <Card className="border-0 bg-white/85 shadow-xl shadow-pink-100/60">
+          <CardContent className="p-6 text-sm text-slate-600">
+            Ohne gueltigen Slug koennen wir keine Daten laden. Kehre zur Event-Liste zurueck und waehle dort ein Event aus.
+          </CardContent>
+        </Card>
+      </AdminLayout>
+    );
   }
 
-  const joinLink = `${window.location.origin}/e/${ev.slug}`;
-  const qrUrl = `/admin/qr?data=${encodeURIComponent(joinLink)}`;
-
   return (
-    <div className="mx-auto max-w-3xl space-y-4 p-4">
-      <div className="flex items-center justify-between">
-        <h1 className="text-lg font-semibold">Event: {renderName(ev.name)}</h1>
-        <div className="flex gap-2">
-          <Button variant="secondary" onClick={onToggle}>
-            {ev.is_active ? 'Deaktivieren' : 'Aktivieren'}
-          </Button>
-          <Button variant="secondary" onClick={() => nav(`/admin/events/photos?id=${id}`)}>
-            Fotos moderieren
-          </Button>
+    <AdminLayout
+      title={event ? renderName(event.name) : 'Event wird geladen'}
+      subtitle="Verwalte Status, Einladungen und Statistiken deines Events."
+      actions={actions}
+    >
+      {error && (
+        <Alert variant="destructive">
+          <AlertTitle>Aktion fehlgeschlagen</AlertTitle>
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
+      )}
+
+      {loading ? (
+        <DetailSkeleton />
+      ) : event ? (
+        <div className="grid gap-6 lg:grid-cols-[2fr,1fr]">
+          <Card className="border-0 bg-white/90 shadow-xl shadow-pink-100/60">
+            <CardHeader className="space-y-2">
+              <CardTitle className="flex items-center gap-2 text-xl text-slate-900">
+                <Sparkles className="h-5 w-5 text-pink-500" /> Eventdaten
+              </CardTitle>
+              <CardDescription className="text-sm text-slate-600">
+                Grundlegende Informationen fuer Gaeste und Moderation.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4 text-sm text-slate-700">
+              <InfoRow label="Slug" value={event.slug} />
+              <InfoRow label="Status" value={event.status === 'published' ? 'Veroeffentlicht' : event.status} />
+              <InfoRow label="Datum" value={formatDate(event.event_date)} />
+              <InfoRow label="Aktiv" value={event.is_active ? 'Aktiv' : 'Deaktiviert'} />
+              <div className="flex flex-wrap gap-3 pt-2">
+                <Button
+                  onClick={handleToggle}
+                  disabled={busy}
+                  className="bg-gradient-to-r from-pink-500 via-fuchsia-500 to-purple-500 text-white shadow-lg shadow-pink-500/20"
+                >
+                  {busy ? <Loader2 className="h-4 w-4 animate-spin" /> : <RefreshCw className="h-4 w-4" />}
+                  {event.is_active ? 'Deaktivieren' : 'Aktivieren'}
+                </Button>
+                <Button
+                  variant="outline"
+                  onClick={() => navigate(`/admin/events/photos?slug=${encodeURIComponent(event.slug)}`)}
+                  className="border-sky-200 text-sky-700 hover:bg-sky-50"
+                >
+                  <Camera className="h-4 w-4" /> Fotos moderieren
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card className="border-0 bg-white/90 shadow-xl shadow-amber-100/60">
+            <CardHeader className="space-y-2">
+              <CardTitle className="flex items-center gap-2 text-xl text-slate-900">
+                <Share2 className="h-5 w-5 text-amber-500" /> Einladungen
+              </CardTitle>
+              <CardDescription className="text-sm text-slate-600">
+                Generiere Links um Gaeste direkt in das Event zu fuehren.
+              </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>
+              {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>
+              )}
+            </CardContent>
+          </Card>
+
+          <Card className="border-0 bg-white/90 shadow-xl shadow-sky-100/60 lg:col-span-2">
+            <CardHeader className="space-y-2">
+              <CardTitle className="flex items-center gap-2 text-xl text-slate-900">
+                <Heart className="h-5 w-5 text-sky-500" /> Performance
+              </CardTitle>
+              <CardDescription className="text-sm text-slate-600">
+                Kennzahlen zu Uploads, Highlights und Interaktion.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="grid gap-3 sm:grid-cols-2 md:grid-cols-4">
+              <StatChip label="Fotos" value={stats?.total ?? 0} />
+              <StatChip label="Featured" value={stats?.featured ?? 0} />
+              <StatChip label="Likes" value={stats?.likes ?? 0} />
+              <StatChip label="Uploads (7 Tage)" value={stats?.recent_uploads ?? 0} />
+            </CardContent>
+          </Card>
         </div>
-      </div>
-      <div className="rounded border p-3 text-sm">
-        <div>Slug: {ev.slug}</div>
-        <div>Datum: {ev.date ?? '-'}</div>
-        <div>Status: {ev.is_active ? 'Aktiv' : 'Inaktiv'}</div>
-      </div>
-      <div className="grid grid-cols-1 gap-3 text-center text-sm sm:grid-cols-3">
-        <StatCard label="Fotos" value={stats?.total ?? 0} />
-        <StatCard label="Featured" value={stats?.featured ?? 0} />
-        <StatCard label="Likes gesamt" value={stats?.likes ?? 0} />
-      </div>
-      <div className="rounded border p-3 text-sm">
-        <div className="mb-2 font-medium">Join-Link</div>
-        <div className="mb-2 flex items-center gap-2">
-          <input className="w-full rounded border p-2 text-sm" value={joinLink} readOnly />
-          <Button variant="secondary" onClick={() => navigator.clipboard.writeText(joinLink)}>
-            Kopieren
-          </Button>
-        </div>
-        <div className="mb-2 font-medium">QR</div>
-        <img src={qrUrl} alt="QR" width={200} height={200} className="rounded border" />
-        <div className="mt-3">
-          <Button variant="secondary" onClick={onInvite}>
-            Einladungslink erzeugen
-          </Button>
-          {invite && (
-            <div className="mt-2 text-xs text-muted-foreground">Erzeugt und kopiert: {invite}</div>
-          )}
-        </div>
-      </div>
+      ) : (
+        <Alert variant="destructive">
+          <AlertTitle>Event nicht gefunden</AlertTitle>
+          <AlertDescription>Bitte pruefe den Slug und versuche es erneut.</AlertDescription>
+        </Alert>
+      )}
+    </AdminLayout>
+  );
+}
+
+function DetailSkeleton() {
+  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 StatCard({ label, value }: { label: string; value: number }) {
+function InfoRow({ label, value }: { label: string; value: string }) {
   return (
-    <div className="rounded border p-3">
-      <div className="text-2xl font-semibold">{value}</div>
-      <div>{label}</div>
+    <div className="flex flex-col gap-1 rounded-xl border border-pink-100 bg-white/70 px-3 py-2">
+      <span className="text-xs uppercase tracking-wide text-slate-500">{label}</span>
+      <span className="text-sm font-medium text-slate-800">{value}</span>
     </div>
   );
 }
 
-function renderName(name: any): string {
-  if (typeof name === 'string') return name;
-  if (name && (name.de || name.en)) return name.de || name.en;
-  return JSON.stringify(name);
+function StatChip({ label, value }: { label: string; value: string | number }) {
+  return (
+    <div className="rounded-2xl border border-sky-100 bg-white/80 px-4 py-3 text-center shadow-sm">
+      <div className="text-xs uppercase tracking-wide text-slate-500">{label}</div>
+      <div className="text-lg font-semibold text-slate-900">{value}</div>
+    </div>
+  );
+}
+
+function formatDate(iso: string | null): string {
+  if (!iso) return 'Noch kein Datum';
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) {
+    return 'Unbekanntes Datum';
+  }
+  return date.toLocaleDateString('de-DE', { day: '2-digit', month: 'long', year: 'numeric' });
+}
+
+function renderName(name: TenantEvent['name']): string {
+  if (typeof name === 'string') {
+    return name;
+  }
+  if (name && typeof name === 'object') {
+    return name.de ?? name.en ?? Object.values(name)[0] ?? 'Unbenanntes Event';
+  }
+  return 'Unbenanntes Event';
 }