feat: Implement mobile application and lead processing utilities.

innungsapp/apps/mobile/app/(app)/members/index.tsx

@@ -1,14 +1,10 @@
 import {
-  View,
-  Text,
-  FlatList,
-  TextInput,
-  TouchableOpacity,
-  RefreshControl,
+  View, Text, FlatList, TextInput, TouchableOpacity, RefreshControl, StyleSheet,
 } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
 import { useRouter } from 'expo-router'
-import { trpc } from '@/lib/trpc'
+import { Ionicons } from '@expo/vector-icons'
+import { useMembersList } from '@/hooks/useMembers'
 import { useMembersFilterStore } from '@/store/members.store'
 import { MemberCard } from '@/components/members/MemberCard'
 import { EmptyState } from '@/components/ui/EmptyState'
@@ -20,78 +16,70 @@ export default function MembersScreen() {
   const nurAusbildungsbetriebe = useMembersFilterStore((s) => s.nurAusbildungsbetriebe)
   const setSearch = useMembersFilterStore((s) => s.setSearch)
   const setNurAusbildungsbetriebe = useMembersFilterStore((s) => s.setNurAusbildungsbetriebe)
-
-  const { data, isLoading, refetch, isRefetching } = trpc.members.list.useQuery({
-    search: search || undefined,
-    ausbildungsbetrieb: nurAusbildungsbetriebe || undefined,
-    status: 'aktiv',
-  })
+  const { data, isLoading, refetch, isRefetching } = useMembersList()
 
   return (
-    <SafeAreaView className="flex-1 bg-gray-50" edges={['top']}>
+    <SafeAreaView style={styles.safeArea} edges={['top']}>
       {/* Header */}
-      <View className="bg-white px-4 pt-3 pb-2 border-b border-gray-100">
-        <Text className="text-xl font-bold text-gray-900 mb-3">Mitglieder</Text>
+      <View style={styles.header}>
+        <View style={styles.titleRow}>
+          <Text style={styles.screenTitle}>Mitglieder</Text>
+          {data && (
+            <Text style={styles.countText}>{data.length} gesamt</Text>
+          )}
+        </View>
 
-        {/* Search */}
-        <View className="flex-row items-center bg-gray-100 rounded-xl px-3 py-2 mb-2">
-          <Text className="text-gray-400 mr-2">🔍</Text>
+        {/* Search bar */}
+        <View style={styles.searchBar}>
+          <Ionicons name="search-outline" size={16} color="#64748B" />
           <TextInput
-            className="flex-1 text-sm text-gray-900"
-            placeholder="Name, Betrieb, Ort, Sparte..."
-            placeholderTextColor="#9ca3af"
+            style={styles.searchInput}
+            placeholder="Name, Betrieb, Ort, Sparte ..."
+            placeholderTextColor="#64748B"
             value={search}
             onChangeText={setSearch}
             clearButtonMode="while-editing"
           />
         </View>
 
-        {/* Filter: Ausbildungsbetriebe */}
+        {/* Training filter */}
         <TouchableOpacity
           onPress={() => setNurAusbildungsbetriebe(!nurAusbildungsbetriebe)}
-          className="flex-row items-center gap-2 py-1"
+          style={styles.toggleRow}
+          activeOpacity={0.7}
         >
-          <View
-            className={`w-5 h-5 rounded border-2 items-center justify-center ${
-              nurAusbildungsbetriebe
-                ? 'bg-brand-500 border-brand-500'
-                : 'border-gray-300 bg-white'
-            }`}
-          >
+          <View style={[styles.checkbox, nurAusbildungsbetriebe && styles.checkboxActive]}>
             {nurAusbildungsbetriebe && (
-              <Text className="text-white text-xs">✓</Text>
+              <Ionicons name="checkmark" size={11} color="#FFFFFF" />
             )}
           </View>
-          <Text className="text-sm text-gray-600">Nur Ausbildungsbetriebe</Text>
+          <Text style={styles.toggleLabel}>Nur Ausbildungsbetriebe</Text>
         </TouchableOpacity>
       </View>
 
-      {/* List */}
+      <View style={styles.divider} />
+
       {isLoading ? (
         <LoadingSpinner />
       ) : (
         <FlatList
           data={data ?? []}
           keyExtractor={(item) => item.id}
-          contentContainerStyle={{ padding: 12, gap: 8 }}
+          contentContainerStyle={styles.list}
           refreshControl={
-            <RefreshControl
-              refreshing={isRefetching}
-              onRefresh={refetch}
-              tintColor="#E63946"
-            />
+            <RefreshControl refreshing={isRefetching} onRefresh={refetch} tintColor="#003B7E" />
           }
           renderItem={({ item }) => (
             <MemberCard
               member={item}
-              onPress={() => router.push(`/(app)/members/${item.id}`)}
+              onPress={() => router.push(`/(app)/members/${item.id}` as never)}
             />
           )}
           ListEmptyComponent={
             <EmptyState
-              icon="👥"
+              icon="people-outline"
               title="Keine Mitglieder"
-              subtitle={search ? 'Keine Treffer für Ihre Suche' : 'Noch keine Mitglieder'}
+              subtitle={search ? 'Keine Treffer für deine Suche' : 'Noch keine Mitglieder eingetragen'}
             />
           }
         />
@@ -99,3 +87,81 @@ export default function MembersScreen() {
     </SafeAreaView>
   )
 }
+
+const styles = StyleSheet.create({
+  safeArea: {
+    flex: 1,
+    backgroundColor: '#F8FAFC',
+  },
+  header: {
+    backgroundColor: '#FFFFFF',
+    paddingHorizontal: 20,
+    paddingTop: 18,
+    paddingBottom: 14,
+  },
+  titleRow: {
+    flexDirection: 'row',
+    alignItems: 'baseline',
+    justifyContent: 'space-between',
+    marginBottom: 14,
+  },
+  screenTitle: {
+    fontSize: 28,
+    fontWeight: '800',
+    color: '#0F172A',
+    letterSpacing: -0.5,
+  },
+  countText: {
+    fontSize: 13,
+    color: '#64748B',
+    fontWeight: '500',
+  },
+  searchBar: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#F4F4F5',
+    borderRadius: 14,
+    paddingHorizontal: 12,
+    paddingVertical: 11,
+    gap: 8,
+    marginBottom: 10,
+  },
+  searchInput: {
+    flex: 1,
+    fontSize: 14,
+    color: '#0F172A',
+  },
+  toggleRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    paddingTop: 2,
+  },
+  checkbox: {
+    width: 18,
+    height: 18,
+    borderRadius: 5,
+    borderWidth: 1.5,
+    borderColor: '#D4D4D8',
+    backgroundColor: '#FFFFFF',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  checkboxActive: {
+    backgroundColor: '#003B7E',
+    borderColor: '#003B7E',
+  },
+  toggleLabel: {
+    fontSize: 13,
+    color: '#52525B',
+    fontWeight: '500',
+  },
+  divider: {
+    height: 1,
+    backgroundColor: '#E2E8F0',
+  },
+  list: {
+    padding: 16,
+    gap: 10,
+  },
+})