soeren/fotospiel-app
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

tenant admin startseite schicker gestaltet und super-admin und tenant admin (filament) aufgesplittet.

Browse Source 
Es gibt nun task collections und vordefinierte tasks für alle. Onboarding verfeinert und webseite-carousel gefixt (logging später entfernen!)
This commit is contained in:
Codex Agent
2025-10-14 15:17:52 +02:00
parent 64a5411fb9
commit 1a4bdb1fe1
92 changed files with 6027 additions and 515 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
resources/views/filament/tenant/pages/invite-studio.blade.php Normal file
View File

@@ -0,0 +1,122 @@
<x-filament-panels::page>
<div class="mx-auto w-full max-w-4xl space-y-10">
<section class="rounded-3xl border border-white/70 bg-white/85 p-8 shadow-xl shadow-sky-100/50">
<header class="space-y-3">
<h1 class="text-3xl font-semibold text-slate-900">Einladungen & QR-Codes</h1>
<p class="text-sm text-slate-600">
Erstellt und verwaltet eure QR-Einladungen. Jeder Link enthält druckfertige Layouts als PDF &amp; SVG.
</p>
</header>
<div class="mt-6 grid gap-6 md:grid-cols-[2fr,1fr]">
<div>
<label class="block text-sm font-semibold text-slate-700">
Event auswählen
<select
wire:model="selectedEventId"
class="mt-2 w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 shadow-sm focus:border-rose-400 focus:ring-rose-400">
<option value="">Bitte wählt ein Event</option>
@foreach ($this->events as $event)
<option value="{{ $event->id }}">{{ data_get($event->name, app()->getLocale()) ?? data_get($event->name, 'de') ?? 'Event #' . $event->id }}</option>
@endforeach
</select>
</label>
</div>
<div class="rounded-2xl border border-rose-100 bg-rose-50/70 p-4 text-sm text-rose-700 shadow-inner">
<p class="font-semibold">Tipp</p>
<p class="mt-2">Druckt mehrere Layouts aus und verteilt sie am Eingang, am Gästebuch und beim DJ-Pult.</p>
</div>
</div>
</section>
<section class="rounded-3xl border border-white/70 bg-white/85 p-8 shadow-xl shadow-rose-100/50">
<form wire:submit.prevent="createInvite" class="grid gap-4 md:grid-cols-[2fr,1fr] md:items-end">
<label class="block text-sm font-semibold text-slate-700">
Bezeichnung des Links (optional)
<input
type="text"
wire:model.defer="tokenLabel"
class="mt-2 w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 shadow-sm focus:border-rose-400 focus:ring-rose-400"
placeholder="z. B. Empfang, Fotobox, Tanzfläche" />
</label>
<div class="flex justify-end">
<button
type="submit"
class="inline-flex items-center justify-center gap-2 rounded-full bg-rose-500 px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-rose-300/60 transition hover:bg-rose-600 disabled:cursor-not-allowed disabled:opacity-70"
@disabled($this->events->isEmpty())
wire:loading.attr="disabled"
wire:target="createInvite">
<span wire:loading.remove wire:target="createInvite">Neuen Einladungslink erzeugen</span>
<span wire:loading wire:target="createInvite" class="flex items-center gap-2">
<x-filament::loading-indicator class="h-4 w-4" />
Wird erstellt …
</span>
</button>
</div>
</form>
@if ($this->events->isEmpty())
<p class="mt-4 text-sm text-slate-600">Legt zunächst ein Event an, um Einladungslinks zu erstellen.</p>
@endif
</section>
<section class="rounded-3xl border border-white/70 bg-white/90 p-8 shadow-xl shadow-slate-100/60">
<h2 class="text-2xl font-semibold text-slate-900">Aktive Einladungslinks</h2>
@if (empty($tokens))
<p class="mt-4 text-sm text-slate-600">
Noch keine Einladungen erstellt. Generiert euren ersten Link, um die QR-Codes als PDF oder SVG herunterzuladen.
</p>
@else
<div class="mt-6 space-y-4">
@foreach ($tokens as $token)
<article class="rounded-2xl border border-slate-200 bg-white/80 p-5 shadow-sm">
<div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
<div>
<h3 class="text-lg font-semibold text-slate-900">{{ $token['label'] }}</h3>
<p class="text-sm text-slate-500">
{{ $token['url'] }} · erstellt am {{ $token['created_at'] }} · Aufrufe: {{ $token['usage_count'] }}{{ $token['usage_limit'] ? ' / ' . $token['usage_limit'] : '' }}
</p>
</div>
<div class="flex flex-wrap items-center gap-2">
<a
href="{{ $token['url'] }}"
target="_blank"
class="inline-flex items-center gap-2 rounded-full border border-slate-200 px-4 py-2 text-sm font-semibold text-slate-600 transition hover:border-rose-300 hover:text-rose-600">
Link öffnen
</a>
<button
type="button"
x-data="{ copied: false }"
x-on:click="navigator.clipboard.writeText('{{ $token['url'] }}').then(() => { copied = true; setTimeout(() => copied = false, 1500); })"
class="inline-flex items-center gap-2 rounded-full border border-slate-200 px-4 py-2 text-sm font-semibold text-slate-600 transition hover:border-rose-300 hover:text-rose-600">
<span x-show="!copied">Link kopieren</span>
<span x-cloak x-show="copied" class="text-rose-500">Kopiert!</span>
</button>
</div>
</div>
<div class="mt-4 grid gap-3 md:grid-cols-2 lg:grid-cols-3">
@foreach ($token['downloads'] as $layout)
<div class="rounded-xl border border-slate-200 bg-white/70 p-4 text-sm text-slate-600">
<p class="font-semibold text-slate-900">{{ $layout['name'] }}</p>
<p class="text-xs text-slate-500">{{ $layout['subtitle'] }}</p>
<div class="mt-3 flex flex-wrap gap-2">
@foreach ($layout['download_urls'] as $format => $url)
<a
href="{{ $url }}"
class="inline-flex items-center gap-2 rounded-full border border-slate-200 px-3 py-1 text-xs font-semibold text-slate-600 transition hover:border-rose-300 hover:text-rose-600"
target="_blank">
{{ strtoupper($format) }} herunterladen
</a>
@endforeach
</div>
</div>
@endforeach
</div>
</article>
@endforeach
</div>
@endif
</section>
</div>
</x-filament-panels::page>

278
resources/views/filament/tenant/pages/onboarding.blade.php Normal file
View File

@@ -0,0 +1,278 @@
@php
$steps = [
'intro' => 'Willkommen',
'packages' => 'Aufgaben wählen',
'event' => 'Event benennen',
'palette' => 'Farbwelt',
'invite' => 'Einladungen',
];
@endphp
<x-filament-panels::page>
<div class="mx-auto w-full max-w-4xl space-y-10">
<section class="rounded-3xl border border-white/60 bg-white/80 p-8 shadow-xl shadow-rose-100/40 backdrop-blur-md">
<header class="space-y-4 text-center">
<p class="inline-flex items-center gap-2 rounded-full border border-rose-100 bg-white/70 px-4 py-1 text-sm font-medium text-rose-500 shadow-sm">
Fotospiel Studio · Geführter Start
</p>
<h1 class="font-display text-4xl font-semibold tracking-tight text-slate-900">
Eure Gäste werden zu Geschichtenerzähler:innen
</h1>
<p class="mx-auto max-w-2xl text-base leading-relaxed text-slate-600">
Wir richten mit euch die Aufgaben, das Event und den ersten QR-Code ein. Alles ohne Technikstress – Schritt für Schritt.
</p>
</header>
<ol class="mt-8 grid gap-3 md:grid-cols-5">
@foreach ($steps as $key => $label)
<li class="flex flex-col items-center gap-2">
<span
@class([
'flex h-10 w-10 items-center justify-center rounded-full text-sm font-semibold transition',
'bg-rose-500 text-white shadow-lg shadow-rose-300/70' => $step === $key,
'bg-white text-rose-500 border border-rose-200' => $step !== $key,
])>
{{ $loop->iteration }}
</span>
<span class="text-sm font-medium text-slate-600">
{{ $label }}
</span>
</li>
@endforeach
</ol>
</section>
@if ($step === 'intro')
<section class="rounded-3xl border border-white/70 bg-gradient-to-br from-rose-50 via-white to-sky-50 p-10 shadow-lg shadow-rose-100/50">
<div class="space-y-6 text-center">
<h2 class="text-3xl font-semibold text-slate-900">So funktioniert Fotospiel</h2>
<div class="grid gap-6 md:grid-cols-3">
<div class="rounded-2xl bg-white/80 p-5 shadow-sm">
<h3 class="font-semibold text-slate-900">1 · Aufgaben auswählen</h3>
<p class="mt-2 text-sm text-slate-600">Kuratiere Aufgaben, die eure Gäste inspirieren – ohne schon Fotos zu sammeln.</p>
</div>
<div class="rounded-2xl bg-white/80 p-5 shadow-sm">
<h3 class="font-semibold text-slate-900">2 · Event gestalten</h3>
<p class="mt-2 text-sm text-slate-600">Name, Datum und Farben bestimmen das Look & Feel eurer Fotostory.</p>
</div>
<div class="rounded-2xl bg-white/80 p-5 shadow-sm">
<h3 class="font-semibold text-slate-900">3 · QR-Code teilen</h3>
<p class="mt-2 text-sm text-slate-600">Euer Einladungslink führt Gäste direkt in die Galerie – kein App-Download notwendig.</p>
</div>
</div>
<button
wire:click="start"
type="button"
class="inline-flex items-center justify-center gap-2 rounded-full bg-rose-500 px-8 py-3 text-base font-semibold text-white shadow-lg shadow-rose-300/60 transition hover:bg-rose-600">
Jetzt loslegen
</button>
</div>
</section>
@endif
@if ($step === 'packages')
<section class="rounded-3xl border border-white/70 bg-white/85 p-10 shadow-xl shadow-rose-100/50">
<form wire:submit.prevent="savePackages" class="space-y-6">
<div class="space-y-2 text-center">
<h2 class="text-3xl font-semibold text-slate-900">Wählt euer erstes Aufgabenpaket</h2>
<p class="text-sm text-slate-600">Jedes Paket enthält spielerische Prompts. Ihr könnt später weitere hinzufügen oder eigene Aufgaben erstellen.</p>
</div>
<div class="grid gap-4 md:grid-cols-2">
@foreach ($this->packageList as $package)
<label
for="package-{{ $package['id'] }}"
class="group flex cursor-pointer flex-col gap-3 rounded-2xl border border-rose-100 bg-white/80 p-5 shadow-sm transition hover:border-rose-300 hover:shadow-lg">
<div class="flex items-start gap-3">
<input
id="package-{{ $package['id'] }}"
type="checkbox"
value="{{ $package['id'] }}"
wire:model="selectedPackages"
class="mt-1 h-4 w-4 rounded border-rose-200 text-rose-500 focus:ring-rose-400" />
<div>
<p class="text-base font-semibold text-slate-900">{{ $package['name'] }}</p>
@if ($package['description'])
<p class="mt-1 text-sm text-slate-600">{{ $package['description'] }}</p>
@endif
</div>
</div>
</label>
@endforeach
</div>
@error('selectedPackages')
<p class="text-sm text-rose-600">{{ $message }}</p>
@enderror
<div class="flex justify-end">
<button
type="submit"
class="inline-flex items-center justify-center gap-2 rounded-full bg-rose-500 px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-rose-300/60 transition hover:bg-rose-600">
Weiter zu Schritt 2
</button>
</div>
</form>
</section>
@endif
@if ($step === 'event')
<section class="rounded-3xl border border-white/70 bg-white/90 p-10 shadow-xl shadow-sky-100/50">
<form wire:submit.prevent="saveEvent" class="space-y-6">
<div class="space-y-2">
<h2 class="text-3xl font-semibold text-slate-900">Wie heißt euer Event?</h2>
<p class="text-sm text-slate-600">Name und Anlass erscheinen in eurer Gästegalerie und auf den Einladungen.</p>
</div>
<div class="grid gap-5 md:grid-cols-2">
<div class="md:col-span-2">
<label class="block text-sm font-semibold text-slate-700">
Event-Name
<input
type="text"
wire:model.defer="eventName"
class="mt-1 w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 shadow-sm focus:border-rose-400 focus:ring-rose-400"
placeholder="z. B. Hochzeit Anna & Lea" />
</label>
@error('eventName')
<p class="mt-1 text-sm text-rose-600">{{ $message }}</p>
@enderror
</div>
<div>
<label class="block text-sm font-semibold text-slate-700">
Datum
<input
type="date"
wire:model.defer="eventDate"
class="mt-1 w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 shadow-sm focus:border-rose-400 focus:ring-rose-400" />
</label>
@error('eventDate')
<p class="mt-1 text-sm text-rose-600">{{ $message }}</p>
@enderror
</div>
<div>
<label class="block text-sm font-semibold text-slate-700">
Anlass
<select
wire:model.defer="eventTypeId"
class="mt-1 w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 shadow-sm focus:border-rose-400 focus:ring-rose-400">
<option value="">Bitte wählen</option>
@foreach ($this->eventTypeOptions as $id => $label)
<option value="{{ $id }}">{{ $label }}</option>
@endforeach
</select>
</label>
@error('eventTypeId')
<p class="mt-1 text-sm text-rose-600">{{ $message }}</p>
@enderror
</div>
</div>
<div class="flex justify-between">
<button type="button" wire:click="$set('step', 'packages')" class="text-sm font-semibold text-slate-500 hover:text-slate-700">
Zurück
</button>
<button
type="submit"
class="inline-flex items-center justify-center gap-2 rounded-full bg-rose-500 px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-rose-300/60 transition hover:bg-rose-600">
Weiter zu Schritt 3
</button>
</div>
</form>
</section>
@endif
@if ($step === 'palette')
<section class="rounded-3xl border border-white/70 bg-white/90 p-10 shadow-xl shadow-emerald-100/50">
<form wire:submit.prevent="savePalette" class="space-y-6">
<div class="space-y-2">
<h2 class="text-3xl font-semibold text-slate-900">Welche Farben spiegeln eure Story?</h2>
<p class="text-sm text-slate-600">Wir wenden die Palette auf Karten, QR-Layouts und App-Elemente an. Ihr könnt sie später jederzeit ändern.</p>
</div>
<div class="grid gap-4 md:grid-cols-2">
@foreach ($this->paletteOptions as $value => $data)
<label
for="palette-{{ $value }}"
class="flex cursor-pointer flex-col gap-3 rounded-2xl border border-slate-200 bg-white/80 p-5 shadow-sm transition hover:border-rose-300 hover:shadow-lg">
<div class="flex items-start gap-3">
<input
id="palette-{{ $value }}"
type="radio"
value="{{ $value }}"
wire:model.defer="palette"
class="mt-1 h-4 w-4 border-rose-300 text-rose-500 focus:ring-rose-400" />
<div>
<p class="text-base font-semibold text-slate-900">{{ $data['label'] }}</p>
<p class="mt-1 text-sm text-slate-600">{{ $data['description'] }}</p>
</div>
</div>
</label>
@endforeach
</div>
@error('palette')
<p class="text-sm text-rose-600">{{ $message }}</p>
@enderror
<div class="flex justify-between">
<button type="button" wire:click="$set('step', 'event')" class="text-sm font-semibold text-slate-500 hover:text-slate-700">
Zurück
</button>
<button
type="submit"
class="inline-flex items-center justify-center gap-2 rounded-full bg-rose-500 px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-rose-300/60 transition hover:bg-rose-600">
Weiter zu Schritt 4
</button>
</div>
</form>
</section>
@endif
@if ($step === 'invite')
<section class="rounded-3xl border border-white/70 bg-white/90 p-10 shadow-xl shadow-indigo-100/50">
<form wire:submit.prevent="finish" class="space-y-6">
<div class="space-y-2">
<h2 class="text-3xl font-semibold text-slate-900">Wie soll euer Einladungs-Layout aussehen?</h2>
<p class="text-sm text-slate-600">Wir generieren sofort einen QR-Code samt PDF/SVG-Downloads.</p>
</div>
<div class="grid gap-4 md:grid-cols-2">
@foreach ($this->layoutOptions as $layout)
<label
for="layout-{{ $layout['id'] }}"
class="flex cursor-pointer flex-col gap-3 rounded-2xl border border-slate-200 bg-white/80 p-5 shadow-sm transition hover:border-rose-300 hover:shadow-lg">
<div class="flex items-start gap-3">
<input
id="layout-{{ $layout['id'] }}"
type="radio"
value="{{ $layout['id'] }}"
wire:model.defer="inviteLayout"
class="mt-1 h-4 w-4 border-rose-300 text-rose-500 focus:ring-rose-400" />
<div>
<p class="text-base font-semibold text-slate-900">{{ $layout['name'] }}</p>
<p class="mt-1 text-sm text-slate-600">{{ $layout['subtitle'] }}</p>
</div>
</div>
</label>
@endforeach
</div>
@error('inviteLayout')
<p class="text-sm text-rose-600">{{ $message }}</p>
@enderror
<div class="flex justify-between">
<button type="button" wire:click="$set('step', 'palette')" class="text-sm font-semibold text-slate-500 hover:text-slate-700">
Zurück
</button>
<button
type="submit"
@class([
'inline-flex items-center justify-center gap-2 rounded-full px-6 py-3 text-sm font-semibold text-white shadow-lg transition',
'bg-rose-500 shadow-rose-300/60 hover:bg-rose-600' => ! $isProcessing,
'bg-rose-400 opacity-70' => $isProcessing,
])
wire:loading.attr="disabled"
wire:target="finish">
<span wire:loading.remove wire:target="finish">Setup abschließen</span>
<span wire:loading wire:target="finish" class="flex items-center gap-2">
<x-filament::loading-indicator class="h-4 w-4" />
Bitte warten …
</span>
</button>
</div>
</form>
</section>
@endif
</div>
</x-filament-panels::page>