feat: unify tenant admin ui and add photo moderation

resources/js/admin/pages/EventsPage.tsx

@@ -1,18 +1,21 @@
 import React from 'react';
 import { Link, useNavigate } from 'react-router-dom';
-import { AlertTriangle, ArrowRight, CalendarDays, Plus, Share2 } from 'lucide-react';
+import { AlertTriangle, ArrowRight, CalendarDays, Camera, Heart, Plus } from 'lucide-react';
 
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
-import { CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import {
   TenantHeroCard,
-  FrostedCard,
   FrostedSurface,
   tenantHeroPrimaryButtonClass,
   tenantHeroSecondaryButtonClass,
+  SectionCard,
+  SectionHeader,
+  StatCarousel,
+  ActionGrid,
 } from '../components/tenant';
+import { cn } from '@/lib/utils';
 
 import { AdminLayout } from '../components/AdminLayout';
 import { getEvents, TenantEvent } from '../api';
@@ -66,6 +69,56 @@ export default function EventsPage() {
       tCommon(key, { defaultValue: fallback, ...(options ?? {}) }),
     [tCommon],
   );
+  const statItems = React.useMemo(
+    () => [
+      {
+        key: 'total',
+        label: t('events.list.stats.total', 'Events gesamt'),
+        value: totalEvents,
+      },
+      {
+        key: 'published',
+        label: t('events.list.stats.published', 'Veröffentlicht'),
+        value: publishedEvents,
+      },
+      {
+        key: 'drafts',
+        label: t('events.list.stats.drafts', 'Entwürfe'),
+        value: Math.max(0, totalEvents - publishedEvents),
+      },
+      nextEvent
+        ? {
+            key: 'next',
+            label: t('events.list.stats.nextEvent', 'Nächstes Event'),
+            value: formatDate(nextEvent.event_date),
+          }
+        : null,
+    ].filter(Boolean) as { key: string; label: string; value: string | number }[],
+    [t, totalEvents, publishedEvents, nextEvent],
+  );
+  const actionItems = React.useMemo(
+    () => [
+      {
+        key: 'new',
+        label: t('events.list.actions.create', 'Neues Event'),
+        description: t('events.list.actions.createDescription', 'Starte mit einem frischen Setup.'),
+        onClick: () => navigate(adminPath('/events/new')),
+      },
+      {
+        key: 'welcome',
+        label: t('events.list.actions.guidedSetup', 'Geführte Einrichtung'),
+        description: t('events.list.actions.guidedSetupDescription', 'Springe zurück in den Onboarding-Flow.'),
+        onClick: () => navigate(ADMIN_WELCOME_BASE_PATH),
+      },
+      {
+        key: 'settings',
+        label: t('events.list.actions.settings', 'Einstellungen öffnen'),
+        description: t('events.list.actions.settingsDescription', 'Passe Farben, Branding und Aufgabenpakete an.'),
+        onClick: () => navigate(ADMIN_SETTINGS_PATH),
+      },
+    ],
+    [t, navigate],
+  );
 
   const pageTitle = translateManagement('events.list.title', 'Deine Events');
   const pageSubtitle = translateManagement(
@@ -114,7 +167,7 @@ export default function EventsPage() {
     </Button>
   );
   const heroAside = (
-    <FrostedSurface className="w-full rounded-2xl border-white/30 bg-white/95 p-5 text-slate-900 shadow-lg shadow-pink-200/20 backdrop-blur">
+    <FrostedSurface className="w-full rounded-2xl border-slate-200 bg-white p-5 text-slate-900 shadow-lg shadow-pink-200/20 dark:border-white/20 dark:bg-white/10">
       <div className="space-y-4">
         <div>
           <p className="text-xs uppercase tracking-wide text-slate-500">
@@ -152,7 +205,37 @@ export default function EventsPage() {
       </div>
     </FrostedSurface>
   );
-
+  const draftEvents = totalEvents - publishedEvents;
+  const [statusFilter, setStatusFilter] = React.useState<'all' | 'published' | 'draft'>('all');
+  const filteredRows = React.useMemo(() => {
+    if (statusFilter === 'published') {
+      return rows.filter((event) => event.status === 'published');
+    }
+    if (statusFilter === 'draft') {
+      return rows.filter((event) => event.status !== 'published');
+    }
+    return rows;
+  }, [rows, statusFilter]);
+  const overviewDescription = React.useMemo(() => {
+    if (loading) {
+      return t('events.list.overview.loading', 'Wir sammeln gerade deine Event-Details …');
+    }
+    if (filteredRows.length === 0) {
+      if (statusFilter === 'published') {
+        return t('events.list.overview.empty_published', 'Noch keine veröffentlichten Events.');
+      }
+      if (statusFilter === 'draft') {
+        return t('events.list.overview.empty_drafts', 'Keine Entwürfe – nutze die Zeit für dein nächstes Event.');
+      }
+      return t('events.list.overview.empty', 'Noch keine Events - starte jetzt und lege dein erstes Event an.');
+    }
+    return t('events.list.overview.count', '{{count}} Events aktiv verwaltet.', { count: filteredRows.length });
+  }, [filteredRows.length, loading, statusFilter, t]);
+  const filterOptions: Array<{ key: 'all' | 'published' | 'draft'; label: string; count: number }> = [
+    { key: 'all', label: t('events.list.filters.all', 'Alle'), count: totalEvents },
+    { key: 'published', label: t('events.list.filters.published', 'Live'), count: publishedEvents },
+    { key: 'draft', label: t('events.list.filters.drafts', 'Entwürfe'), count: Math.max(0, draftEvents) },
+  ];
 
   return (
     <AdminLayout title={pageTitle} subtitle={pageSubtitle}>
@@ -173,34 +256,64 @@ export default function EventsPage() {
         aside={heroAside}
       />
 
-      <FrostedCard className="mt-6">
-        <CardHeader className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
-          <div>
-            <CardTitle>{t('events.list.overview.title', 'Übersicht')}</CardTitle>
-            <CardDescription>
-              {loading
-                ? t('events.list.overview.loading', 'Wir sammeln gerade deine Event-Details …')
-                : totalEvents === 0
-                  ? t('events.list.overview.empty', 'Noch keine Events - starte jetzt und lege dein erstes Event an.')
-                  : t('events.list.overview.count', '{{count}} Events aktiv verwaltet.', { count: totalEvents })}
-            </CardDescription>
-          </div>
-          <Badge className="bg-pink-100 text-pink-700">{t('events.list.badge.dashboard', 'Tenant Dashboard')}</Badge>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          {loading ? (
-            <LoadingState />
-          ) : totalEvents === 0 ? (
-            <EmptyState onCreate={() => navigate(adminPath('/events/new'))} />
-          ) : (
-            <div className="space-y-4">
-              {rows.map((event) => (
-          <EventCard key={event.id} event={event} translate={translateManagement} translateCommon={translateCommon} />
-              ))}
-            </div>
+      <SectionCard className="space-y-4">
+        <SectionHeader
+          eyebrow={t('events.list.badge', 'Events')}
+          title={t('events.list.overview.title', 'Übersicht')}
+          description={overviewDescription}
+          endSlot={(
+            <button
+              type="button"
+              className="rounded-full border border-slate-200 bg-white px-4 py-1.5 text-xs font-semibold uppercase tracking-wide text-slate-800 shadow-inner shadow-white/20 dark:border-white/15 dark:bg-white/10 dark:text-white"
+            >
+              {t('events.list.badge.dashboard', 'Tenant Dashboard')}
+            </button>
           )}
-        </CardContent>
-      </FrostedCard>
+        />
+        <StatCarousel items={statItems} />
+        <ActionGrid items={actionItems} columns={1} />
+        <div className="flex gap-2 overflow-x-auto pb-1">
+          {filterOptions.map((option) => (
+            <button
+              key={option.key}
+              type="button"
+              onClick={() => setStatusFilter(option.key)}
+              className={cn(
+                'flex items-center gap-2 rounded-full border px-4 py-1.5 text-xs font-semibold transition',
+                statusFilter === option.key
+                  ? 'border-rose-200 bg-rose-50 text-rose-700 shadow shadow-rose-100/40 dark:border-white/60 dark:bg-white/10 dark:text-white'
+                  : 'border-slate-200 text-slate-600 hover:text-slate-900 dark:border-white/15 dark:text-slate-300 dark:hover:text-white'
+              )}
+            >
+              {option.label}
+              <span className="text-[11px] text-slate-400 dark:text-slate-500">{option.count}</span>
+            </button>
+          ))}
+        </div>
+        {loading ? (
+          <LoadingState />
+        ) : filteredRows.length === 0 ? (
+          <EmptyState
+            title={t('events.list.empty.title', 'Noch kein Event angelegt')}
+            description={t(
+              'events.list.empty.description',
+              'Starte jetzt mit deinem ersten Event und lade Gäste in dein farbenfrohes Erlebnisportal ein.'
+            )}
+            onCreate={() => navigate(adminPath('/events/new'))}
+          />
+        ) : (
+          <div className="space-y-3">
+            {filteredRows.map((event) => (
+              <EventCard
+                key={event.id}
+                event={event}
+                translate={translateManagement}
+                translateCommon={translateCommon}
+              />
+            ))}
+          </div>
+        )}
+      </SectionCard>
     </AdminLayout>
   );
 }
@@ -222,41 +335,40 @@ function EventCard({
     () => buildLimitWarnings(event.limits ?? null, (key, opts) => translateCommon(`limits.${key}`, undefined, opts)),
     [event.limits, translateCommon],
   );
+  const metaItems = [
+    {
+      key: 'date',
+      label: translate('events.list.meta.date', 'Eventdatum'),
+      value: formatDate(event.event_date),
+      icon: <CalendarDays className="h-4 w-4 text-rose-500" />,
+    },
+    {
+      key: 'photos',
+      label: translate('events.list.meta.photos', 'Uploads'),
+      value: photoCount,
+      icon: <Camera className="h-4 w-4 text-fuchsia-500" />,
+    },
+    {
+      key: 'likes',
+      label: translate('events.list.meta.likes', 'Likes'),
+      value: likeCount,
+      icon: <Heart className="h-4 w-4 text-amber-500" />,
+    },
+  ];
+  const secondaryLinks = [
+    { key: 'edit', label: translateCommon('actions.edit', 'Bearbeiten'), to: ADMIN_EVENT_EDIT_PATH(slug) },
+    { key: 'members', label: translate('events.list.actions.members', 'Mitglieder'), to: ADMIN_EVENT_MEMBERS_PATH(slug) },
+    { key: 'tasks', label: translate('events.list.actions.tasks', 'Tasks'), to: ADMIN_EVENT_TASKS_PATH(slug) },
+    { key: 'invites', label: translate('events.list.actions.invites', 'QR-Einladungen'), to: ADMIN_EVENT_INVITES_PATH(slug) },
+    { key: 'toolkit', label: translate('events.list.actions.toolkit', 'Toolkit'), to: ADMIN_EVENT_TOOLKIT_PATH(slug) },
+  ];
 
   return (
-    <FrostedSurface className="p-5 transition hover:-translate-y-0.5 hover:shadow-lg">
-      {limitWarnings.length > 0 && (
-        <div className="mb-4 space-y-2">
-          {limitWarnings.map((warning) => (
-            <Alert
-              key={warning.id}
-              variant={warning.tone === 'danger' ? 'destructive' : 'default'}
-              className={warning.tone === 'warning' ? 'border-amber-400/40 bg-amber-50 text-amber-900' : undefined}
-            >
-              <AlertDescription className="flex items-center gap-2 text-xs">
-                <AlertTriangle className="h-4 w-4" />
-                {warning.message}
-              </AlertDescription>
-            </Alert>
-          ))}
-        </div>
-      )}
-
-      <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
-        <div className="space-y-2">
-          <h3 className="text-lg font-semibold text-slate-900">{renderName(event.name)}</h3>
-          <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/90 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/90 px-3 py-1 font-medium text-sky-700">
-              {translate('events.list.badges.photos', 'Fotos')}: {photoCount}
-            </span>
-            <span className="inline-flex items-center gap-1 rounded-full bg-amber-100/90 px-3 py-1 font-medium text-amber-700">
-              {translate('events.list.badges.likes', 'Likes')}: {likeCount}
-            </span>
-          </div>
+    <FrostedSurface className="space-y-4 rounded-3xl p-5 shadow-lg shadow-rose-100/30 transition hover:-translate-y-0.5 hover:shadow-rose-200/60">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+        <div>
+          <p className="text-xs uppercase tracking-[0.3em] text-rose-300/80">{translate('events.list.item.label', 'Event')}</p>
+          <h3 className="text-xl font-semibold text-slate-900">{renderName(event.name)}</h3>
         </div>
         <Badge className={isPublished ? 'bg-emerald-500/90 text-white shadow shadow-emerald-500/30' : 'bg-slate-200 text-slate-700'}>
           {isPublished
@@ -265,67 +377,119 @@ function EventCard({
         </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">
+      <div className="-mx-1 flex snap-x snap-mandatory gap-3 overflow-x-auto px-1">
+        {metaItems.map((item) => (
+          <MetaChip key={item.key} icon={item.icon} label={item.label} value={item.value} />
+        ))}
+      </div>
+
+      {limitWarnings.length > 0 && (
+        <div className="space-y-2">
+          {limitWarnings.map((warning) => (
+            <div
+              key={warning.id}
+              className={cn(
+                'flex items-start gap-2 rounded-2xl border p-3 text-xs',
+                warning.tone === 'danger'
+                  ? 'border-rose-200/60 bg-rose-50 text-rose-900'
+                  : 'border-amber-200/60 bg-amber-50 text-amber-900',
+              )}
+            >
+              <AlertTriangle className="h-4 w-4" />
+              <span>{warning.message}</span>
+            </div>
+          ))}
+        </div>
+      )}
+
+      <div className="grid gap-2 sm:grid-cols-2">
+        <Button
+          asChild
+          className="rounded-full bg-brand-rose text-white shadow shadow-rose-400/40 hover:bg-brand-rose/90"
+        >
           <Link to={ADMIN_EVENT_VIEW_PATH(slug)}>
-            {translateCommon('actions.open', 'Öffnen')} <ArrowRight className="ml-1 h-3.5 w-3.5" />
+            {translateCommon('actions.open', 'Öffnen')} <ArrowRight className="ml-2 h-4 w-4" />
           </Link>
         </Button>
-        <Button asChild variant="outline" className="border-fuchsia-200 text-fuchsia-700 hover:bg-fuchsia-50">
-          <Link to={ADMIN_EVENT_EDIT_PATH(slug)}>{translateCommon('actions.edit', 'Bearbeiten')}</Link>
-        </Button>
-        <Button asChild variant="outline" className="border-sky-200 text-sky-700 hover:bg-sky-50">
+        <Button asChild variant="outline" className="rounded-full border-rose-200 text-rose-600 hover:bg-rose-50">
           <Link to={ADMIN_EVENT_PHOTOS_PATH(slug)}>
             {translate('events.list.actions.photos', '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)}>
-            {translate('events.list.actions.members', '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)}>
-            {translate('events.list.actions.tasks', 'Tasks')}
-          </Link>
-        </Button>
-        <Button asChild variant="outline" className="border-slate-200 text-slate-700 hover:bg-slate-50">
-          <Link to={ADMIN_EVENT_INVITES_PATH(slug)}>
-            <Share2 className="h-3.5 w-3.5" /> {translate('events.list.actions.invites', 'QR-Einladungen')}
-          </Link>
-        </Button>
-        <Button asChild variant="outline" className="border-emerald-200 text-emerald-600 hover:bg-emerald-50">
-          <Link to={ADMIN_EVENT_TOOLKIT_PATH(slug)}>{translate('events.list.actions.toolkit', 'Toolkit')}</Link>
-        </Button>
+      </div>
+
+      <div className="flex flex-wrap gap-2">
+        {secondaryLinks.map((action) => (
+          <ActionChip key={action.key} to={action.to}>
+            {action.label}
+          </ActionChip>
+        ))}
       </div>
     </FrostedSurface>
   );
 }
 
+function MetaChip({
+  icon,
+  label,
+  value,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  value: string | number;
+}) {
+  return (
+    <div className="min-w-[55%] snap-center rounded-2xl border border-slate-200 bg-white p-3 text-left text-xs shadow-sm sm:min-w-0 dark:border-white/15 dark:bg-white/10 dark:text-white">
+      <div className="flex items-center gap-2 text-slate-500 dark:text-slate-300">
+        {icon}
+        <span>{label}</span>
+      </div>
+      <p className="mt-1 text-sm font-semibold text-slate-900 dark:text-white">{value}</p>
+    </div>
+  );
+}
+
+function ActionChip({ to, children }: { to: string; children: React.ReactNode }) {
+  return (
+    <Link
+      to={to}
+      className="inline-flex items-center rounded-full border border-slate-200 px-3 py-1.5 text-xs font-semibold text-slate-600 transition hover:border-rose-200 hover:bg-rose-50 hover:text-rose-700 dark:border-white/15 dark:text-slate-300 dark:hover:border-white/40 dark:hover:bg-white/10 dark:hover:text-white"
+    >
+      {children}
+    </Link>
+  );
+}
+
 function LoadingState() {
   return (
     <div className="space-y-3">
       {Array.from({ length: 3 }).map((_, index) => (
         <FrostedSurface
           key={index}
-          className="h-24 animate-pulse bg-gradient-to-r from-white/40 via-white/70 to-white/40"
+          className="h-24 animate-pulse rounded-3xl bg-gradient-to-r from-white/20 via-white/60 to-white/20"
         />
       ))}
     </div>
   );
 }
 
-function EmptyState({ onCreate }: { onCreate: () => void }) {
+function EmptyState({
+  title,
+  description,
+  onCreate,
+}: {
+  title: string;
+  description: string;
+  onCreate: () => void;
+}) {
   return (
     <FrostedSurface className="flex flex-col items-center justify-center gap-4 border-dashed border-pink-200/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-2">
-        <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 Gäste in dein farbenfrohes Erlebnisportal ein.
-        </p>
+        <h3 className="text-lg font-semibold text-slate-900">{title}</h3>
+        <p className="text-sm text-slate-600">{description}</p>
       </div>
       <Button
         onClick={onCreate}