neues Admin UI Layout eingeführt. Alle Tests auf den neusten Stand gebracht.

resources/js/admin/mobile/EventMembersPage.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { UserPlus, Trash2, Copy, RefreshCcw } from 'lucide-react';
+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';
@@ -15,21 +15,24 @@ 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 [inviteLink, setInviteLink] = React.useState<string | null>(null);
   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'));
 
@@ -40,12 +43,6 @@ export default function MobileEventMembersPage() {
     try {
       const result = await getEventMembers(slug, 1);
       setMembers(result.data);
-      if (result.data.length) {
-        const pending = result.data.find((m) => m.status === 'pending' && m.permissions?.includes('invite_link'));
-        if (pending?.email) {
-          setInviteLink(`mailto:${pending.email}`);
-        }
-      }
     } catch (err) {
       if (!isAuthError(err)) {
         setError(getApiErrorMessage(err, t('events.errors.loadFailed', 'Mitglieder konnten nicht geladen werden.')));
@@ -59,13 +56,58 @@ export default function MobileEventMembersPage() {
     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 || !invite.email.trim()) return;
+    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: invite.email.trim(),
+        email: normalizedEmail,
         name: invite.name.trim() || undefined,
         role: invite.role,
       });
@@ -104,20 +146,20 @@ export default function MobileEventMembersPage() {
       onBack={back}
       headerActions={
         <HeaderActionButton onPress={() => load()} ariaLabel={t('common.refresh', 'Refresh')}>
-          <RefreshCcw size={18} color="#0f172a" />
+          <RefreshCcw size={18} color={textStrong} />
         </HeaderActionButton>
       }
     >
       {error ? (
         <MobileCard>
-          <Text fontWeight="700" color="#b91c1c">
+          <Text fontWeight="700" color={danger}>
             {error}
           </Text>
         </MobileCard>
       ) : null}
 
       <MobileCard space="$3">
-        <Text fontSize="$md" fontWeight="800" color="#111827">
+        <Text fontSize="$md" fontWeight="800" color={textStrong}>
           {t('events.members.inviteTitle', 'Invite Member')}
         </Text>
         <YStack space="$2">
@@ -126,7 +168,7 @@ export default function MobileEventMembersPage() {
               type="text"
               value={invite.name}
               onChange={(e) => setInvite((prev) => ({ ...prev, name: e.target.value }))}
-              placeholder="Alex Example"
+              placeholder={t('events.members.namePlaceholder', 'Alex Example')}
             />
           </MobileField>
           <MobileField label={t('events.members.email', 'Email')}>
@@ -134,7 +176,7 @@ export default function MobileEventMembersPage() {
               type="email"
               value={invite.email}
               onChange={(e) => setInvite((prev) => ({ ...prev, email: e.target.value }))}
-              placeholder="alex@example.com"
+              placeholder={t('events.members.emailPlaceholder', 'alex@example.com')}
               ref={emailInputRef}
             />
           </MobileField>
@@ -147,46 +189,91 @@ export default function MobileEventMembersPage() {
               <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()} />
+          <CTAButton
+            label={saving ? t('common.saving', 'Saving...') : t('events.members.invite', 'Send Invite')}
+            onPress={() => handleInvite()}
+            disabled={!canInvite}
+          />
           {saving ? (
-            <Text fontSize="$xs" color="#4b5563">
+            <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>
 
-      <MobileInput
-        type="search"
-        value={search}
-        onChange={(e) => setSearch(e.target.value)}
-        placeholder={t('events.members.search', 'Search members')}
-        compact
-      />
+      {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="#111827">
+        <Text fontSize="$md" fontWeight="800" color={textStrong}>
           {t('events.members.listTitle', 'Team & Guests')}
         </Text>
-        {inviteLink ? (
-          <Pressable
-            onPress={async () => {
-              try {
-                await navigator.clipboard.writeText(inviteLink);
-                toast.success(t('events.members.copyInvite', 'Einladungslink kopiert'));
-              } catch {
-                toast.error(t('events.members.copyInviteFailed', 'Kopieren nicht möglich'));
-              }
-            }}
-          >
-            <XStack alignItems="center" space="$2" marginBottom="$2">
-              <Copy size={16} color="#007AFF" />
-              <Text fontSize="$sm" color="#007AFF">
-                {t('events.members.copyInviteLabel', 'Invite Link kopieren')}
-              </Text>
-            </XStack>
-          </Pressable>
-        ) : null}
         {loading ? (
           <YStack space="$2">
             {Array.from({ length: 4 }).map((_, idx) => (
@@ -195,72 +282,86 @@ export default function MobileEventMembersPage() {
           </YStack>
         ) : members.length === 0 ? (
           <YStack space="$2">
-            <Text fontSize="$sm" fontWeight="700" color="#111827">
+            <Text fontSize="$sm" fontWeight="700" color={textStrong}>
               {t('events.members.emptyTitle', 'Invite your team')}
             </Text>
-            <Text fontSize="$xs" color="#4b5563">
+            <Text fontSize="$xs" color={muted}>
               {t('events.members.emptyBody', 'Send the first invite so helpers can access the event.')}
             </Text>
-            <CTAButton
-              label={t('events.members.emptyAction', 'Send first invite')}
-              onPress={() => emailInputRef.current?.focus()}
-              fullWidth={false}
-            />
           </YStack>
         ) : (
           <YStack space="$2">
-            {members
-              .filter((member) => {
-                if (!search.trim()) return true;
-                const hay = `${member.name ?? ''} ${member.email ?? ''}`.toLowerCase();
-                return hay.includes(search.toLowerCase());
-              })
-              .map((member) => (
-                <MobileCard key={member.id} padding="$3" borderColor="#e5e7eb">
-                  <XStack alignItems="center" justifyContent="space-between">
-                    <YStack space="$1">
-                      <Text fontSize="$sm" fontWeight="700" color="#111827">
-                        {member.name || member.email || 'Gast'}
-                      </Text>
-                      <Text fontSize="$xs" color="#6b7280">
-                        {member.email ?? ''}
-                      </Text>
-                      <XStack space="$1.5" alignItems="center">
-                        <PillBadge tone={member.status === 'pending' ? 'warning' : 'muted'}>
-                          {member.status ?? 'pending'}
-                        </PillBadge>
-                        <PillBadge tone={member.role === 'tenant_admin' ? 'success' : 'muted'}>
-                          {member.role === 'tenant_admin'
-                            ? t('events.members.admin', 'Admin')
-                            : t('events.members.member', 'Member')}
-                        </PillBadge>
+            {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>
-                    </YStack>
-                    <XStack space="$2">
-                      <Pressable
-                        onPress={async () => {
-                          const link = inviteLink || (member.email ? `mailto:${member.email}` : null);
-                          if (!link) {
-                            toast.error(t('events.members.copyInviteFailed', 'Kopieren nicht möglich'));
-                            return;
-                          }
-                          try {
-                            await navigator.clipboard.writeText(link);
-                            toast.success(t('events.members.copyInvite', 'Einladungslink kopiert'));
-                          } catch {
-                            toast.error(t('events.members.copyInviteFailed', 'Kopieren nicht möglich'));
-                          }
-                        }}
-                      >
-                        <Copy size={16} color="#6b7280" />
-                      </Pressable>
-                      <Pressable onPress={() => setConfirmRemove(member)}>
-                        <Trash2 size={16} color="#ef4444" />
-                      </Pressable>
                     </XStack>
-                  </XStack>
-                </MobileCard>
-              ))}
+                  </MobileCard>
+                );
+              })
+            )}
           </YStack>
         )}
       </MobileCard>
@@ -282,10 +383,10 @@ export default function MobileEventMembersPage() {
         }
         bottomOffsetPx={120}
       >
-        <Text fontSize={12.5} color="#4b5563">
+        <Text fontSize={12.5} color={muted}>
           {t('events.members.removeHint', 'Dieses Mitglied verliert den Zugang zum Event.')}
         </Text>
-        <Text fontSize={13} fontWeight="700" color="#111827">
+        <Text fontSize={13} fontWeight="700" color={textStrong}>
           {confirmRemove?.name || confirmRemove?.email}
         </Text>
       </MobileSheet>