396 lines
16 KiB
TypeScript
396 lines
16 KiB
TypeScript
import React from 'react';
|
|
import { useNavigate, useParams } from 'react-router-dom';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Trash2, Copy, RefreshCcw } from 'lucide-react';
|
|
import { YStack, XStack } from '@tamagui/stacks';
|
|
import { SizableText as Text } from '@tamagui/text';
|
|
import { Pressable } from '@tamagui/react-native-web-lite';
|
|
import { MobileShell, HeaderActionButton } from './components/MobileShell';
|
|
import { MobileCard, CTAButton, PillBadge, SkeletonCard } from './components/Primitives';
|
|
import { MobileField, MobileInput, MobileSelect } from './components/FormControls';
|
|
import { EventMember, getEventMembers, inviteEventMember, removeEventMember, trackOnboarding } from '../api';
|
|
import { isAuthError } from '../auth/tokens';
|
|
import { getApiErrorMessage } from '../lib/apiError';
|
|
import toast from 'react-hot-toast';
|
|
import { MobileSheet } from './components/Sheet';
|
|
import { adminPath } from '../constants';
|
|
import { useBackNavigation } from './hooks/useBackNavigation';
|
|
import { useAdminTheme } from './theme';
|
|
|
|
export default function MobileEventMembersPage() {
|
|
const { slug: slugParam } = useParams<{ slug?: string }>();
|
|
const slug = slugParam ?? null;
|
|
const navigate = useNavigate();
|
|
const { t } = useTranslation('management');
|
|
const { textStrong, text, muted, border, primary, danger } = useAdminTheme();
|
|
|
|
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({ name: '', email: '', role: 'member' as EventMember['role'] });
|
|
const [saving, setSaving] = React.useState(false);
|
|
const emailInputRef = React.useRef<HTMLInputElement | null>(null);
|
|
const [search, setSearch] = React.useState('');
|
|
const [statusFilter, setStatusFilter] = React.useState<'all' | 'pending' | 'active' | 'invited'>('all');
|
|
const [roleFilter, setRoleFilter] = React.useState<'all' | 'member' | 'tenant_admin'>('all');
|
|
const [confirmRemove, setConfirmRemove] = React.useState<EventMember | null>(null);
|
|
const back = useBackNavigation(slug ? adminPath(`/mobile/events/${slug}`) : adminPath('/mobile/events'));
|
|
|
|
const load = React.useCallback(async () => {
|
|
if (!slug) return;
|
|
setLoading(true);
|
|
setError(null);
|
|
try {
|
|
const result = await getEventMembers(slug, 1);
|
|
setMembers(result.data);
|
|
} catch (err) {
|
|
if (!isAuthError(err)) {
|
|
setError(getApiErrorMessage(err, t('events.errors.loadFailed', 'Mitglieder konnten nicht geladen werden.')));
|
|
}
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [slug, t]);
|
|
|
|
React.useEffect(() => {
|
|
void load();
|
|
}, [load]);
|
|
|
|
const normalizedEmail = invite.email.trim();
|
|
const isEmailValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(normalizedEmail);
|
|
const canInvite = Boolean(normalizedEmail) && isEmailValid && !saving;
|
|
|
|
const filteredMembers = members.filter((member) => {
|
|
if (statusFilter !== 'all') {
|
|
const currentStatus = member.status ?? 'pending';
|
|
if (currentStatus !== statusFilter) return false;
|
|
}
|
|
if (roleFilter !== 'all' && member.role !== roleFilter) return false;
|
|
if (!search.trim()) return true;
|
|
const hay = `${member.name ?? ''} ${member.email ?? ''}`.toLowerCase();
|
|
return hay.includes(search.toLowerCase());
|
|
});
|
|
|
|
const statusOptions = [
|
|
{ key: 'all', label: t('events.members.filters.statusAll', 'All statuses') },
|
|
{ key: 'pending', label: t('events.members.filters.statusPending', 'Pending') },
|
|
{ key: 'active', label: t('events.members.filters.statusActive', 'Active') },
|
|
{ key: 'invited', label: t('events.members.filters.statusInvited', 'Invited') },
|
|
] as const;
|
|
|
|
const roleOptions = [
|
|
{ key: 'all', label: t('events.members.filters.roleAll', 'All roles') },
|
|
{ key: 'tenant_admin', label: t('events.members.filters.roleAdmin', 'Admins') },
|
|
{ key: 'member', label: t('events.members.filters.roleMember', 'Members') },
|
|
] as const;
|
|
|
|
const resolveStatus = (status?: string) => {
|
|
switch (status ?? 'pending') {
|
|
case 'active':
|
|
return { label: t('events.members.statuses.active', 'Active'), tone: 'success' as const };
|
|
case 'invited':
|
|
return { label: t('events.members.statuses.invited', 'Invited'), tone: 'warning' as const };
|
|
case 'pending':
|
|
return { label: t('events.members.statuses.pending', 'Pending'), tone: 'warning' as const };
|
|
default:
|
|
return { label: t('events.members.statuses.unknown', 'Unknown'), tone: 'muted' as const };
|
|
}
|
|
};
|
|
|
|
async function handleInvite() {
|
|
if (!slug || !normalizedEmail) return;
|
|
if (!isEmailValid) {
|
|
toast.error(t('events.members.emailInvalid', 'Please enter a valid email address.'));
|
|
return;
|
|
}
|
|
setSaving(true);
|
|
setError(null);
|
|
try {
|
|
const member = await inviteEventMember(slug, {
|
|
email: normalizedEmail,
|
|
name: invite.name.trim() || undefined,
|
|
role: invite.role,
|
|
});
|
|
setMembers((prev) => [member, ...prev]);
|
|
setInvite({ name: '', email: '', role: 'member' });
|
|
void trackOnboarding('invite_created', { event_slug: slug });
|
|
toast.success(t('events.members.inviteSuccess', 'Einladung gesendet'));
|
|
} catch (err) {
|
|
if (!isAuthError(err)) {
|
|
setError(getApiErrorMessage(err, t('events.errors.saveFailed', 'Einladung fehlgeschlagen.')));
|
|
toast.error(t('events.members.inviteFailed', 'Einladung fehlgeschlagen.'));
|
|
}
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
}
|
|
|
|
async function handleRemove(member: EventMember) {
|
|
if (!slug) return;
|
|
try {
|
|
await removeEventMember(slug, member.id);
|
|
setMembers((prev) => prev.filter((m) => m.id !== member.id));
|
|
toast.success(t('events.members.removeSuccess', 'Mitglied entfernt'));
|
|
} catch (err) {
|
|
if (!isAuthError(err)) {
|
|
setError(getApiErrorMessage(err, t('events.errors.saveFailed', 'Mitglied konnte nicht entfernt werden.')));
|
|
toast.error(t('events.members.removeFailed', 'Mitglied konnte nicht entfernt werden.'));
|
|
}
|
|
}
|
|
}
|
|
|
|
return (
|
|
<MobileShell
|
|
activeTab="home"
|
|
title={t('events.members.title', 'Guest Management')}
|
|
onBack={back}
|
|
headerActions={
|
|
<HeaderActionButton onPress={() => load()} ariaLabel={t('common.refresh', 'Refresh')}>
|
|
<RefreshCcw size={18} color={textStrong} />
|
|
</HeaderActionButton>
|
|
}
|
|
>
|
|
{error ? (
|
|
<MobileCard>
|
|
<Text fontWeight="700" color={danger}>
|
|
{error}
|
|
</Text>
|
|
</MobileCard>
|
|
) : null}
|
|
|
|
<MobileCard space="$3">
|
|
<Text fontSize="$md" fontWeight="800" color={textStrong}>
|
|
{t('events.members.inviteTitle', 'Invite Member')}
|
|
</Text>
|
|
<YStack space="$2">
|
|
<MobileField label={t('events.members.name', 'Name')}>
|
|
<MobileInput
|
|
type="text"
|
|
value={invite.name}
|
|
onChange={(e) => setInvite((prev) => ({ ...prev, name: e.target.value }))}
|
|
placeholder={t('events.members.namePlaceholder', 'Alex Example')}
|
|
/>
|
|
</MobileField>
|
|
<MobileField label={t('events.members.email', 'Email')}>
|
|
<MobileInput
|
|
type="email"
|
|
value={invite.email}
|
|
onChange={(e) => setInvite((prev) => ({ ...prev, email: e.target.value }))}
|
|
placeholder={t('events.members.emailPlaceholder', 'alex@example.com')}
|
|
ref={emailInputRef}
|
|
/>
|
|
</MobileField>
|
|
<MobileField label={t('events.members.role', 'Role')}>
|
|
<MobileSelect
|
|
value={invite.role}
|
|
onChange={(e) => setInvite((prev) => ({ ...prev, role: e.target.value as EventMember['role'] }))}
|
|
>
|
|
<option value="member">{t('events.members.roleMember', 'Member')}</option>
|
|
<option value="tenant_admin">{t('events.members.roleAdmin', 'Admin')}</option>
|
|
</MobileSelect>
|
|
</MobileField>
|
|
<CTAButton
|
|
label={saving ? t('common.saving', 'Saving...') : t('events.members.invite', 'Send Invite')}
|
|
onPress={() => handleInvite()}
|
|
disabled={!canInvite}
|
|
/>
|
|
{saving ? (
|
|
<Text fontSize="$xs" color={muted}>
|
|
{t('common.processing', 'Processing...')}
|
|
</Text>
|
|
) : null}
|
|
{!isEmailValid && invite.email.trim().length > 0 ? (
|
|
<Text fontSize="$xs" color={danger}>
|
|
{t('events.members.emailInvalid', 'Please enter a valid email address.')}
|
|
</Text>
|
|
) : null}
|
|
</YStack>
|
|
</MobileCard>
|
|
|
|
{members.length > 0 || search.trim().length > 0 ? (
|
|
<MobileInput
|
|
type="search"
|
|
value={search}
|
|
onChange={(e) => setSearch(e.target.value)}
|
|
placeholder={t('events.members.search', 'Search members')}
|
|
compact
|
|
/>
|
|
) : null}
|
|
|
|
{members.length > 0 ? (
|
|
<YStack space="$2">
|
|
<Text fontSize="$xs" fontWeight="700" color={muted}>
|
|
{t('events.members.filters.statusLabel', 'Status')}
|
|
</Text>
|
|
<XStack space="$2" flexWrap="wrap">
|
|
{statusOptions.map((option) => {
|
|
const isActive = statusFilter === option.key;
|
|
return (
|
|
<Pressable key={option.key} onPress={() => setStatusFilter(option.key)}>
|
|
<XStack
|
|
paddingHorizontal="$3"
|
|
paddingVertical="$1.5"
|
|
borderRadius={999}
|
|
borderWidth={1}
|
|
borderColor={isActive ? primary : border}
|
|
backgroundColor={isActive ? primary : 'transparent'}
|
|
>
|
|
<Text fontSize="$xs" fontWeight="700" color={isActive ? 'white' : text}>
|
|
{option.label}
|
|
</Text>
|
|
</XStack>
|
|
</Pressable>
|
|
);
|
|
})}
|
|
</XStack>
|
|
<Text fontSize="$xs" fontWeight="700" color={muted}>
|
|
{t('events.members.filters.roleLabel', 'Role')}
|
|
</Text>
|
|
<XStack space="$2" flexWrap="wrap">
|
|
{roleOptions.map((option) => {
|
|
const isActive = roleFilter === option.key;
|
|
return (
|
|
<Pressable key={option.key} onPress={() => setRoleFilter(option.key)}>
|
|
<XStack
|
|
paddingHorizontal="$3"
|
|
paddingVertical="$1.5"
|
|
borderRadius={999}
|
|
borderWidth={1}
|
|
borderColor={isActive ? primary : border}
|
|
backgroundColor={isActive ? primary : 'transparent'}
|
|
>
|
|
<Text fontSize="$xs" fontWeight="700" color={isActive ? 'white' : text}>
|
|
{option.label}
|
|
</Text>
|
|
</XStack>
|
|
</Pressable>
|
|
);
|
|
})}
|
|
</XStack>
|
|
</YStack>
|
|
) : null}
|
|
|
|
<MobileCard space="$3">
|
|
<Text fontSize="$md" fontWeight="800" color={textStrong}>
|
|
{t('events.members.listTitle', 'Team & Guests')}
|
|
</Text>
|
|
{loading ? (
|
|
<YStack space="$2">
|
|
{Array.from({ length: 4 }).map((_, idx) => (
|
|
<SkeletonCard key={`m-${idx}`} height={70} />
|
|
))}
|
|
</YStack>
|
|
) : members.length === 0 ? (
|
|
<YStack space="$2">
|
|
<Text fontSize="$sm" fontWeight="700" color={textStrong}>
|
|
{t('events.members.emptyTitle', 'Invite your team')}
|
|
</Text>
|
|
<Text fontSize="$xs" color={muted}>
|
|
{t('events.members.emptyBody', 'Send the first invite so helpers can access the event.')}
|
|
</Text>
|
|
</YStack>
|
|
) : (
|
|
<YStack space="$2">
|
|
{filteredMembers.length === 0 ? (
|
|
<YStack space="$1.5" padding="$2">
|
|
<Text fontSize="$sm" fontWeight="700" color={textStrong}>
|
|
{t('events.members.emptyFilteredTitle', 'No matching members')}
|
|
</Text>
|
|
<Text fontSize="$xs" color={muted}>
|
|
{t('events.members.emptyFilteredBody', 'Adjust your search or filters to see members.')}
|
|
</Text>
|
|
<Pressable
|
|
onPress={() => {
|
|
setSearch('');
|
|
setStatusFilter('all');
|
|
setRoleFilter('all');
|
|
}}
|
|
>
|
|
<Text fontSize="$xs" fontWeight="700" color={primary}>
|
|
{t('events.members.clearFilters', 'Clear filters')}
|
|
</Text>
|
|
</Pressable>
|
|
</YStack>
|
|
) : (
|
|
filteredMembers.map((member) => {
|
|
const statusInfo = resolveStatus(member.status);
|
|
return (
|
|
<MobileCard key={member.id} padding="$3" borderColor={border}>
|
|
<XStack alignItems="center" justifyContent="space-between">
|
|
<YStack space="$1">
|
|
<Text fontSize="$sm" fontWeight="700" color={textStrong}>
|
|
{member.name || member.email || t('events.members.fallbackName', 'Guest')}
|
|
</Text>
|
|
<Text fontSize="$xs" color={muted}>
|
|
{member.email ?? ''}
|
|
</Text>
|
|
<XStack space="$1.5" alignItems="center">
|
|
<PillBadge tone={statusInfo.tone}>
|
|
{statusInfo.label}
|
|
</PillBadge>
|
|
<PillBadge tone={member.role === 'tenant_admin' ? 'success' : 'muted'}>
|
|
{member.role === 'tenant_admin'
|
|
? t('events.members.admin', 'Admin')
|
|
: t('events.members.member', 'Member')}
|
|
</PillBadge>
|
|
</XStack>
|
|
</YStack>
|
|
<XStack space="$2">
|
|
<Pressable
|
|
aria-label={t('events.members.copyEmailLabel', 'Copy email')}
|
|
onPress={async () => {
|
|
if (!member.email) {
|
|
toast.error(t('events.members.copyEmailFailed', 'Kopieren nicht möglich'));
|
|
return;
|
|
}
|
|
try {
|
|
await navigator.clipboard.writeText(member.email);
|
|
toast.success(t('events.members.copyEmail', 'E-Mail kopiert'));
|
|
} catch {
|
|
toast.error(t('events.members.copyEmailFailed', 'Kopieren nicht möglich'));
|
|
}
|
|
}}
|
|
>
|
|
<Copy size={16} color={muted} />
|
|
</Pressable>
|
|
<Pressable aria-label={t('events.members.remove', 'Remove')} onPress={() => setConfirmRemove(member)}>
|
|
<Trash2 size={16} color={danger} />
|
|
</Pressable>
|
|
</XStack>
|
|
</XStack>
|
|
</MobileCard>
|
|
);
|
|
})
|
|
)}
|
|
</YStack>
|
|
)}
|
|
</MobileCard>
|
|
|
|
<MobileSheet
|
|
open={Boolean(confirmRemove)}
|
|
onClose={() => setConfirmRemove(null)}
|
|
title={t('events.members.confirmRemove', 'Mitglied entfernen?')}
|
|
footer={
|
|
<CTAButton
|
|
label={t('events.members.remove', 'Remove')}
|
|
onPress={() => {
|
|
if (confirmRemove) {
|
|
void handleRemove(confirmRemove);
|
|
}
|
|
setConfirmRemove(null);
|
|
}}
|
|
/>
|
|
}
|
|
bottomOffsetPx={120}
|
|
>
|
|
<Text fontSize={12.5} color={muted}>
|
|
{t('events.members.removeHint', 'Dieses Mitglied verliert den Zugang zum Event.')}
|
|
</Text>
|
|
<Text fontSize={13} fontWeight="700" color={textStrong}>
|
|
{confirmRemove?.name || confirmRemove?.email}
|
|
</Text>
|
|
</MobileSheet>
|
|
</MobileShell>
|
|
);
|
|
}
|