feat(tenant-admin): refresh event management experience

resources/js/admin/pages/EventsPage.tsx

@@ -1,14 +1,21 @@
 import React from 'react';
-import { Button } from '@/components/ui/button';
 import { Link, useNavigate } from 'react-router-dom';
-import { getEvents } from '../api';
+import { ArrowRight, CalendarDays, Plus, Settings, 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 { AdminLayout } from '../components/AdminLayout';
+import { getEvents, TenantEvent } from '../api';
 import { isAuthError } from '../auth/tokens';
 
 export default function EventsPage() {
-  const [rows, setRows] = React.useState<any[]>([]);
+  const [rows, setRows] = React.useState<TenantEvent[]>([]);
   const [loading, setLoading] = React.useState(true);
   const [error, setError] = React.useState<string | null>(null);
-  const nav = useNavigate();
+  const navigate = useNavigate();
 
   React.useEffect(() => {
     (async () => {
@@ -16,7 +23,7 @@ export default function EventsPage() {
         setRows(await getEvents());
       } catch (err) {
         if (!isAuthError(err)) {
-          setError('Laden fehlgeschlagen');
+          setError('Laden fehlgeschlagen. Bitte spaeter erneut versuchen.');
         }
       } finally {
         setLoading(false);
@@ -24,47 +31,177 @@ export default function EventsPage() {
     })();
   }, []);
 
+  const 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={() => navigate('/admin/events/new')}
+      >
+        <Plus className="h-4 w-4" /> Neues Event
+      </Button>
+      <Link to="/admin/settings">
+        <Button variant="outline" className="border-pink-200 text-pink-600 hover:bg-pink-50">
+          <Settings className="h-4 w-4" /> Einstellungen
+        </Button>
+      </Link>
+    </>
+  );
+
   return (
-    <div className="mx-auto max-w-3xl p-4">
-      <div className="mb-3 flex items-center justify-between">
-        <h1 className="text-lg font-semibold">Meine Events</h1>
-        <div className="flex gap-2">
-          <Button variant="secondary" onClick={() => nav('/admin/events/new')}>
-            Neues Event
-          </Button>
-          <Link to="/admin/settings">
-            <Button variant="secondary">Einstellungen</Button>
-          </Link>
-        </div>
-      </div>
-      {loading && <div>Lade ...</div>}
+    <AdminLayout
+      title="Deine Events"
+      subtitle="Plane Momente, die in Erinnerung bleiben. Hier verwaltest du alles rund um deine Veranstaltungen."
+      actions={actions}
+    >
       {error && (
-        <div className="rounded border border-red-300 bg-red-50 p-2 text-sm text-red-700">{error}</div>
+        <Alert variant="destructive">
+          <AlertTitle>Fehler beim Laden</AlertTitle>
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
       )}
-      <div className="divide-y rounded border">
-        {rows.map((event) => (
-          <div key={event.id} className="flex items-center justify-between p-3">
-            <div className="text-sm">
-              <div className="font-medium">{renderName(event.name)}</div>
-              <div className="text-muted-foreground">Slug: {event.slug} <EFBFBD> Datum: {event.date ?? '-'}</div>
-            </div>
-            <div className="flex items-center gap-2 text-sm underline">
-              <Link to={`/admin/events/view?id=${event.id}`}>details</Link>
-              <Link to={`/admin/events/edit?id=${event.id}`}>bearbeiten</Link>
-              <Link to={`/admin/events/photos?id=${event.id}`}>fotos</Link>
-              <a href={`/e/${event.slug}`} target="_blank" rel="noreferrer">
-                <EFBFBD>ffnen
-              </a>
-            </div>
+
+      <Card className="border-0 bg-white/80 shadow-xl shadow-pink-100/60">
+        <CardHeader className="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between">
+          <div>
+            <CardTitle className="text-xl font-semibold text-slate-900">Uebersicht</CardTitle>
+            <CardDescription className="text-slate-600">
+              {rows.length === 0
+                ? 'Noch keine Events - starte jetzt und lege dein erstes Event an.'
+                : `${rows.length} ${rows.length === 1 ? 'Event' : 'Events'} aktiv verwaltet.`}
+            </CardDescription>
           </div>
-        ))}
+          <div className="flex items-center gap-2 text-sm text-pink-600">
+            <Sparkles className="h-4 w-4" /> Tenant Dashboard
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {loading ? (
+            <LoadingState />
+          ) : rows.length === 0 ? (
+            <EmptyState onCreate={() => navigate('/admin/events/new')} />
+          ) : (
+            <div className="space-y-4">
+              {rows.map((event) => (
+                <EventCard key={event.id} event={event} />
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </AdminLayout>
+  );
+}
+
+function EventCard({ event }: { event: TenantEvent }) {
+  const slug = event.slug;
+  const isPublished = event.status === 'published';
+  const photoCount = event.photo_count ?? 0;
+  const likeCount = event.like_count ?? 0;
+
+  return (
+    <div className="rounded-2xl border border-white/80 bg-white/90 p-5 shadow-md shadow-pink-200/40 transition-transform hover:-translate-y-0.5 hover:shadow-lg">
+      <div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
+        <div className="space-y-1">
+          <h3 className="text-lg font-semibold text-slate-900">{renderName(event.name)}</h3>
+          <p className="text-sm text-slate-600">Slug: {event.slug}</p>
+          <div className="flex flex-wrap items-center gap-2 text-xs text-slate-600">
+            <span className="inline-flex items-center gap-1 rounded-full bg-pink-100 px-3 py-1 font-medium text-pink-700">
+              <CalendarDays className="h-3.5 w-3.5" />
+              {formatDate(event.event_date)}
+            </span>
+            <span className="inline-flex items-center gap-1 rounded-full bg-sky-100 px-3 py-1 font-medium text-sky-700">
+              Photos: {photoCount}
+            </span>
+            <span className="inline-flex items-center gap-1 rounded-full bg-amber-100 px-3 py-1 font-medium text-amber-700">
+              Likes: {likeCount}
+            </span>
+          </div>
+        </div>
+        <Badge
+          className={
+            isPublished
+              ? 'bg-emerald-500/90 text-white shadow shadow-emerald-500/30'
+              : 'bg-slate-200 text-slate-700'
+          }
+        >
+          {isPublished ? 'Veroeffentlicht' : 'Entwurf'}
+        </Badge>
+      </div>
+
+      <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={`/admin/events/view?slug=${encodeURIComponent(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={`/admin/events/edit?slug=${encodeURIComponent(slug)}`}>Bearbeiten</Link>
+        </Button>
+        <Button asChild variant="outline" className="border-sky-200 text-sky-700 hover:bg-sky-50">
+          <Link to={`/admin/events/photos?slug=${encodeURIComponent(slug)}`}>Fotos moderieren</Link>
+        </Button>
+        <Button asChild variant="outline" className="border-amber-200 text-amber-600 hover:bg-amber-50">
+          <a href={`/e/${slug}`} target="_blank" rel="noreferrer">
+            Oeffnen im Gastportal
+          </a>
+        </Button>
       </div>
     </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 LoadingState() {
+  return (
+    <div className="space-y-3">
+      {Array.from({ length: 3 }).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 EmptyState({ onCreate }: { onCreate: () => void }) {
+  return (
+    <div className="flex flex-col items-center justify-center gap-3 rounded-2xl border border-dashed border-pink-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>
+      <div className="space-y-1">
+        <h3 className="text-lg font-semibold text-slate-900">Noch kein Event angelegt</h3>
+        <p className="text-sm text-slate-600">
+          Starte jetzt mit deinem ersten Event und lade Gaeste in dein farbenfrohes Erlebnisportal ein.
+        </p>
+      </div>
+      <Button
+        onClick={onCreate}
+        className="bg-gradient-to-r from-pink-500 via-fuchsia-500 to-purple-500 text-white shadow-lg shadow-pink-500/20"
+      >
+        <Plus className="mr-1 h-4 w-4" /> Event erstellen
+      </Button>
+    </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: 'short',
+    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';
 }