@oxyhq/services 5.7.5 → 5.8.2

package/src/ui/screens/ProfileScreen.tsx

@@ -1,8 +1,10 @@
 import React, { useEffect, useState } from 'react';
-import { View, Text, StyleSheet, ActivityIndicator, ScrollView, TouchableOpacity } from 'react-native';
+import { View, Text, StyleSheet, ActivityIndicator, ScrollView, TouchableOpacity, Image } from 'react-native';
 import { BaseScreenProps } from '../navigation/types';
 import { useOxy } from '../context/OxyContext';
 import Avatar from '../components/Avatar';
+import { FollowButton } from '../components';
+import { useFollow } from '../hooks/useFollow';
 import { Ionicons } from '@expo/vector-icons';
 
 interface ProfileScreenProps extends BaseScreenProps {
@@ -10,26 +12,44 @@ interface ProfileScreenProps extends BaseScreenProps {
     username?: string;
 }
 
-const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme, goBack }) => {
+const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme, goBack, navigate }) => {
     const { oxyServices, user: currentUser } = useOxy();
     const [profile, setProfile] = useState<any>(null);
     const [karmaTotal, setKarmaTotal] = useState<number | null>(null);
     const [postsCount, setPostsCount] = useState<number | null>(null);
     const [commentsCount, setCommentsCount] = useState<number | null>(null);
-    const [followersCount, setFollowersCount] = useState<number | null>(null);
-    const [followingCount, setFollowingCount] = useState<number | null>(null);
     const [isLoading, setIsLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
+    const [links, setLinks] = useState<Array<{
+        url: string;
+        title?: string;
+        description?: string;
+        image?: string;
+        id: string;
+    }>>([]);
+
+    // Use the follow hook for real follower data
+    const {
+        followerCount,
+        followingCount,
+        isLoadingCounts,
+        fetchUserCounts,
+        setFollowerCount,
+        setFollowingCount,
+    } = useFollow(userId);
 
     const isDarkTheme = theme === 'dark';
     const backgroundColor = isDarkTheme ? '#121212' : '#FFFFFF';
     const textColor = isDarkTheme ? '#FFFFFF' : '#000000';
     const primaryColor = '#d169e5';
 
+    // Check if current user is viewing their own profile
+    const isOwnProfile = currentUser && currentUser.id === userId;
+
     useEffect(() => {
         console.log('ProfileScreen - userId:', userId);
         console.log('ProfileScreen - username:', username);
-        
+
         if (!userId) {
             setError('No user ID provided');
             setIsLoading(false);
@@ -50,11 +70,11 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
                 }
                 throw err;
             }),
-            oxyServices.getUserKarmaTotal ? 
+            oxyServices.getUserKarmaTotal ?
                 oxyServices.getUserKarmaTotal(userId).catch(err => {
                     console.warn('getUserKarmaTotal error:', err);
                     return { total: undefined };
-                }) : 
+                }) :
                 Promise.resolve({ total: undefined })
         ])
             .then(([profileRes, karmaRes]) => {
@@ -62,18 +82,56 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
                 setProfile(profileRes);
                 setKarmaTotal(typeof karmaRes.total === 'number' ? karmaRes.total : null);
 
-                // Mock data for other stats
-                // In a real app, these would come from API endpoints
+                // Extract links from profile data
+                if (profileRes.linksMetadata && Array.isArray(profileRes.linksMetadata)) {
+                    const linksWithIds = profileRes.linksMetadata.map((link: any, index: number) => ({
+                        ...link,
+                        id: link.id || `existing-${index}`
+                    }));
+                    setLinks(linksWithIds);
+                } else if (Array.isArray(profileRes.links)) {
+                    const simpleLinks = profileRes.links.map((l: any) => typeof l === 'string' ? l : l.link).filter(Boolean);
+                    const linksWithMetadata = simpleLinks.map((url: string, index: number) => ({
+                        url,
+                        title: url.replace(/^https?:\/\//, '').replace(/\/$/, ''),
+                        description: `Link to ${url}`,
+                        image: undefined,
+                        id: `existing-${index}`
+                    }));
+                    setLinks(linksWithMetadata);
+                } else if (profileRes.website) {
+                    setLinks([{
+                        url: profileRes.website,
+                        title: profileRes.website.replace(/^https?:\/\//, '').replace(/\/$/, ''),
+                        description: `Link to ${profileRes.website}`,
+                        image: undefined,
+                        id: 'existing-0'
+                    }]);
+                } else {
+                    setLinks([]);
+                }
+
+                // Set real follower counts from profile data if available
+                if (profileRes._count) {
+                    setFollowerCount?.(profileRes._count.followers || 0);
+                    setFollowingCount?.(profileRes._count.following || 0);
+                } else if (profileRes.stats) {
+                    setFollowerCount?.(profileRes.stats.followers || 0);
+                    setFollowingCount?.(profileRes.stats.following || 0);
+                } else {
+                    // Fallback: fetch counts separately
+                    fetchUserCounts?.();
+                }
+
+                // Mock data for other stats (these would come from separate API endpoints)
                 setPostsCount(Math.floor(Math.random() * 50));
                 setCommentsCount(Math.floor(Math.random() * 100));
-                setFollowersCount(Math.floor(Math.random() * 200));
-                setFollowingCount(Math.floor(Math.random() * 100));
             })
             .catch((err: any) => {
                 console.error('Profile loading error:', err);
                 // Provide user-friendly error messages based on the error type
                 let errorMessage = 'Failed to load profile';
-                
+
                 if (err.status === 404 || err.message?.includes('not found') || err.message?.includes('Resource not found')) {
                     if (currentUser && currentUser.id === userId) {
                         errorMessage = 'Unable to load your profile from the server. This may be due to a temporary service issue.';
@@ -87,7 +145,7 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
                 } else if (err.message) {
                     errorMessage = err.message;
                 }
-                
+
                 setError(errorMessage);
             })
             .finally(() => setIsLoading(false));
@@ -135,9 +193,25 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
                     <View style={styles.avatarWrapper}>
                         <Avatar uri={profile?.avatar?.url} name={profile?.username || username} size={96} theme={theme} />
                     </View>
-                    {/* Edit Profile/Follow Button placeholder */}
+                    {/* Conditional Action Button */}
                     <View style={styles.actionButtonWrapper}>
-                        <Text style={styles.actionButton}>Edit Profile</Text>
+                        {isOwnProfile ? (
+                            <TouchableOpacity
+                                style={styles.actionButton}
+                                onPress={() => navigate?.('EditProfile')}
+                            >
+                                <Text style={styles.actionButtonText}>Edit Profile</Text>
+                            </TouchableOpacity>
+                        ) : (
+                            <FollowButton
+                                userId={userId}
+                                theme={theme}
+                                onFollowChange={(isFollowing) => {
+                                    // The follow button will automatically update counts via Zustand
+                                    console.log(`Follow status changed: ${isFollowing}`);
+                                }}
+                            />
+                        )}
                     </View>
                 </View>
                 {/* Profile Info */}
@@ -148,20 +222,67 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
                     )}
                     {/* Bio placeholder */}
                     <Text style={[styles.bio, { color: textColor }]}>{profile?.bio || 'This user has no bio yet.'}</Text>
-                    {/* Email and Join Date Row */}
-                    <View style={styles.infoRow}>
-                        {profile?.email && (
-                            <View style={styles.infoItem}>
-                                <Ionicons name="mail-outline" size={16} color={isDarkTheme ? '#BBBBBB' : '#888888'} style={{ marginRight: 4 }} />
-                                <Text style={[styles.infoText, { color: isDarkTheme ? '#BBBBBB' : '#888888' }]}>{profile.email}</Text>
+
+                    {/* Info Grid Row */}
+                    <View style={styles.infoGrid}>
+                        {profile?.createdAt && (
+                            <View style={styles.infoGridItem}>
+                                <Ionicons name="calendar-outline" size={16} color={isDarkTheme ? '#BBBBBB' : '#888888'} style={{ marginRight: 6 }} />
+                                <Text style={[styles.infoGridText, { color: isDarkTheme ? '#BBBBBB' : '#888888' }]}>Joined {new Date(profile.createdAt).toLocaleDateString()}</Text>
                             </View>
                         )}
-                        {profile?.createdAt && (
-                            <View style={styles.infoItem}>
-                                <Ionicons name="calendar-outline" size={16} color={isDarkTheme ? '#BBBBBB' : '#888888'} style={{ marginRight: 4 }} />
-                                <Text style={[styles.infoText, { color: isDarkTheme ? '#BBBBBB' : '#888888' }]}>Joined {new Date(profile.createdAt).toLocaleDateString()}</Text>
+                        {profile?.location && (
+                            <View style={styles.infoGridItem}>
+                                <Ionicons name="location-outline" size={16} color={isDarkTheme ? '#BBBBBB' : '#888888'} style={{ marginRight: 6 }} />
+                                <Text style={[styles.infoGridText, { color: isDarkTheme ? '#BBBBBB' : '#888888' }]} numberOfLines={1}>{profile.location}</Text>
+                            </View>
+                        )}
+                        {profile?.website && (
+                            <View style={styles.infoGridItem}>
+                                <Ionicons name="globe-outline" size={16} color={isDarkTheme ? '#BBBBBB' : '#888888'} style={{ marginRight: 6 }} />
+                                <Text style={[styles.infoGridText, { color: isDarkTheme ? '#BBBBBB' : '#888888' }]} numberOfLines={1}>{profile.website}</Text>
+                            </View>
+                        )}
+                        {profile?.company && (
+                            <View style={styles.infoGridItem}>
+                                <Ionicons name="business-outline" size={16} color={isDarkTheme ? '#BBBBBB' : '#888888'} style={{ marginRight: 6 }} />
+                                <Text style={[styles.infoGridText, { color: isDarkTheme ? '#BBBBBB' : '#888888' }]} numberOfLines={1}>{profile.company}</Text>
+                            </View>
+                        )}
+                        {profile?.jobTitle && (
+                            <View style={styles.infoGridItem}>
+                                <Ionicons name="briefcase-outline" size={16} color={isDarkTheme ? '#BBBBBB' : '#888888'} style={{ marginRight: 6 }} />
+                                <Text style={[styles.infoGridText, { color: isDarkTheme ? '#BBBBBB' : '#888888' }]} numberOfLines={1}>{profile.jobTitle}</Text>
+                            </View>
+                        )}
+                        {profile?.education && (
+                            <View style={styles.infoGridItem}>
+                                <Ionicons name="school-outline" size={16} color={isDarkTheme ? '#BBBBBB' : '#888888'} style={{ marginRight: 6 }} />
+                                <Text style={[styles.infoGridText, { color: isDarkTheme ? '#BBBBBB' : '#888888' }]} numberOfLines={1}>{profile.education}</Text>
+                            </View>
+                        )}
+                        {profile?.birthday && (
+                            <View style={styles.infoGridItem}>
+                                <Ionicons name="gift-outline" size={16} color={isDarkTheme ? '#BBBBBB' : '#888888'} style={{ marginRight: 6 }} />
+                                <Text style={[styles.infoGridText, { color: isDarkTheme ? '#BBBBBB' : '#888888' }]}>Born {new Date(profile.birthday).toLocaleDateString()}</Text>
                             </View>
                         )}
+                        {links.length > 0 && (
+                            <TouchableOpacity
+                                style={styles.infoGridItem}
+                                onPress={() => navigate?.('UserLinks', { userId, links })}
+                            >
+                                <Ionicons name="link-outline" size={16} color={isDarkTheme ? '#BBBBBB' : '#888888'} style={{ marginRight: 6 }} />
+                                <Text style={[styles.infoGridText, { color: isDarkTheme ? '#BBBBBB' : '#888888' }]} numberOfLines={1}>
+                                    {links[0].url}
+                                </Text>
+                                {links.length > 1 && (
+                                    <Text style={[styles.linksMore, { color: isDarkTheme ? '#BBBBBB' : '#888888' }]}>
+                                        + {links.length - 1} more
+                                    </Text>
+                                )}
+                            </TouchableOpacity>
+                        )}
                     </View>
                     {/* Divider */}
                     <View style={styles.divider} />
@@ -172,11 +293,19 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
                             <Text style={[styles.karmaLabel, { color: isDarkTheme ? '#BBBBBB' : '#888888' }]}>Karma</Text>
                         </View>
                         <View style={styles.statItem}>
-                            <Text style={[styles.karmaAmount, { color: textColor }]}>{followersCount !== null ? followersCount : '--'}</Text>
+                            {isLoadingCounts ? (
+                                <ActivityIndicator size="small" color={textColor} />
+                            ) : (
+                                <Text style={[styles.karmaAmount, { color: textColor }]}>{followerCount !== null ? followerCount : '--'}</Text>
+                            )}
                             <Text style={[styles.karmaLabel, { color: isDarkTheme ? '#BBBBBB' : '#888888' }]}>Followers</Text>
                         </View>
                         <View style={styles.statItem}>
-                            <Text style={[styles.karmaAmount, { color: textColor }]}>{followingCount !== null ? followingCount : '--'}</Text>
+                            {isLoadingCounts ? (
+                                <ActivityIndicator size="small" color={textColor} />
+                            ) : (
+                                <Text style={[styles.karmaAmount, { color: textColor }]}>{followingCount !== null ? followingCount : '--'}</Text>
+                            )}
                             <Text style={[styles.karmaLabel, { color: isDarkTheme ? '#BBBBBB' : '#888888' }]}>Following</Text>
                         </View>
                     </View>
@@ -194,15 +323,49 @@ const styles = StyleSheet.create({
     avatarRow: { flexDirection: 'row', alignItems: 'flex-end', marginTop: -56, paddingHorizontal: 20, justifyContent: 'space-between', zIndex: 2 },
     avatarWrapper: { borderWidth: 5, borderColor: '#fff', borderRadius: 64, overflow: 'hidden', backgroundColor: '#fff', },
     actionButtonWrapper: { flex: 1, alignItems: 'flex-end', justifyContent: 'flex-end' },
-    actionButton: { backgroundColor: '#fff', color: '#d169e5', borderWidth: 1, borderColor: '#d169e5', borderRadius: 24, paddingVertical: 7, paddingHorizontal: 22, fontWeight: 'bold', fontSize: 16, marginBottom: 8, elevation: 2, shadowColor: '#d169e5', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.08, shadowRadius: 2 },
-    header: { alignItems: 'flex-start', paddingTop: 18, paddingBottom: 24, width: '100%', paddingHorizontal: 20 },
+    actionButton: {
+        backgroundColor: '#fff',
+        borderWidth: 1,
+        borderColor: '#d169e5',
+        borderRadius: 24,
+        paddingVertical: 7,
+        paddingHorizontal: 22,
+        marginBottom: 8,
+        elevation: 2,
+        shadowColor: '#d169e5',
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.08,
+        shadowRadius: 2
+    },
+    actionButtonText: {
+        color: '#d169e5',
+        fontWeight: 'bold',
+        fontSize: 16
+    },
+    header: { alignItems: 'flex-start', width: '100%', paddingHorizontal: 20 },
     displayName: { fontSize: 24, fontWeight: 'bold', marginTop: 10, marginBottom: 2, letterSpacing: 0.1 },
     subText: { fontSize: 16, marginBottom: 2, color: '#a0a0a0' },
-    bio: { fontSize: 16, marginTop: 10, marginBottom: 10, color: '#666', fontStyle: 'italic', lineHeight: 22 },
-    infoRow: { flexDirection: 'row', alignItems: 'center', marginBottom: 10, flexWrap: 'wrap' },
-    infoItem: { flexDirection: 'row', alignItems: 'center', marginRight: 28, marginBottom: 4, minWidth: 120 },
-    infoText: { fontSize: 15 },
+    bio: { fontSize: 16, marginTop: 10, marginBottom: 10, color: '#666', lineHeight: 22 },
+    infoGrid: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 10,
+        flexWrap: 'wrap'
+    },
+    infoGridItem: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginRight: 24,
+        marginBottom: 4
+    },
+    infoGridText: {
+        fontSize: 15
+    },
     divider: { height: 1, backgroundColor: '#e0e0e0', width: '100%', marginVertical: 14 },
+    linksMore: {
+        fontSize: 15,
+        marginLeft: 4
+    },
     statsRow: { width: '100%', flex: 1, flexDirection: 'row', alignItems: 'center', marginTop: 6, marginBottom: 2, justifyContent: 'space-between' },
     statItem: { flex: 1, alignItems: 'center', minWidth: 50, marginBottom: 12 },
     karmaLabel: { fontSize: 14, marginBottom: 2, textAlign: 'center', color: '#a0a0a0' },

package/src/ui/screens/RecoverAccountScreen.tsx

@@ -4,17 +4,21 @@ import { Ionicons } from '@expo/vector-icons';
 import TextField from '../components/internal/TextField';
 import GroupedPillButtons from '../components/internal/GroupedPillButtons';
 import HighFive from '../../assets/illustrations/HighFive';
-import { useThemeColors } from '../styles';
+import { useThemeColors, createAuthStyles } from '../styles';
 import PinInput from '../components/internal/PinInput';
 
 interface RecoverAccountScreenProps {
-    navigate: (screen: string) => void;
+    navigate: (screen: string, props?: Record<string, any>) => void;
+    goBack: () => void;
     theme: string;
+    returnTo?: string;
+    returnStep?: number;
+    returnData?: Record<string, any>;
 }
 
 const PIN_LENGTH = 6;
 
-const RecoverAccountScreen: React.FC<RecoverAccountScreenProps> = ({ navigate, theme }) => {
+const RecoverAccountScreen: React.FC<RecoverAccountScreenProps> = ({ navigate, goBack, theme, returnTo, returnStep, returnData }) => {
     const [identifier, setIdentifier] = useState('');
     const [isLoading, setIsLoading] = useState(false);
     const [errorMessage, setErrorMessage] = useState('');
@@ -24,7 +28,7 @@ const RecoverAccountScreen: React.FC<RecoverAccountScreenProps> = ({ navigate, t
     const fadeAnim = useRef(new Animated.Value(1)).current;
     const slideAnim = useRef(new Animated.Value(0)).current;
     const colors = useThemeColors(theme as 'light' | 'dark');
-    const styles = createStyles(colors);
+    const styles = createAuthStyles(colors, theme);
     const identifierRef = useRef<TextInput>(null);
     const handleRequestWithFocus = () => {
         if (!identifier) {
@@ -69,6 +73,37 @@ const RecoverAccountScreen: React.FC<RecoverAccountScreenProps> = ({ navigate, t
         }, 1200);
     };
 
+    // Helper function to determine back action based on current step
+    const handleBack = () => {
+        console.log('RecoverAccount handleBack:', { step, returnTo, returnStep, returnData });
+
+        if (step === 'code') {
+            setStep('request');
+        } else if (step === 'done') {
+            // If we have return information, use it; otherwise go to SignIn
+            if (returnTo && returnStep !== undefined) {
+                console.log('Navigating back to', returnTo, 'with step', returnStep, 'and data', returnData);
+                navigate(returnTo, {
+                    initialStep: returnStep,
+                    ...returnData
+                });
+            } else {
+                navigate('SignIn');
+            }
+        } else {
+            // For 'request' step, if we have return information, use it; otherwise go back
+            if (returnTo && returnStep !== undefined) {
+                console.log('Navigating back to', returnTo, 'with step', returnStep, 'and data', returnData);
+                navigate(returnTo, {
+                    initialStep: returnStep,
+                    ...returnData
+                });
+            } else {
+                goBack();
+            }
+        }
+    };
+
     return (
         <KeyboardAvoidingView
             style={[styles.container, { backgroundColor: colors.background }]}
@@ -97,25 +132,23 @@ const RecoverAccountScreen: React.FC<RecoverAccountScreenProps> = ({ navigate, t
                             <TextField
                                 ref={identifierRef}
                                 label="Email or Username"
-                                icon="mail-outline"
+                                leading={<Ionicons name="mail-outline" size={24} color={colors.secondaryText} />}
                                 value={identifier}
                                 onChangeText={setIdentifier}
                                 autoCapitalize="none"
                                 autoCorrect={false}
-                                colors={colors}
                                 variant="filled"
                                 error={errorMessage || undefined}
                                 editable={!isLoading}
                                 autoFocus
                                 testID="recover-identifier-input"
-                                validMessage={successMessage || undefined}
                                 onSubmitEditing={handleRequestWithFocus}
                             />
                             <GroupedPillButtons
                                 buttons={[
                                     {
-                                        text: 'Back to Sign In',
-                                        onPress: () => navigate('SignIn'),
+                                        text: 'Back',
+                                        onPress: handleBack,
                                         icon: 'arrow-back',
                                         variant: 'transparent',
                                     },
@@ -155,7 +188,7 @@ const RecoverAccountScreen: React.FC<RecoverAccountScreenProps> = ({ navigate, t
                                 buttons={[
                                     {
                                         text: 'Back',
-                                        onPress: () => setStep('request'),
+                                        onPress: handleBack,
                                         icon: 'arrow-back',
                                         variant: 'transparent',
                                     },
@@ -178,8 +211,8 @@ const RecoverAccountScreen: React.FC<RecoverAccountScreenProps> = ({ navigate, t
                             <GroupedPillButtons
                                 buttons={[
                                     {
-                                        text: 'Back to Sign In',
-                                        onPress: () => navigate('SignIn'),
+                                        text: 'Back',
+                                        onPress: handleBack,
                                         icon: 'arrow-back',
                                         variant: 'primary',
                                     },
@@ -194,67 +227,6 @@ const RecoverAccountScreen: React.FC<RecoverAccountScreenProps> = ({ navigate, t
     );
 };
 
-const createStyles = (colors: any) => StyleSheet.create({
-    container: {
-        flex: 1,
-    },
-    scrollContent: {
-        flexGrow: 1,
-        paddingHorizontal: 24,
-        paddingTop: 4,
-        paddingBottom: 20,
-    },
-    stepContainer: {
-        flex: 1,
-        justifyContent: 'flex-start',
-        alignItems: 'flex-start',
-    },
-    modernHeader: {
-        alignItems: 'flex-start',
-        width: '100%',
-        marginBottom: 24,
-    },
-    modernTitle: {
-        fontFamily: Platform.OS === 'web' ? 'Phudu' : 'Phudu-Bold',
-        fontWeight: Platform.OS === 'web' ? 'bold' : undefined,
-        fontSize: 62,
-        lineHeight: 48,
-        marginBottom: 18,
-        textAlign: 'left',
-        letterSpacing: -1,
-    },
-    modernSubtitle: {
-        fontSize: 18,
-        lineHeight: 24,
-        textAlign: 'left',
-        opacity: 0.8,
-        marginBottom: 24,
-    },
-    successCard: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        padding: 16,
-        borderRadius: 16,
-        marginBottom: 24,
-        gap: 12,
-        width: '100%',
-    },
-    belowInputMessage: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        marginTop: 4,
-        marginBottom: 0,
-        gap: 6,
-    },
-    belowInputText: {
-        fontSize: 13,
-        fontWeight: '500',
-    },
-    successText: {
-        fontSize: 14,
-        fontWeight: '500',
-        flex: 1,
-    },
-});
+
 
 export default RecoverAccountScreen; 

package/src/ui/screens/SessionManagementScreen.tsx

@@ -15,14 +15,17 @@ import { useOxy } from '../context/OxyContext';
 import { fontFamilies } from '../styles/fonts';
 import { toast } from '../../lib/sonner';
 import { Ionicons } from '@expo/vector-icons';
+import OxyIcon from '../components/icon/OxyIcon';
 import { SecureClientSession } from '../../models/secureSession';
 import { confirmAction } from '../utils/confirmAction';
+import { Header } from '../components';
 
 const SessionManagementScreen: React.FC<BaseScreenProps> = ({
     onClose,
     theme,
+    goBack,
 }) => {
-    const { sessions: userSessions, activeSessionId, refreshSessions, logout, oxyServices } = useOxy();
+    const { sessions: userSessions, activeSessionId, refreshSessions, logout, logoutAll, oxyServices } = useOxy();
     const [loading, setLoading] = useState(true);
     const [refreshing, setRefreshing] = useState(false);
     const [actionLoading, setActionLoading] = useState<string | null>(null);
@@ -112,7 +115,7 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
             async () => {
                 try {
                     setActionLoading('all');
-                    await oxyServices.logoutAllSessions();
+                    await logoutAll();
                 } catch (error) {
                     console.error('Logout all sessions failed:', error);
                     toast.error('Failed to logout all sessions. Please try again.');
@@ -166,10 +169,13 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
 
     return (
         <View style={[styles.container, { backgroundColor }]}>
-            <View style={styles.header}>
-                <Text style={[styles.title, { color: textColor }]}>Active Sessions</Text>
-                <Text style={[styles.subtitle, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>Manage your active sessions across all devices</Text>
-            </View>
+            <Header
+                title="Active Sessions"
+                subtitle="Manage your active sessions across all devices"
+                theme={theme}
+                onBack={goBack || onClose}
+                elevation="subtle"
+            />
             <ScrollView
                 style={styles.scrollView}
                 contentContainerStyle={styles.scrollContainer}
@@ -274,22 +280,8 @@ const styles = StyleSheet.create({
         justifyContent: 'center',
         alignItems: 'center',
     },
-    header: {
-        padding: 20,
-        paddingBottom: 16,
-    },
-    title: {
-        fontFamily: Platform.OS === 'web'
-            ? 'Phudu'
-            : 'phuduSemiBold',
-        fontWeight: Platform.OS === 'web' ? '600' : undefined,
-        fontSize: 24,
-        marginBottom: 8,
-    },
-    subtitle: {
-        fontSize: 16,
-        lineHeight: 20,
-    },
+
+
     scrollView: {
         flex: 1,
     },