react-native-salespanda 0.1.1 → 0.2.0

package/lib/typescript/src/screens/PremiumScreen.d.ts

@@ -0,0 +1,2 @@
+export default function PremiumScreen(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PremiumScreen.d.ts.map

package/lib/typescript/src/screens/PremiumScreen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PremiumScreen.d.ts","sourceRoot":"","sources":["../../../../src/screens/PremiumScreen.tsx"],"names":[],"mappings":"AA8DA,MAAM,CAAC,OAAO,UAAU,aAAa,4CA2DpC"}

package/lib/typescript/src/screens/ProfileScreen.d.ts

@@ -0,0 +1,2 @@
+export default function ProfileScreen(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ProfileScreen.d.ts.map

package/lib/typescript/src/screens/ProfileScreen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProfileScreen.d.ts","sourceRoot":"","sources":["../../../../src/screens/ProfileScreen.tsx"],"names":[],"mappings":"AASA,MAAM,CAAC,OAAO,UAAU,aAAa,4CA6CpC"}

package/lib/typescript/src/screens/ReportsScreen.d.ts

@@ -0,0 +1,2 @@
+export default function ReportsScreen(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ReportsScreen.d.ts.map

package/lib/typescript/src/screens/ReportsScreen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReportsScreen.d.ts","sourceRoot":"","sources":["../../../../src/screens/ReportsScreen.tsx"],"names":[],"mappings":"AA2BA,MAAM,CAAC,OAAO,UAAU,aAAa,4CAuEpC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-salespanda",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "sdk",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -160,5 +160,14 @@
     "languages": "kotlin-objc",
     "type": "turbo-module",
     "version": "0.54.8"
+  },
+  "dependencies": {
+    "@react-navigation/bottom-tabs": "^7.8.2",
+    "@react-navigation/drawer": "^7.7.2",
+    "@react-navigation/native": "^7.1.19",
+    "react-native-gesture-handler": "^2.29.1",
+    "react-native-reanimated": "^4.1.3",
+    "react-native-safe-area-context": "^5.6.2",
+    "react-native-screens": "^4.18.0"
   }
 }

package/src/index.tsx

@@ -4,5 +4,14 @@ export function multiply(a: number, b: number): number {
   return Salespanda.multiply(a, b);
 }
 
+// Export navigation
+export { default as AppNavigator } from './navigation/AppNavigator';
+export { default as DrawerNavigator } from './navigation/DrawerNavigator';
+export { default as BottomTabNavigator } from './navigation/BottomTabNavigator';
+
 // Export screens
 export { default as HomeScreen } from './screens/HomeScreen';
+export { default as ProfileScreen } from './screens/ProfileScreen';
+export { default as NotificationsScreen } from './screens/NotificationsScreen';
+export { default as ReportsScreen } from './screens/ReportsScreen';
+export { default as PremiumScreen } from './screens/PremiumScreen';

package/src/navigation/AppNavigator.tsx

@@ -0,0 +1,10 @@
+import { NavigationContainer } from '@react-navigation/native';
+import DrawerNavigator from './DrawerNavigator';
+
+export default function AppNavigator() {
+  return (
+    <NavigationContainer>
+      <DrawerNavigator />
+    </NavigationContainer>
+  );
+}

package/src/navigation/BottomTabNavigator.tsx

@@ -0,0 +1,64 @@
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { Text } from 'react-native';
+import HomeScreen from '../screens/HomeScreen';
+import PremiumScreen from '../screens/PremiumScreen';
+import NotificationsScreen from '../screens/NotificationsScreen';
+import ReportsScreen from '../screens/ReportsScreen';
+
+const Tab = createBottomTabNavigator();
+
+export default function BottomTabNavigator() {
+  return (
+    <Tab.Navigator
+      screenOptions={{
+        headerShown: false,
+        tabBarActiveTintColor: '#4a148c',
+        tabBarInactiveTintColor: '#999',
+        tabBarStyle: {
+          borderTopWidth: 1,
+          borderTopColor: '#e0e0e0',
+          paddingBottom: 8,
+          paddingTop: 8,
+          height: 60,
+        },
+      }}
+    >
+      <Tab.Screen
+        name="Home"
+        component={HomeScreen}
+        options={{
+          tabBarIcon: ({ color, size }) => (
+            <Text style={{ fontSize: size, color }}>🏠</Text>
+          ),
+        }}
+      />
+      <Tab.Screen
+        name="Premium"
+        component={PremiumScreen}
+        options={{
+          tabBarIcon: ({ color, size }) => (
+            <Text style={{ fontSize: size, color }}>💎</Text>
+          ),
+        }}
+      />
+      <Tab.Screen
+        name="Notifications"
+        component={NotificationsScreen}
+        options={{
+          tabBarIcon: ({ color, size }) => (
+            <Text style={{ fontSize: size, color }}>🔔</Text>
+          ),
+        }}
+      />
+      <Tab.Screen
+        name="Reports"
+        component={ReportsScreen}
+        options={{
+          tabBarIcon: ({ color, size }) => (
+            <Text style={{ fontSize: size, color }}>📊</Text>
+          ),
+        }}
+      />
+    </Tab.Navigator>
+  );
+}

package/src/navigation/DrawerNavigator.tsx

@@ -0,0 +1,238 @@
+import * as React from 'react';
+import { createDrawerNavigator } from '@react-navigation/drawer';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  Image,
+  ScrollView,
+} from 'react-native';
+import BottomTabNavigator from './BottomTabNavigator';
+import ProfileScreen from '../screens/ProfileScreen';
+
+const Drawer = createDrawerNavigator();
+
+interface DrawerItemProps {
+  label: string;
+  icon: string;
+  onPress: () => void;
+  active?: boolean;
+}
+
+const DrawerItem: React.FC<DrawerItemProps> = ({
+  label,
+  icon,
+  onPress,
+  active = false,
+}) => {
+  return (
+    <TouchableOpacity
+      style={[styles.drawerItem, active && styles.activeDrawerItem]}
+      onPress={onPress}
+    >
+      <Text style={styles.drawerIcon}>{icon}</Text>
+      <Text style={[styles.drawerLabel, active && styles.activeDrawerLabel]}>
+        {label}
+      </Text>
+    </TouchableOpacity>
+  );
+};
+
+function CustomDrawerContent(props: any) {
+  const { navigation, state } = props;
+  const currentRoute = state.routes[state.index].name;
+
+  return (
+    <View style={styles.drawerContainer}>
+      <View style={styles.drawerHeader}>
+        <Image
+          source={{ uri: 'https://via.placeholder.com/80x80' }}
+          style={styles.drawerAvatar}
+        />
+        <Text style={styles.drawerName}>John Doe</Text>
+        <Text style={styles.drawerEmail}>john.doe@example.com</Text>
+      </View>
+
+      <ScrollView style={styles.drawerContent}>
+        <DrawerItem
+          label="Home"
+          icon="🏠"
+          active={currentRoute === 'HomeTabs'}
+          onPress={() => navigation.navigate('HomeTabs')}
+        />
+        <DrawerItem
+          label="Profile"
+          icon="👤"
+          active={currentRoute === 'Profile'}
+          onPress={() => navigation.navigate('Profile')}
+        />
+        <DrawerItem
+          label="Social Setup"
+          icon="📢"
+          onPress={() => {
+            /* Add navigation */
+          }}
+        />
+        <DrawerItem
+          label="Microsite Setup"
+          icon="⚙️"
+          onPress={() => {
+            /* Add navigation */
+          }}
+        />
+        <DrawerItem
+          label="Proposal"
+          icon="📋"
+          onPress={() => {
+            /* Add navigation */
+          }}
+        />
+        <DrawerItem
+          label="Email Campaign"
+          icon="📧"
+          onPress={() => {
+            /* Add navigation */
+          }}
+        />
+        <DrawerItem
+          label="View Microsite"
+          icon="🎵"
+          onPress={() => {
+            /* Add navigation */
+          }}
+        />
+        <DrawerItem
+          label="Import Contact"
+          icon="📄"
+          onPress={() => {
+            /* Add navigation */
+          }}
+        />
+
+        <View style={styles.drawerDivider} />
+
+        <DrawerItem
+          label="Settings"
+          icon="⚙️"
+          onPress={() => {
+            /* Add navigation */
+          }}
+        />
+        <DrawerItem
+          label="Help & Support"
+          icon="❓"
+          onPress={() => {
+            /* Add navigation */
+          }}
+        />
+        <DrawerItem
+          label="Logout"
+          icon="🚪"
+          onPress={() => {
+            /* Add logout logic */
+          }}
+        />
+      </ScrollView>
+    </View>
+  );
+}
+
+export default function DrawerNavigator() {
+  return (
+    <Drawer.Navigator
+      drawerContent={(props) => <CustomDrawerContent {...props} />}
+      screenOptions={{
+        headerShown: true,
+        drawerType: 'front',
+        headerStyle: {
+          backgroundColor: '#4a148c',
+        },
+        headerTintColor: '#fff',
+        headerTitleStyle: {
+          fontWeight: '600',
+        },
+      }}
+    >
+      <Drawer.Screen
+        name="HomeTabs"
+        component={BottomTabNavigator}
+        options={{
+          title: 'Salespanda',
+        }}
+      />
+      <Drawer.Screen
+        name="Profile"
+        component={ProfileScreen}
+        options={{
+          title: 'Profile',
+        }}
+      />
+    </Drawer.Navigator>
+  );
+}
+
+const styles = StyleSheet.create({
+  drawerContainer: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+  drawerHeader: {
+    backgroundColor: '#4a148c',
+    padding: 20,
+    paddingTop: 50,
+    alignItems: 'center',
+  },
+  drawerAvatar: {
+    width: 80,
+    height: 80,
+    borderRadius: 40,
+    marginBottom: 12,
+    borderWidth: 3,
+    borderColor: '#fff',
+  },
+  drawerName: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#fff',
+    marginBottom: 4,
+  },
+  drawerEmail: {
+    fontSize: 14,
+    color: '#fff',
+    opacity: 0.8,
+  },
+  drawerContent: {
+    flex: 1,
+    paddingTop: 8,
+  },
+  drawerItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 16,
+    paddingHorizontal: 20,
+  },
+  activeDrawerItem: {
+    backgroundColor: '#f5f5f5',
+    borderLeftWidth: 4,
+    borderLeftColor: '#4a148c',
+  },
+  drawerIcon: {
+    fontSize: 20,
+    marginRight: 16,
+    width: 24,
+  },
+  drawerLabel: {
+    fontSize: 16,
+    color: '#333',
+  },
+  activeDrawerLabel: {
+    fontWeight: '600',
+    color: '#4a148c',
+  },
+  drawerDivider: {
+    height: 1,
+    backgroundColor: '#e0e0e0',
+    marginVertical: 8,
+  },
+});

package/src/screens/HomeScreen.tsx

@@ -88,22 +88,6 @@ export default function HomeScreen() {
           <MenuItem title="Help Videos" icon="❓" />
         </View>
       </ScrollView>
-
-      {/* Bottom Navigation */}
-      <View style={styles.bottomNav}>
-        <TouchableOpacity style={styles.navItem}>
-          <Text style={styles.navIcon}>🏠</Text>
-        </TouchableOpacity>
-        <TouchableOpacity style={styles.navItem}>
-          <Text style={styles.navIcon}>💎</Text>
-        </TouchableOpacity>
-        <TouchableOpacity style={styles.navItem}>
-          <Text style={styles.navIcon}>🔔</Text>
-        </TouchableOpacity>
-        <TouchableOpacity style={styles.navItem}>
-          <Text style={styles.navIcon}>📊</Text>
-        </TouchableOpacity>
-      </View>
     </SafeAreaView>
   );
 }
@@ -247,20 +231,4 @@ const styles = StyleSheet.create({
     color: '#333',
     fontWeight: '500',
   },
-  bottomNav: {
-    flexDirection: 'row',
-    backgroundColor: '#fff',
-    borderTopWidth: 1,
-    borderTopColor: '#e0e0e0',
-    paddingVertical: 8,
-    justifyContent: 'space-around',
-  },
-  navItem: {
-    flex: 1,
-    alignItems: 'center',
-    paddingVertical: 8,
-  },
-  navIcon: {
-    fontSize: 24,
-  },
 });

package/src/screens/NotificationsScreen.tsx

@@ -0,0 +1,135 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  SafeAreaView,
+  ScrollView,
+  TouchableOpacity,
+} from 'react-native';
+
+interface NotificationItemProps {
+  title: string;
+  message: string;
+  time: string;
+  unread?: boolean;
+}
+
+const NotificationItem: React.FC<NotificationItemProps> = ({
+  title,
+  message,
+  time,
+  unread = false,
+}) => {
+  return (
+    <TouchableOpacity
+      style={[styles.notificationItem, unread && styles.unreadItem]}
+    >
+      <View style={styles.notificationContent}>
+        <Text style={styles.notificationTitle}>{title}</Text>
+        <Text style={styles.notificationMessage}>{message}</Text>
+        <Text style={styles.notificationTime}>{time}</Text>
+      </View>
+      {unread && <View style={styles.unreadDot} />}
+    </TouchableOpacity>
+  );
+};
+
+export default function NotificationsScreen() {
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.header}>
+        <Text style={styles.headerTitle}>Notifications</Text>
+      </View>
+      <ScrollView style={styles.scrollView}>
+        <NotificationItem
+          title="New Message"
+          message="You have a new message from support team"
+          time="2 minutes ago"
+          unread={true}
+        />
+        <NotificationItem
+          title="Update Available"
+          message="A new version of the app is available"
+          time="1 hour ago"
+          unread={true}
+        />
+        <NotificationItem
+          title="Campaign Success"
+          message="Your email campaign has been sent successfully"
+          time="3 hours ago"
+        />
+        <NotificationItem
+          title="Reminder"
+          message="Don't forget to check your proposals"
+          time="Yesterday"
+        />
+        <NotificationItem
+          title="Welcome"
+          message="Welcome to Salespanda! Get started with your first campaign"
+          time="2 days ago"
+        />
+      </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,
+  },
+  notificationItem: {
+    backgroundColor: '#fff',
+    padding: 16,
+    marginHorizontal: 16,
+    marginTop: 16,
+    borderRadius: 12,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  unreadItem: {
+    backgroundColor: '#f0f4ff',
+  },
+  notificationContent: {
+    flex: 1,
+  },
+  notificationTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#333',
+    marginBottom: 4,
+  },
+  notificationMessage: {
+    fontSize: 14,
+    color: '#666',
+    marginBottom: 8,
+  },
+  notificationTime: {
+    fontSize: 12,
+    color: '#999',
+  },
+  unreadDot: {
+    width: 10,
+    height: 10,
+    borderRadius: 5,
+    backgroundColor: '#4a148c',
+    marginLeft: 12,
+  },
+});