feat: Implement mobile application and lead processing utilities.
This commit is contained in:
@@ -1,97 +1,330 @@
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
ScrollView,
|
||||
TouchableOpacity,
|
||||
Linking,
|
||||
ActivityIndicator,
|
||||
} from 'react-native'
|
||||
import { View, Text, ScrollView, TouchableOpacity, Alert, StyleSheet } from 'react-native'
|
||||
import { SafeAreaView } from 'react-native-safe-area-context'
|
||||
import { trpc } from '@/lib/trpc'
|
||||
import { Ionicons } from '@expo/vector-icons'
|
||||
import { useAuth } from '@/hooks/useAuth'
|
||||
import { Avatar } from '@/components/ui/Avatar'
|
||||
import { MOCK_MEMBER_ME } from '@/lib/mock-data'
|
||||
|
||||
type Item = {
|
||||
label: string
|
||||
icon: React.ComponentProps<typeof Ionicons>['name']
|
||||
badge?: string
|
||||
}
|
||||
|
||||
const MENU_ITEMS: Item[] = [
|
||||
{ label: 'Persoenliche Daten', icon: 'person-outline' },
|
||||
{ label: 'Betriebsdaten', icon: 'business-outline', badge: 'Aktiv' },
|
||||
{ label: 'Mitteilungen', icon: 'notifications-outline', badge: '2' },
|
||||
{ label: 'Sicherheit & Login', icon: 'shield-checkmark-outline' },
|
||||
{ label: 'Hilfe & Support', icon: 'help-circle-outline' },
|
||||
]
|
||||
|
||||
export default function ProfilScreen() {
|
||||
const { signOut } = useAuth()
|
||||
const { data: member, isLoading } = trpc.members.me.useQuery()
|
||||
const member = MOCK_MEMBER_ME
|
||||
|
||||
const initials = member.name
|
||||
.split(' ')
|
||||
.slice(0, 2)
|
||||
.map((chunk) => chunk[0]?.toUpperCase() ?? '')
|
||||
.join('')
|
||||
|
||||
const openPlaceholder = () => {
|
||||
Alert.alert('Hinweis', 'Dieser Bereich folgt in einer naechsten Version.')
|
||||
}
|
||||
|
||||
return (
|
||||
<SafeAreaView className="flex-1 bg-gray-50" edges={['top']}>
|
||||
<View className="bg-white px-4 py-3 border-b border-gray-100">
|
||||
<Text className="text-xl font-bold text-gray-900">Mein Profil</Text>
|
||||
</View>
|
||||
|
||||
<ScrollView>
|
||||
{isLoading ? (
|
||||
<View className="py-16 items-center">
|
||||
<ActivityIndicator color="#E63946" />
|
||||
<SafeAreaView style={styles.safeArea} edges={['top']}>
|
||||
<ScrollView contentContainerStyle={styles.content} showsVerticalScrollIndicator={false}>
|
||||
<View style={styles.hero}>
|
||||
<View style={styles.avatarWrap}>
|
||||
<Text style={styles.avatarText}>{initials}</Text>
|
||||
<TouchableOpacity style={styles.settingsBtn} activeOpacity={0.8} onPress={openPlaceholder}>
|
||||
<Ionicons name="settings-outline" size={15} color="#64748B" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
) : member ? (
|
||||
<>
|
||||
{/* Profile */}
|
||||
<View className="bg-white px-4 py-8 items-center border-b border-gray-100">
|
||||
<Avatar name={member.name} size={72} />
|
||||
<Text className="text-xl font-bold text-gray-900 mt-4">{member.name}</Text>
|
||||
<Text className="text-gray-500 mt-1">{member.betrieb}</Text>
|
||||
<Text className="text-gray-400 text-sm mt-0.5">{member.org.name}</Text>
|
||||
<Text style={styles.name}>{member.name}</Text>
|
||||
<Text style={styles.role}>Innungsgeschaeftsfuehrer</Text>
|
||||
<View style={styles.badgesRow}>
|
||||
<View style={styles.statusBadge}>
|
||||
<Text style={styles.statusBadgeText}>Admin-Status</Text>
|
||||
</View>
|
||||
|
||||
{/* Member Details */}
|
||||
<View className="bg-white mx-4 mt-4 rounded-2xl overflow-hidden border border-gray-100">
|
||||
<InfoRow label="E-Mail" value={member.email} />
|
||||
{member.telefon && <InfoRow label="Telefon" value={member.telefon} />}
|
||||
<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.statusBadge, styles.verifyBadge]}>
|
||||
<Text style={[styles.statusBadgeText, styles.verifyBadgeText]}>Verifiziert</Text>
|
||||
</View>
|
||||
|
||||
<View className="mx-4 mt-2">
|
||||
<Text className="text-xs text-gray-400 px-1">
|
||||
Änderungen an Ihren Daten nehmen Sie über die Innungsgeschäftsstelle vor.
|
||||
</Text>
|
||||
</View>
|
||||
</>
|
||||
) : null}
|
||||
|
||||
{/* Links */}
|
||||
<View className="bg-white mx-4 mt-4 rounded-2xl overflow-hidden border border-gray-100">
|
||||
<TouchableOpacity
|
||||
onPress={() => Linking.openURL('https://innungsapp.de/datenschutz')}
|
||||
className="flex-row items-center justify-between px-4 py-3.5 border-b border-gray-50"
|
||||
>
|
||||
<Text className="text-gray-700">Datenschutzerklärung</Text>
|
||||
<Text className="text-gray-400">›</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
onPress={() => Linking.openURL('https://innungsapp.de/impressum')}
|
||||
className="flex-row items-center justify-between px-4 py-3.5"
|
||||
>
|
||||
<Text className="text-gray-700">Impressum</Text>
|
||||
<Text className="text-gray-400">›</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Logout */}
|
||||
<View className="mx-4 mt-4">
|
||||
<TouchableOpacity
|
||||
onPress={signOut}
|
||||
className="bg-red-50 border border-red-200 rounded-2xl py-4 items-center"
|
||||
>
|
||||
<Text className="text-red-600 font-semibold">Abmelden</Text>
|
||||
</TouchableOpacity>
|
||||
<Text style={styles.sectionTitle}>Mein Account</Text>
|
||||
<View style={styles.menuCard}>
|
||||
{MENU_ITEMS.map((item, index) => (
|
||||
<TouchableOpacity
|
||||
key={item.label}
|
||||
style={[styles.menuRow, index < MENU_ITEMS.length - 1 && styles.menuRowBorder]}
|
||||
activeOpacity={0.82}
|
||||
onPress={openPlaceholder}
|
||||
>
|
||||
<View style={styles.menuLeft}>
|
||||
<View style={styles.menuIcon}>
|
||||
<Ionicons name={item.icon} size={18} color="#475569" />
|
||||
</View>
|
||||
<Text style={styles.menuLabel}>{item.label}</Text>
|
||||
</View>
|
||||
<View style={styles.menuRight}>
|
||||
{item.badge ? (
|
||||
<View style={[styles.rowBadge, item.badge === 'Aktiv' ? styles.rowBadgeActive : styles.rowBadgeAlert]}>
|
||||
<Text style={styles.rowBadgeText}>{item.badge}</Text>
|
||||
</View>
|
||||
) : null}
|
||||
<Ionicons name="chevron-forward" size={16} color="#94A3B8" />
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
|
||||
<View className="h-8" />
|
||||
<Text style={styles.sectionTitle}>Unterstuetzung</Text>
|
||||
<View style={styles.supportCard}>
|
||||
<Text style={styles.supportTitle}>Probleme oder Fragen?</Text>
|
||||
<Text style={styles.supportText}>
|
||||
Unser Support-Team hilft Ihnen gerne bei technischen Schwierigkeiten weiter.
|
||||
</Text>
|
||||
<TouchableOpacity style={styles.supportBtn} activeOpacity={0.84} onPress={openPlaceholder}>
|
||||
<Text style={styles.supportBtnText}>Support kontaktieren</Text>
|
||||
</TouchableOpacity>
|
||||
<Ionicons name="help-circle-outline" size={70} color="rgba(255,255,255,0.12)" style={styles.supportIcon} />
|
||||
</View>
|
||||
|
||||
<TouchableOpacity style={styles.logoutBtn} activeOpacity={0.84} onPress={() => void signOut()}>
|
||||
<Ionicons name="log-out-outline" size={20} color="#B91C1C" />
|
||||
<Text style={styles.logoutText}>Abmelden</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<Text style={styles.footer}>InnungsApp Version 2.4.0</Text>
|
||||
</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-28">{label}</Text>
|
||||
<Text className="text-sm text-gray-900 flex-1">{value}</Text>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
const styles = StyleSheet.create({
|
||||
safeArea: {
|
||||
flex: 1,
|
||||
backgroundColor: '#F8FAFC',
|
||||
},
|
||||
content: {
|
||||
paddingHorizontal: 18,
|
||||
paddingBottom: 30,
|
||||
gap: 14,
|
||||
},
|
||||
hero: {
|
||||
backgroundColor: '#FFFFFF',
|
||||
alignItems: 'center',
|
||||
paddingTop: 24,
|
||||
paddingBottom: 18,
|
||||
borderRadius: 22,
|
||||
borderWidth: 1,
|
||||
borderColor: '#E2E8F0',
|
||||
marginTop: 8,
|
||||
},
|
||||
avatarWrap: {
|
||||
position: 'relative',
|
||||
},
|
||||
avatarText: {
|
||||
width: 94,
|
||||
height: 94,
|
||||
borderRadius: 47,
|
||||
backgroundColor: '#DBEAFE',
|
||||
borderWidth: 4,
|
||||
borderColor: '#FFFFFF',
|
||||
overflow: 'hidden',
|
||||
textAlign: 'center',
|
||||
textAlignVertical: 'center',
|
||||
color: '#003B7E',
|
||||
fontSize: 34,
|
||||
fontWeight: '800',
|
||||
includeFontPadding: false,
|
||||
},
|
||||
settingsBtn: {
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
bottom: 2,
|
||||
width: 30,
|
||||
height: 30,
|
||||
borderRadius: 15,
|
||||
backgroundColor: '#FFFFFF',
|
||||
borderWidth: 1,
|
||||
borderColor: '#E2E8F0',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
name: {
|
||||
marginTop: 14,
|
||||
fontSize: 24,
|
||||
fontWeight: '800',
|
||||
color: '#0F172A',
|
||||
},
|
||||
role: {
|
||||
marginTop: 2,
|
||||
fontSize: 12,
|
||||
fontWeight: '700',
|
||||
letterSpacing: 0.5,
|
||||
color: '#64748B',
|
||||
textTransform: 'uppercase',
|
||||
},
|
||||
badgesRow: {
|
||||
marginTop: 10,
|
||||
flexDirection: 'row',
|
||||
gap: 8,
|
||||
},
|
||||
statusBadge: {
|
||||
backgroundColor: '#DCFCE7',
|
||||
borderRadius: 999,
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 4,
|
||||
},
|
||||
statusBadgeText: {
|
||||
color: '#166534',
|
||||
fontSize: 11,
|
||||
fontWeight: '700',
|
||||
},
|
||||
verifyBadge: {
|
||||
backgroundColor: '#DBEAFE',
|
||||
},
|
||||
verifyBadgeText: {
|
||||
color: '#1D4ED8',
|
||||
},
|
||||
sectionTitle: {
|
||||
marginTop: 2,
|
||||
paddingLeft: 2,
|
||||
fontSize: 11,
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: 1.1,
|
||||
color: '#94A3B8',
|
||||
fontWeight: '800',
|
||||
},
|
||||
menuCard: {
|
||||
backgroundColor: '#FFFFFF',
|
||||
borderRadius: 18,
|
||||
borderWidth: 1,
|
||||
borderColor: '#E2E8F0',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
menuRow: {
|
||||
paddingHorizontal: 14,
|
||||
paddingVertical: 12,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
},
|
||||
menuRowBorder: {
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#F1F5F9',
|
||||
},
|
||||
menuLeft: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 12,
|
||||
},
|
||||
menuIcon: {
|
||||
width: 36,
|
||||
height: 36,
|
||||
borderRadius: 11,
|
||||
backgroundColor: '#F1F5F9',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
menuLabel: {
|
||||
fontSize: 14,
|
||||
fontWeight: '700',
|
||||
color: '#1E293B',
|
||||
},
|
||||
menuRight: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 7,
|
||||
},
|
||||
rowBadge: {
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 3,
|
||||
borderRadius: 999,
|
||||
},
|
||||
rowBadgeActive: {
|
||||
backgroundColor: '#DCFCE7',
|
||||
},
|
||||
rowBadgeAlert: {
|
||||
backgroundColor: '#EF4444',
|
||||
},
|
||||
rowBadgeText: {
|
||||
fontSize: 10,
|
||||
fontWeight: '700',
|
||||
color: '#FFFFFF',
|
||||
},
|
||||
supportCard: {
|
||||
borderRadius: 18,
|
||||
backgroundColor: '#003B7E',
|
||||
padding: 16,
|
||||
overflow: 'hidden',
|
||||
position: 'relative',
|
||||
},
|
||||
supportTitle: {
|
||||
color: '#FFFFFF',
|
||||
fontSize: 18,
|
||||
fontWeight: '800',
|
||||
marginBottom: 4,
|
||||
maxWidth: 180,
|
||||
},
|
||||
supportText: {
|
||||
color: '#BFDBFE',
|
||||
fontSize: 12,
|
||||
lineHeight: 18,
|
||||
marginBottom: 12,
|
||||
maxWidth: 240,
|
||||
},
|
||||
supportBtn: {
|
||||
alignSelf: 'flex-start',
|
||||
backgroundColor: 'rgba(255,255,255,0.15)',
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255,255,255,0.25)',
|
||||
borderRadius: 10,
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 8,
|
||||
},
|
||||
supportBtnText: {
|
||||
color: '#FFFFFF',
|
||||
fontSize: 12,
|
||||
fontWeight: '700',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: 0.6,
|
||||
},
|
||||
supportIcon: {
|
||||
position: 'absolute',
|
||||
right: -10,
|
||||
bottom: -12,
|
||||
},
|
||||
logoutBtn: {
|
||||
marginTop: 4,
|
||||
backgroundColor: '#FEF2F2',
|
||||
borderRadius: 14,
|
||||
borderWidth: 1,
|
||||
borderColor: '#FECACA',
|
||||
paddingVertical: 14,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: 8,
|
||||
},
|
||||
logoutText: {
|
||||
color: '#B91C1C',
|
||||
fontSize: 14,
|
||||
fontWeight: '800',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: 0.8,
|
||||
},
|
||||
footer: {
|
||||
textAlign: 'center',
|
||||
marginTop: 4,
|
||||
fontSize: 10,
|
||||
fontWeight: '700',
|
||||
letterSpacing: 1,
|
||||
color: '#94A3B8',
|
||||
textTransform: 'uppercase',
|
||||
},
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user