@oxyhq/services 5.3.11 → 5.4.1

package/src/ui/screens/AccountOverviewScreen.tsx

@@ -15,15 +15,20 @@ import { BaseScreenProps } from '../navigation/types';
 import { useOxy } from '../context/OxyContext';
 import OxyLogo from '../components/OxyLogo';
 import Avatar from '../components/Avatar';
+import OxyIcon from '../components/icon/OxyIcon';
 import { fontFamilies } from '../styles/fonts';
 import { toast } from '../../lib/sonner';
+import { Ionicons } from '@expo/vector-icons';
 
 const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
     onClose,
     theme,
+    navigate,
 }) => {
-    const { user, logout, isLoading } = useOxy();
+    const { user, logout, isLoading, sessions, activeSessionId, oxyServices } = useOxy();
     const [showMoreAccounts, setShowMoreAccounts] = useState(false);
+    const [additionalAccountsData, setAdditionalAccountsData] = useState<any[]>([]);
+    const [loadingAdditionalAccounts, setLoadingAdditionalAccounts] = useState(false);
 
     const isDarkTheme = theme === 'dark';
     const textColor = isDarkTheme ? '#FFFFFF' : '#000000';
@@ -34,17 +39,58 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
     const dangerColor = '#D32F2F';
     const iconColor = isDarkTheme ? '#BBBBBB' : '#666666';
 
-    // Mock additional accounts (for demo purposes)
-    const additionalAccounts = [
-        {
-            id: '2',
-            username: 'Albert Isern Alvarez',
-            email: 'albert.isern.alvarez@gmail.com',
-            avatar: {
-                url: 'https://example.com/avatar2.jpg',
+    // Get additional accounts from sessions (excluding current user)
+    const additionalAccounts = sessions.filter(session => 
+        session.sessionId !== activeSessionId && session.userId !== user?.id
+    );
+
+    // Load user profiles for additional accounts
+    React.useEffect(() => {
+        const loadAdditionalAccountsData = async () => {
+            if (!oxyServices || additionalAccounts.length === 0) {
+                setAdditionalAccountsData([]);
+                return;
             }
-        }
-    ];
+
+            setLoadingAdditionalAccounts(true);
+            try {
+                const accountsData = await Promise.all(
+                    additionalAccounts.map(async (session) => {
+                        try {
+                            const userProfile = await oxyServices.getUserBySession(session.sessionId);
+                            return {
+                                id: session.sessionId,
+                                sessionId: session.sessionId,
+                                username: userProfile.username,
+                                email: userProfile.email,
+                                name: userProfile.name,
+                                avatar: userProfile.avatar,
+                                userProfile
+                            };
+                        } catch (error) {
+                            console.error(`Failed to load profile for session ${session.sessionId}:`, error);
+                            return {
+                                id: session.sessionId,
+                                sessionId: session.sessionId,
+                                username: session.username || 'Unknown User',
+                                email: 'No email available',
+                                avatar: null,
+                                userProfile: null
+                            };
+                        }
+                    })
+                );
+                setAdditionalAccountsData(accountsData);
+            } catch (error) {
+                console.error('Failed to load additional accounts:', error);
+                setAdditionalAccountsData([]);
+            } finally {
+                setLoadingAdditionalAccounts(false);
+            }
+        };
+
+        loadAdditionalAccountsData();
+    }, [sessions, activeSessionId, user?.id, oxyServices]);
 
     // Feature settings (with mock values)
     const features = {
@@ -106,28 +152,6 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
         );
     };
 
-    const renderFeatureItem = (
-        icon: React.ReactNode,
-        title: string,
-        value: string | null | undefined,
-        onPress: () => void
-    ) => (
-        <TouchableOpacity
-            style={[styles.featureItem, { borderColor }]}
-            onPress={onPress}
-        >
-            <View style={styles.featureItemLeft}>
-                <View style={styles.iconContainer}>
-                    {icon}
-                </View>
-                <Text style={[styles.featureItemTitle, { color: textColor }]}>{title}</Text>
-            </View>
-            {value !== undefined && (
-                <Text style={[styles.featureItemValue, { color: iconColor }]}>{value}</Text>
-            )}
-        </TouchableOpacity>
-    );
-
     if (!user) {
         return (
             <View style={[styles.container, { backgroundColor }]}>
@@ -145,191 +169,375 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
     }
 
     return (
-        <View style={[styles.container, { backgroundColor }]}>
-            <ScrollView style={styles.scrollView} contentContainerStyle={styles.scrollContainer}>
-                <View style={styles.header}>
-                    <Text style={[styles.accountEmail, { color: textColor }]}>
-                        {user.email || user.username}
-                    </Text>
-                    <TouchableOpacity style={styles.closeIcon} onPress={onClose}>
-                        <Text style={{ fontSize: 24, color: textColor }}>×</Text>
+        <View style={[styles.container, { backgroundColor: '#f2f2f2' }]}>
+            {/* Header */}
+            <View style={styles.header}>
+                <Text style={styles.headerTitle}>Account</Text>
+                {onClose && (
+                    <TouchableOpacity style={styles.closeButton} onPress={onClose}>
+                        <Text style={styles.closeButtonText}>×</Text>
                     </TouchableOpacity>
-                </View>
+                )}
+            </View>
 
-                <View style={[styles.profileContainer, { backgroundColor: secondaryBackgroundColor }]}>
-                    <View style={styles.avatarContainer}>
-                        <Avatar
-                            uri={user?.avatar?.url}
-                            name={user?.name?.full}
-                            size={70}
-                            theme={theme}
-                        />
+            <ScrollView style={styles.content}>
+                {/* User Profile Section */}
+                <View style={styles.section}>
+                    <Text style={styles.sectionTitle}>Profile</Text>
+                    
+                    <View style={[styles.settingItem, styles.firstSettingItem, styles.lastSettingItem]}>
+                        <View style={styles.userIcon}>
+                            <Avatar
+                                uri={user?.avatar?.url}
+                                name={user?.name?.full}
+                                size={40}
+                                theme={theme}
+                            />
+                        </View>
+                        <View style={styles.settingInfo}>
+                            <View>
+                                <Text style={styles.settingLabel}>
+                                    {typeof user.name === 'string' ? user.name : user.name?.full || user.name?.first || user.username}
+                                </Text>
+                                <Text style={styles.settingDescription}>{user.email || user.username}</Text>
+                            </View>
+                        </View>
+                        <TouchableOpacity
+                            style={styles.manageButton}
+                            onPress={() => toast.info('Manage your Oxy Account feature coming soon!')}
+                        >
+                            <Text style={styles.manageButtonText}>Manage</Text>
+                        </TouchableOpacity>
                     </View>
-                    <Text style={[styles.greeting, { color: textColor }]}>Hi, {user?.name?.first}!</Text>
+                </View>
 
-                    <TouchableOpacity
-                        style={[styles.manageAccountButton, { borderColor }]}
-                        onPress={() => toast.info('Manage your Oxy Account feature coming soon!')}
+                {/* Account Settings */}
+                <View style={styles.section}>
+                    <Text style={styles.sectionTitle}>Account Settings</Text>
+                    
+                    <TouchableOpacity 
+                        style={[styles.settingItem, styles.firstSettingItem]}
+                        onPress={() => navigate?.('AccountSettings', { activeTab: 'profile' })}
                     >
-                        <Text style={[styles.manageAccountText, { color: textColor }]}>
-                            Manage your Oxy Account
-                        </Text>
+                        <View style={styles.settingInfo}>
+                            <OxyIcon name="person-circle" size={20} color="#007AFF" style={styles.settingIcon} />
+                            <View>
+                                <Text style={styles.settingLabel}>Edit Profile</Text>
+                                <Text style={styles.settingDescription}>Update your personal information</Text>
+                            </View>
+                        </View>
+                        <OxyIcon name="chevron-forward" size={16} color="#ccc" />
                     </TouchableOpacity>
-                </View>
 
-                {/* Multiple accounts section */}
-                <TouchableOpacity
-                    style={[styles.sectionHeader, { borderColor }]}
-                    onPress={() => setShowMoreAccounts(!showMoreAccounts)}
-                >
-                    <Text style={[styles.sectionHeaderText, { color: textColor }]}>
-                        {showMoreAccounts ? "Hide more accounts" : "Show more accounts"}
-                    </Text>
-                    <Text style={{ color: textColor, fontSize: 16 }}>
-                        {showMoreAccounts ? "▲" : "▼"}
-                    </Text>
-                </TouchableOpacity>
+                    <TouchableOpacity 
+                        style={styles.settingItem}
+                        onPress={() => navigate?.('AccountSettings', { activeTab: 'password' })}
+                    >
+                        <View style={styles.settingInfo}>
+                            <OxyIcon name="shield-checkmark" size={20} color="#30D158" style={styles.settingIcon} />
+                            <View>
+                                <Text style={styles.settingLabel}>Security & Privacy</Text>
+                                <Text style={styles.settingDescription}>Password, 2FA, and privacy settings</Text>
+                            </View>
+                        </View>
+                        <OxyIcon name="chevron-forward" size={16} color="#ccc" />
+                    </TouchableOpacity>
+
+                    <TouchableOpacity 
+                        style={styles.settingItem}
+                        onPress={() => navigate?.('AccountSettings', { activeTab: 'notifications' })}
+                    >
+                        <View style={styles.settingInfo}>
+                            <OxyIcon name="notifications" size={20} color="#FF9500" style={styles.settingIcon} />
+                            <View>
+                                <Text style={styles.settingLabel}>Notifications</Text>
+                                <Text style={styles.settingDescription}>Manage your notification preferences</Text>
+                            </View>
+                        </View>
+                        <OxyIcon name="chevron-forward" size={16} color="#ccc" />
+                    </TouchableOpacity>
+
+                    <TouchableOpacity 
+                        style={[styles.settingItem]}
+                        onPress={() => navigate?.('PremiumSubscription')}
+                    >
+                        <View style={styles.settingInfo}>
+                            <OxyIcon name="star" size={20} color="#FFD700" style={styles.settingIcon} />
+                            <View>
+                                <Text style={styles.settingLabel}>Oxy+ Subscriptions</Text>
+                                <Text style={styles.settingDescription}>{user.isPremium ? 'Manage your premium plan' : 'Upgrade to premium features'}</Text>
+                            </View>
+                        </View>
+                        <OxyIcon name="chevron-forward" size={16} color="#ccc" />
+                    </TouchableOpacity>
 
+                    {user.isPremium && (
+                        <TouchableOpacity 
+                            style={[styles.settingItem, styles.lastSettingItem]}
+                            onPress={() => navigate?.('BillingManagement')}
+                        >
+                            <View style={styles.settingInfo}>
+                                <OxyIcon name="card" size={20} color="#34C759" style={styles.settingIcon} />
+                                <View>
+                                    <Text style={styles.settingLabel}>Billing Management</Text>
+                                    <Text style={styles.settingDescription}>Payment methods and invoices</Text>
+                                </View>
+                            </View>
+                            <OxyIcon name="chevron-forward" size={16} color="#ccc" />
+                        </TouchableOpacity>
+                    )}
+                </View>
+
+                {/* Additional Accounts */}
                 {showMoreAccounts && (
-                    <View style={[styles.accountsContainer, { backgroundColor: secondaryBackgroundColor }]}>
-                        {additionalAccounts.map((account) => (
-                            <TouchableOpacity
-                                key={account.id}
-                                style={[styles.accountItem, { borderColor }]}
-                                onPress={() => toast.info(`Switch to ${account.username}?`)}
-                            >
-                                <View style={styles.accountItemLeft}>
-                                    {account.avatar.url ? (
-                                        <Image source={{ uri: account.avatar.url }} style={styles.accountAvatar} />
-                                    ) : (
-                                        <View style={[styles.accountAvatar, { backgroundColor: primaryColor }]}>
-                                            <Text style={styles.avatarText}>
-                                                {account.username.charAt(0).toUpperCase()}
-                                            </Text>
+                    <View style={styles.section}>
+                        <Text style={styles.sectionTitle}>Additional Accounts{additionalAccountsData.length > 0 ? ` (${additionalAccountsData.length})` : ''}</Text>
+                        
+                        {loadingAdditionalAccounts ? (
+                            <View style={[styles.settingItem, styles.firstSettingItem, styles.lastSettingItem]}>
+                                <View style={styles.loadingContainer}>
+                                    <ActivityIndicator size="small" color="#007AFF" />
+                                    <Text style={styles.loadingText}>Loading accounts...</Text>
+                                </View>
+                            </View>
+                        ) : additionalAccountsData.length > 0 ? (
+                            <>
+                                {additionalAccountsData.map((account, index) => (
+                                    <TouchableOpacity
+                                        key={account.id}
+                                        style={[
+                                            styles.settingItem, 
+                                            index === 0 && styles.firstSettingItem,
+                                            index === additionalAccountsData.length - 1 && styles.lastSettingItem
+                                        ]}
+                                        onPress={() => {
+                                            toast.info(`Switch to ${account.username}?`);
+                                            // TODO: Implement account switching logic
+                                            // switchSession(account.sessionId);
+                                        }}
+                                    >
+                                        <View style={styles.userIcon}>
+                                            {account.avatar?.url ? (
+                                                <Image source={{ uri: account.avatar.url }} style={styles.accountAvatarImage} />
+                                            ) : (
+                                                <View style={styles.accountAvatarFallback}>
+                                                    <Text style={styles.accountAvatarText}>
+                                                        {account.username?.charAt(0).toUpperCase() || '?'}
+                                                    </Text>
+                                                </View>
+                                            )}
                                         </View>
-                                    )}
+                                        <View style={styles.settingInfo}>
+                                            <View>
+                                                <Text style={styles.settingLabel}>
+                                                    {typeof account.name === 'object' 
+                                                        ? account.name?.full || account.name?.first || account.username
+                                                        : account.name || account.username
+                                                    }
+                                                </Text>
+                                                <Text style={styles.settingDescription}>{account.email || account.username}</Text>
+                                            </View>
+                                        </View>
+                                        <OxyIcon name="chevron-forward" size={16} color="#ccc" />
+                                    </TouchableOpacity>
+                                ))}
+                            </>
+                        ) : (
+                            <View style={[styles.settingItem, styles.firstSettingItem, styles.lastSettingItem]}>
+                                <View style={styles.settingInfo}>
+                                    <OxyIcon name="person-outline" size={20} color="#ccc" style={styles.settingIcon} />
                                     <View>
-                                        <Text style={[styles.accountName, { color: textColor }]}>
-                                            {account.username}
-                                        </Text>
-                                        <Text style={[styles.accountEmail, { color: iconColor }]}>
-                                            {account.email}
-                                        </Text>
+                                        <Text style={styles.settingLabel}>No other accounts</Text>
+                                        <Text style={styles.settingDescription}>Add another account to switch between them</Text>
                                     </View>
                                 </View>
-                            </TouchableOpacity>
-                        ))}
+                            </View>
+                        )}
+                    </View>
+                )}
 
+                {/* Account Management */}
+                {showMoreAccounts && (
+                    <View style={styles.section}>
+                        <Text style={styles.sectionTitle}>Account Management</Text>
+                        
                         <TouchableOpacity
-                            style={[styles.accountItem, { borderColor }]}
+                            style={[styles.settingItem, styles.firstSettingItem]}
                             onPress={handleAddAccount}
                         >
-                            <View style={styles.accountItemLeft}>
-                                <View style={[styles.accountAvatar, styles.addAccountIcon, { borderColor }]}>
-                                    <Text style={{ fontSize: 20, color: textColor }}>+</Text>
+                            <View style={styles.settingInfo}>
+                                <OxyIcon name="add" size={20} color="#007AFF" style={styles.settingIcon} />
+                                <View>
+                                    <Text style={styles.settingLabel}>Add another account</Text>
+                                    <Text style={styles.settingDescription}>Sign in with a different account</Text>
                                 </View>
-                                <Text style={[styles.accountItemAction, { color: textColor }]}>
-                                    Add another account
-                                </Text>
                             </View>
+                            <OxyIcon name="chevron-forward" size={16} color="#ccc" />
                         </TouchableOpacity>
 
                         <TouchableOpacity
-                            style={[styles.accountItem, { borderColor }]}
+                            style={[styles.settingItem, styles.lastSettingItem]}
                             onPress={handleSignOutAll}
                         >
-                            <View style={styles.accountItemLeft}>
-                                <View style={[styles.accountAvatar, styles.signOutIcon, { borderColor }]}>
-                                    <Text style={{ fontSize: 20, color: textColor }}>←</Text>
+                            <View style={styles.settingInfo}>
+                                <OxyIcon name="log-out" size={20} color="#FF3B30" style={styles.settingIcon} />
+                                <View>
+                                    <Text style={styles.settingLabel}>Sign out of all accounts</Text>
+                                    <Text style={styles.settingDescription}>Remove all accounts from this device</Text>
                                 </View>
-                                <Text style={[styles.accountItemAction, { color: textColor }]}>
-                                    Sign out of all accounts
-                                </Text>
                             </View>
+                            <OxyIcon name="chevron-forward" size={16} color="#ccc" />
                         </TouchableOpacity>
                     </View>
                 )}
 
-                <View style={styles.sectionHeader}>
-                    <Text style={[styles.sectionHeaderText, { color: textColor }]}>
-                        More from Oxy
-                    </Text>
-                </View>
-
-                <View style={[styles.featuresContainer, { backgroundColor: secondaryBackgroundColor }]}>
-                    {renderFeatureItem(
-                        <Text style={{ fontSize: 18 }}>🕒</Text>,
-                        'History',
-                        'Saving',
-                        () => toast.info('View your history feature coming soon!')
-                    )}
+                {/* Quick Actions */}
+                <View style={styles.section}>
+                    <Text style={styles.sectionTitle}>Quick Actions</Text>
+                    
+                    <TouchableOpacity
+                        style={[styles.settingItem, styles.firstSettingItem]}
+                        onPress={() => setShowMoreAccounts(!showMoreAccounts)}
+                    >
+                        <View style={styles.settingInfo}>
+                            <OxyIcon name="people" size={20} color="#5856D6" style={styles.settingIcon} />
+                            <View>
+                                <Text style={styles.settingLabel}>
+                                    {showMoreAccounts ? 'Hide' : 'Show'} Account Switcher
+                                </Text>
+                                <Text style={styles.settingDescription}>
+                                    {showMoreAccounts 
+                                        ? 'Hide account switcher' 
+                                        : additionalAccountsData.length > 0 
+                                            ? `Switch between ${additionalAccountsData.length + 1} accounts`
+                                            : loadingAdditionalAccounts
+                                                ? 'Loading additional accounts...'
+                                                : 'Manage multiple accounts'
+                                    }
+                                </Text>
+                            </View>
+                        </View>
+                        <OxyIcon name="chevron-forward" size={16} color="#ccc" />
+                    </TouchableOpacity>
 
-                    {renderFeatureItem(
-                        <Text style={{ fontSize: 18 }}>⏱️</Text>,
-                        'Delete last 15 minutes',
-                        null,
-                        () => toast.info('Delete recent history feature coming soon!')
-                    )}
+                    <TouchableOpacity
+                        style={styles.settingItem}
+                        onPress={() => toast.info('Download account data feature coming soon!')}
+                    >
+                        <View style={styles.settingInfo}>
+                            <OxyIcon name="download" size={20} color="#34C759" style={styles.settingIcon} />
+                            <View>
+                                <Text style={styles.settingLabel}>Download My Data</Text>
+                                <Text style={styles.settingDescription}>Export your account information</Text>
+                            </View>
+                        </View>
+                        <OxyIcon name="chevron-forward" size={16} color="#ccc" />
+                    </TouchableOpacity>
 
-                    {renderFeatureItem(
-                        <Text style={{ fontSize: 18 }}>📋</Text>,
-                        'Saves & Collections',
-                        null,
-                        () => toast.info('Saved items feature coming soon!')
-                    )}
+                    <TouchableOpacity
+                        style={[styles.settingItem, styles.lastSettingItem]}
+                        onPress={() => toast.info('Delete account feature coming soon!')}
+                    >
+                        <View style={styles.settingInfo}>
+                            <OxyIcon name="trash" size={20} color="#FF3B30" style={styles.settingIcon} />
+                            <View>
+                                <Text style={styles.settingLabel}>Delete Account</Text>
+                                <Text style={styles.settingDescription}>Permanently delete your account</Text>
+                            </View>
+                        </View>
+                        <OxyIcon name="chevron-forward" size={16} color="#ccc" />
+                    </TouchableOpacity>
+                </View>
 
-                    {renderFeatureItem(
-                        <Text style={{ fontSize: 18 }}>🔍</Text>,
-                        'Search personalization',
-                        null,
-                        () => toast.info('Search personalization feature coming soon!')
-                    )}
+                {/* Support & Settings */}
+                <View style={styles.section}>
+                    <Text style={styles.sectionTitle}>Support & Settings</Text>
+                    
+                    <TouchableOpacity
+                        style={[styles.settingItem, styles.firstSettingItem]}
+                        onPress={() => toast.info('Account preferences coming soon!')}
+                    >
+                        <View style={styles.settingInfo}>
+                            <OxyIcon name="settings" size={20} color="#8E8E93" style={styles.settingIcon} />
+                            <View>
+                                <Text style={styles.settingLabel}>Account Preferences</Text>
+                                <Text style={styles.settingDescription}>Customize your account experience</Text>
+                            </View>
+                        </View>
+                        <OxyIcon name="chevron-forward" size={16} color="#ccc" />
+                    </TouchableOpacity>
 
-                    {renderFeatureItem(
-                        <Text style={{ fontSize: 18 }}>🛡️</Text>,
-                        'SafeSearch',
-                        features.safeSearch ? 'On' : 'Off',
-                        () => toast.info('SafeSearch settings feature coming soon!')
-                    )}
+                    <TouchableOpacity
+                        style={styles.settingItem}
+                        onPress={() => toast.info('Help & support feature coming soon!')}
+                    >
+                        <View style={styles.settingInfo}>
+                            <OxyIcon name="help-circle" size={20} color="#007AFF" style={styles.settingIcon} />
+                            <View>
+                                <Text style={styles.settingLabel}>Help & Support</Text>
+                                <Text style={styles.settingDescription}>Get help with your account</Text>
+                            </View>
+                        </View>
+                        <OxyIcon name="chevron-forward" size={16} color="#ccc" />
+                    </TouchableOpacity>
 
-                    {renderFeatureItem(
-                        <Text style={{ fontSize: 18 }}>🌐</Text>,
-                        'Language',
-                        features.language,
-                        () => toast.info('Language settings feature coming soon!')
-                    )}
-                </View>
+                    <TouchableOpacity
+                        style={styles.settingItem}
+                        onPress={() => toast.info('Connected apps feature coming soon!')}
+                    >
+                        <View style={styles.settingInfo}>
+                            <OxyIcon name="link" size={20} color="#32D74B" style={styles.settingIcon} />
+                            <View>
+                                <Text style={styles.settingLabel}>Connected Apps</Text>
+                                <Text style={styles.settingDescription}>Manage third-party app access</Text>
+                            </View>
+                        </View>
+                        <OxyIcon name="chevron-forward" size={16} color="#ccc" />
+                    </TouchableOpacity>
 
-                <View style={styles.footerContainer}>
-                    <View style={styles.footerButtonsRow}>
-                        <TouchableOpacity
-                            style={styles.footerButton}
-                            onPress={() => toast.info('More settings feature coming soon!')}
-                        >
-                            <Text style={[styles.footerButtonText, { color: textColor }]}>
-                                More settings
-                            </Text>
-                        </TouchableOpacity>
+                    <TouchableOpacity
+                        style={styles.settingItem}
+                        onPress={() => toast.info('Privacy Policy feature coming soon!')}
+                    >
+                        <View style={styles.settingInfo}>
+                            <OxyIcon name="document-lock" size={20} color="#FF9F0A" style={styles.settingIcon} />
+                            <View>
+                                <Text style={styles.settingLabel}>Privacy Policy</Text>
+                                <Text style={styles.settingDescription}>Learn about data protection</Text>
+                            </View>
+                        </View>
+                        <OxyIcon name="chevron-forward" size={16} color="#ccc" />
+                    </TouchableOpacity>
 
-                        <TouchableOpacity
-                            style={styles.footerButton}
-                            onPress={() => toast.info('Help & support feature coming soon!')}
-                        >
-                            <Text style={[styles.footerButtonText, { color: textColor }]}>
-                                Help
-                            </Text>
-                        </TouchableOpacity>
-                    </View>
+                    <TouchableOpacity
+                        style={[styles.settingItem, styles.lastSettingItem]}
+                        onPress={() => toast.info('Terms of Service feature coming soon!')}
+                    >
+                        <View style={styles.settingInfo}>
+                            <OxyIcon name="document-text" size={20} color="#5856D6" style={styles.settingIcon} />
+                            <View>
+                                <Text style={styles.settingLabel}>Terms of Service</Text>
+                                <Text style={styles.settingDescription}>Read our terms and conditions</Text>
+                            </View>
+                        </View>
+                        <OxyIcon name="chevron-forward" size={16} color="#ccc" />
+                    </TouchableOpacity>
+                </View>
 
-                    <View style={styles.footerLinksRow}>
-                        <TouchableOpacity onPress={() => toast.info('Privacy Policy feature coming soon!')}>
-                            <Text style={[styles.footerLink, { color: iconColor }]}>Privacy Policy</Text>
-                        </TouchableOpacity>
-                        <Text style={[{ color: iconColor, marginHorizontal: 5 }]}>•</Text>
-                        <TouchableOpacity onPress={() => toast.info('Terms of Service feature coming soon!')}>
-                            <Text style={[styles.footerLink, { color: iconColor }]}>Terms of Service</Text>
-                        </TouchableOpacity>
-                    </View>
+                {/* Sign Out */}
+                <View style={styles.section}>
+                    <TouchableOpacity 
+                        style={[styles.settingItem, styles.firstSettingItem, styles.lastSettingItem, styles.signOutButton]}
+                        onPress={confirmLogout}
+                    >
+                        <View style={styles.settingInfo}>
+                            <OxyIcon name="log-out" size={20} color="#ff4757" style={styles.settingIcon} />
+                            <View>
+                                <Text style={[styles.settingLabel, { color: '#ff4757' }]}>Sign Out</Text>
+                                <Text style={styles.settingDescription}>Sign out of your account</Text>
+                            </View>
+                        </View>
+                    </TouchableOpacity>
                 </View>
             </ScrollView>
         </View>
@@ -339,176 +547,132 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
 const styles = StyleSheet.create({
     container: {
         flex: 1,
-    },
-    scrollView: {
-        flex: 1,
-    },
-    scrollContainer: {
-        padding: 20,
+        backgroundColor: '#f2f2f2',
     },
     header: {
+        paddingHorizontal: 20,
+        paddingTop: 60,
+        paddingBottom: 16,
+        backgroundColor: '#fff',
+        borderBottomWidth: 1,
+        borderBottomColor: '#e0e0e0',
         flexDirection: 'row',
         justifyContent: 'space-between',
         alignItems: 'center',
-        marginBottom: 20,
-    },
-    closeIcon: {
-        padding: 8,
-    },
-    profileContainer: {
-        padding: 20,
-        borderRadius: 15,
-        alignItems: 'center',
-        marginBottom: 20,
     },
-    avatarContainer: {
-        margin: 10,
-    },
-    avatar: {
-        width: 70,
-        height: 70,
-        borderRadius: 35,
-        justifyContent: 'center',
-        alignItems: 'center',
-    },
-    avatarText: {
-        color: 'white',
-        fontSize: 30,
+    headerTitle: {
+        fontSize: 24,
         fontWeight: 'bold',
+        color: '#000',
     },
-    greeting: {
-        fontFamily: Platform.OS === 'web'
-            ? 'Phudu'  // Use CSS font name directly for web
-            : 'Phudu-Bold',  // Use exact font name as registered with Font.loadAsync
-        fontWeight: Platform.OS === 'web' ? 'bold' : undefined,  // Only apply fontWeight on web
-        fontSize: 20,
-        marginVertical: 10,
+    closeButton: {
+        padding: 8,
     },
-    manageAccountButton: {
-        paddingVertical: 10,
-        paddingHorizontal: 20,
-        borderWidth: 1,
-        borderRadius: 20,
-        marginTop: 10,
+    closeButtonText: {
+        fontSize: 24,
+        color: '#000',
+        fontWeight: '300',
     },
-    manageAccountText: {
-        fontSize: 14,
+    content: {
+        flex: 1,
+        padding: 16,
     },
-    sectionHeader: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        paddingVertical: 15,
-        borderBottomWidth: 1,
-        marginBottom: 10,
+    section: {
+        marginBottom: 24,
     },
-    sectionHeaderText: {
-        fontFamily: Platform.OS === 'web'
-            ? 'Phudu'  // Use CSS font name directly for web
-            : 'Phudu-Bold',  // Use exact font name as registered with Font.loadAsync
-        fontWeight: Platform.OS === 'web' ? 'bold' : undefined,  // Only apply fontWeight on web
+    sectionTitle: {
         fontSize: 16,
+        fontWeight: '600',
+        color: '#333',
+        marginBottom: 12,
     },
-    accountsContainer: {
-        borderRadius: 15,
-        marginBottom: 20,
-        overflow: 'hidden',
-    },
-    accountItem: {
+    settingItem: {
+        backgroundColor: '#fff',
+        padding: 16,
         flexDirection: 'row',
-        justifyContent: 'space-between',
         alignItems: 'center',
-        padding: 15,
-        borderBottomWidth: 1,
+        justifyContent: 'space-between',
+        marginBottom: 2,
     },
-    accountItemLeft: {
+    firstSettingItem: {
+        borderTopLeftRadius: 24,
+        borderTopRightRadius: 24,
+    },
+    lastSettingItem: {
+        borderBottomLeftRadius: 24,
+        borderBottomRightRadius: 24,
+        marginBottom: 8,
+    },
+    settingInfo: {
         flexDirection: 'row',
         alignItems: 'center',
+        flex: 1,
     },
-    accountAvatar: {
-        width: 36,
-        height: 36,
-        borderRadius: 18,
-        marginRight: 15,
-        justifyContent: 'center',
-        alignItems: 'center',
+    settingIcon: {
+        marginRight: 12,
     },
-    accountName: {
-        fontSize: 15,
+    settingLabel: {
+        fontSize: 16,
         fontWeight: '500',
+        color: '#333',
+        marginBottom: 2,
     },
-    accountEmail: {
+    settingDescription: {
         fontSize: 14,
+        color: '#666',
     },
-    accountItemAction: {
-        fontSize: 15,
-    },
-    addAccountIcon: {
-        backgroundColor: 'transparent',
-        borderWidth: 1,
+    userIcon: {
+        marginRight: 12,
     },
-    signOutIcon: {
-        backgroundColor: 'transparent',
-        borderWidth: 1,
+    manageButton: {
+        backgroundColor: '#007AFF',
+        paddingHorizontal: 16,
+        paddingVertical: 8,
+        borderRadius: 16,
     },
-    featuresContainer: {
-        borderRadius: 15,
-        overflow: 'hidden',
-        marginBottom: 20,
+    manageButtonText: {
+        color: '#fff',
+        fontSize: 14,
+        fontWeight: '500',
     },
-    featureItem: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        padding: 15,
-        borderBottomWidth: 1,
+    accountAvatarImage: {
+        width: 40,
+        height: 40,
+        borderRadius: 20,
     },
-    featureItemLeft: {
-        flexDirection: 'row',
+    accountAvatarFallback: {
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        backgroundColor: '#d169e5',
         alignItems: 'center',
-    },
-    iconContainer: {
-        width: 36,
-        height: 36,
         justifyContent: 'center',
-        alignItems: 'center',
-        marginRight: 15,
     },
-    featureItemTitle: {
-        fontSize: 15,
-        fontWeight: '500',
+    accountAvatarText: {
+        color: 'white',
+        fontSize: 18,
+        fontWeight: 'bold',
     },
-    featureItemValue: {
-        fontSize: 14,
+    signOutButton: {
+        borderWidth: 1,
+        borderColor: '#ff4757',
     },
-    footerContainer: {
-        marginBottom: 30,
+    message: {
+        fontSize: 16,
+        textAlign: 'center',
+        marginTop: 24,
+        color: '#333',
     },
-    footerButtonsRow: {
+    loadingContainer: {
         flexDirection: 'row',
-        justifyContent: 'space-between',
-        marginBottom: 20,
-    },
-    footerButton: {
-        flex: 1,
-        padding: 15,
         alignItems: 'center',
-    },
-    footerButtonText: {
-        fontSize: 15,
-    },
-    footerLinksRow: {
-        flexDirection: 'row',
         justifyContent: 'center',
-        alignItems: 'center',
-    },
-    footerLink: {
-        fontSize: 13,
+        paddingVertical: 20,
+        gap: 12,
     },
-    message: {
+    loadingText: {
         fontSize: 16,
-        textAlign: 'center',
-        marginTop: 24,
+        color: '#666',
     },
 });