feat: Implement mobile application and lead processing utilities.
This commit is contained in:
@@ -1,107 +1,238 @@
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
ScrollView,
|
||||
TouchableOpacity,
|
||||
Linking,
|
||||
ActivityIndicator,
|
||||
View, Text, ScrollView, TouchableOpacity, Linking, ActivityIndicator, StyleSheet,
|
||||
} from 'react-native'
|
||||
import { SafeAreaView } from 'react-native-safe-area-context'
|
||||
import { useLocalSearchParams, useRouter } from 'expo-router'
|
||||
import { trpc } from '@/lib/trpc'
|
||||
import { Ionicons } from '@expo/vector-icons'
|
||||
import { useMemberDetail } from '@/hooks/useMembers'
|
||||
import { Avatar } from '@/components/ui/Avatar'
|
||||
|
||||
export default function MemberDetailScreen() {
|
||||
const { id } = useLocalSearchParams<{ id: string }>()
|
||||
const router = useRouter()
|
||||
const { data: member, isLoading } = trpc.members.byId.useQuery({ id })
|
||||
const { data: member, isLoading } = useMemberDetail(id)
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<SafeAreaView className="flex-1 bg-white items-center justify-center">
|
||||
<ActivityIndicator size="large" color="#E63946" />
|
||||
<SafeAreaView style={styles.loadingContainer}>
|
||||
<ActivityIndicator size="large" color="#003B7E" />
|
||||
</SafeAreaView>
|
||||
)
|
||||
}
|
||||
|
||||
if (!member) return null
|
||||
|
||||
const fields = [
|
||||
member.sparte ? ['SPARTE', member.sparte] : null,
|
||||
member.ort ? ['ORT', member.ort] : null,
|
||||
member.seit ? ['MITGLIED SEIT', String(member.seit)] : null,
|
||||
].filter(Boolean) as [string, string][]
|
||||
|
||||
return (
|
||||
<SafeAreaView className="flex-1 bg-gray-50" edges={['top']}>
|
||||
{/* Header */}
|
||||
<View className="flex-row items-center px-4 py-3 bg-white border-b border-gray-100">
|
||||
<TouchableOpacity onPress={() => router.back()} className="mr-3">
|
||||
<Text className="text-brand-500 text-base">← Zurück</Text>
|
||||
<SafeAreaView style={styles.safeArea} edges={['top']}>
|
||||
{/* Nav */}
|
||||
<View style={styles.navBar}>
|
||||
<TouchableOpacity onPress={() => router.back()} style={styles.backBtn} activeOpacity={0.7}>
|
||||
<Ionicons name="chevron-back" size={20} color="#003B7E" />
|
||||
<Text style={styles.backText}>Zurück</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<View style={styles.divider} />
|
||||
|
||||
<ScrollView>
|
||||
{/* Profile Header */}
|
||||
<View className="bg-white px-6 py-8 items-center border-b border-gray-100">
|
||||
<Avatar
|
||||
name={member.name}
|
||||
imageUrl={member.avatarUrl ?? undefined}
|
||||
size={80}
|
||||
/>
|
||||
<Text className="text-2xl font-bold text-gray-900 mt-4">{member.name}</Text>
|
||||
<Text className="text-gray-500 mt-1">{member.betrieb}</Text>
|
||||
<ScrollView showsVerticalScrollIndicator={false}>
|
||||
{/* Hero */}
|
||||
<View style={styles.hero}>
|
||||
<Avatar name={member.name} imageUrl={member.avatarUrl ?? undefined} size={80} shadow />
|
||||
<Text style={styles.heroName}>{member.name}</Text>
|
||||
<Text style={styles.heroCompany}>{member.betrieb}</Text>
|
||||
{member.istAusbildungsbetrieb && (
|
||||
<View className="mt-2 bg-green-100 px-3 py-1 rounded-full">
|
||||
<Text className="text-green-700 text-xs font-medium">
|
||||
🎓 Ausbildungsbetrieb
|
||||
</Text>
|
||||
<View style={styles.ausbildungPill}>
|
||||
<Ionicons name="school" size={12} color="#15803D" />
|
||||
<Text style={styles.ausbildungText}>Ausbildungsbetrieb</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<View style={styles.divider} />
|
||||
|
||||
{/* Details */}
|
||||
<View className="bg-white mx-4 mt-4 rounded-2xl overflow-hidden border border-gray-100">
|
||||
<InfoRow label="Sparte" value={member.sparte} />
|
||||
<InfoRow label="Ort" value={member.ort} />
|
||||
{member.seit && (
|
||||
<InfoRow label="Mitglied seit" value={String(member.seit)} />
|
||||
)}
|
||||
<View style={styles.card}>
|
||||
{fields.map(([label, value], idx) => (
|
||||
<View
|
||||
key={label}
|
||||
style={[styles.fieldRow, idx < fields.length - 1 && styles.fieldRowBorder]}
|
||||
>
|
||||
<Text style={styles.fieldLabel}>{label}</Text>
|
||||
<Text style={styles.fieldValue}>{value}</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
|
||||
{/* Contact Buttons */}
|
||||
<View className="mx-4 mt-4 gap-3">
|
||||
{/* Actions */}
|
||||
<View style={styles.actions}>
|
||||
{member.telefon && (
|
||||
<TouchableOpacity
|
||||
onPress={() => Linking.openURL(`tel:${member.telefon}`)}
|
||||
className="bg-brand-500 rounded-2xl py-4 flex-row items-center justify-center gap-2"
|
||||
style={styles.btnPrimary}
|
||||
activeOpacity={0.82}
|
||||
>
|
||||
<Text className="text-white text-xl">📞</Text>
|
||||
<Text className="text-white font-semibold text-base">
|
||||
Anrufen
|
||||
</Text>
|
||||
<Ionicons name="call" size={18} color="#FFFFFF" />
|
||||
<Text style={styles.btnPrimaryText}>Anrufen</Text>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
<TouchableOpacity
|
||||
onPress={() =>
|
||||
Linking.openURL(
|
||||
`mailto:${member.email}?subject=InnungsApp%20Anfrage`
|
||||
)
|
||||
}
|
||||
className="bg-white border border-gray-200 rounded-2xl py-4 flex-row items-center justify-center gap-2"
|
||||
onPress={() => Linking.openURL(`mailto:${member.email}`)}
|
||||
style={styles.btnSecondary}
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
<Text className="text-gray-900 text-xl">✉️</Text>
|
||||
<Text className="text-gray-900 font-semibold text-base">
|
||||
E-Mail senden
|
||||
</Text>
|
||||
<Ionicons name="mail-outline" size={18} color="#0F172A" />
|
||||
<Text style={styles.btnSecondaryText}>E-Mail senden</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<View className="h-8" />
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
)
|
||||
}
|
||||
|
||||
function InfoRow({ label, value }: { label: string; value: string }) {
|
||||
return (
|
||||
<View className="flex-row items-center px-4 py-3 border-b border-gray-50 last:border-0">
|
||||
<Text className="text-sm text-gray-500 w-32">{label}</Text>
|
||||
<Text className="text-sm text-gray-900 font-medium flex-1">{value}</Text>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
const styles = StyleSheet.create({
|
||||
safeArea: {
|
||||
flex: 1,
|
||||
backgroundColor: '#F8FAFC',
|
||||
},
|
||||
loadingContainer: {
|
||||
flex: 1,
|
||||
backgroundColor: '#FFFFFF',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
navBar: {
|
||||
backgroundColor: '#FFFFFF',
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 12,
|
||||
},
|
||||
backBtn: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 2,
|
||||
},
|
||||
backText: {
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
color: '#003B7E',
|
||||
},
|
||||
divider: {
|
||||
height: 1,
|
||||
backgroundColor: '#E2E8F0',
|
||||
},
|
||||
hero: {
|
||||
backgroundColor: '#FFFFFF',
|
||||
alignItems: 'center',
|
||||
paddingVertical: 32,
|
||||
paddingHorizontal: 24,
|
||||
},
|
||||
heroName: {
|
||||
fontSize: 21,
|
||||
fontWeight: '800',
|
||||
color: '#0F172A',
|
||||
letterSpacing: -0.4,
|
||||
marginTop: 14,
|
||||
textAlign: 'center',
|
||||
},
|
||||
heroCompany: {
|
||||
fontSize: 14,
|
||||
color: '#475569',
|
||||
marginTop: 3,
|
||||
textAlign: 'center',
|
||||
},
|
||||
ausbildungPill: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 5,
|
||||
backgroundColor: '#F0FDF4',
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 6,
|
||||
borderRadius: 99,
|
||||
marginTop: 10,
|
||||
},
|
||||
ausbildungText: {
|
||||
fontSize: 12,
|
||||
color: '#15803D',
|
||||
fontWeight: '600',
|
||||
},
|
||||
card: {
|
||||
backgroundColor: '#FFFFFF',
|
||||
marginHorizontal: 16,
|
||||
marginTop: 16,
|
||||
borderRadius: 16,
|
||||
overflow: 'hidden',
|
||||
shadowColor: '#1C1917',
|
||||
shadowOffset: { width: 0, height: 1 },
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 8,
|
||||
elevation: 1,
|
||||
},
|
||||
fieldRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 13,
|
||||
},
|
||||
fieldRowBorder: {
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#F9F9F9',
|
||||
},
|
||||
fieldLabel: {
|
||||
fontSize: 10,
|
||||
fontWeight: '700',
|
||||
color: '#64748B',
|
||||
letterSpacing: 0.8,
|
||||
width: 110,
|
||||
},
|
||||
fieldValue: {
|
||||
flex: 1,
|
||||
fontSize: 14,
|
||||
fontWeight: '500',
|
||||
color: '#0F172A',
|
||||
},
|
||||
actions: {
|
||||
marginHorizontal: 16,
|
||||
marginTop: 16,
|
||||
marginBottom: 32,
|
||||
gap: 10,
|
||||
},
|
||||
btnPrimary: {
|
||||
backgroundColor: '#003B7E',
|
||||
borderRadius: 14,
|
||||
paddingVertical: 15,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: 8,
|
||||
shadowColor: '#003B7E',
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.24,
|
||||
shadowRadius: 10,
|
||||
elevation: 5,
|
||||
},
|
||||
btnPrimaryText: {
|
||||
color: '#FFFFFF',
|
||||
fontSize: 15,
|
||||
fontWeight: '600',
|
||||
letterSpacing: 0.2,
|
||||
},
|
||||
btnSecondary: {
|
||||
backgroundColor: '#FFFFFF',
|
||||
borderRadius: 14,
|
||||
paddingVertical: 15,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: 8,
|
||||
borderWidth: 1,
|
||||
borderColor: '#E2E8F0',
|
||||
},
|
||||
btnSecondaryText: {
|
||||
color: '#0F172A',
|
||||
fontSize: 15,
|
||||
fontWeight: '600',
|
||||
},
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user