react-native-salespanda 0.1.1 → 0.2.0

package/src/screens/PremiumScreen.tsx

@@ -0,0 +1,250 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  SafeAreaView,
+  ScrollView,
+  TouchableOpacity,
+} from 'react-native';
+
+interface PlanCardProps {
+  name: string;
+  price: string;
+  features: string[];
+  highlighted?: boolean;
+}
+
+const PlanCard: React.FC<PlanCardProps> = ({
+  name,
+  price,
+  features,
+  highlighted = false,
+}) => {
+  return (
+    <View style={[styles.planCard, highlighted && styles.highlightedPlan]}>
+      {highlighted && (
+        <View style={styles.popularBadge}>
+          <Text style={styles.popularText}>MOST POPULAR</Text>
+        </View>
+      )}
+      <Text style={styles.planName}>{name}</Text>
+      <Text style={styles.planPrice}>{price}</Text>
+      <Text style={styles.planPeriod}>per month</Text>
+
+      <View style={styles.features}>
+        {features.map((feature, index) => (
+          <View key={index} style={styles.featureItem}>
+            <Text style={styles.featureIcon}>✓</Text>
+            <Text style={styles.featureText}>{feature}</Text>
+          </View>
+        ))}
+      </View>
+
+      <TouchableOpacity
+        style={[
+          styles.subscribeButton,
+          highlighted && styles.highlightedButton,
+        ]}
+      >
+        <Text
+          style={[
+            styles.subscribeButtonText,
+            highlighted && styles.highlightedButtonText,
+          ]}
+        >
+          Subscribe
+        </Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default function PremiumScreen() {
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.header}>
+        <Text style={styles.headerTitle}>Premium Plans</Text>
+      </View>
+      <ScrollView style={styles.scrollView}>
+        <View style={styles.heroSection}>
+          <Text style={styles.heroIcon}>💎</Text>
+          <Text style={styles.heroTitle}>Unlock Premium Features</Text>
+          <Text style={styles.heroDescription}>
+            Get access to exclusive features and tools to grow your business
+          </Text>
+        </View>
+
+        <View style={styles.plansContainer}>
+          <PlanCard
+            name="Basic"
+            price="$9.99"
+            features={[
+              'Up to 100 contacts',
+              '5 campaigns per month',
+              'Basic analytics',
+              'Email support',
+            ]}
+          />
+
+          <PlanCard
+            name="Professional"
+            price="$29.99"
+            features={[
+              'Up to 1,000 contacts',
+              'Unlimited campaigns',
+              'Advanced analytics',
+              'Priority support',
+              'Custom branding',
+              'API access',
+            ]}
+            highlighted={true}
+          />
+
+          <PlanCard
+            name="Enterprise"
+            price="$99.99"
+            features={[
+              'Unlimited contacts',
+              'Unlimited campaigns',
+              'Advanced analytics',
+              '24/7 dedicated support',
+              'Custom branding',
+              'API access',
+              'Custom integrations',
+              'White-label solution',
+            ]}
+          />
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#f5f5f5',
+  },
+  header: {
+    backgroundColor: '#fff',
+    padding: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: '#e0e0e0',
+  },
+  headerTitle: {
+    fontSize: 20,
+    fontWeight: '600',
+    color: '#333',
+    textAlign: 'center',
+  },
+  scrollView: {
+    flex: 1,
+  },
+  heroSection: {
+    backgroundColor: '#4a148c',
+    padding: 32,
+    alignItems: 'center',
+  },
+  heroIcon: {
+    fontSize: 48,
+    marginBottom: 16,
+  },
+  heroTitle: {
+    fontSize: 24,
+    fontWeight: '700',
+    color: '#fff',
+    marginBottom: 8,
+    textAlign: 'center',
+  },
+  heroDescription: {
+    fontSize: 14,
+    color: '#fff',
+    textAlign: 'center',
+    opacity: 0.9,
+  },
+  plansContainer: {
+    padding: 16,
+  },
+  planCard: {
+    backgroundColor: '#fff',
+    borderRadius: 16,
+    padding: 24,
+    marginBottom: 16,
+    borderWidth: 2,
+    borderColor: '#e0e0e0',
+  },
+  highlightedPlan: {
+    borderColor: '#4a148c',
+    transform: [{ scale: 1.02 }],
+  },
+  popularBadge: {
+    backgroundColor: '#4a148c',
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 12,
+    alignSelf: 'center',
+    marginBottom: 16,
+  },
+  popularText: {
+    color: '#fff',
+    fontSize: 10,
+    fontWeight: '700',
+  },
+  planName: {
+    fontSize: 24,
+    fontWeight: '700',
+    color: '#333',
+    textAlign: 'center',
+    marginBottom: 8,
+  },
+  planPrice: {
+    fontSize: 36,
+    fontWeight: '700',
+    color: '#4a148c',
+    textAlign: 'center',
+  },
+  planPeriod: {
+    fontSize: 14,
+    color: '#666',
+    textAlign: 'center',
+    marginBottom: 24,
+  },
+  features: {
+    marginBottom: 24,
+  },
+  featureItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 12,
+  },
+  featureIcon: {
+    fontSize: 16,
+    color: '#4a148c',
+    marginRight: 12,
+    fontWeight: '700',
+  },
+  featureText: {
+    fontSize: 14,
+    color: '#333',
+  },
+  subscribeButton: {
+    backgroundColor: '#fff',
+    borderWidth: 2,
+    borderColor: '#4a148c',
+    borderRadius: 8,
+    padding: 16,
+    alignItems: 'center',
+  },
+  highlightedButton: {
+    backgroundColor: '#4a148c',
+  },
+  subscribeButtonText: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#4a148c',
+  },
+  highlightedButtonText: {
+    color: '#fff',
+  },
+});

package/src/screens/ProfileScreen.tsx

@@ -0,0 +1,121 @@
+import {
+  View,
+  Text,
+  StyleSheet,
+  SafeAreaView,
+  TouchableOpacity,
+  Image,
+} from 'react-native';
+
+export default function ProfileScreen() {
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.header}>
+        <Text style={styles.headerTitle}>Profile</Text>
+      </View>
+      <View style={styles.content}>
+        <View style={styles.profileSection}>
+          <Image
+            source={{ uri: 'https://via.placeholder.com/100x100' }}
+            style={styles.avatar}
+          />
+          <Text style={styles.name}>John Doe</Text>
+          <Text style={styles.email}>john.doe@example.com</Text>
+        </View>
+
+        <View style={styles.section}>
+          <TouchableOpacity style={styles.menuItem}>
+            <Text style={styles.menuItemIcon}>👤</Text>
+            <Text style={styles.menuItemText}>Edit Profile</Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity style={styles.menuItem}>
+            <Text style={styles.menuItemIcon}>⚙️</Text>
+            <Text style={styles.menuItemText}>Settings</Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity style={styles.menuItem}>
+            <Text style={styles.menuItemIcon}>🔔</Text>
+            <Text style={styles.menuItemText}>Notifications</Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity style={styles.menuItem}>
+            <Text style={styles.menuItemIcon}>❓</Text>
+            <Text style={styles.menuItemText}>Help & Support</Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity style={styles.menuItem}>
+            <Text style={styles.menuItemIcon}>🚪</Text>
+            <Text style={styles.menuItemText}>Logout</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#f5f5f5',
+  },
+  header: {
+    backgroundColor: '#fff',
+    padding: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: '#e0e0e0',
+  },
+  headerTitle: {
+    fontSize: 20,
+    fontWeight: '600',
+    color: '#333',
+    textAlign: 'center',
+  },
+  content: {
+    flex: 1,
+    padding: 16,
+  },
+  profileSection: {
+    backgroundColor: '#fff',
+    borderRadius: 12,
+    padding: 24,
+    alignItems: 'center',
+    marginBottom: 16,
+  },
+  avatar: {
+    width: 100,
+    height: 100,
+    borderRadius: 50,
+    marginBottom: 16,
+  },
+  name: {
+    fontSize: 20,
+    fontWeight: '600',
+    color: '#333',
+    marginBottom: 4,
+  },
+  email: {
+    fontSize: 14,
+    color: '#666',
+  },
+  section: {
+    backgroundColor: '#fff',
+    borderRadius: 12,
+    overflow: 'hidden',
+  },
+  menuItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: '#f0f0f0',
+  },
+  menuItemIcon: {
+    fontSize: 24,
+    marginRight: 16,
+  },
+  menuItemText: {
+    fontSize: 16,
+    color: '#333',
+  },
+});

package/src/screens/ReportsScreen.tsx

@@ -0,0 +1,191 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  SafeAreaView,
+  ScrollView,
+  TouchableOpacity,
+} from 'react-native';
+
+interface StatCardProps {
+  title: string;
+  value: string;
+  icon: string;
+  color: string;
+}
+
+const StatCard: React.FC<StatCardProps> = ({ title, value, icon, color }) => {
+  return (
+    <View style={[styles.statCard, { backgroundColor: color }]}>
+      <Text style={styles.statIcon}>{icon}</Text>
+      <Text style={styles.statValue}>{value}</Text>
+      <Text style={styles.statTitle}>{title}</Text>
+    </View>
+  );
+};
+
+export default function ReportsScreen() {
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.header}>
+        <Text style={styles.headerTitle}>Reports</Text>
+      </View>
+      <ScrollView style={styles.scrollView}>
+        <View style={styles.statsGrid}>
+          <StatCard
+            title="Total Campaigns"
+            value="24"
+            icon="📧"
+            color="#e3f2fd"
+          />
+          <StatCard
+            title="Active Contacts"
+            value="1,234"
+            icon="👥"
+            color="#f3e5f5"
+          />
+          <StatCard
+            title="Total Views"
+            value="5,678"
+            icon="👁️"
+            color="#e8f5e9"
+          />
+          <StatCard title="Conversions" value="89" icon="✅" color="#fff3e0" />
+        </View>
+
+        <View style={styles.section}>
+          <Text style={styles.sectionTitle}>Recent Activity</Text>
+
+          <TouchableOpacity style={styles.activityItem}>
+            <View style={styles.activityIcon}>
+              <Text style={styles.activityIconText}>📊</Text>
+            </View>
+            <View style={styles.activityContent}>
+              <Text style={styles.activityTitle}>Campaign Analytics</Text>
+              <Text style={styles.activityDescription}>
+                View detailed analytics for your campaigns
+              </Text>
+            </View>
+          </TouchableOpacity>
+
+          <TouchableOpacity style={styles.activityItem}>
+            <View style={styles.activityIcon}>
+              <Text style={styles.activityIconText}>📈</Text>
+            </View>
+            <View style={styles.activityContent}>
+              <Text style={styles.activityTitle}>Performance Report</Text>
+              <Text style={styles.activityDescription}>
+                Monthly performance summary
+              </Text>
+            </View>
+          </TouchableOpacity>
+
+          <TouchableOpacity style={styles.activityItem}>
+            <View style={styles.activityIcon}>
+              <Text style={styles.activityIconText}>💰</Text>
+            </View>
+            <View style={styles.activityContent}>
+              <Text style={styles.activityTitle}>Revenue Report</Text>
+              <Text style={styles.activityDescription}>
+                Track your earnings and revenue
+              </Text>
+            </View>
+          </TouchableOpacity>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#f5f5f5',
+  },
+  header: {
+    backgroundColor: '#fff',
+    padding: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: '#e0e0e0',
+  },
+  headerTitle: {
+    fontSize: 20,
+    fontWeight: '600',
+    color: '#333',
+    textAlign: 'center',
+  },
+  scrollView: {
+    flex: 1,
+  },
+  statsGrid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    padding: 8,
+    justifyContent: 'space-between',
+  },
+  statCard: {
+    width: '48%',
+    padding: 20,
+    borderRadius: 12,
+    alignItems: 'center',
+    marginBottom: 16,
+  },
+  statIcon: {
+    fontSize: 32,
+    marginBottom: 8,
+  },
+  statValue: {
+    fontSize: 24,
+    fontWeight: '700',
+    color: '#333',
+    marginBottom: 4,
+  },
+  statTitle: {
+    fontSize: 12,
+    color: '#666',
+    textAlign: 'center',
+  },
+  section: {
+    padding: 16,
+  },
+  sectionTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#333',
+    marginBottom: 16,
+  },
+  activityItem: {
+    backgroundColor: '#fff',
+    flexDirection: 'row',
+    padding: 16,
+    borderRadius: 12,
+    marginBottom: 12,
+    alignItems: 'center',
+  },
+  activityIcon: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    backgroundColor: '#f5f5f5',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 16,
+  },
+  activityIconText: {
+    fontSize: 24,
+  },
+  activityContent: {
+    flex: 1,
+  },
+  activityTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#333',
+    marginBottom: 4,
+  },
+  activityDescription: {
+    fontSize: 14,
+    color: '#666',
+  },
+});