@onairos/react-native 3.1.16 → 3.1.18

package/src/components/ExistingUserDataConfirmation.tsx

@@ -1,507 +1,507 @@
-import React, { useState, useEffect } from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  TouchableOpacity,
-  ScrollView,
-  Dimensions,
-  ActivityIndicator,
-  Alert,
-} from 'react-native';
-import LinearGradient from 'react-native-linear-gradient';
-import { triggerHaptic, HapticType } from '../utils/haptics';
-
-const { width, height } = Dimensions.get('window');
-
-interface ExistingUserDataConfirmationProps {
-  visible: boolean;
-  onConfirm: () => void;
-  onCancel: () => void;
-  onAddMoreData: () => void;
-  accountInfo: any;
-  userEmail: string;
-}
-
-interface ConnectionInfo {
-  platform: string;
-  connectedAt: string;
-  status: 'active' | 'inactive' | 'expired';
-  hasData: boolean;
-  displayName?: string;
-}
-
-export const ExistingUserDataConfirmation: React.FC<ExistingUserDataConfirmationProps> = ({
-  visible,
-  onConfirm,
-  onCancel,
-  onAddMoreData,
-  accountInfo,
-  userEmail,
-}) => {
-  const [isLoading, setIsLoading] = useState(false);
-  const [connections, setConnections] = useState<ConnectionInfo[]>([]);
-  const [dataStats, setDataStats] = useState({
-    connectionsCount: 0,
-    traitsCount: 0,
-    hasPersonalityData: false,
-    hasTrainedModel: false,
-    hasAvatar: false,
-  });
-
-  useEffect(() => {
-    if (visible && accountInfo) {
-      parseAccountInfo();
-    }
-  }, [visible, accountInfo]);
-
-  const parseAccountInfo = () => {
-    console.log('🔍 Parsing account info for existing user:', accountInfo);
-    
-    // Parse existing user data from backend response
-    const existingData = accountInfo.existingUserData || {};
-    const summary = existingData.summary || {};
-    const connectionsList = existingData.connections || [];
-    
-    // Set data statistics
-    setDataStats({
-      connectionsCount: summary.connectionsCount || 0,
-      traitsCount: summary.traitsCount || 0,
-      hasPersonalityData: summary.hasPersonalityData || false,
-      hasTrainedModel: summary.hasTrainedModel || false,
-      hasAvatar: summary.hasAvatar || false,
-    });
-    
-    // Parse connections
-    const parsedConnections: ConnectionInfo[] = connectionsList.map((conn: any) => ({
-      platform: conn.platform,
-      connectedAt: conn.connectedAt,
-      status: conn.status,
-      hasData: conn.hasData,
-      displayName: conn.displayName || conn.platform,
-    }));
-    
-    setConnections(parsedConnections);
-    
-    console.log('📊 Parsed data stats:', dataStats);
-    console.log('🔗 Parsed connections:', parsedConnections);
-  };
-
-  const handleConfirm = async () => {
-    setIsLoading(true);
-    triggerHaptic(HapticType.SUCCESS);
-    
-    try {
-      // Small delay for better UX
-      await new Promise<void>(resolve => setTimeout(() => resolve(), 500));
-      onConfirm();
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleCancel = () => {
-    triggerHaptic(HapticType.BUTTON_PRESS);
-    onCancel();
-  };
-
-  const handleAddMoreData = () => {
-    triggerHaptic(HapticType.BUTTON_PRESS);
-    onAddMoreData();
-  };
-
-  const getPlatformEmoji = (platform: string): string => {
-    const emojiMap: { [key: string]: string } = {
-      'YouTube': '📺',
-      'Reddit': '🔴',
-      'Instagram': '📸',
-      'LinkedIn': '💼',
-      'Pinterest': '📌',
-      'Facebook': '📘',
-      'Gmail': '📧',
-      'Email': '✉️',
-    };
-    return emojiMap[platform] || '🔗';
-  };
-
-  const getStatusColor = (status: string): string => {
-    switch (status) {
-      case 'active': return '#10B981';
-      case 'expired': return '#F59E0B';
-      case 'inactive': return '#6B7280';
-      default: return '#6B7280';
-    }
-  };
-
-  if (!visible) return null;
-
-  return (
-    <View style={styles.overlay}>
-      <View style={styles.container}>
-        <ScrollView style={styles.scrollView} showsVerticalScrollIndicator={false}>
-          {/* Header */}
-          <View style={styles.header}>
-            <Text style={styles.headerTitle}>Welcome Back!</Text>
-            <Text style={styles.headerSubtitle}>
-              We found your existing Onairos account
-            </Text>
-          </View>
-
-          {/* User Info */}
-          <View style={styles.userInfoContainer}>
-            <View style={styles.userInfoRow}>
-              <Text style={styles.userInfoLabel}>Email:</Text>
-              <Text style={styles.userInfoValue}>{userEmail}</Text>
-            </View>
-            <View style={styles.userInfoRow}>
-              <Text style={styles.userInfoLabel}>Account Status:</Text>
-              <Text style={[styles.userInfoValue, { color: '#10B981' }]}>Verified</Text>
-            </View>
-          </View>
-
-          {/* Data Summary */}
-          <View style={styles.dataSummaryContainer}>
-            <Text style={styles.sectionTitle}>Your Existing Data</Text>
-            
-            <View style={styles.statsGrid}>
-              <View style={styles.statItem}>
-                <Text style={styles.statNumber}>{dataStats.connectionsCount}</Text>
-                <Text style={styles.statLabel}>Connections</Text>
-              </View>
-              <View style={styles.statItem}>
-                <Text style={styles.statNumber}>{dataStats.traitsCount}</Text>
-                <Text style={styles.statLabel}>Traits</Text>
-              </View>
-              <View style={styles.statItem}>
-                <Text style={styles.statNumber}>{dataStats.hasTrainedModel ? '✅' : '❌'}</Text>
-                <Text style={styles.statLabel}>AI Model</Text>
-              </View>
-            </View>
-          </View>
-
-          {/* Connected Platforms */}
-          {connections.length > 0 && (
-            <View style={styles.connectionsContainer}>
-              <Text style={styles.sectionTitle}>Connected Platforms</Text>
-              
-              {connections.map((connection, index) => (
-                <View key={index} style={styles.connectionItem}>
-                  <View style={styles.connectionLeft}>
-                    <Text style={styles.connectionEmoji}>
-                      {getPlatformEmoji(connection.platform)}
-                    </Text>
-                    <View style={styles.connectionInfo}>
-                      <Text style={styles.connectionName}>{connection.displayName}</Text>
-                      <Text style={styles.connectionDate}>
-                        Connected {new Date(connection.connectedAt).toLocaleDateString()}
-                      </Text>
-                    </View>
-                  </View>
-                  <View style={styles.connectionRight}>
-                    <View style={[
-                      styles.statusDot,
-                      { backgroundColor: getStatusColor(connection.status) }
-                    ]} />
-                    <Text style={[
-                      styles.statusText,
-                      { color: getStatusColor(connection.status) }
-                    ]}>
-                      {connection.status}
-                    </Text>
-                  </View>
-                </View>
-              ))}
-            </View>
-          )}
-
-          {/* Data Usage Explanation */}
-          <View style={styles.explanationContainer}>
-            <Text style={styles.explanationTitle}>Share Your Data with Enoch?</Text>
-            <Text style={styles.explanationText}>
-              Your existing personality data and connected accounts will be used to:
-            </Text>
-            <View style={styles.benefitsList}>
-              <Text style={styles.benefitItem}>• Create personalized experiences</Text>
-              <Text style={styles.benefitItem}>• Match you with compatible people</Text>
-              <Text style={styles.benefitItem}>• Provide AI-powered insights</Text>
-              <Text style={styles.benefitItem}>• Enhance your social connections</Text>
-            </View>
-            <Text style={styles.privacyNote}>
-              Your data remains secure and encrypted. You can manage your privacy settings anytime.
-            </Text>
-          </View>
-
-          {/* Action Buttons */}
-          <View style={styles.actionButtonsContainer}>
-            {/* Add More Data Button */}
-            <TouchableOpacity
-              style={styles.addMoreButton}
-              onPress={handleAddMoreData}
-              activeOpacity={0.8}
-            >
-              <Text style={styles.addMoreButtonText}>+ Add More Data</Text>
-            </TouchableOpacity>
-
-            {/* Main Action Buttons */}
-            <View style={styles.mainButtons}>
-              <TouchableOpacity
-                style={styles.cancelButton}
-                onPress={handleCancel}
-                activeOpacity={0.8}
-              >
-                <Text style={styles.cancelButtonText}>Not Now</Text>
-              </TouchableOpacity>
-
-              <TouchableOpacity
-                style={styles.confirmButton}
-                onPress={handleConfirm}
-                activeOpacity={0.8}
-                disabled={isLoading}
-              >
-                <LinearGradient
-                  colors={['#D4A536', '#B8941F']}
-                  style={styles.confirmButtonGradient}
-                >
-                  {isLoading ? (
-                    <ActivityIndicator color="#FFFFFF" size="small" />
-                  ) : (
-                    <Text style={styles.confirmButtonText}>Share Data</Text>
-                  )}
-                </LinearGradient>
-              </TouchableOpacity>
-            </View>
-          </View>
-        </ScrollView>
-      </View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  overlay: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    justifyContent: 'center',
-    alignItems: 'center',
-    zIndex: 1000,
-  },
-  container: {
-    backgroundColor: '#FFFFFF',
-    borderRadius: 20,
-    width: width * 0.9,
-    maxHeight: height * 0.8,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.25,
-    shadowRadius: 12,
-    elevation: 10,
-  },
-  scrollView: {
-    flex: 1,
-  },
-  header: {
-    padding: 24,
-    alignItems: 'center',
-    borderBottomWidth: 1,
-    borderBottomColor: '#F3F4F6',
-  },
-  headerTitle: {
-    fontSize: 24,
-    fontWeight: '700',
-    color: '#1F2937',
-    marginBottom: 8,
-  },
-  headerSubtitle: {
-    fontSize: 16,
-    color: '#6B7280',
-    textAlign: 'center',
-  },
-  userInfoContainer: {
-    padding: 20,
-    backgroundColor: '#F9FAFB',
-    marginHorizontal: 20,
-    marginTop: 20,
-    borderRadius: 12,
-  },
-  userInfoRow: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginBottom: 8,
-  },
-  userInfoLabel: {
-    fontSize: 14,
-    color: '#6B7280',
-    fontWeight: '500',
-  },
-  userInfoValue: {
-    fontSize: 14,
-    color: '#1F2937',
-    fontWeight: '600',
-  },
-  dataSummaryContainer: {
-    padding: 20,
-  },
-  sectionTitle: {
-    fontSize: 18,
-    fontWeight: '600',
-    color: '#1F2937',
-    marginBottom: 16,
-  },
-  statsGrid: {
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-    backgroundColor: '#F9FAFB',
-    borderRadius: 12,
-    padding: 16,
-  },
-  statItem: {
-    alignItems: 'center',
-  },
-  statNumber: {
-    fontSize: 24,
-    fontWeight: '700',
-    color: '#D4A536',
-    marginBottom: 4,
-  },
-  statLabel: {
-    fontSize: 12,
-    color: '#6B7280',
-    fontWeight: '500',
-  },
-  connectionsContainer: {
-    padding: 20,
-  },
-  connectionItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    padding: 16,
-    backgroundColor: '#F9FAFB',
-    borderRadius: 12,
-    marginBottom: 8,
-  },
-  connectionLeft: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    flex: 1,
-  },
-  connectionEmoji: {
-    fontSize: 24,
-    marginRight: 12,
-  },
-  connectionInfo: {
-    flex: 1,
-  },
-  connectionName: {
-    fontSize: 16,
-    fontWeight: '600',
-    color: '#1F2937',
-    marginBottom: 2,
-  },
-  connectionDate: {
-    fontSize: 12,
-    color: '#6B7280',
-  },
-  connectionRight: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  statusDot: {
-    width: 8,
-    height: 8,
-    borderRadius: 4,
-    marginRight: 6,
-  },
-  statusText: {
-    fontSize: 12,
-    fontWeight: '500',
-    textTransform: 'capitalize',
-  },
-  explanationContainer: {
-    padding: 20,
-    backgroundColor: '#F0F9FF',
-    marginHorizontal: 20,
-    borderRadius: 12,
-    marginBottom: 20,
-  },
-  explanationTitle: {
-    fontSize: 16,
-    fontWeight: '600',
-    color: '#1F2937',
-    marginBottom: 12,
-  },
-  explanationText: {
-    fontSize: 14,
-    color: '#4B5563',
-    marginBottom: 12,
-    lineHeight: 20,
-  },
-  benefitsList: {
-    marginBottom: 12,
-  },
-  benefitItem: {
-    fontSize: 14,
-    color: '#4B5563',
-    marginBottom: 4,
-    lineHeight: 20,
-  },
-  privacyNote: {
-    fontSize: 12,
-    color: '#6B7280',
-    fontStyle: 'italic',
-    lineHeight: 16,
-  },
-  actionButtonsContainer: {
-    padding: 20,
-  },
-  addMoreButton: {
-    backgroundColor: '#F3F4F6',
-    borderRadius: 12,
-    padding: 16,
-    alignItems: 'center',
-    marginBottom: 16,
-    borderWidth: 1,
-    borderColor: '#D1D5DB',
-  },
-  addMoreButtonText: {
-    fontSize: 16,
-    color: '#4B5563',
-    fontWeight: '600',
-  },
-  mainButtons: {
-    flexDirection: 'row',
-    gap: 12,
-  },
-  cancelButton: {
-    flex: 1,
-    backgroundColor: '#F3F4F6',
-    borderRadius: 12,
-    padding: 16,
-    alignItems: 'center',
-  },
-  cancelButtonText: {
-    fontSize: 16,
-    color: '#6B7280',
-    fontWeight: '600',
-  },
-  confirmButton: {
-    flex: 2,
-    borderRadius: 12,
-    overflow: 'hidden',
-  },
-  confirmButtonGradient: {
-    padding: 16,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  confirmButtonText: {
-    fontSize: 16,
-    color: '#FFFFFF',
-    fontWeight: '700',
-  },
+import React, { useState, useEffect } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  ScrollView,
+  Dimensions,
+  ActivityIndicator,
+  Alert,
+} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import { triggerHaptic, HapticType } from '../utils/haptics';
+
+const { width, height } = Dimensions.get('window');
+
+interface ExistingUserDataConfirmationProps {
+  visible: boolean;
+  onConfirm: () => void;
+  onCancel: () => void;
+  onAddMoreData: () => void;
+  accountInfo: any;
+  userEmail: string;
+}
+
+interface ConnectionInfo {
+  platform: string;
+  connectedAt: string;
+  status: 'active' | 'inactive' | 'expired';
+  hasData: boolean;
+  displayName?: string;
+}
+
+export const ExistingUserDataConfirmation: React.FC<ExistingUserDataConfirmationProps> = ({
+  visible,
+  onConfirm,
+  onCancel,
+  onAddMoreData,
+  accountInfo,
+  userEmail,
+}) => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [connections, setConnections] = useState<ConnectionInfo[]>([]);
+  const [dataStats, setDataStats] = useState({
+    connectionsCount: 0,
+    traitsCount: 0,
+    hasPersonalityData: false,
+    hasTrainedModel: false,
+    hasAvatar: false,
+  });
+
+  useEffect(() => {
+    if (visible && accountInfo) {
+      parseAccountInfo();
+    }
+  }, [visible, accountInfo]);
+
+  const parseAccountInfo = () => {
+    console.log('🔍 Parsing account info for existing user:', accountInfo);
+    
+    // Parse existing user data from backend response
+    const existingData = accountInfo.existingUserData || {};
+    const summary = existingData.summary || {};
+    const connectionsList = existingData.connections || [];
+    
+    // Set data statistics
+    setDataStats({
+      connectionsCount: summary.connectionsCount || 0,
+      traitsCount: summary.traitsCount || 0,
+      hasPersonalityData: summary.hasPersonalityData || false,
+      hasTrainedModel: summary.hasTrainedModel || false,
+      hasAvatar: summary.hasAvatar || false,
+    });
+    
+    // Parse connections
+    const parsedConnections: ConnectionInfo[] = connectionsList.map((conn: any) => ({
+      platform: conn.platform,
+      connectedAt: conn.connectedAt,
+      status: conn.status,
+      hasData: conn.hasData,
+      displayName: conn.displayName || conn.platform,
+    }));
+    
+    setConnections(parsedConnections);
+    
+    console.log('📊 Parsed data stats:', dataStats);
+    console.log('🔗 Parsed connections:', parsedConnections);
+  };
+
+  const handleConfirm = async () => {
+    setIsLoading(true);
+    triggerHaptic(HapticType.SUCCESS);
+    
+    try {
+      // Small delay for better UX
+      await new Promise<void>(resolve => setTimeout(() => resolve(), 500));
+      onConfirm();
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleCancel = () => {
+    triggerHaptic(HapticType.BUTTON_PRESS);
+    onCancel();
+  };
+
+  const handleAddMoreData = () => {
+    triggerHaptic(HapticType.BUTTON_PRESS);
+    onAddMoreData();
+  };
+
+  const getPlatformEmoji = (platform: string): string => {
+    const emojiMap: { [key: string]: string } = {
+      'YouTube': '📺',
+      'Reddit': '🔴',
+      'Instagram': '📸',
+      'LinkedIn': '💼',
+      'Pinterest': '📌',
+      'Facebook': '📘',
+      'Gmail': '📧',
+      'Email': '✉️',
+    };
+    return emojiMap[platform] || '🔗';
+  };
+
+  const getStatusColor = (status: string): string => {
+    switch (status) {
+      case 'active': return '#10B981';
+      case 'expired': return '#F59E0B';
+      case 'inactive': return '#6B7280';
+      default: return '#6B7280';
+    }
+  };
+
+  if (!visible) return null;
+
+  return (
+    <View style={styles.overlay}>
+      <View style={styles.container}>
+        <ScrollView style={styles.scrollView} showsVerticalScrollIndicator={false}>
+          {/* Header */}
+          <View style={styles.header}>
+            <Text style={styles.headerTitle}>Welcome Back!</Text>
+            <Text style={styles.headerSubtitle}>
+              We found your existing Onairos account
+            </Text>
+          </View>
+
+          {/* User Info */}
+          <View style={styles.userInfoContainer}>
+            <View style={styles.userInfoRow}>
+              <Text style={styles.userInfoLabel}>Email:</Text>
+              <Text style={styles.userInfoValue}>{userEmail}</Text>
+            </View>
+            <View style={styles.userInfoRow}>
+              <Text style={styles.userInfoLabel}>Account Status:</Text>
+              <Text style={[styles.userInfoValue, { color: '#10B981' }]}>Verified</Text>
+            </View>
+          </View>
+
+          {/* Data Summary */}
+          <View style={styles.dataSummaryContainer}>
+            <Text style={styles.sectionTitle}>Your Existing Data</Text>
+            
+            <View style={styles.statsGrid}>
+              <View style={styles.statItem}>
+                <Text style={styles.statNumber}>{dataStats.connectionsCount}</Text>
+                <Text style={styles.statLabel}>Connections</Text>
+              </View>
+              <View style={styles.statItem}>
+                <Text style={styles.statNumber}>{dataStats.traitsCount}</Text>
+                <Text style={styles.statLabel}>Traits</Text>
+              </View>
+              <View style={styles.statItem}>
+                <Text style={styles.statNumber}>{dataStats.hasTrainedModel ? '✅' : '❌'}</Text>
+                <Text style={styles.statLabel}>AI Model</Text>
+              </View>
+            </View>
+          </View>
+
+          {/* Connected Platforms */}
+          {connections.length > 0 && (
+            <View style={styles.connectionsContainer}>
+              <Text style={styles.sectionTitle}>Connected Platforms</Text>
+              
+              {connections.map((connection, index) => (
+                <View key={index} style={styles.connectionItem}>
+                  <View style={styles.connectionLeft}>
+                    <Text style={styles.connectionEmoji}>
+                      {getPlatformEmoji(connection.platform)}
+                    </Text>
+                    <View style={styles.connectionInfo}>
+                      <Text style={styles.connectionName}>{connection.displayName}</Text>
+                      <Text style={styles.connectionDate}>
+                        Connected {new Date(connection.connectedAt).toLocaleDateString()}
+                      </Text>
+                    </View>
+                  </View>
+                  <View style={styles.connectionRight}>
+                    <View style={[
+                      styles.statusDot,
+                      { backgroundColor: getStatusColor(connection.status) }
+                    ]} />
+                    <Text style={[
+                      styles.statusText,
+                      { color: getStatusColor(connection.status) }
+                    ]}>
+                      {connection.status}
+                    </Text>
+                  </View>
+                </View>
+              ))}
+            </View>
+          )}
+
+          {/* Data Usage Explanation */}
+          <View style={styles.explanationContainer}>
+            <Text style={styles.explanationTitle}>Share Your Data with Enoch?</Text>
+            <Text style={styles.explanationText}>
+              Your existing personality data and connected accounts will be used to:
+            </Text>
+            <View style={styles.benefitsList}>
+              <Text style={styles.benefitItem}>• Create personalized experiences</Text>
+              <Text style={styles.benefitItem}>• Match you with compatible people</Text>
+              <Text style={styles.benefitItem}>• Provide AI-powered insights</Text>
+              <Text style={styles.benefitItem}>• Enhance your social connections</Text>
+            </View>
+            <Text style={styles.privacyNote}>
+              Your data remains secure and encrypted. You can manage your privacy settings anytime.
+            </Text>
+          </View>
+
+          {/* Action Buttons */}
+          <View style={styles.actionButtonsContainer}>
+            {/* Add More Data Button */}
+            <TouchableOpacity
+              style={styles.addMoreButton}
+              onPress={handleAddMoreData}
+              activeOpacity={0.8}
+            >
+              <Text style={styles.addMoreButtonText}>+ Add More Data</Text>
+            </TouchableOpacity>
+
+            {/* Main Action Buttons */}
+            <View style={styles.mainButtons}>
+              <TouchableOpacity
+                style={styles.cancelButton}
+                onPress={handleCancel}
+                activeOpacity={0.8}
+              >
+                <Text style={styles.cancelButtonText}>Not Now</Text>
+              </TouchableOpacity>
+
+              <TouchableOpacity
+                style={styles.confirmButton}
+                onPress={handleConfirm}
+                activeOpacity={0.8}
+                disabled={isLoading}
+              >
+                <LinearGradient
+                  colors={['#D4A536', '#B8941F']}
+                  style={styles.confirmButtonGradient}
+                >
+                  {isLoading ? (
+                    <ActivityIndicator color="#FFFFFF" size="small" />
+                  ) : (
+                    <Text style={styles.confirmButtonText}>Share Data</Text>
+                  )}
+                </LinearGradient>
+              </TouchableOpacity>
+            </View>
+          </View>
+        </ScrollView>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  overlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 1000,
+  },
+  container: {
+    backgroundColor: '#FFFFFF',
+    borderRadius: 20,
+    width: width * 0.9,
+    maxHeight: height * 0.8,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.25,
+    shadowRadius: 12,
+    elevation: 10,
+  },
+  scrollView: {
+    flex: 1,
+  },
+  header: {
+    padding: 24,
+    alignItems: 'center',
+    borderBottomWidth: 1,
+    borderBottomColor: '#F3F4F6',
+  },
+  headerTitle: {
+    fontSize: 24,
+    fontWeight: '700',
+    color: '#1F2937',
+    marginBottom: 8,
+  },
+  headerSubtitle: {
+    fontSize: 16,
+    color: '#6B7280',
+    textAlign: 'center',
+  },
+  userInfoContainer: {
+    padding: 20,
+    backgroundColor: '#F9FAFB',
+    marginHorizontal: 20,
+    marginTop: 20,
+    borderRadius: 12,
+  },
+  userInfoRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 8,
+  },
+  userInfoLabel: {
+    fontSize: 14,
+    color: '#6B7280',
+    fontWeight: '500',
+  },
+  userInfoValue: {
+    fontSize: 14,
+    color: '#1F2937',
+    fontWeight: '600',
+  },
+  dataSummaryContainer: {
+    padding: 20,
+  },
+  sectionTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#1F2937',
+    marginBottom: 16,
+  },
+  statsGrid: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    backgroundColor: '#F9FAFB',
+    borderRadius: 12,
+    padding: 16,
+  },
+  statItem: {
+    alignItems: 'center',
+  },
+  statNumber: {
+    fontSize: 24,
+    fontWeight: '700',
+    color: '#D4A536',
+    marginBottom: 4,
+  },
+  statLabel: {
+    fontSize: 12,
+    color: '#6B7280',
+    fontWeight: '500',
+  },
+  connectionsContainer: {
+    padding: 20,
+  },
+  connectionItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: 16,
+    backgroundColor: '#F9FAFB',
+    borderRadius: 12,
+    marginBottom: 8,
+  },
+  connectionLeft: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1,
+  },
+  connectionEmoji: {
+    fontSize: 24,
+    marginRight: 12,
+  },
+  connectionInfo: {
+    flex: 1,
+  },
+  connectionName: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#1F2937',
+    marginBottom: 2,
+  },
+  connectionDate: {
+    fontSize: 12,
+    color: '#6B7280',
+  },
+  connectionRight: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  statusDot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    marginRight: 6,
+  },
+  statusText: {
+    fontSize: 12,
+    fontWeight: '500',
+    textTransform: 'capitalize',
+  },
+  explanationContainer: {
+    padding: 20,
+    backgroundColor: '#F0F9FF',
+    marginHorizontal: 20,
+    borderRadius: 12,
+    marginBottom: 20,
+  },
+  explanationTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#1F2937',
+    marginBottom: 12,
+  },
+  explanationText: {
+    fontSize: 14,
+    color: '#4B5563',
+    marginBottom: 12,
+    lineHeight: 20,
+  },
+  benefitsList: {
+    marginBottom: 12,
+  },
+  benefitItem: {
+    fontSize: 14,
+    color: '#4B5563',
+    marginBottom: 4,
+    lineHeight: 20,
+  },
+  privacyNote: {
+    fontSize: 12,
+    color: '#6B7280',
+    fontStyle: 'italic',
+    lineHeight: 16,
+  },
+  actionButtonsContainer: {
+    padding: 20,
+  },
+  addMoreButton: {
+    backgroundColor: '#F3F4F6',
+    borderRadius: 12,
+    padding: 16,
+    alignItems: 'center',
+    marginBottom: 16,
+    borderWidth: 1,
+    borderColor: '#D1D5DB',
+  },
+  addMoreButtonText: {
+    fontSize: 16,
+    color: '#4B5563',
+    fontWeight: '600',
+  },
+  mainButtons: {
+    flexDirection: 'row',
+    gap: 12,
+  },
+  cancelButton: {
+    flex: 1,
+    backgroundColor: '#F3F4F6',
+    borderRadius: 12,
+    padding: 16,
+    alignItems: 'center',
+  },
+  cancelButtonText: {
+    fontSize: 16,
+    color: '#6B7280',
+    fontWeight: '600',
+  },
+  confirmButton: {
+    flex: 2,
+    borderRadius: 12,
+    overflow: 'hidden',
+  },
+  confirmButtonGradient: {
+    padding: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  confirmButtonText: {
+    fontSize: 16,
+    color: '#FFFFFF',
+    fontWeight: '700',
+  },
 });