react-native-salespanda 0.3.0 → 0.4.0

package/src/navigation/BottomTabNavigator.tsx

@@ -1,65 +1,120 @@
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
-import { Text } from 'react-native';
+import { Image, View } from 'react-native';
 import HomeScreen from '../screens/HomeScreen';
-import PremiumScreen from '../screens/PremiumScreen';
 import NotificationsScreen from '../screens/NotificationsScreen';
 import ReportsScreen from '../screens/ReportsScreen';
+import ProfileScreen from '../screens/ProfileScreen';
 import { SafeAreaView } from 'react-native-safe-area-context';
+import { Colors } from '../constants/Colors';
+import {
+  analyticsIcon,
+  analyticsIconActive,
+  crmIcon,
+  crmIconActive,
+  diaryIcon,
+  diaryIconActive,
+  homeIcon,
+  homeIconActive,
+  notificationIcon,
+  notificationIconActive,
+} from '../assets/images';
+import CRMScreen from '../screens/CRMScreen';
 
 const Tab = createBottomTabNavigator();
 
 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>
+        );
+      }
+      return (
+        <Image
+          source={inactive}
+          resizeMode="contain"
+          style={{ width: size, height: size, tintColor: Colors.black30 }}
+        />
+      );
+    };
+
   return (
-    <SafeAreaView style={{ flex: 1 }} edges={['bottom']}>
+    <SafeAreaView
+      style={{ flex: 1, backgroundColor: Colors.background }}
+      edges={['bottom']}
+    >
       <Tab.Navigator
         screenOptions={{
-          headerShown: false, // Hide headers as drawer provides them
-          tabBarActiveTintColor: '#4a148c',
-          tabBarInactiveTintColor: '#999',
+          headerShown: false,
+          sceneStyle: { backgroundColor: Colors.background },
+          tabBarShowLabel: false,
           tabBarStyle: {
             borderTopWidth: 1,
-            borderTopColor: '#e0e0e0',
-            paddingBottom: 8,
+            borderTopColor: Colors.border,
+            backgroundColor: Colors.white,
+            paddingBottom: 10,
             paddingTop: 8,
-            height: 60,
+            height: 64,
           },
+          tabBarItemStyle: { overflow: 'visible' },
         }}
       >
         <Tab.Screen
           name="Home"
           component={HomeScreen}
           options={{
-            tabBarIcon: ({ color, size }) => (
-              <Text style={{ fontSize: size, color }}>🏠</Text>
-            ),
+            tabBarIcon: renderImageIcon(homeIcon, homeIconActive),
             headerShown: false,
           }}
         />
         <Tab.Screen
-          name="Premium"
-          component={PremiumScreen}
+          name="CRM"
+          component={CRMScreen}
           options={{
-            tabBarIcon: ({ color, size }) => (
-              <Text style={{ fontSize: size, color }}>💎</Text>
-            ),
+            tabBarIcon: renderImageIcon(crmIcon, crmIconActive),
+          }}
+        />
+        <Tab.Screen
+          name="Reports"
+          component={ReportsScreen}
+          options={{
+            tabBarIcon: renderImageIcon(diaryIcon, diaryIconActive),
           }}
         />
         <Tab.Screen
           name="Notifications"
           component={NotificationsScreen}
           options={{
-            tabBarIcon: ({ color, size }) => (
-              <Text style={{ fontSize: size, color }}>🔔</Text>
+            tabBarIcon: renderImageIcon(
+              notificationIcon,
+              notificationIconActive
             ),
           }}
         />
         <Tab.Screen
-          name="Reports"
-          component={ReportsScreen}
+          name="Profile"
+          component={ProfileScreen}
           options={{
-            tabBarIcon: ({ color, size }) => (
-              <Text style={{ fontSize: size, color }}>📊</Text>
-            ),
+            tabBarIcon: renderImageIcon(analyticsIcon, analyticsIconActive),
           }}
         />
       </Tab.Navigator>

package/src/navigation/DrawerNavigator.tsx

@@ -9,20 +9,20 @@ import {
   ScrollView,
 } from 'react-native';
 import BottomTabNavigator from './BottomTabNavigator';
+import { Colors } from '../constants/Colors';
 import ProfileScreen from '../screens/ProfileScreen';
+import { GetPlatform } from '../constants/GetPlatorm';
 
 const Drawer = createDrawerNavigator();
 
 interface DrawerItemProps {
   label: string;
-  icon: string;
   onPress: () => void;
   active?: boolean;
 }
 
 const DrawerItem: React.FC<DrawerItemProps> = ({
   label,
-  icon,
   onPress,
   active = false,
 }) => {
@@ -31,7 +31,6 @@ const DrawerItem: React.FC<DrawerItemProps> = ({
       style={[styles.drawerItem, active && styles.activeDrawerItem]}
       onPress={onPress}
     >
-      <Text style={styles.drawerIcon}>{icon}</Text>
       <Text style={[styles.drawerLabel, active && styles.activeDrawerLabel]}>
         {label}
       </Text>
@@ -40,99 +39,118 @@ const DrawerItem: React.FC<DrawerItemProps> = ({
 };
 
 function CustomDrawerContent(props: any) {
-  const { navigation, state } = props;
-  const currentRoute = state.routes[state.index].name;
+  const { navigation } = props;
 
-  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 */
-          }}
-        />
+  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] }));
 
-        <View style={styles.drawerDivider} />
+  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: () => {} },
+  ];
 
-        <DrawerItem
-          label="Settings"
-          icon="⚙️"
-          onPress={() => {
-            /* Add navigation */
-          }}
-        />
-        <DrawerItem
-          label="Help & Support"
-          icon="❓"
-          onPress={() => {
-            /* Add navigation */
-          }}
-        />
-        <DrawerItem
-          label="Logout"
-          icon="🚪"
-          onPress={() => {
-            /* Add logout logic */
-          }}
-        />
+  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, { flex: 1 }]}>
+                  {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>
   );
@@ -144,17 +162,20 @@ export default function DrawerNavigator() {
       drawerContent={(props) => <CustomDrawerContent {...props} />}
       screenOptions={{
         headerShown: true,
-        drawerType: 'slide', // Changed from 'front' for better UX
-        swipeEdgeWidth: 100, // Width from edge to start swipe
+        drawerType: 'slide',
+        swipeEdgeWidth: 100,
         drawerStyle: {
           width: 280,
+          backgroundColor: Colors.primary,
         },
         headerStyle: {
-          backgroundColor: '#4a148c',
+          backgroundColor: Colors.white,
         },
-        headerTintColor: '#fff',
+        headerTintColor: Colors.primary,
+        headerTitleAlign: 'left',
         headerTitleStyle: {
           fontWeight: '600',
+          color: Colors.black,
         },
       }}
     >
@@ -162,7 +183,7 @@ export default function DrawerNavigator() {
         name="HomeTabs"
         component={BottomTabNavigator}
         options={{
-          title: 'Salespanda',
+          title: 'Home Page',
         }}
       />
       <Drawer.Screen
@@ -179,32 +200,51 @@ export default function DrawerNavigator() {
 const styles = StyleSheet.create({
   drawerContainer: {
     flex: 1,
-    backgroundColor: '#fff',
+    backgroundColor: Colors.primary,
   },
   drawerHeader: {
-    backgroundColor: '#4a148c',
-    padding: 20,
-    paddingTop: 50,
+    backgroundColor: Colors.primary,
+    paddingHorizontal: 20,
+    paddingTop: 36,
+    paddingBottom: 16,
+    alignItems: 'flex-start',
+  },
+  headerRow: {
+    width: '100%',
+    flexDirection: 'row',
     alignItems: 'center',
+    marginTop: GetPlatform(20, 0),
   },
   drawerAvatar: {
-    width: 80,
-    height: 80,
+    width: 60,
+    height: 60,
     borderRadius: 40,
-    marginBottom: 12,
-    borderWidth: 3,
-    borderColor: '#fff',
+    marginRight: 14,
+    borderWidth: 2,
+    borderColor: Colors.black30,
+  },
+  headerTextCol: {
+    flex: 1,
+    justifyContent: 'center',
   },
   drawerName: {
-    fontSize: 18,
+    fontSize: 20,
     fontWeight: '600',
-    color: '#fff',
-    marginBottom: 4,
+    color: Colors.white,
+    marginBottom: 10,
   },
-  drawerEmail: {
-    fontSize: 14,
-    color: '#fff',
-    opacity: 0.8,
+  badgeButton: {
+    borderWidth: 1,
+    borderColor: Colors.white,
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 16,
+    alignSelf: 'flex-start',
+  },
+  badgeText: {
+    color: Colors.white,
+    fontSize: 12,
+    fontWeight: '500',
   },
   drawerContent: {
     flex: 1,
@@ -213,30 +253,39 @@ const styles = StyleSheet.create({
   drawerItem: {
     flexDirection: 'row',
     alignItems: 'center',
-    padding: 16,
+    padding: 10,
     paddingHorizontal: 20,
   },
   activeDrawerItem: {
-    backgroundColor: '#f5f5f5',
-    borderLeftWidth: 4,
-    borderLeftColor: '#4a148c',
-  },
-  drawerIcon: {
-    fontSize: 20,
-    marginRight: 16,
-    width: 24,
+    backgroundColor: 'rgba(255,255,255,0.08)',
+    borderLeftWidth: 0,
   },
   drawerLabel: {
     fontSize: 16,
-    color: '#333',
+    color: Colors.white,
+    fontWeight: '700',
   },
   activeDrawerLabel: {
     fontWeight: '600',
-    color: '#4a148c',
+    color: Colors.white,
+  },
+  chevron: {
+    color: 'rgba(255,255,255,0.9)',
+    fontSize: 24,
   },
   drawerDivider: {
     height: 1,
-    backgroundColor: '#e0e0e0',
-    marginVertical: 8,
+    backgroundColor: Colors.black10,
+    marginVertical: 4,
+    marginLeft: 20,
+  },
+  childItem: {
+    paddingVertical: 6,
+    paddingLeft: 60,
+  },
+  childLabel: {
+    fontSize: 15,
+    color: Colors.white,
+    fontWeight: '500',
   },
 });

package/src/screens/CRMScreen.tsx

@@ -0,0 +1,34 @@
+import { View, Text, StyleSheet, ScrollView } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { Colors } from '../constants/Colors';
+
+export default function CRMScreen() {
+  return (
+    <SafeAreaView style={styles.container} edges={['bottom']}>
+      <View style={styles.header}>
+        <Text style={styles.headerTitle}>CRM</Text>
+      </View>
+      <ScrollView style={styles.scrollView}></ScrollView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.background,
+  },
+  header: {
+    backgroundColor: Colors.white,
+    padding: 16,
+  },
+  headerTitle: {
+    fontSize: 20,
+    fontWeight: '600',
+    color: Colors.black,
+    textAlign: 'center',
+  },
+  scrollView: {
+    flex: 1,
+  },
+});