- 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.
This commit is contained in:
Codex Agent
309
resources/js/admin/pages/EventMembersPage.tsx
Normal file
309
resources/js/admin/pages/EventMembersPage.tsx
Normal file
@@ -0,0 +1,309 @@
|
||||
import React from 'react';
|
||||
import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
|
||||
import { ArrowLeft, Loader2, Mail, Sparkles, Trash2, Users } 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 { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
|
||||
import { AdminLayout } from '../components/AdminLayout';
|
||||
import {
|
||||
EventMember,
|
||||
getEvent,
|
||||
getEventMembers,
|
||||
inviteEventMember,
|
||||
removeEventMember,
|
||||
TenantEvent,
|
||||
} from '../api';
|
||||
import { isAuthError } from '../auth/tokens';
|
||||
import { ADMIN_EVENTS_PATH } from '../constants';
|
||||
|
||||
type InviteForm = {
|
||||
email: string;
|
||||
name: string;
|
||||
role: string;
|
||||
};
|
||||
|
||||
const emptyInvite: InviteForm = {
|
||||
email: '',
|
||||
name: '',
|
||||
role: 'member',
|
||||
};
|
||||
|
||||
export default function EventMembersPage() {
|
||||
const params = useParams<{ slug?: string }>();
|
||||
const [searchParams] = useSearchParams();
|
||||
const slug = params.slug ?? searchParams.get('slug') ?? null;
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [event, setEvent] = React.useState<TenantEvent | null>(null);
|
||||
const [members, setMembers] = React.useState<EventMember[]>([]);
|
||||
const [loading, setLoading] = React.useState(true);
|
||||
const [error, setError] = React.useState<string | null>(null);
|
||||
const [invite, setInvite] = React.useState<InviteForm>(emptyInvite);
|
||||
const [inviting, setInviting] = React.useState(false);
|
||||
const [membersUnavailable, setMembersUnavailable] = React.useState(false);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!slug) {
|
||||
setError('Kein Event-Slug angegeben.');
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
let cancelled = false;
|
||||
(async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const eventData = await getEvent(slug);
|
||||
if (cancelled) return;
|
||||
setEvent(eventData);
|
||||
|
||||
const response = await getEventMembers(slug);
|
||||
if (cancelled) return;
|
||||
setMembers(response.data);
|
||||
setMembersUnavailable(false);
|
||||
} catch (err) {
|
||||
if (err instanceof Error && err.message.includes('Mitgliederverwaltung')) {
|
||||
setMembersUnavailable(true);
|
||||
} else if (!isAuthError(err)) {
|
||||
setError('Mitglieder konnten nicht geladen werden.');
|
||||
}
|
||||
} finally {
|
||||
if (!cancelled) {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
})();
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [slug]);
|
||||
|
||||
async function handleInvite(event: React.FormEvent<HTMLFormElement>) {
|
||||
event.preventDefault();
|
||||
if (!slug) return;
|
||||
if (!invite.email.trim()) {
|
||||
setError('Bitte gib eine E-Mail-Adresse ein.');
|
||||
return;
|
||||
}
|
||||
setInviting(true);
|
||||
try {
|
||||
const member = await inviteEventMember(slug, {
|
||||
email: invite.email.trim(),
|
||||
name: invite.name.trim() || undefined,
|
||||
role: invite.role,
|
||||
});
|
||||
setMembers((prev) => [member, ...prev]);
|
||||
setInvite(emptyInvite);
|
||||
setMembersUnavailable(false);
|
||||
} catch (err) {
|
||||
if (err instanceof Error && err.message.includes('Mitgliederverwaltung')) {
|
||||
setMembersUnavailable(true);
|
||||
} else if (!isAuthError(err)) {
|
||||
setError('Einladung konnte nicht verschickt werden.');
|
||||
}
|
||||
} finally {
|
||||
setInviting(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleRemove(member: EventMember) {
|
||||
if (!slug) return;
|
||||
if (!window.confirm(`${member.name} wirklich entfernen?`)) return;
|
||||
try {
|
||||
await removeEventMember(slug, member.id);
|
||||
setMembers((prev) => prev.filter((entry) => entry.id !== member.id));
|
||||
} catch (err) {
|
||||
if (!isAuthError(err)) {
|
||||
setError('Mitglied konnte nicht entfernt werden.');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const actions = (
|
||||
<Button variant="outline" onClick={() => navigate(ADMIN_EVENTS_PATH)} className="border-pink-200 text-pink-600">
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
Zurueck zur Uebersicht
|
||||
</Button>
|
||||
);
|
||||
|
||||
return (
|
||||
<AdminLayout
|
||||
title="Event Mitglieder"
|
||||
subtitle="Verwalte Moderatoren, Admins und Helfer fuer dieses Event."
|
||||
actions={actions}
|
||||
>
|
||||
{error && (
|
||||
<Alert variant="destructive">
|
||||
<AlertTitle>Fehler</AlertTitle>
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{loading ? (
|
||||
<MembersSkeleton />
|
||||
) : !event ? (
|
||||
<Alert variant="destructive">
|
||||
<AlertTitle>Event nicht gefunden</AlertTitle>
|
||||
<AlertDescription>Bitte kehre zur Eventliste zurueck.</AlertDescription>
|
||||
</Alert>
|
||||
) : (
|
||||
<>
|
||||
<Card className="border-0 bg-white/85 shadow-xl shadow-pink-100/60">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl text-slate-900">{renderName(event.name)}</CardTitle>
|
||||
<CardDescription className="text-sm text-slate-600">
|
||||
Status: {event.status === 'published' ? 'Veroeffentlicht' : 'Entwurf'}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="grid gap-6 lg:grid-cols-2">
|
||||
<section className="space-y-3">
|
||||
<h3 className="flex items-center gap-2 text-sm font-semibold text-slate-900">
|
||||
<Sparkles className="h-4 w-4 text-pink-500" />
|
||||
Mitglieder
|
||||
</h3>
|
||||
{membersUnavailable ? (
|
||||
<Alert>
|
||||
<AlertTitle>Feature noch nicht aktiviert</AlertTitle>
|
||||
<AlertDescription>
|
||||
Die Mitgliederverwaltung ist fuer dieses Event noch nicht verfuegbar. Bitte kontaktiere den Support,
|
||||
um das Feature freizuschalten.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
) : members.length === 0 ? (
|
||||
<EmptyState message="Noch keine Mitglieder eingeladen." />
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{members.map((member) => (
|
||||
<div
|
||||
key={member.id}
|
||||
className="flex flex-col gap-3 rounded-2xl border border-slate-100 bg-white/90 p-3 shadow-sm sm:flex-row sm:items-center sm:justify-between"
|
||||
>
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-slate-900">{member.name}</p>
|
||||
<p className="text-xs text-slate-600">{member.email}</p>
|
||||
<div className="mt-1 flex flex-wrap items-center gap-2 text-xs text-slate-500">
|
||||
<span>Status: {member.status ?? 'aktiv'}</span>
|
||||
{member.joined_at && <span>Beigetreten: {formatDate(member.joined_at)}</span>}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="outline" className="border-pink-200 text-pink-600">
|
||||
{mapRole(member.role)}
|
||||
</Badge>
|
||||
<Button variant="outline" size="sm" onClick={() => void handleRemove(member)}>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<section className="space-y-3">
|
||||
<h3 className="flex items-center gap-2 text-sm font-semibold text-slate-900">
|
||||
<Users className="h-4 w-4 text-emerald-500" />
|
||||
Neues Mitglied einladen
|
||||
</h3>
|
||||
<form className="space-y-3 rounded-2xl border border-emerald-100 bg-white/90 p-4 shadow-sm" onSubmit={handleInvite}>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="invite-email">E-Mail</Label>
|
||||
<Input
|
||||
id="invite-email"
|
||||
type="email"
|
||||
placeholder="person@example.com"
|
||||
value={invite.email}
|
||||
onChange={(event) => setInvite((prev) => ({ ...prev, email: event.target.value }))}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="invite-name">Name (optional)</Label>
|
||||
<Input
|
||||
id="invite-name"
|
||||
placeholder="Name"
|
||||
value={invite.name}
|
||||
onChange={(event) => setInvite((prev) => ({ ...prev, name: event.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="invite-role">Rolle</Label>
|
||||
<Select
|
||||
value={invite.role}
|
||||
onValueChange={(value) => setInvite((prev) => ({ ...prev, role: value }))}
|
||||
>
|
||||
<SelectTrigger id="invite-role">
|
||||
<SelectValue placeholder="Rolle waehlen" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="tenant_admin">Tenant-Admin</SelectItem>
|
||||
<SelectItem value="member">Mitglied</SelectItem>
|
||||
<SelectItem value="guest">Gast</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<Button type="submit" className="w-full" disabled={inviting}>
|
||||
{inviting ? <Loader2 className="h-4 w-4 animate-spin" /> : <Mail className="h-4 w-4" />}
|
||||
{' '}Einladung senden
|
||||
</Button>
|
||||
</form>
|
||||
</section>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</>
|
||||
)}
|
||||
</AdminLayout>
|
||||
);
|
||||
}
|
||||
|
||||
function EmptyState({ message }: { message: string }) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center gap-2 rounded-2xl border border-dashed border-slate-200 bg-white/70 p-6 text-center">
|
||||
<p className="text-xs text-slate-600">{message}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function MembersSkeleton() {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{Array.from({ length: 3 }).map((_, index) => (
|
||||
<div key={index} className="h-40 animate-pulse rounded-2xl bg-gradient-to-r from-white/40 via-white/60 to-white/40" />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function renderName(name: TenantEvent['name']): string {
|
||||
if (typeof name === 'string') {
|
||||
return name;
|
||||
}
|
||||
return name?.de ?? name?.en ?? Object.values(name ?? {})[0] ?? 'Unbenanntes Event';
|
||||
}
|
||||
|
||||
function mapRole(role: string): string {
|
||||
switch (role) {
|
||||
case 'tenant_admin':
|
||||
return 'Tenant-Admin';
|
||||
case 'member':
|
||||
return 'Mitglied';
|
||||
case 'guest':
|
||||
return 'Gast';
|
||||
default:
|
||||
return role;
|
||||
}
|
||||
}
|
||||
|
||||
function formatDate(value: string | null | undefined): string {
|
||||
if (!value) return '--';
|
||||
const date = new Date(value);
|
||||
if (Number.isNaN(date.getTime())) return '--';
|
||||
return date.toLocaleDateString('de-DE', { day: '2-digit', month: 'short', year: 'numeric' });
|
||||
}
|
||||
Reference in New Issue
Block a user