react-native-salespanda 0.7.6 → 0.7.7

package/src/navigation/DrawerNavigator.tsx

@@ -0,0 +1,306 @@
+import * as React from 'react';
+import { createDrawerNavigator } from '@react-navigation/drawer';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  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/Tabs/ActivityAnalytics';
+import { GetPlatform } from '../constants/GetPlatorm';
+
+const Drawer = createDrawerNavigator();
+
+interface DrawerItemProps {
+  label: string;
+  onPress: () => void;
+  active?: boolean;
+}
+
+const DrawerItem: React.FC<DrawerItemProps> = ({
+  label,
+  onPress,
+  active = false,
+}) => {
+  return (
+    <TouchableOpacity
+      style={[styles.drawerItem, active && styles.activeDrawerItem]}
+      onPress={onPress}
+    >
+      <Text style={[styles.drawerLabel, active && styles.activeDrawerLabel]}>
+        {label}
+      </Text>
+    </TouchableOpacity>
+  );
+};
+
+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,
+    'Pipeline': false,
+  });
+  const toggle = (key: string) =>
+    setExpanded((prev) => ({ ...prev, [key]: !prev[key] }));
+
+  const groups: Array<{
+    label: string;
+    children?: Array<{ label: string; onPress: () => void }>;
+    onPress?: () => void;
+  }> = [
+    { label: 'Content Library', onPress: () => {} },
+    {
+      label: 'Campaign',
+      children: [
+        { label: 'Run Campaign', onPress: () => {} },
+        { label: 'List', onPress: () => {} },
+      ],
+    },
+    { label: 'My Activity', onPress: () => {} },
+    { label: 'DigiCard', onPress: () => {} },
+    { label: 'My Profile', onPress: () => navigation.navigate('Profile') },
+    {
+      label: 'Sales WAR Room',
+      children: [
+        { label: 'Forms & Brochures', onPress: () => {} },
+        { label: 'CXO Announcements', onPress: () => {} },
+        { label: 'Training/Sales Content', onPress: () => {} },
+      ],
+    },
+    { label: 'Tasks', onPress: () => {} },
+    { label: 'Import Phone Contacts', onPress: () => {} },
+    {
+      label: 'Pipeline',
+      children: [
+        { label: 'Leads', onPress: () => {} },
+        { label: 'Contacts', onPress: () => {} },
+        { label: 'Email Activity', onPress: () => {} },
+      ],
+    },
+    { label: 'Notification', onPress: () => {} },
+    { label: 'Settings', onPress: () => {} },
+    { label: 'Help & Support', onPress: () => {} },
+  ];
+
+  return (
+    <View style={styles.drawerContainer}>
+      <ScrollView
+        style={styles.drawerContent}
+        showsVerticalScrollIndicator={false}
+      >
+        <View style={styles.drawerHeader}>
+          <View style={styles.headerRow}>
+            <Image
+              source={{ uri: 'https://via.placeholder.com/80x80' }}
+              style={styles.drawerAvatar}
+            />
+            <View style={styles.headerTextCol}>
+              <Text style={styles.drawerName}>Eduuu Parrtner</Text>
+              <TouchableOpacity style={styles.badgeButton}>
+                <Text style={styles.badgeText}>Go to Microsite</Text>
+              </TouchableOpacity>
+            </View>
+          </View>
+        </View>
+        {groups.map((group, index) => {
+          const hasChildren =
+            Array.isArray(group.children) && group.children.length > 0;
+          if (!hasChildren) {
+            return (
+              <View key={group.label}>
+                {index > 0 ? <View style={styles.drawerDivider} /> : null}
+                <DrawerItem
+                  label={group.label}
+                  onPress={group.onPress ?? (() => {})}
+                />
+              </View>
+            );
+          }
+          const isOpen = !!expanded[group.label];
+          return (
+            <View key={group.label}>
+              {index > 0 ? <View style={styles.drawerDivider} /> : null}
+              <TouchableOpacity
+                style={styles.drawerItem}
+                onPress={() => toggle(group.label)}
+                activeOpacity={0.7}
+              >
+                <Text style={[styles.drawerLabel, styles.flexOne]}>
+                  {group.label}
+                </Text>
+                <Text style={styles.chevron}>{isOpen ? '▾' : '▸'}</Text>
+              </TouchableOpacity>
+              {isOpen &&
+                group.children!.map((child, cIdx) => (
+                  <View key={child.label}>
+                    {cIdx > 0 ? <View style={styles.drawerDivider} /> : null}
+                    <TouchableOpacity
+                      style={styles.childItem}
+                      onPress={child.onPress}
+                    >
+                      <Text style={styles.childLabel}>{child.label}</Text>
+                    </TouchableOpacity>
+                  </View>
+                ))}
+            </View>
+          );
+        })}
+      </ScrollView>
+    </View>
+  );
+};
+
+const renderDrawerContent = (props: any) => {
+  return <CustomDrawerContent navigation={props.navigation} />;
+};
+
+const DrawerNavigator: React.FC = () => {
+  return (
+    <Drawer.Navigator
+      drawerContent={renderDrawerContent}
+      screenOptions={{
+        headerShown: false,
+        drawerType: 'slide',
+        swipeEdgeWidth: 100,
+        drawerStyle: {
+          width: scale(280),
+          backgroundColor: Colors.primary,
+        },
+        headerStyle: {
+          backgroundColor: Colors.white,
+        },
+        headerTintColor: Colors.primary,
+        headerTitleAlign: 'left',
+        headerTitleStyle: {
+          fontWeight: '600',
+          color: Colors.black,
+        },
+      }}
+    >
+      <Drawer.Screen
+        name="HomeTabs"
+        component={BottomTabNavigator}
+        options={{
+          title: 'Home Page',
+        }}
+      />
+      <Drawer.Screen
+        name="Profile"
+        component={ProfileScreen}
+        options={{
+          title: 'Profile',
+        }}
+      />
+    </Drawer.Navigator>
+  );
+};
+
+export default DrawerNavigator;
+
+const styles = StyleSheet.create({
+  drawerContainer: {
+    flex: 1,
+    backgroundColor: Colors.primary,
+  },
+  drawerHeader: {
+    backgroundColor: Colors.primary,
+    paddingHorizontal: scale(20),
+    paddingTop: verticalScale(36),
+    paddingBottom: verticalScale(16),
+    alignItems: 'flex-start',
+  },
+  headerRow: {
+    width: '100%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: GetPlatform(verticalScale(20), 0),
+  },
+  drawerAvatar: {
+    width: scale(60),
+    height: scale(60),
+    borderRadius: moderateScale(40),
+    marginRight: scale(14),
+    borderWidth: 2,
+    borderColor: Colors.black30,
+  },
+  headerTextCol: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  drawerName: {
+    fontSize: moderateScale(20),
+    fontWeight: '600',
+    color: Colors.white,
+    marginBottom: verticalScale(10),
+  },
+  badgeButton: {
+    borderWidth: 1,
+    borderColor: Colors.white,
+    paddingHorizontal: scale(12),
+    paddingVertical: verticalScale(6),
+    borderRadius: moderateScale(16),
+    alignSelf: 'flex-start',
+  },
+  badgeText: {
+    color: Colors.white,
+    fontSize: moderateScale(12),
+    fontWeight: '500',
+  },
+  drawerContent: {
+    flex: 1,
+    paddingTop: verticalScale(8),
+  },
+  drawerItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: scale(10),
+    paddingHorizontal: scale(20),
+  },
+  activeDrawerItem: {
+    backgroundColor: 'rgba(255,255,255,0.08)',
+    borderLeftWidth: 0,
+  },
+  drawerLabel: {
+    fontSize: moderateScale(16),
+    color: Colors.white,
+    fontWeight: '700',
+  },
+  activeDrawerLabel: {
+    fontWeight: '600',
+    color: Colors.white,
+  },
+  chevron: {
+    color: 'rgba(255,255,255,0.9)',
+    fontSize: moderateScale(24),
+  },
+  drawerDivider: {
+    height: 1,
+    backgroundColor: Colors.black10,
+    marginVertical: verticalScale(4),
+    marginLeft: scale(20),
+  },
+  childItem: {
+    paddingVertical: verticalScale(6),
+    paddingLeft: scale(60),
+  },
+  childLabel: {
+    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',
+  },
+});

package/src/screens/CRM/ContactItem.tsx

@@ -0,0 +1,168 @@
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
+import { Colors } from '../../constants/Colors';
+
+interface ContactItemProps {
+  name: string;
+  phone?: string;
+  email?: string;
+  description?: string;
+  avatarColor: string;
+  avatarInitial: string;
+  selected?: boolean;
+  onPress?: () => void;
+  onSelectToggle?: () => void;
+  onReminderPress?: () => void;
+  onCallPress?: () => void;
+  onMenuPress?: () => void;
+  showCheckbox?: boolean;
+  showActionButtons?: boolean;
+}
+
+export const ContactItem: React.FC<ContactItemProps> = ({
+  name,
+  phone,
+  email,
+  description,
+  avatarColor,
+  avatarInitial,
+  selected = false,
+  onPress,
+  onSelectToggle,
+  onReminderPress,
+  onCallPress,
+  onMenuPress,
+  showCheckbox = false,
+  showActionButtons = false,
+}) => {
+  return (
+    <TouchableOpacity
+      style={styles.contactItem}
+      onPress={onPress}
+      activeOpacity={0.7}
+    >
+      <View style={[styles.avatar, { backgroundColor: avatarColor }]}>
+        <Text style={styles.avatarText}>{avatarInitial}</Text>
+      </View>
+      <View style={styles.contactInfo}>
+        <Text style={styles.contactName}>{name}</Text>
+        {phone && <Text style={styles.contactPhone}>{phone}</Text>}
+        {email && <Text style={styles.contactEmail}>{email}</Text>}
+        {description && (
+          <Text
+            style={styles.contactDescription}
+            numberOfLines={1}
+            ellipsizeMode="tail"
+          >
+            {description}
+          </Text>
+        )}
+      </View>
+      {showActionButtons && (
+        <View style={styles.actionButtons}>
+          <TouchableOpacity
+            style={styles.actionButton}
+            onPress={onReminderPress}
+          >
+            <Text style={styles.actionIcon}>⏰</Text>
+          </TouchableOpacity>
+          <TouchableOpacity style={styles.actionButton} onPress={onCallPress}>
+            <Text style={styles.actionIcon}>📞</Text>
+          </TouchableOpacity>
+          <TouchableOpacity style={styles.actionButton} onPress={onMenuPress}>
+            <Text style={styles.actionIcon}>⋮</Text>
+          </TouchableOpacity>
+        </View>
+      )}
+      {showCheckbox && (
+        <TouchableOpacity style={styles.checkbox} onPress={onSelectToggle}>
+          <View
+            style={[styles.checkboxInner, selected && styles.checkboxSelected]}
+          >
+            {selected && <Text style={styles.checkmark}>✓</Text>}
+          </View>
+        </TouchableOpacity>
+      )}
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  contactItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: Colors.white,
+    padding: scale(16),
+    borderBottomWidth: 1,
+    borderBottomColor: '#E0E0E0',
+  },
+  avatar: {
+    width: scale(46),
+    height: scale(46),
+    borderRadius: moderateScale(23),
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: scale(12),
+  },
+  avatarText: {
+    fontSize: moderateScale(24),
+    fontWeight: '700',
+    color: Colors.white,
+  },
+  contactInfo: {
+    flex: 1,
+  },
+  contactName: {
+    fontSize: moderateScale(16),
+    fontWeight: '700',
+    color: Colors.black,
+    marginBottom: verticalScale(4),
+  },
+  contactPhone: {
+    fontSize: moderateScale(12),
+    color: Colors.black,
+    marginBottom: verticalScale(2),
+  },
+  contactEmail: {
+    fontSize: moderateScale(12),
+    color: '#666',
+    marginBottom: verticalScale(4),
+  },
+  contactDescription: {
+    fontSize: moderateScale(12),
+    color: Colors.black,
+    lineHeight: verticalScale(18),
+  },
+  actionButtons: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  actionButton: {
+    padding: scale(8),
+    marginLeft: scale(8),
+  },
+  actionIcon: {
+    fontSize: moderateScale(20),
+    color: Colors.black,
+  },
+  checkbox: {
+    padding: scale(8),
+  },
+  checkboxInner: {
+    width: scale(28),
+    height: scale(28),
+    borderWidth: 2,
+    borderColor: '#FF9800',
+    borderRadius: moderateScale(4),
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  checkboxSelected: {
+    backgroundColor: '#FF9800',
+  },
+  checkmark: {
+    color: Colors.white,
+    fontSize: moderateScale(16),
+    fontWeight: '700',
+  },
+});

package/src/screens/CRM/FilterDropdown.tsx

@@ -0,0 +1,34 @@
+import { Text, StyleSheet, TouchableOpacity } from 'react-native';
+import { scale, moderateScale } from 'react-native-size-matters';
+
+interface FilterDropdownProps {
+  onPress?: () => void;
+}
+
+export const FilterDropdown: React.FC<FilterDropdownProps> = ({ onPress }) => {
+  return (
+    <TouchableOpacity style={styles.filterButton} onPress={onPress}>
+      <Text style={styles.filterText}>Filter By</Text>
+      <Text style={styles.filterArrow}>▼</Text>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  filterButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    paddingHorizontal: scale(16),
+  },
+  filterText: {
+    fontSize: moderateScale(16),
+    fontWeight: '600',
+    color: '#FF9800',
+    marginRight: scale(4),
+  },
+  filterArrow: {
+    fontSize: moderateScale(12),
+    color: '#FF9800',
+  },
+});