feat: Implement mobile application and lead processing utilities.

innungsapp/apps/mobile/components/members/MemberCard.tsx

@@ -0,0 +1,115 @@
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native'
+import { Ionicons } from '@expo/vector-icons'
+import { Avatar } from '@/components/ui/Avatar'
+
+interface MemberCardProps {
+  member: {
+    id: string
+    name: string
+    betrieb: string
+    sparte: string
+    ort: string
+    istAusbildungsbetrieb: boolean
+    avatarUrl: string | null
+  }
+  onPress: () => void
+}
+
+export function MemberCard({ member, onPress }: MemberCardProps) {
+  return (
+    <TouchableOpacity onPress={onPress} style={styles.card} activeOpacity={0.76}>
+      <Avatar name={member.name} imageUrl={member.avatarUrl ?? undefined} size={48} />
+
+      <View style={styles.info}>
+        <Text style={styles.name} numberOfLines={1}>
+          {member.name}
+        </Text>
+        <Text style={styles.company} numberOfLines={1}>
+          {member.betrieb}
+        </Text>
+        <View style={styles.tagsRow}>
+          <View style={styles.tag}>
+            <Text style={styles.tagText}>{member.sparte}</Text>
+          </View>
+          <Text style={styles.separator}>·</Text>
+          <Text style={styles.location}>{member.ort}</Text>
+          {member.istAusbildungsbetrieb && (
+            <View style={styles.ausbildungTag}>
+              <Text style={styles.ausbildungText}>Ausbildung</Text>
+            </View>
+          )}
+        </View>
+      </View>
+
+      <Ionicons name="chevron-forward" size={18} color="#D4D4D8" />
+    </TouchableOpacity>
+  )
+}
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: '#FFFFFF',
+    borderRadius: 16,
+    padding: 14,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+    shadowColor: '#1C1917',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.08,
+    shadowRadius: 12,
+    elevation: 3,
+  },
+  info: {
+    flex: 1,
+    minWidth: 0,
+  },
+  name: {
+    fontSize: 15,
+    fontWeight: '600',
+    color: '#0F172A',
+    letterSpacing: -0.2,
+  },
+  company: {
+    fontSize: 13,
+    color: '#475569',
+    marginTop: 2,
+  },
+  tagsRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flexWrap: 'wrap',
+    gap: 6,
+    marginTop: 6,
+  },
+  tag: {
+    backgroundColor: '#F4F4F5',
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 99,
+  },
+  tagText: {
+    fontSize: 11,
+    color: '#475569',
+    fontWeight: '500',
+  },
+  separator: {
+    fontSize: 11,
+    color: '#D4D4D8',
+  },
+  location: {
+    fontSize: 11,
+    color: '#64748B',
+  },
+  ausbildungTag: {
+    backgroundColor: '#F0FDF4',
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 99,
+  },
+  ausbildungText: {
+    fontSize: 11,
+    color: '#15803D',
+    fontWeight: '600',
+  },
+})