react-native-salespanda 0.4.2 → 0.4.3

package/src/index.tsx

@@ -11,6 +11,8 @@
  *    import { HomeScreen, ProfileScreen } from 'react-native-salespanda';
  */
 
+// Import gesture handler at the very top
+
 // ============================================
 // MAIN APP EXPORT (Default)
 // ============================================
@@ -44,8 +46,8 @@ export { default as BottomTabNavigator } from './navigation/BottomTabNavigator';
 // ============================================
 // SCREEN COMPONENTS (Library Mode)
 // ============================================
-export { default as HomeScreen } from './screens/HomeScreen';
-export { default as ProfileScreen } from './screens/ProfileScreen';
-export { default as NotificationsScreen } from './screens/NotificationsScreen';
+export { default as HomeScreen } from './screens/Tabs/HomeScreen';
+export { default as ProfileScreen } from './screens/Tabs/ActivityAnalytics';
+export { default as NotificationsScreen } from './screens/Tabs/NotificationsScreen';
 export { default as ReportsScreen } from './screens/ReportsScreen';
-export { default as PremiumScreen } from './screens/CRMScreen';
+export { default as PremiumScreen } from './screens/Tabs/CRMScreen';

package/src/navigation/AppNavigator.tsx

@@ -1,18 +1,20 @@
 import { NavigationContainer } from '@react-navigation/native';
 import { StyleSheet } from 'react-native';
-import BottomTabNavigator from './BottomTabNavigator';
+import StackNavigator from './StackNavigator';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { Colors } from '../constants/Colors';
 
-export default function AppNavigator() {
+const AppNavigator: React.FC = () => {
   return (
     <NavigationContainer>
       <SafeAreaView style={styles.container} edges={['bottom', 'top']}>
-        <BottomTabNavigator />
+        <StackNavigator />
       </SafeAreaView>
     </NavigationContainer>
   );
-}
+};
+
+export default AppNavigator;
 
 const styles = StyleSheet.create({
   container: {

package/src/navigation/BottomTabNavigator.tsx

@@ -1,9 +1,8 @@
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
-import { Image, View, StyleSheet } from 'react-native';
-import HomeScreen from '../screens/HomeScreen';
-import NotificationsScreen from '../screens/NotificationsScreen';
+import { View, Image, StyleSheet } from 'react-native';
+import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
+import HomeScreen from '../screens/Tabs/HomeScreen';
 import ReportsScreen from '../screens/ReportsScreen';
-import ProfileScreen from '../screens/ProfileScreen';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { Colors } from '../constants/Colors';
 import {
@@ -18,9 +17,20 @@ import {
   notificationIcon,
   notificationIconActive,
 } from '../assets/images';
-import CRMScreen from '../screens/CRMScreen';
+import CRMScreen from '../screens/Tabs/CRMScreen';
+import NotificationsScreen from '../screens/Tabs/NotificationsScreen';
+import { useNavigation } from '@react-navigation/native';
+import ActivityAnalytics from '../screens/Tabs/ActivityAnalytics';
 
-const Tab = createBottomTabNavigator();
+export type BottomTabParamList = {
+  'Home': undefined;
+  'CRM': undefined;
+  'Reports': undefined;
+  'Notifications': undefined;
+  'Activity Analytics': undefined;
+};
+
+const Tab = createBottomTabNavigator<BottomTabParamList>();
 
 interface TabIconProps {
   focused: boolean;
@@ -32,7 +42,7 @@ interface ImageIconProps {
   active: any;
 }
 
-function ImageIcon({ inactive, active }: ImageIconProps) {
+const ImageIcon = ({ inactive, active }: ImageIconProps) => {
   return ({ focused, size }: TabIconProps) => {
     if (focused) {
       return (
@@ -53,9 +63,11 @@ function ImageIcon({ inactive, active }: ImageIconProps) {
       />
     );
   };
-}
+};
+
+const BottomTabNavigator: React.FC = () => {
+  const navigation = useNavigation();
 
-export default function BottomTabNavigator() {
   return (
     <SafeAreaView style={styles.container} edges={['bottom']}>
       <Tab.Navigator
@@ -66,6 +78,22 @@ export default function BottomTabNavigator() {
           tabBarStyle: styles.tabBar,
           tabBarItemStyle: { overflow: 'visible' },
         }}
+        screenListeners={{
+          state: (e) => {
+            const state = e.data.state;
+            if (state && state.routes && state.index !== undefined) {
+              const currentRoute = state.routes[state.index];
+              if (currentRoute) {
+                const tabName = currentRoute.name;
+
+                // Update the drawer header title based on current tab
+                navigation.setOptions({
+                  title: tabName,
+                });
+              }
+            }
+          },
+        }}
       >
         <Tab.Screen
           name="Home"
@@ -75,7 +103,6 @@ export default function BottomTabNavigator() {
               inactive: homeIcon,
               active: homeIconActive,
             }),
-            headerShown: false,
           }}
         />
         <Tab.Screen
@@ -106,8 +133,8 @@ export default function BottomTabNavigator() {
           }}
         />
         <Tab.Screen
-          name="Profile"
-          component={ProfileScreen}
+          name="Activity Analytics"
+          component={ActivityAnalytics}
           options={{
             tabBarIcon: ImageIcon({
               inactive: analyticsIcon,
@@ -118,7 +145,9 @@ export default function BottomTabNavigator() {
       </Tab.Navigator>
     </SafeAreaView>
   );
-}
+};
+
+export default BottomTabNavigator;
 
 const styles = StyleSheet.create({
   container: {
@@ -129,23 +158,23 @@ const styles = StyleSheet.create({
     borderTopWidth: 1,
     borderTopColor: Colors.border,
     backgroundColor: Colors.white,
-    paddingBottom: 10,
-    paddingTop: 8,
-    height: 64,
+    paddingBottom: verticalScale(10),
+    paddingTop: verticalScale(8),
+    height: verticalScale(64),
   },
   activeIconContainer: {
-    width: 48,
-    height: 48,
-    borderRadius: 24,
+    width: scale(48),
+    height: scale(48),
+    borderRadius: moderateScale(24),
     alignItems: 'center',
     justifyContent: 'center',
     borderWidth: 4,
     borderColor: Colors.white,
-    transform: [{ translateY: -6 }],
+    transform: [{ translateY: verticalScale(-6) }],
   },
   activeIcon: {
-    width: 42,
-    height: 42,
+    width: scale(42),
+    height: scale(42),
     tintColor: Colors.primary,
   },
   inactiveIcon: {

package/src/navigation/DrawerNavigator.tsx

@@ -8,9 +8,10 @@ import {
   Image,
   ScrollView,
 } from 'react-native';
+import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
 import BottomTabNavigator from './BottomTabNavigator';
 import { Colors } from '../constants/Colors';
-import ProfileScreen from '../screens/ProfileScreen';
+import ProfileScreen from '../screens/Tabs/ActivityAnalytics';
 import { GetPlatform } from '../constants/GetPlatorm';
 
 const Drawer = createDrawerNavigator();
@@ -43,7 +44,9 @@ interface CustomDrawerContentProps {
   state?: any;
 }
 
-function CustomDrawerContent({ navigation }: CustomDrawerContentProps) {
+const CustomDrawerContent: React.FC<CustomDrawerContentProps> = ({
+  navigation,
+}) => {
   const [expanded, setExpanded] = React.useState<Record<string, boolean>>({
     'Campaign': false,
     'Sales WAR Room': false,
@@ -157,22 +160,22 @@ function CustomDrawerContent({ navigation }: CustomDrawerContentProps) {
       </ScrollView>
     </View>
   );
-}
+};
 
-function renderDrawerContent(props: any) {
+const renderDrawerContent = (props: any) => {
   return <CustomDrawerContent navigation={props.navigation} />;
-}
+};
 
-export default function DrawerNavigator() {
+const DrawerNavigator: React.FC = () => {
   return (
     <Drawer.Navigator
       drawerContent={renderDrawerContent}
       screenOptions={{
-        headerShown: true,
+        headerShown: false,
         drawerType: 'slide',
         swipeEdgeWidth: 100,
         drawerStyle: {
-          width: 280,
+          width: scale(280),
           backgroundColor: Colors.primary,
         },
         headerStyle: {
@@ -202,7 +205,9 @@ export default function DrawerNavigator() {
       />
     </Drawer.Navigator>
   );
-}
+};
+
+export default DrawerNavigator;
 
 const styles = StyleSheet.create({
   drawerContainer: {
@@ -211,22 +216,22 @@ const styles = StyleSheet.create({
   },
   drawerHeader: {
     backgroundColor: Colors.primary,
-    paddingHorizontal: 20,
-    paddingTop: 36,
-    paddingBottom: 16,
+    paddingHorizontal: scale(20),
+    paddingTop: verticalScale(36),
+    paddingBottom: verticalScale(16),
     alignItems: 'flex-start',
   },
   headerRow: {
     width: '100%',
     flexDirection: 'row',
     alignItems: 'center',
-    marginTop: GetPlatform(20, 0),
+    marginTop: GetPlatform(verticalScale(20), 0),
   },
   drawerAvatar: {
-    width: 60,
-    height: 60,
-    borderRadius: 40,
-    marginRight: 14,
+    width: scale(60),
+    height: scale(60),
+    borderRadius: moderateScale(40),
+    marginRight: scale(14),
     borderWidth: 2,
     borderColor: Colors.black30,
   },
@@ -235,40 +240,40 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   drawerName: {
-    fontSize: 20,
+    fontSize: moderateScale(20),
     fontWeight: '600',
     color: Colors.white,
-    marginBottom: 10,
+    marginBottom: verticalScale(10),
   },
   badgeButton: {
     borderWidth: 1,
     borderColor: Colors.white,
-    paddingHorizontal: 12,
-    paddingVertical: 6,
-    borderRadius: 16,
+    paddingHorizontal: scale(12),
+    paddingVertical: verticalScale(6),
+    borderRadius: moderateScale(16),
     alignSelf: 'flex-start',
   },
   badgeText: {
     color: Colors.white,
-    fontSize: 12,
+    fontSize: moderateScale(12),
     fontWeight: '500',
   },
   drawerContent: {
     flex: 1,
-    paddingTop: 8,
+    paddingTop: verticalScale(8),
   },
   drawerItem: {
     flexDirection: 'row',
     alignItems: 'center',
-    padding: 10,
-    paddingHorizontal: 20,
+    padding: scale(10),
+    paddingHorizontal: scale(20),
   },
   activeDrawerItem: {
     backgroundColor: 'rgba(255,255,255,0.08)',
     borderLeftWidth: 0,
   },
   drawerLabel: {
-    fontSize: 16,
+    fontSize: moderateScale(16),
     color: Colors.white,
     fontWeight: '700',
   },
@@ -278,20 +283,20 @@ const styles = StyleSheet.create({
   },
   chevron: {
     color: 'rgba(255,255,255,0.9)',
-    fontSize: 24,
+    fontSize: moderateScale(24),
   },
   drawerDivider: {
     height: 1,
     backgroundColor: Colors.black10,
-    marginVertical: 4,
-    marginLeft: 20,
+    marginVertical: verticalScale(4),
+    marginLeft: scale(20),
   },
   childItem: {
-    paddingVertical: 6,
-    paddingLeft: 60,
+    paddingVertical: verticalScale(6),
+    paddingLeft: scale(60),
   },
   childLabel: {
-    fontSize: 15,
+    fontSize: moderateScale(15),
     color: Colors.white,
     fontWeight: '500',
   },

package/src/navigation/StackNavigator.tsx

@@ -0,0 +1,32 @@
+import DrawerNavigator from './DrawerNavigator';
+import LogCallScreen from '../screens/CRM/LogCallScreen';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+export type RootStackParamList = {
+  HomeTabs: undefined;
+  LogCall: {
+    contact: {
+      name: string;
+      avatarInitial: string;
+      avatarColor: string;
+    };
+  };
+  // Add more screens here as needed
+};
+
+const Stack = createNativeStackNavigator<RootStackParamList>();
+
+const StackNavigator: React.FC = () => {
+  return (
+    <Stack.Navigator
+      screenOptions={{
+        headerShown: false,
+      }}
+    >
+      <Stack.Screen name="HomeTabs" component={DrawerNavigator} />
+      <Stack.Screen name="LogCall" component={LogCallScreen} />
+    </Stack.Navigator>
+  );
+};
+
+export default StackNavigator;

package/src/screens/CRM/AddContactModal.tsx

@@ -0,0 +1,57 @@
+import { BottomSheet, BottomSheetOption } from '../../components/BottomSheet';
+
+interface AddContactModalProps {
+  visible: boolean;
+  onClose: () => void;
+  onAddManually?: () => void;
+  onUploadGmail?: () => void;
+  onUploadPhonebook?: () => void;
+  onUploadCSV?: () => void;
+}
+
+export const AddContactModal = ({
+  visible,
+  onClose,
+  onAddManually,
+  onUploadGmail,
+  onUploadPhonebook,
+  onUploadCSV,
+}: AddContactModalProps) => {
+  return (
+    <BottomSheet visible={visible} onClose={onClose} title="Add new contact">
+      <BottomSheetOption
+        icon="⋮⋮⋮"
+        label="Add manually"
+        onPress={() => {
+          onClose();
+          onAddManually?.();
+        }}
+      />
+      <BottomSheetOption
+        icon="G"
+        label="Upload Gmail contact"
+        iconColor="#EA4335"
+        onPress={() => {
+          onClose();
+          onUploadGmail?.();
+        }}
+      />
+      <BottomSheetOption
+        icon="📱"
+        label="Upload Phonebook contacts"
+        onPress={() => {
+          onClose();
+          onUploadPhonebook?.();
+        }}
+      />
+      <BottomSheetOption
+        icon="↑"
+        label="Upload CSV"
+        onPress={() => {
+          onClose();
+          onUploadCSV?.();
+        }}
+      />
+    </BottomSheet>
+  );
+};

package/src/screens/CRM/CategoryTabs.tsx

@@ -0,0 +1,109 @@
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
+import { Colors } from '../../constants/Colors';
+
+interface CategoryTabsProps {
+  selectedCategory: 'all' | 'followUp' | 'new' | 'engaged';
+  onSelectCategory: (category: 'all' | 'followUp' | 'new' | 'engaged') => void;
+}
+
+export const CategoryTabs: React.FC<CategoryTabsProps> = ({
+  selectedCategory,
+  onSelectCategory,
+}) => {
+  return (
+    <View style={styles.categoryTabsContainer}>
+      <TouchableOpacity
+        style={[
+          styles.categoryTab,
+          selectedCategory === 'all' && styles.categoryTabActive,
+        ]}
+        onPress={() => onSelectCategory('all')}
+      >
+        <Text
+          style={[
+            styles.categoryTabText,
+            selectedCategory === 'all' && styles.categoryTabTextActive,
+          ]}
+        >
+          All
+        </Text>
+      </TouchableOpacity>
+      <TouchableOpacity
+        style={[
+          styles.categoryTab,
+          selectedCategory === 'followUp' && styles.categoryTabActive,
+        ]}
+        onPress={() => onSelectCategory('followUp')}
+      >
+        <Text
+          style={[
+            styles.categoryTabText,
+            selectedCategory === 'followUp' && styles.categoryTabTextActive,
+          ]}
+        >
+          Follow Up
+        </Text>
+      </TouchableOpacity>
+      <TouchableOpacity
+        style={[
+          styles.categoryTab,
+          selectedCategory === 'new' && styles.categoryTabActive,
+        ]}
+        onPress={() => onSelectCategory('new')}
+      >
+        <Text
+          style={[
+            styles.categoryTabText,
+            selectedCategory === 'new' && styles.categoryTabTextActive,
+          ]}
+        >
+          New
+        </Text>
+      </TouchableOpacity>
+      <TouchableOpacity
+        style={[
+          styles.categoryTab,
+          selectedCategory === 'engaged' && styles.categoryTabActive,
+        ]}
+        onPress={() => onSelectCategory('engaged')}
+      >
+        <Text
+          style={[
+            styles.categoryTabText,
+            selectedCategory === 'engaged' && styles.categoryTabTextActive,
+          ]}
+        >
+          Engaged
+        </Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  categoryTabsContainer: {
+    flexDirection: 'row',
+    backgroundColor: Colors.white,
+    paddingHorizontal: scale(16),
+    paddingVertical: verticalScale(8),
+  },
+  categoryTab: {
+    flex: 1,
+    paddingVertical: verticalScale(12),
+    alignItems: 'center',
+    borderBottomWidth: 3,
+    borderBottomColor: 'transparent',
+  },
+  categoryTabActive: {
+    borderBottomColor: '#FF9800',
+  },
+  categoryTabText: {
+    fontSize: moderateScale(14),
+    fontWeight: '600',
+    color: Colors.black,
+  },
+  categoryTabTextActive: {
+    color: '#FF9800',
+  },
+});