97 lines
5.4 KiB
TypeScript
97 lines
5.4 KiB
TypeScript
import { View, Text, TouchableOpacity, Alert, ScrollView } from 'react-native';
|
||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||
import { useAuthStore } from '../../stores/authStore';
|
||
import { router } from 'expo-router';
|
||
|
||
export default function ProfileScreen() {
|
||
const { user, logout, tenantSlug } = useAuthStore();
|
||
const initials = `${user?.firstName?.[0] ?? ''}${user?.lastName?.[0] ?? ''}`.toUpperCase() || 'U';
|
||
const fullName = `${user?.firstName ?? ''} ${user?.lastName ?? ''}`.trim();
|
||
const role = user?.roles?.[0] ?? user?.role ?? 'Staff';
|
||
|
||
const handleLogout = () => {
|
||
Alert.alert('Sign Out', 'Are you sure you want to sign out?', [
|
||
{ text: 'Cancel', style: 'cancel' },
|
||
{ text: 'Sign Out', style: 'destructive', onPress: async () => { await logout(); router.replace('/(auth)/company-code'); } },
|
||
]);
|
||
};
|
||
|
||
return (
|
||
<SafeAreaView style={{ flex: 1, backgroundColor: '#0891B2' }} edges={['top']}>
|
||
<ScrollView style={{ flex: 1, backgroundColor: '#F8FAFC' }}>
|
||
{/* Header */}
|
||
<View style={{ backgroundColor: '#0891B2', paddingHorizontal: 20, paddingTop: 16, paddingBottom: 32, alignItems: 'center' }}>
|
||
<View style={{ width: 80, height: 80, borderRadius: 40, backgroundColor: 'rgba(255,255,255,0.2)', alignItems: 'center', justifyContent: 'center', marginBottom: 12 }}>
|
||
<Text style={{ color: '#FFF', fontSize: 32, fontWeight: '800' }}>{initials}</Text>
|
||
</View>
|
||
<Text style={{ color: '#FFF', fontSize: 24, fontWeight: '800' }}>{fullName}</Text>
|
||
<View style={{ backgroundColor: 'rgba(255,255,255,0.2)', borderRadius: 20, paddingHorizontal: 14, paddingVertical: 5, marginTop: 8 }}>
|
||
<Text style={{ color: '#E0F2FE', fontSize: 14, fontWeight: '600' }}>{role}</Text>
|
||
</View>
|
||
</View>
|
||
|
||
<View style={{ padding: 16 }}>
|
||
{/* Info */}
|
||
<View style={{ backgroundColor: '#FFF', borderRadius: 20, marginBottom: 16, borderWidth: 1, borderColor: '#F1F5F9', overflow: 'hidden' }}>
|
||
{[
|
||
{ label: 'Email', value: user?.email },
|
||
{ label: 'Company', value: tenantSlug },
|
||
{ label: 'Role', value: role },
|
||
].map((row, i, arr) => (
|
||
<View key={row.label} style={{ paddingHorizontal: 20, paddingVertical: 16, borderBottomWidth: i < arr.length - 1 ? 1 : 0, borderBottomColor: '#F1F5F9' }}>
|
||
<Text style={{ fontSize: 12, fontWeight: '600', color: '#94A3B8', textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 4 }}>{row.label}</Text>
|
||
<Text style={{ fontSize: 17, fontWeight: '600', color: '#0F172A' }}>{row.value ?? '—'}</Text>
|
||
</View>
|
||
))}
|
||
</View>
|
||
|
||
{/* User Management — admin only */}
|
||
{(user?.roles?.includes('ADMIN') || user?.role === 'ADMIN' || role === 'ADMIN') && (
|
||
<TouchableOpacity
|
||
style={{ backgroundColor: '#FFF', borderRadius: 20, borderWidth: 1, borderColor: '#F1F5F9', paddingHorizontal: 20, paddingVertical: 18, marginBottom: 16, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}
|
||
onPress={() => router.push('/(app)/users')}
|
||
activeOpacity={0.7}
|
||
>
|
||
<View>
|
||
<Text style={{ fontSize: 17, fontWeight: '700', color: '#0F172A' }}>User Management</Text>
|
||
<Text style={{ fontSize: 14, color: '#64748B', marginTop: 2 }}>Add & manage team members</Text>
|
||
</View>
|
||
<Text style={{ fontSize: 20, color: '#94A3B8' }}>›</Text>
|
||
</TouchableOpacity>
|
||
)}
|
||
|
||
{/* Manual Tasks — admin only */}
|
||
{(user?.roles?.includes('ADMIN') || user?.role === 'ADMIN' || role === 'ADMIN') && (
|
||
<TouchableOpacity
|
||
style={{ backgroundColor: '#FFF', borderRadius: 20, borderWidth: 1, borderColor: '#F1F5F9', paddingHorizontal: 20, paddingVertical: 18, marginBottom: 16, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}
|
||
onPress={() => router.push('/(app)/manual-tasks')}
|
||
activeOpacity={0.7}
|
||
>
|
||
<View>
|
||
<Text style={{ fontSize: 17, fontWeight: '700', color: '#0F172A' }}>Manual Tasks</Text>
|
||
<Text style={{ fontSize: 14, color: '#64748B', marginTop: 2 }}>Suspend, reactivate & activate clients</Text>
|
||
</View>
|
||
<Text style={{ fontSize: 20, color: '#94A3B8' }}>›</Text>
|
||
</TouchableOpacity>
|
||
)}
|
||
|
||
{/* App version */}
|
||
<View style={{ backgroundColor: '#FFF', borderRadius: 20, marginBottom: 16, borderWidth: 1, borderColor: '#F1F5F9', paddingHorizontal: 20, paddingVertical: 16 }}>
|
||
<Text style={{ fontSize: 12, fontWeight: '600', color: '#94A3B8', textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 4 }}>App</Text>
|
||
<Text style={{ fontSize: 17, fontWeight: '600', color: '#0F172A' }}>FiberOps Mobile v1.0.0</Text>
|
||
</View>
|
||
|
||
{/* Sign out */}
|
||
<TouchableOpacity
|
||
style={{ backgroundColor: '#FFF', borderRadius: 20, paddingVertical: 18, alignItems: 'center', borderWidth: 1.5, borderColor: '#FECACA' }}
|
||
onPress={handleLogout}
|
||
activeOpacity={0.7}
|
||
>
|
||
<Text style={{ color: '#DC2626', fontSize: 17, fontWeight: '700' }}>Sign Out</Text>
|
||
</TouchableOpacity>
|
||
</View>
|
||
</ScrollView>
|
||
</SafeAreaView>
|
||
);
|
||
}
|