@onairos/react-native 1.0.0

package/lib/module/components/Overlay.js

@@ -0,0 +1,825 @@
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { View, Text, StyleSheet, TouchableOpacity, ScrollView, Platform, Dimensions } from 'react-native';
+import BottomSheet from '@gorhom/bottom-sheet';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import { COLORS } from '../constants';
+const {
+  height
+} = Dimensions.get('window');
+export const Overlay = ({
+  visible,
+  onClose,
+  onAccept,
+  AppName,
+  requestData,
+  biometricType = Platform.OS === 'ios' ? 'FaceID' : 'BiometricID'
+}) => {
+  const bottomSheetRef = useRef(null);
+  const snapPoints = useMemo(() => ['85%'], []);
+
+  // Expand or collapse the bottom sheet based on visibility
+  useEffect(() => {
+    if (visible) {
+      var _bottomSheetRef$curre;
+      (_bottomSheetRef$curre = bottomSheetRef.current) === null || _bottomSheetRef$curre === void 0 || _bottomSheetRef$curre.expand();
+    } else {
+      var _bottomSheetRef$curre2;
+      (_bottomSheetRef$curre2 = bottomSheetRef.current) === null || _bottomSheetRef$curre2 === void 0 || _bottomSheetRef$curre2.close();
+    }
+  }, [visible]);
+
+  // Get the icon for the biometric type
+  const getBiometricIcon = useCallback(() => {
+    switch (biometricType) {
+      case 'FaceID':
+        return 'face';
+      case 'TouchID':
+        return 'fingerprint';
+      default:
+        return 'security';
+    }
+  }, [biometricType]);
+
+  // Render the requested data sections
+  const renderDataCategories = () => {
+    return Object.entries(requestData).map(([category, items]) => /*#__PURE__*/React.createElement(View, {
+      key: category,
+      style: styles.categoryContainer
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: styles.categoryTitle
+    }, category), Object.entries(items).map(([item, description]) => /*#__PURE__*/React.createElement(View, {
+      key: item,
+      style: styles.itemContainer
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "check-circle",
+      size: 20,
+      color: COLORS.primary
+    }), /*#__PURE__*/React.createElement(View, {
+      style: styles.itemContent
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: styles.itemTitle
+    }, item), /*#__PURE__*/React.createElement(Text, {
+      style: styles.itemDescription
+    }, description))))));
+  };
+  return /*#__PURE__*/React.createElement(BottomSheet, {
+    ref: bottomSheetRef,
+    index: visible ? 0 : -1,
+    snapPoints: snapPoints,
+    enablePanDownToClose: true,
+    onClose: onClose,
+    backdropComponent: ({
+      animatedIndex
+    }) => /*#__PURE__*/React.createElement(View, {
+      style: [styles.backdrop, {
+        opacity: animatedIndex.interpolate({
+          inputRange: [0, 1],
+          outputRange: [0.5, 0]
+        })
+      }]
+    })
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.container
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.header
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "shield",
+    size: 24,
+    color: COLORS.primary
+  }), /*#__PURE__*/React.createElement(Text, {
+    style: styles.headerTitle
+  }, "Data Request"), /*#__PURE__*/React.createElement(TouchableOpacity, {
+    onPress: onClose,
+    style: styles.closeButton
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "close",
+    size: 24,
+    color: "#000"
+  }))), /*#__PURE__*/React.createElement(ScrollView, {
+    style: styles.content
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.appInfoContainer
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.appName
+  }, AppName), /*#__PURE__*/React.createElement(Text, {
+    style: styles.requestText
+  }, "is requesting access to the following data:")), renderDataCategories(), /*#__PURE__*/React.createElement(View, {
+    style: styles.securityNotice
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "security",
+    size: 20,
+    color: "#666"
+  }), /*#__PURE__*/React.createElement(Text, {
+    style: styles.securityText
+  }, "Your data is securely processed and never shared with third parties."))), /*#__PURE__*/React.createElement(View, {
+    style: styles.footer
+  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
+    style: styles.cancelButton,
+    onPress: onClose
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.cancelButtonText
+  }, "Deny")), /*#__PURE__*/React.createElement(TouchableOpacity, {
+    style: styles.acceptButton,
+    onPress: onAccept
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.acceptButtonText
+  }, "Accept"), /*#__PURE__*/React.createElement(Icon, {
+    name: getBiometricIcon(),
+    size: 20,
+    color: "#fff",
+    style: styles.buttonIcon
+  })))));
+};
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff'
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: '#000'
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 16,
+    backgroundColor: COLORS.headerBg,
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16
+  },
+  headerTitle: {
+    flex: 1,
+    fontSize: 18,
+    fontWeight: '600',
+    marginLeft: 12,
+    color: '#000'
+  },
+  closeButton: {
+    padding: 8
+  },
+  content: {
+    flex: 1,
+    padding: 16
+  },
+  appInfoContainer: {
+    marginBottom: 24
+  },
+  appName: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    color: '#000',
+    marginBottom: 4
+  },
+  requestText: {
+    fontSize: 16,
+    color: '#666'
+  },
+  categoryContainer: {
+    marginBottom: 20
+  },
+  categoryTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#000',
+    marginBottom: 12
+  },
+  itemContainer: {
+    flexDirection: 'row',
+    marginBottom: 12,
+    paddingLeft: 8
+  },
+  itemContent: {
+    flex: 1,
+    marginLeft: 12
+  },
+  itemTitle: {
+    fontSize: 16,
+    fontWeight: '500',
+    color: '#000',
+    marginBottom: 2
+  },
+  itemDescription: {
+    fontSize: 14,
+    color: '#666'
+  },
+  securityNotice: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    backgroundColor: '#f5f5f5',
+    padding: 12,
+    borderRadius: 8,
+    marginBottom: 24
+  },
+  securityText: {
+    flex: 1,
+    fontSize: 14,
+    color: '#666',
+    marginLeft: 8
+  },
+  footer: {
+    flexDirection: 'row',
+    padding: 16,
+    borderTopWidth: 1,
+    borderTopColor: '#eee'
+  },
+  cancelButton: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingVertical: 12,
+    borderWidth: 1,
+    borderColor: '#ddd',
+    borderRadius: 25,
+    marginRight: 8
+  },
+  cancelButtonText: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#666'
+  },
+  acceptButton: {
+    flex: 2,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingVertical: 12,
+    backgroundColor: COLORS.primary,
+    borderRadius: 25,
+    marginLeft: 8
+  },
+  acceptButtonText: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#fff',
+    marginRight: 8
+  },
+  buttonIcon: {
+    marginLeft: 4
+  }
+});
+//# sourceMappingURL=Overlay.js.map'onairosToken', userOnairosDetails.token);
+
+        // Fetch account info
+        await onLoginSuccess(userDetails.email, true);
+      }
+    } catch (error) {
+      console.error('Othent login failed:', error);
+      setLoginError('Authentication failed. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // Handle username/password login
+  const handleUsernameLogin = async () => {
+    if (!username || !password) {
+      setLoginError('Please enter both username and password');
+      return;
+    }
+    setIsLoading(true);
+    setLoginError('');
+    try {
+      const response = await axios.post(`${API_URL}/login`, {
+        username,
+        password
+      });
+      if (response.status === 200) {
+        // Store the token
+        await AsyncStorage.setItem('onairosToken', response.data.token);
+        await AsyncStorage.setItem('username', username);
+
+        // Update authentication state
+        await onLoginSuccess(username, false);
+      } else {
+        setLoginError('Invalid username or password');
+      }
+    } catch (error) {
+      console.error('Login failed:', error);
+      setLoginError('Login failed. Please check your credentials.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // Render login form
+  const renderLoginForm = () => /*#__PURE__*/React.createElement(View, {
+    style: styles.loginContainer
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.loginTitle
+  }, "Sign in to Onairos"), loginError ? /*#__PURE__*/React.createElement(Text, {
+    style: styles.errorText
+  }, loginError) : null, /*#__PURE__*/React.createElement(View, {
+    style: styles.inputContainer
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.inputLabel
+  }, "Username"), /*#__PURE__*/React.createElement(TextInput, {
+    style: styles.input,
+    value: username,
+    onChangeText: setUsername,
+    placeholder: "Enter your username",
+    autoCapitalize: "none"
+  })), /*#__PURE__*/React.createElement(View, {
+    style: styles.inputContainer
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.inputLabel
+  }, "Password"), /*#__PURE__*/React.createElement(TextInput, {
+    style: styles.input,
+    value: password,
+    onChangeText: setPassword,
+    placeholder: "Enter your password",
+    secureTextEntry: true
+  })), /*#__PURE__*/React.createElement(TouchableOpacity, {
+    style: styles.loginButton,
+    onPress: handleUsernameLogin,
+    disabled: isLoading
+  }, isLoading ? /*#__PURE__*/React.createElement(ActivityIndicator, {
+    color: "#fff",
+    size: "small"
+  }) : /*#__PURE__*/React.createElement(Text, {
+    style: styles.loginButtonText
+  }, "Sign In")), /*#__PURE__*/React.createElement(View, {
+    style: styles.divider
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.dividerLine
+  }), /*#__PURE__*/React.createElement(Text, {
+    style: styles.dividerText
+  }, "OR"), /*#__PURE__*/React.createElement(View, {
+    style: styles.dividerLine
+  })), /*#__PURE__*/React.createElement(TouchableOpacity, {
+    style: styles.othentButton,
+    onPress: handleOthentLogin,
+    disabled: isLoading
+  }, /*#__PURE__*/React.createElement(Image, {
+    source: {
+      uri: 'https://onairos.sirv.com/Images/othent-logo.png'
+    },
+    style: styles.othentLogo
+  }), /*#__PURE__*/React.createElement(Text, {
+    style: styles.othentButtonText
+  }, "Continue with Othent")));
+
+  // Render onboarding step
+  const renderOnboarding = () => /*#__PURE__*/React.createElement(View, {
+    style: styles.onboardingContainer
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.onboardingTitle
+  }, "Connect Your Accounts"), /*#__PURE__*/React.createElement(Text, {
+    style: styles.onboardingSubtitle
+  }, "Select the social media accounts you want to connect to Onairos"), /*#__PURE__*/React.createElement(View, {
+    style: styles.socialAccountsContainer
+  }, socialPlatforms.map(platform => /*#__PURE__*/React.createElement(TouchableOpacity, {
+    key: platform.id,
+    style: [styles.socialAccount, selectedSocialAccounts.includes(platform.id) && styles.selectedSocialAccount],
+    onPress: () => toggleSocialAccount(platform.id)
+  }, /*#__PURE__*/React.createElement(Image, {
+    source: {
+      uri: platform.icon
+    },
+    style: styles.socialIcon
+  }), /*#__PURE__*/React.createElement(Text, {
+    style: styles.socialName
+  }, platform.name), selectedSocialAccounts.includes(platform.id) && /*#__PURE__*/React.createElement(Icon, {
+    name: "check-circle",
+    size: 24,
+    color: "#4CAF50",
+    style: styles.checkIcon
+  })))), /*#__PURE__*/React.createElement(TouchableOpacity, {
+    style: [styles.nextButton, selectedSocialAccounts.length === 0 && styles.disabledButton],
+    onPress: startTraining,
+    disabled: selectedSocialAccounts.length === 0 || isTraining
+  }, isTraining ? /*#__PURE__*/React.createElement(ActivityIndicator, {
+    color: "#fff",
+    size: "small"
+  }) : /*#__PURE__*/React.createElement(Text, {
+    style: styles.nextButtonText
+  }, "Continue")));
+
+  // Render training progress
+  const renderTraining = () => /*#__PURE__*/React.createElement(View, {
+    style: styles.trainingContainer
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.trainingTitle
+  }, "Training Your Model"), /*#__PURE__*/React.createElement(Text, {
+    style: styles.trainingSubtitle
+  }, "Please wait while we train your personalized AI model"), /*#__PURE__*/React.createElement(View, {
+    style: styles.progressBarContainer
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [styles.progressBar, {
+      width: `${trainingProgress}%`
+    }]
+  })), /*#__PURE__*/React.createElement(Text, {
+    style: styles.progressText
+  }, trainingProgress, "% Complete"));
+
+  // Render PIN creation step
+  const renderCreatePin = () => /*#__PURE__*/React.createElement(View, {
+    style: styles.pinContainer
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.pinTitle
+  }, "Create Your PIN"), /*#__PURE__*/React.createElement(Text, {
+    style: styles.pinSubtitle
+  }, "This PIN will be used to secure your data"), pinError ? /*#__PURE__*/React.createElement(Text, {
+    style: styles.errorText
+  }, pinError) : null, /*#__PURE__*/React.createElement(View, {
+    style: styles.inputContainer
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.inputLabel
+  }, "PIN"), /*#__PURE__*/React.createElement(TextInput, {
+    style: styles.input,
+    value: pin,
+    onChangeText: setPin,
+    placeholder: "Enter a 4-digit PIN",
+    keyboardType: "numeric",
+    secureTextEntry: true,
+    maxLength: 4
+  })), /*#__PURE__*/React.createElement(View, {
+    style: styles.inputContainer
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.inputLabel
+  }, "Confirm PIN"), /*#__PURE__*/React.createElement(TextInput, {
+    style: styles.input,
+    value: confirmPin,
+    onChangeText: setConfirmPin,
+    placeholder: "Confirm your PIN",
+    keyboardType: "numeric",
+    secureTextEntry: true,
+    maxLength: 4
+  })), /*#__PURE__*/React.createElement(TouchableOpacity, {
+    style: styles.nextButton,
+    onPress: handleCreatePin,
+    disabled: isLoading
+  }, isLoading ? /*#__PURE__*/React.createElement(ActivityIndicator, {
+    color: "#fff",
+    size: "small"
+  }) : /*#__PURE__*/React.createElement(Text, {
+    style: styles.nextButtonText
+  }, "Complete Setup")));
+
+  // Render data request step
+  const renderDataRequest = () => /*#__PURE__*/React.createElement(View, {
+    style: styles.dataRequestContainer
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.dataRequestTitle
+  }, dataRequester, " is requesting access to your data"), /*#__PURE__*/React.createElement(ScrollView, {
+    style: styles.requestsScrollView
+  }, Object.keys(requestData).map(key => /*#__PURE__*/React.createElement(View, {
+    key: key,
+    style: styles.requestSection
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.requestSectionTitle
+  }, key, " Data Request"), /*#__PURE__*/React.createElement(Text, {
+    style: styles.requestDescription
+  }, requestData[key].descriptions), /*#__PURE__*/React.createElement(TouchableOpacity, {
+    style: [styles.requestToggle, selectedConnections.some(conn => conn.key === key && conn.dataRequester === dataRequester) && styles.requestToggleSelected],
+    onPress: () => toggleDataRequest(dataRequester, key, 0, requestData[key].type, requestData[key].reward)
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.requestToggleText
+  }, selectedConnections.some(conn => conn.key === key && conn.dataRequester === dataRequester) ? 'Selected' : 'Select'))))), /*#__PURE__*/React.createElement(View, {
+    style: styles.actionButtonsContainer
+  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
+    style: styles.rejectButton,
+    onPress: rejectDataRequest
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.rejectButtonText
+  }, "Reject")), /*#__PURE__*/React.createElement(TouchableOpacity, {
+    style: [styles.approveButton, !allowSubmit && styles.disabledButton],
+    onPress: sendDataRequest,
+    disabled: !allowSubmit || isLoading
+  }, isLoading ? /*#__PURE__*/React.createElement(ActivityIndicator, {
+    color: "#fff",
+    size: "small"
+  }) : /*#__PURE__*/React.createElement(Text, {
+    style: styles.approveButtonText
+  }, "Approve"))));
+
+  // Render content based on current step
+  const renderContent = () => {
+    if (!isAuthenticated && currentStep !== 'onboarding') {
+      return renderLoginForm();
+    }
+    switch (currentStep) {
+      case 'onboarding':
+        return renderOnboarding();
+      case 'training':
+        return renderTraining();
+      case 'createPin':
+        return renderCreatePin();
+      case 'dataRequest':
+        return renderDataRequest();
+      default:
+        return renderDataRequest();
+    }
+  };
+  return /*#__PURE__*/React.createElement(Modal, {
+    isVisible: true,
+    onBackdropPress: onClose,
+    onBackButtonPress: onClose,
+    style: styles.modal,
+    swipeDirection: "down",
+    onSwipeComplete: onClose,
+    propagateSwipe: true,
+    avoidKeyboard: true
+  }, /*#__PURE__*/React.createElement(KeyboardAvoidingView, {
+    behavior: Platform.OS === 'ios' ? 'padding' : 'height',
+    style: styles.keyboardAvoidingView
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.modalContent
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.modalHeader
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.dragIndicator
+  }), /*#__PURE__*/React.createElement(TouchableOpacity, {
+    style: styles.closeButton,
+    onPress: onClose
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "close",
+    size: 24,
+    color: "#333"
+  }))), renderContent())));
+};
+const styles = StyleSheet.create({
+  modal: {
+    justifyContent: 'flex-end',
+    margin: 0
+  },
+  keyboardAvoidingView: {
+    width: '100%'
+  },
+  modalContent: {
+    backgroundColor: 'white',
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    paddingHorizontal: 20,
+    paddingBottom: 20,
+    maxHeight: height * 0.8
+  },
+  modalHeader: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingVertical: 10,
+    position: 'relative'
+  },
+  dragIndicator: {
+    width: 40,
+    height: 5,
+    backgroundColor: '#ccc',
+    borderRadius: 3
+  },
+  closeButton: {
+    position: 'absolute',
+    right: 0,
+    top: 10
+  },
+  // Login styles
+  loginContainer: {
+    padding: 16
+  },
+  loginTitle: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    marginBottom: 20,
+    textAlign: 'center'
+  },
+  inputContainer: {
+    marginBottom: 16
+  },
+  inputLabel: {
+    fontSize: 16,
+    marginBottom: 8,
+    color: '#333'
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: '#ccc',
+    borderRadius: 8,
+    padding: 12,
+    fontSize: 16
+  },
+  loginButton: {
+    backgroundColor: '#2196F3',
+    borderRadius: 8,
+    padding: 16,
+    alignItems: 'center',
+    marginTop: 8
+  },
+  loginButtonText: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: 'bold'
+  },
+  divider: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginVertical: 20
+  },
+  dividerLine: {
+    flex: 1,
+    height: 1,
+    backgroundColor: '#ccc'
+  },
+  dividerText: {
+    marginHorizontal: 10,
+    color: '#666'
+  },
+  othentButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#f5f5f5',
+    borderRadius: 8,
+    padding: 16,
+    borderWidth: 1,
+    borderColor: '#ddd'
+  },
+  othentLogo: {
+    width: 24,
+    height: 24,
+    marginRight: 10
+  },
+  othentButtonText: {
+    fontSize: 16,
+    color: '#333'
+  },
+  // Onboarding styles
+  onboardingContainer: {
+    padding: 16
+  },
+  onboardingTitle: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    marginBottom: 8
+  },
+  onboardingSubtitle: {
+    fontSize: 16,
+    color: '#666',
+    marginBottom: 20
+  },
+  socialAccountsContainer: {
+    marginBottom: 20
+  },
+  socialAccount: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 16,
+    borderWidth: 1,
+    borderColor: '#ddd',
+    borderRadius: 8,
+    marginBottom: 10
+  },
+  selectedSocialAccount: {
+    borderColor: '#4CAF50',
+    backgroundColor: 'rgba(76, 175, 80, 0.1)'
+  },
+  socialIcon: {
+    width: 24,
+    height: 24,
+    marginRight: 16
+  },
+  socialName: {
+    fontSize: 16,
+    flex: 1
+  },
+  checkIcon: {
+    marginLeft: 8
+  },
+  nextButton: {
+    backgroundColor: '#4CAF50',
+    borderRadius: 8,
+    padding: 16,
+    alignItems: 'center'
+  },
+  nextButtonText: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: 'bold'
+  },
+  disabledButton: {
+    backgroundColor: '#ccc'
+  },
+  // Training styles
+  trainingContainer: {
+    padding: 16,
+    alignItems: 'center'
+  },
+  trainingTitle: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    marginBottom: 8
+  },
+  trainingSubtitle: {
+    fontSize: 16,
+    color: '#666',
+    marginBottom: 30,
+    textAlign: 'center'
+  },
+  progressBarContainer: {
+    width: '100%',
+    height: 12,
+    backgroundColor: '#e0e0e0',
+    borderRadius: 6,
+    overflow: 'hidden',
+    marginBottom: 16
+  },
+  progressBar: {
+    height: '100%',
+    backgroundColor: '#4CAF50'
+  },
+  progressText: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    color: '#4CAF50'
+  },
+  // PIN styles
+  pinContainer: {
+    padding: 16
+  },
+  pinTitle: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    marginBottom: 8
+  },
+  pinSubtitle: {
+    fontSize: 16,
+    color: '#666',
+    marginBottom: 20
+  },
+  errorText: {
+    color: 'red',
+    marginBottom: 16
+  },
+  // Data request styles
+  dataRequestContainer: {
+    padding: 16
+  },
+  dataRequestTitle: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    marginBottom: 16
+  },
+  requestsScrollView: {
+    maxHeight: 300
+  },
+  requestSection: {
+    marginBottom: 20,
+    padding: 16,
+    borderWidth: 1,
+    borderColor: '#ddd',
+    borderRadius: 8
+  },
+  requestSectionTitle: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    marginBottom: 8
+  },
+  requestDescription: {
+    fontSize: 14,
+    color: '#666',
+    marginBottom: 16
+  },
+  requestToggle: {
+    backgroundColor: '#f5f5f5',
+    padding: 12,
+    borderRadius: 8,
+    alignItems: 'center'
+  },
+  requestToggleSelected: {
+    backgroundColor: '#4CAF50'
+  },
+  requestToggleText: {
+    fontWeight: 'bold'
+  },
+  actionButtonsContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginTop: 20
+  },
+  rejectButton: {
+    flex: 1,
+    backgroundColor: '#f5f5f5',
+    borderRadius: 8,
+    padding: 16,
+    alignItems: 'center',
+    marginRight: 8
+  },
+  rejectButtonText: {
+    color: '#333',
+    fontSize: 16,
+    fontWeight: 'bold'
+  },
+  approveButton: {
+    flex: 1,
+    backgroundColor: '#4CAF50',
+    borderRadius: 8,
+    padding: 16,
+    alignItems: 'center',
+    marginLeft: 8
+  },
+  approveButtonText: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: 'bold'
+  }
+});
+export default Overlay;
+//# sourceMappingURL=Overlay.js.map