- 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.
2025-10-10 21:31:55 +02:00
parent 52197f216d
commit d04e234ca0
84 changed files with 8397 additions and 1005 deletions
--- a/resources/js/admin/onboarding/pages/WelcomeEventSetupPage.tsx
+++ b/resources/js/admin/onboarding/pages/WelcomeEventSetupPage.tsx
@@ -0,0 +1,116 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { ClipboardCheck, Sparkles, Globe, ArrowRight } from 'lucide-react';
+import {
+  TenantWelcomeLayout,
+  WelcomeStepCard,
+  OnboardingCTAList,
+  useOnboardingProgress,
+} from '..';
+import { Button } from '@/components/ui/button';
+import { ADMIN_EVENT_CREATE_PATH, ADMIN_EVENTS_PATH, ADMIN_HOME_PATH } from '../../constants';
+
+export default function WelcomeEventSetupPage() {
+  const navigate = useNavigate();
+  const { markStep } = useOnboardingProgress();
+
+  React.useEffect(() => {
+    markStep({ lastStep: 'event-setup' });
+  }, [markStep]);
+
+  return (
+    <TenantWelcomeLayout
+      eyebrow="Schritt 4"
+      title="Bereite dein erstes Event vor"
+      subtitle="F<>lle wenige Details aus, lade Co-Hosts ein und <20>ffne deine G<>stegalerie f<>r das gro<72>e Ereignis."
+    >
+      <WelcomeStepCard
+        step={4}
+        totalSteps={4}
+        title="Event-Setup in Minuten"
+        description="Wir f<>hren dich durch Name, Datum, Mood und Aufgaben. Danach kannst du Fotos moderieren und G<>ste live begleiten."
+        icon={ClipboardCheck}
+      >
+        <div className="grid gap-4 md:grid-cols-3">
+          {[
+            {
+              id: 'story',
+              title: 'Story & Stimmung',
+              copy: 'W<>hle Bildsprache, Farben und Emotionskarten f<>r dein Event.',
+              icon: Sparkles,
+            },
+            {
+              id: 'team',
+              title: 'Team organisieren',
+              copy: 'Lade Moderator*innen oder Fotograf*innen ein und teile Rollen zu.',
+              icon: Globe,
+            },
+            {
+              id: 'launch',
+              title: 'Go-Live vorbereiten',
+              copy: 'Erstelle QR-Codes, teste die G<>stegalerie und kommuniziere den Ablauf.',
+              icon: ArrowRight,
+            },
+          ].map((item) => (
+            <div
+              key={item.id}
+              className="flex flex-col gap-3 rounded-2xl border border-brand-rose-soft bg-brand-card p-5 shadow-brand-primary"
+            >
+              <span className="flex size-10 items-center justify-center rounded-full bg-brand-rose-soft text-brand-rose shadow-inner">
+                <item.icon className="size-5" />
+              </span>
+              <h3 className="text-lg font-semibold text-brand-slate">{item.title}</h3>
+              <p className="text-sm text-brand-navy/80">{item.copy}</p>
+            </div>
+          ))}
+        </div>
+
+        <div className="mt-6 flex flex-col items-start gap-3 rounded-3xl border border-brand-rose-soft bg-brand-sky-soft/40 p-6 text-brand-navy">
+          <h4 className="text-lg font-semibold text-brand-rose">Bereit f<EFBFBD>r dein erstes Event?</h4>
+          <p className="text-sm text-brand-navy/80">
+            Du wechselst jetzt in den Event-Manager. Dort kannst du Tasks zuweisen, Mitglieder einladen und die
+            G<EFBFBD>stegalerie testen. Keine Sorge: Du kannst jederzeit zur Welcome Journey zur<EFBFBD>ckkehren.
+          </p>
+          <Button
+            size="lg"
+            className="mt-2 rounded-full bg-brand-rose text-white shadow-lg shadow-rose-400/40 hover:bg-[var(--brand-rose-strong)]"
+            onClick={() => {
+              markStep({ lastStep: 'event-create-intent' });
+              navigate(ADMIN_EVENT_CREATE_PATH);
+            }}
+          >
+            Event erstellen
+            <ArrowRight className="ml-2 size-4" />
+          </Button>
+        </div>
+      </WelcomeStepCard>
+
+      <OnboardingCTAList
+        actions={[
+          {
+            id: 'back',
+            label: 'Noch einmal Pakete pr<70>fen',
+            description: 'Vergleiche Preise oder aktualisiere dein derzeitiges Paket.',
+            buttonLabel: 'Zu Paketen',
+            onClick: () => navigate(-1),
+            variant: 'secondary',
+          },
+          {
+            id: 'dashboard',
+            label: 'Zum Dashboard',
+            description: 'Springe ins Management, um bestehende Events zu bearbeiten.',
+            buttonLabel: 'Dashboard <20>ffnen',
+            onClick: () => navigate(ADMIN_HOME_PATH),
+          },
+          {
+            id: 'events',
+            label: 'Event<6E>bersicht',
+            description: 'Behalte den <20>berblick <20>ber alle aktiven und archivierten Events.',
+            buttonLabel: 'Eventliste',
+            onClick: () => navigate(ADMIN_EVENTS_PATH),
+          },
+        ]}
+      />
+    </TenantWelcomeLayout>
+  );
+}