react-native-salespanda 0.4.1 → 0.4.3

package/src/navigation/BottomTabNavigator.tsx

@@ -1,9 +1,8 @@
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
-import { Image, View } 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,106 +17,167 @@ 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;
+};
 
-export default function BottomTabNavigator() {
-  const renderImageIcon =
-    (inactive: any, active: any) =>
-    ({ focused, size }: { focused: boolean; size: number }) => {
-      if (focused) {
-        return (
-          <View
-            style={{
-              width: 48,
-              height: 48,
-              borderRadius: 24,
-              alignItems: 'center',
-              justifyContent: 'center',
-              borderWidth: 4,
-              borderColor: Colors.white,
-              transform: [{ translateY: -6 }],
-            }}
-          >
-            <Image
-              source={active}
-              resizeMode="contain"
-              style={{ width: 42, height: 42, tintColor: Colors.primary }}
-            />
-          </View>
-        );
-      }
+const Tab = createBottomTabNavigator<BottomTabParamList>();
+
+interface TabIconProps {
+  focused: boolean;
+  size: number;
+}
+
+interface ImageIconProps {
+  inactive: any;
+  active: any;
+}
+
+const ImageIcon = ({ inactive, active }: ImageIconProps) => {
+  return ({ focused, size }: TabIconProps) => {
+    if (focused) {
       return (
-        <Image
-          source={inactive}
-          resizeMode="contain"
-          style={{ width: size, height: size, tintColor: Colors.black30 }}
-        />
+        <View style={styles.activeIconContainer}>
+          <Image
+            source={active}
+            resizeMode="contain"
+            style={styles.activeIcon}
+          />
+        </View>
       );
-    };
+    }
+    return (
+      <Image
+        source={inactive}
+        resizeMode="contain"
+        style={[styles.inactiveIcon, { width: size, height: size }]}
+      />
+    );
+  };
+};
+
+const BottomTabNavigator: React.FC = () => {
+  const navigation = useNavigation();
 
   return (
-    <SafeAreaView
-      style={{ flex: 1, backgroundColor: Colors.background }}
-      edges={['bottom']}
-    >
+    <SafeAreaView style={styles.container} edges={['bottom']}>
       <Tab.Navigator
         screenOptions={{
           headerShown: false,
           sceneStyle: { backgroundColor: Colors.background },
           tabBarShowLabel: false,
-          tabBarStyle: {
-            borderTopWidth: 1,
-            borderTopColor: Colors.border,
-            backgroundColor: Colors.white,
-            paddingBottom: 10,
-            paddingTop: 8,
-            height: 64,
-          },
+          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"
           component={HomeScreen}
           options={{
-            tabBarIcon: renderImageIcon(homeIcon, homeIconActive),
-            headerShown: false,
+            tabBarIcon: ImageIcon({
+              inactive: homeIcon,
+              active: homeIconActive,
+            }),
           }}
         />
         <Tab.Screen
           name="CRM"
           component={CRMScreen}
           options={{
-            tabBarIcon: renderImageIcon(crmIcon, crmIconActive),
+            tabBarIcon: ImageIcon({ inactive: crmIcon, active: crmIconActive }),
           }}
         />
         <Tab.Screen
           name="Reports"
           component={ReportsScreen}
           options={{
-            tabBarIcon: renderImageIcon(diaryIcon, diaryIconActive),
+            tabBarIcon: ImageIcon({
+              inactive: diaryIcon,
+              active: diaryIconActive,
+            }),
           }}
         />
         <Tab.Screen
           name="Notifications"
           component={NotificationsScreen}
           options={{
-            tabBarIcon: renderImageIcon(
-              notificationIcon,
-              notificationIconActive
-            ),
+            tabBarIcon: ImageIcon({
+              inactive: notificationIcon,
+              active: notificationIconActive,
+            }),
           }}
         />
         <Tab.Screen
-          name="Profile"
-          component={ProfileScreen}
+          name="Activity Analytics"
+          component={ActivityAnalytics}
           options={{
-            tabBarIcon: renderImageIcon(analyticsIcon, analyticsIconActive),
+            tabBarIcon: ImageIcon({
+              inactive: analyticsIcon,
+              active: analyticsIconActive,
+            }),
           }}
         />
       </Tab.Navigator>
     </SafeAreaView>
   );
-}
+};
+
+export default BottomTabNavigator;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.background,
+  },
+  tabBar: {
+    borderTopWidth: 1,
+    borderTopColor: Colors.border,
+    backgroundColor: Colors.white,
+    paddingBottom: verticalScale(10),
+    paddingTop: verticalScale(8),
+    height: verticalScale(64),
+  },
+  activeIconContainer: {
+    width: scale(48),
+    height: scale(48),
+    borderRadius: moderateScale(24),
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 4,
+    borderColor: Colors.white,
+    transform: [{ translateY: verticalScale(-6) }],
+  },
+  activeIcon: {
+    width: scale(42),
+    height: scale(42),
+    tintColor: Colors.primary,
+  },
+  inactiveIcon: {
+    tintColor: Colors.black30,
+  },
+});

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();
@@ -38,9 +39,14 @@ const DrawerItem: React.FC<DrawerItemProps> = ({
   );
 };
 
-function CustomDrawerContent(props: any) {
-  const { navigation } = props;
+interface CustomDrawerContentProps {
+  navigation: any;
+  state?: any;
+}
 
+const CustomDrawerContent: React.FC<CustomDrawerContentProps> = ({
+  navigation,
+}) => {
   const [expanded, setExpanded] = React.useState<Record<string, boolean>>({
     'Campaign': false,
     'Sales WAR Room': false,
@@ -131,7 +137,7 @@ function CustomDrawerContent(props: any) {
                 onPress={() => toggle(group.label)}
                 activeOpacity={0.7}
               >
-                <Text style={[styles.drawerLabel, { flex: 1 }]}>
+                <Text style={[styles.drawerLabel, styles.flexOne]}>
                   {group.label}
                 </Text>
                 <Text style={styles.chevron}>{isOpen ? '▾' : '▸'}</Text>
@@ -154,18 +160,22 @@ function CustomDrawerContent(props: any) {
       </ScrollView>
     </View>
   );
-}
+};
+
+const renderDrawerContent = (props: any) => {
+  return <CustomDrawerContent navigation={props.navigation} />;
+};
 
-export default function DrawerNavigator() {
+const DrawerNavigator: React.FC = () => {
   return (
     <Drawer.Navigator
-      drawerContent={(props) => <CustomDrawerContent {...props} />}
+      drawerContent={renderDrawerContent}
       screenOptions={{
-        headerShown: true,
+        headerShown: false,
         drawerType: 'slide',
         swipeEdgeWidth: 100,
         drawerStyle: {
-          width: 280,
+          width: scale(280),
           backgroundColor: Colors.primary,
         },
         headerStyle: {
@@ -195,7 +205,9 @@ export default function DrawerNavigator() {
       />
     </Drawer.Navigator>
   );
-}
+};
+
+export default DrawerNavigator;
 
 const styles = StyleSheet.create({
   drawerContainer: {
@@ -204,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,
   },
@@ -228,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',
   },
@@ -271,21 +283,24 @@ 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',
   },
+  flexOne: {
+    flex: 1,
+  },
 });

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