Added opaque join-token support across backend and frontend: new migration/model/service/endpoints, guest controllers now resolve tokens, and the demo seeder seeds a token. Tenant event details list/manage tokens with copy/revoke actions, and the guest PWA uses tokens end-to-end (routing, storage, uploads, achievements, etc.). Docs TODO updated to reflect completed steps.

resources/js/admin/onboarding/pages/WelcomeEventSetupPage.tsx

@@ -1,54 +1,57 @@
-import React from 'react';
-import { useNavigate } from 'react-router-dom';
-import { ClipboardCheck, Sparkles, Globe, ArrowRight } from 'lucide-react';
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+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';
+} 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();
+  const { t } = useTranslation("onboarding");
 
   React.useEffect(() => {
-    markStep({ lastStep: 'event-setup' });
+    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."
+      eyebrow={t("eventSetup.layout.eyebrow")}
+      title={t("eventSetup.layout.title")}
+      subtitle={t("eventSetup.layout.subtitle")}
     >
       <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."
+        title={t("eventSetup.step.title")}
+        description={t("eventSetup.step.description")}
         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.',
+              id: "story",
+              title: t("eventSetup.tiles.story.title"),
+              copy: t("eventSetup.tiles.story.copy"),
               icon: Sparkles,
             },
             {
-              id: 'team',
-              title: 'Team organisieren',
-              copy: 'Lade Moderator*innen oder Fotograf*innen ein und teile Rollen zu.',
+              id: "team",
+              title: t("eventSetup.tiles.team.title"),
+              copy: t("eventSetup.tiles.team.copy"),
               icon: Globe,
             },
             {
-              id: 'launch',
-              title: 'Go-Live vorbereiten',
-              copy: 'Erstelle QR-Codes, teste die G<>stegalerie und kommuniziere den Ablauf.',
+              id: "launch",
+              title: t("eventSetup.tiles.launch.title"),
+              copy: t("eventSetup.tiles.launch.copy"),
               icon: ArrowRight,
             },
           ].map((item) => (
@@ -66,20 +69,17 @@ export default function WelcomeEventSetupPage() {
         </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>
+          <h4 className="text-lg font-semibold text-brand-rose">{t("eventSetup.cta.heading")}</h4>
+          <p className="text-sm text-brand-navy/80">{t("eventSetup.cta.description")}</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' });
+              markStep({ lastStep: "event-create-intent" });
               navigate(ADMIN_EVENT_CREATE_PATH);
             }}
           >
-            Event erstellen
+            {t("eventSetup.cta.button")}
             <ArrowRight className="ml-2 size-4" />
           </Button>
         </div>
@@ -88,29 +88,29 @@ export default function WelcomeEventSetupPage() {
       <OnboardingCTAList
         actions={[
           {
-            id: 'back',
-            label: 'Noch einmal Pakete pr<70>fen',
-            description: 'Vergleiche Preise oder aktualisiere dein derzeitiges Paket.',
-            buttonLabel: 'Zu Paketen',
+            id: "back",
+            label: t("eventSetup.actions.back.label"),
+            description: t("eventSetup.actions.back.description"),
+            buttonLabel: t("eventSetup.actions.back.button"),
             onClick: () => navigate(-1),
-            variant: 'secondary',
+            variant: "secondary",
           },
           {
-            id: 'dashboard',
-            label: 'Zum Dashboard',
-            description: 'Springe ins Management, um bestehende Events zu bearbeiten.',
-            buttonLabel: 'Dashboard <20>ffnen',
+            id: "dashboard",
+            label: t("eventSetup.actions.dashboard.label"),
+            description: t("eventSetup.actions.dashboard.description"),
+            buttonLabel: t("eventSetup.actions.dashboard.button"),
             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',
+            id: "events",
+            label: t("eventSetup.actions.events.label"),
+            description: t("eventSetup.actions.events.description"),
+            buttonLabel: t("eventSetup.actions.events.button"),
             onClick: () => navigate(ADMIN_EVENTS_PATH),
           },
         ]}
       />
     </TenantWelcomeLayout>
   );
-}
+}