121 lines
3.9 KiB
TypeScript
121 lines
3.9 KiB
TypeScript
import React from 'react';
|
|
import { Text, View, TouchableOpacity, ScrollView, Switch } from 'react-native';
|
|
import { useNavigation } from '@react-navigation/native';
|
|
import Icon from 'react-native-vector-icons/Ionicons';
|
|
import { getStyles } from './profile.styles';
|
|
import { useTheme } from '../../theme';
|
|
|
|
import { useAppDispatch, logout } from '@store';
|
|
|
|
export const ProfileScreen = () => {
|
|
const navigation = useNavigation<any>();
|
|
const { theme: colors, isDark, toggleTheme } = useTheme();
|
|
const styles = getStyles(colors);
|
|
const dispatch = useAppDispatch();
|
|
|
|
const handleLogout = async () => {
|
|
try {
|
|
dispatch(logout());
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
navigation.reset({
|
|
index: 0,
|
|
routes: [{ name: 'AuthStack' }], // root-level stack name stays as-is
|
|
});
|
|
};
|
|
|
|
return (
|
|
<ScrollView style={styles.container} contentContainerStyle={styles.content}>
|
|
{/* Profile Header */}
|
|
<View style={styles.profileHeader}>
|
|
<View style={styles.avatarCircle}>
|
|
<Text style={styles.avatarInitial}>A</Text>
|
|
</View>
|
|
<Text style={styles.profileName}>Workspace Administrator</Text>
|
|
<Text style={styles.profileRole}>Owner / Administrator</Text>
|
|
</View>
|
|
|
|
{/* Account Details list */}
|
|
<View style={styles.sectionCard}>
|
|
<Text style={styles.sectionHeader}>Workspace Details</Text>
|
|
|
|
<View style={styles.infoRow}>
|
|
<Text style={styles.infoLabel}>Tenancy</Text>
|
|
<Text style={styles.infoValue}>convex-crm-tenant</Text>
|
|
</View>
|
|
|
|
<View style={styles.infoRow}>
|
|
<Text style={styles.infoLabel}>Email</Text>
|
|
<Text style={styles.infoValue}>admin@convex.com</Text>
|
|
</View>
|
|
|
|
<View style={styles.infoRow}>
|
|
<Text style={styles.infoLabel}>Status</Text>
|
|
<Text style={styles.infoValueStatus}>Active</Text>
|
|
</View>
|
|
</View>
|
|
|
|
{/* Settings list */}
|
|
<View style={styles.sectionCard}>
|
|
<Text style={styles.sectionHeader}>Preferences</Text>
|
|
|
|
<View style={styles.preferenceRow}>
|
|
<View style={styles.preferenceLabelGroup}>
|
|
<Icon
|
|
name={isDark ? 'moon' : 'moon-outline'}
|
|
size={20}
|
|
color={colors.textSecondary}
|
|
style={styles.icon}
|
|
/>
|
|
<Text style={styles.preferenceText}>Dark Mode</Text>
|
|
</View>
|
|
<Switch
|
|
value={isDark}
|
|
onValueChange={toggleTheme}
|
|
trackColor={{ false: '#767577', true: colors.icon }}
|
|
thumbColor={isDark ? '#ffffff' : '#f4f3f4'}
|
|
/>
|
|
</View>
|
|
|
|
<TouchableOpacity style={styles.preferenceRow}>
|
|
<View style={styles.preferenceLabelGroup}>
|
|
<Icon
|
|
name="notifications-outline"
|
|
size={20}
|
|
color={colors.textSecondary}
|
|
style={styles.icon}
|
|
/>
|
|
<Text style={styles.preferenceText}>Push Notifications</Text>
|
|
</View>
|
|
<Icon name="chevron-forward" size={18} color={colors.textMuted} />
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity style={styles.preferenceRow}>
|
|
<View style={styles.preferenceLabelGroup}>
|
|
<Icon
|
|
name="shield-checkmark-outline"
|
|
size={20}
|
|
color={colors.textSecondary}
|
|
style={styles.icon}
|
|
/>
|
|
<Text style={styles.preferenceText}>Security & Privacy</Text>
|
|
</View>
|
|
<Icon name="chevron-forward" size={18} color={colors.textMuted} />
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
{/* Sign Out Button */}
|
|
<TouchableOpacity style={styles.signOutButton} onPress={handleLogout}>
|
|
<Icon
|
|
name="log-out-outline"
|
|
size={20}
|
|
color="#FFFFFF"
|
|
style={styles.buttonIcon}
|
|
/>
|
|
<Text style={styles.signOutButtonText}>Sign Out from Workspace</Text>
|
|
</TouchableOpacity>
|
|
</ScrollView>
|
|
);
|
|
};
|