react-native-salespanda 0.1.1 → 0.3.0

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',
+  },
+});