react-native-salespanda 0.4.2 → 0.4.3

package/src/screens/Tabs/CRMScreen.tsx

@@ -0,0 +1,381 @@
+import { useState } from 'react';
+import {
+  StyleSheet,
+  ScrollView,
+  View,
+  Text,
+  TouchableOpacity,
+} from 'react-native';
+import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { Colors } from '../../constants/Colors';
+import { SearchBar } from '../../components/SearchBar';
+import { ContactViaModal } from '../../components/ContactViaModal';
+import { useNavigation } from '@react-navigation/native';
+import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import type { RootStackParamList } from '../../navigation/StackNavigator';
+import {
+  FilterDropdown,
+  TopTabs,
+  InfoCard,
+  CategoryTabs,
+  FunnelChart,
+  ContactItem,
+  LeadCard,
+  AddContactModal,
+} from '../CRM';
+import TabsHeader from '../../components/TabsHeader';
+
+type CRMScreenNavigationProp = NativeStackNavigationProp<RootStackParamList>;
+
+const CRMScreen: React.FC = () => {
+  const navigation = useNavigation<CRMScreenNavigationProp>();
+  const [selectedTab, setSelectedTab] = useState<
+    'leads' | 'prospects' | 'contacts'
+  >('leads');
+  const [selectedCategory, setSelectedCategory] = useState<
+    'all' | 'followUp' | 'new' | 'engaged'
+  >('all');
+  const [showAddContactModal, setShowAddContactModal] = useState(false);
+  const [showContactViaModal, setShowContactViaModal] = useState(false);
+  const [selectedContact, setSelectedContact] = useState<any>(null);
+
+  const tabCounts = {
+    leads: 44,
+    prospects: 11,
+    contacts: 1865,
+  };
+
+  const funnelData = {
+    followUp: 11,
+    new: 44,
+    engaged: 0,
+    deal: 0,
+    quoteSent: 0,
+    won: 0,
+    dropped: 0,
+  };
+
+  // Sample data for contacts (with phone numbers)
+  const contactsData = [
+    {
+      name: 'Amit',
+      phone: '7677777700',
+      email: 'amitjai@icc.com',
+      avatarColor: '#C8A4C8',
+      avatarInitial: 'A',
+    },
+    {
+      name: 'Hari',
+      phone: '9797445501',
+      email: 'harikapoor@icc.com',
+      avatarColor: '#8B7C93',
+      avatarInitial: 'H',
+    },
+    {
+      name: 'Garry Kumar',
+      phone: '7878565601',
+      email: '',
+      avatarColor: '#C8A4C8',
+      avatarInitial: 'G',
+    },
+    {
+      name: 'rishabh sharma',
+      phone: '08006760073',
+      email: 'rishabh.sharma.for.me@gmail.com',
+      avatarColor: '#D4E4B4',
+      avatarInitial: 'R',
+    },
+    {
+      name: 'kumara lafosa',
+      phone: '6658388899',
+      email: 'kumara@mail.com',
+      avatarColor: '#B4D4E4',
+      avatarInitial: 'K',
+    },
+    {
+      name: 'raghvendra vashisht',
+      phone: '6987236496',
+      email: 'raghavendra@mail.com',
+      avatarColor: '#F4C4A4',
+      avatarInitial: 'R',
+    },
+    {
+      name: 'rishabh kumaea',
+      phone: '8923764268',
+      email: 'rishi@mail.com',
+      avatarColor: '#C8A4C8',
+      avatarInitial: 'R',
+    },
+  ];
+  const prospectsData = [
+    {
+      name: 'Harry Sharma',
+      description: 'Harry Sharma just visited your  microsite',
+      avatarColor: '#C84B9E',
+      avatarInitial: 'H',
+    },
+    {
+      name: 'Alfred Jones',
+      description: 'Alfred Jones just visited your  microsite',
+      avatarColor: '#8B7C93',
+      avatarInitial: 'A',
+    },
+    {
+      name: 'Mahendra Jee',
+      description: 'The prospect is added manually.',
+      avatarColor: '#C84B9E',
+      avatarInitial: 'M',
+    },
+    {
+      name: 'Rraghav Vohra',
+      description:
+        'Rraghav Vohra just visited your  microsite  by clicking on the content Auto Email "Rraghav\'s Indirect Template Technochimes 13th May"',
+      avatarColor: '#9BC75C',
+      avatarInitial: 'R',
+    },
+    {
+      name: 'Mike Jordan',
+      description:
+        'Mike Jordan just visited your  microsite  by clicking on the content Auto Email "Rraghav\'s Indirect Template Technochimes 13th May"',
+      avatarColor: '#5CB7C7',
+      avatarInitial: 'M',
+    },
+  ];
+
+  // Sample data for leads
+  const leadsData = {
+    new: [
+      {
+        name: 'Richa Jaiswall',
+        email: 'richa.jaiswal@salespanda.com',
+        description: 'Last visited your microsite and filled a Lead.',
+        timestamp: '10-Nov-2025 03:42 PM',
+      },
+      {
+        name: 'Amit',
+        email: 'amitjai@icc.com',
+        description: 'Last visited your microsite and filled a Lead.',
+        timestamp: '18-Sep-2025 11:48 AM',
+      },
+    ],
+    followUp: [
+      {
+        name: 'Harry Sharma',
+        email: 'harish.sharma@salespanda.com',
+        description: 'Last visited your microsite.',
+        timestamp: '27-Jun-2025 06:47 PM',
+      },
+      {
+        name: 'Alfred Jones',
+        email: 'alfred.jones@salespanda.com',
+        description: 'Last visited your microsite.',
+        timestamp: '15-May-2025 12:11 PM',
+      },
+    ],
+  };
+
+  const renderContent = () => {
+    // Prospects tab - always show contact list
+    if (selectedTab === 'prospects') {
+      return (
+        <>
+          <SearchBar placeholder="Search by name" />
+          {prospectsData.map((contact, index) => (
+            <ContactItem
+              key={index}
+              {...contact}
+              showActionButtons={true}
+              onReminderPress={() => console.log('Reminder:', contact.name)}
+              onCallPress={() => {
+                navigation.navigate('LogCall', {
+                  contact: {
+                    name: contact.name,
+                    avatarInitial: contact.avatarInitial,
+                    avatarColor: contact.avatarColor,
+                  },
+                });
+              }}
+              onMenuPress={() => {
+                setSelectedContact(contact);
+                setShowContactViaModal(true);
+              }}
+            />
+          ))}
+        </>
+      );
+    }
+
+    // Leads tab - show different content based on category
+    if (selectedTab === 'leads') {
+      // Show funnel chart only when "All" is selected
+      if (selectedCategory === 'all') {
+        return (
+          <>
+            <InfoCard />
+            <CategoryTabs
+              selectedCategory={selectedCategory}
+              onSelectCategory={setSelectedCategory}
+            />
+            <FunnelChart data={funnelData} totalLeads={55} />
+          </>
+        );
+      }
+
+      // Show lead cards for specific categories
+      const categoryData =
+        selectedCategory === 'new'
+          ? leadsData.new
+          : selectedCategory === 'followUp'
+            ? leadsData.followUp
+            : [];
+
+      return (
+        <>
+          <InfoCard />
+          <CategoryTabs
+            selectedCategory={selectedCategory}
+            onSelectCategory={setSelectedCategory}
+          />
+          <View style={styles.totalLeads}>
+            <Text style={styles.totalLeadsText}>
+              Total Leads: {categoryData.length}
+            </Text>
+          </View>
+          {categoryData.map((lead, index) => (
+            <LeadCard key={index} {...lead} />
+          ))}
+        </>
+      );
+    }
+
+    if (selectedTab === 'contacts') {
+      return (
+        <>
+          <SearchBar placeholder="Search by name, number.." />
+          {contactsData.map((contact, index) => (
+            <ContactItem key={index} {...contact} showCheckbox={true} />
+          ))}
+        </>
+      );
+    }
+
+    return null;
+  };
+
+  return (
+    <SafeAreaView style={styles.container} edges={['top', 'bottom']}>
+      <TabsHeader title="CRM" rightSlot={<FilterDropdown />} />
+
+      <TopTabs
+        selectedTab={selectedTab}
+        onSelectTab={setSelectedTab}
+        counts={tabCounts}
+      />
+
+      <ScrollView style={styles.scrollView}>{renderContent()}</ScrollView>
+
+      {selectedTab === 'contacts' && (
+        <TouchableOpacity
+          style={styles.fab}
+          onPress={() => setShowAddContactModal(true)}
+        >
+          <Text style={styles.fabIcon}>+</Text>
+        </TouchableOpacity>
+      )}
+
+      <AddContactModal
+        visible={showAddContactModal}
+        onClose={() => setShowAddContactModal(false)}
+        onAddManually={() => {
+          // Navigate to add manually screen
+          console.log('Add manually');
+        }}
+        onUploadGmail={() => {
+          // Handle Gmail contact import
+          console.log('Upload Gmail');
+        }}
+        onUploadPhonebook={() => {
+          // Handle phonebook import
+          console.log('Upload Phonebook');
+        }}
+        onUploadCSV={() => {
+          // Handle CSV upload
+          console.log('Upload CSV');
+        }}
+      />
+
+      <ContactViaModal
+        visible={showContactViaModal}
+        onClose={() => setShowContactViaModal(false)}
+        onCall={() => {
+          console.log('Call:', selectedContact?.name);
+          // Handle call
+        }}
+        onWhatsapp={() => {
+          console.log('WhatsApp:', selectedContact?.name);
+          // Handle WhatsApp
+        }}
+        onEmail={() => {
+          console.log('Email:', selectedContact?.name);
+          // Handle email
+        }}
+        onSMS={() => {
+          console.log('SMS:', selectedContact?.name);
+          // Handle SMS
+        }}
+        onAddTask={() => {
+          console.log('Add Task for:', selectedContact?.name);
+          // Navigate to add task screen
+        }}
+        onAddNote={() => {
+          console.log('Add Note for:', selectedContact?.name);
+          // Navigate to add note screen
+        }}
+      />
+    </SafeAreaView>
+  );
+};
+
+export default CRMScreen;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.background,
+  },
+  scrollView: {
+    flex: 1,
+  },
+  totalLeads: {
+    paddingHorizontal: scale(16),
+    paddingVertical: verticalScale(12),
+    backgroundColor: Colors.white,
+  },
+  totalLeadsText: {
+    fontSize: moderateScale(16),
+    fontWeight: '700',
+    color: Colors.black,
+  },
+  fab: {
+    position: 'absolute',
+    right: scale(16),
+    bottom: verticalScale(10),
+    width: scale(46),
+    height: scale(46),
+    borderRadius: moderateScale(28),
+    backgroundColor: '#46bdd3',
+    justifyContent: 'center',
+    alignItems: 'center',
+    shadowColor: Colors.black,
+    shadowOffset: { width: 0, height: verticalScale(4) },
+    shadowOpacity: 0.3,
+    shadowRadius: moderateScale(8),
+    elevation: 8,
+  },
+  fabIcon: {
+    fontSize: moderateScale(32),
+    color: Colors.white,
+    fontWeight: '300',
+  },
+});

package/src/screens/Tabs/DigitalDiary.tsx

@@ -0,0 +1,35 @@
+import { ScrollView, StyleSheet, Text } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { Colors } from '../../constants/Colors';
+import TabsHeader from '../../components/TabsHeader';
+
+const DigitalDiary: React.FC = () => {
+  return (
+    <SafeAreaView style={styles.container} edges={['top', 'bottom']}>
+      <TabsHeader title="Digital Diary" />
+      <ScrollView contentContainerStyle={styles.content}>
+        <Text style={styles.placeholder}>
+          Digital Diary content coming soon.
+        </Text>
+      </ScrollView>
+    </SafeAreaView>
+  );
+};
+
+export default DigitalDiary;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.background,
+  },
+  content: {
+    flexGrow: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 24,
+  },
+  placeholder: {
+    color: Colors.black50,
+  },
+});

package/src/screens/Tabs/HomeScreen.tsx

@@ -0,0 +1,223 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  ScrollView,
+  Image,
+  FlatList,
+  Dimensions,
+} from 'react-native';
+import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
+import { Colors } from '../../constants/Colors';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import TabsHeader from '../../components/TabsHeader';
+
+interface MenuItemProps {
+  title: string;
+  icon: string;
+  onPress?: () => void;
+}
+
+const MenuItem: React.FC<MenuItemProps> = ({ title, icon, onPress }) => {
+  return (
+    <TouchableOpacity style={styles.menuItem} onPress={onPress}>
+      <View style={styles.iconContainer}>
+        <Text style={styles.iconText}>{icon}</Text>
+      </View>
+      <Text style={styles.menuItemText}>{title}</Text>
+    </TouchableOpacity>
+  );
+};
+
+const HomeScreen: React.FC = () => {
+  const images = [
+    'https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?q=80&w=1200&auto=format&fit=crop',
+    'https://images.unsplash.com/photo-1482192596544-9eb780fc7f66?q=80&w=1200&auto=format&fit=crop',
+    'https://images.unsplash.com/photo-1522071820081-009f0129c71c?q=80&w=1200&auto=format&fit=crop',
+    'https://images.unsplash.com/photo-1501785888041-af3ef285b470?q=80&w=1200&auto=format&fit=crop',
+    'https://images.unsplash.com/photo-1460353581641-37baddab0fa2?q=80&w=1200&auto=format&fit=crop',
+    'https://images.unsplash.com/photo-1496302662116-35cc4f36df92?q=80&w=1200&auto=format&fit=crop',
+  ];
+  const screenWidth = Dimensions.get('window').width;
+  const [activeIndex, setActiveIndex] = React.useState(0);
+  const flatListRef = React.useRef<any>(null);
+
+  const handleMomentumScrollEnd = (e: any) => {
+    const offsetX = e.nativeEvent.contentOffset.x;
+    const index = Math.round(offsetX / screenWidth);
+    setActiveIndex(index);
+  };
+  React.useEffect(() => {
+    const id = setInterval(() => {
+      setActiveIndex((prev) => {
+        const next = (prev + 1) % images.length;
+        if (flatListRef.current) {
+          try {
+            flatListRef.current.scrollToIndex({ index: next, animated: true });
+          } catch {
+            // ignore scroll failures
+          }
+        }
+        return next;
+      });
+    }, 2500);
+    return () => clearInterval(id);
+  }, [images.length]);
+
+  return (
+    <SafeAreaView style={styles.safeArea} edges={['top', 'bottom']}>
+      <View style={styles.container}>
+        <TabsHeader title="Home" />
+        <ScrollView style={styles.scrollView}>
+          {/* Edge-to-edge Image Carousel */}
+          <View style={styles.carouselContainer}>
+            <FlatList
+              ref={flatListRef}
+              data={images}
+              keyExtractor={(_, idx) => `${idx}`}
+              renderItem={({ item }) => (
+                <Image
+                  source={{ uri: item }}
+                  style={[styles.carouselImage, { width: screenWidth }]}
+                />
+              )}
+              horizontal
+              pagingEnabled
+              showsHorizontalScrollIndicator={false}
+              onMomentumScrollEnd={handleMomentumScrollEnd}
+              getItemLayout={(_, index) => ({
+                length: screenWidth,
+                offset: screenWidth * index,
+                index,
+              })}
+            />
+            {/* Overlay Indicators at bottom of the image */}
+            <View style={styles.carouselIndicatorsOverlay}>
+              {images.map((_, idx) => (
+                <View
+                  key={idx}
+                  style={[
+                    styles.indicator,
+                    idx === activeIndex ? styles.activeIndicator : null,
+                  ]}
+                />
+              ))}
+            </View>
+          </View>
+
+          {/* Menu Grid */}
+          <View style={styles.menuGrid}>
+            <MenuItem title="Content Library" icon="📚" />
+            <MenuItem title="DigiCard" icon="�" />
+            <MenuItem title="Leads" icon="🎯" />
+
+            <MenuItem title="Email Campaign" icon="📧" />
+            <MenuItem title="Cadence" icon="⏰" />
+            <MenuItem title="Social Setup" icon="�" />
+
+            <MenuItem title="Quiz,Calculator & Referrals" icon="❓" />
+            <MenuItem title="My Profile" icon="�" />
+
+            <MenuItem title="Microsite Setup" icon="⚙️" />
+            <MenuItem title="My Activity" icon="📊" />
+            <MenuItem title="Internal Communication" icon="💬" />
+
+            <MenuItem title="Help Videos" icon="🎥" />
+            <MenuItem title="Import Gmail" icon="�" />
+            <MenuItem title="Proposal" icon="📋" />
+
+            <MenuItem title="Courses" icon="🎓" />
+          </View>
+        </ScrollView>
+      </View>
+    </SafeAreaView>
+  );
+};
+
+export default HomeScreen;
+
+const styles = StyleSheet.create({
+  safeArea: {
+    flex: 1,
+    backgroundColor: Colors.white,
+  },
+  container: {
+    flex: 1,
+    backgroundColor: Colors.white,
+  },
+  scrollView: {
+    flex: 1,
+    backgroundColor: Colors.white,
+  },
+  carouselContainer: {
+    width: '100%',
+    backgroundColor: Colors.white, // subtle backplate for image load
+    position: 'relative',
+  },
+  carouselImage: {
+    height: verticalScale(200),
+    resizeMode: 'cover',
+  },
+  carouselIndicatorsOverlay: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: verticalScale(12),
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  indicator: {
+    width: scale(8),
+    height: scale(8),
+    borderRadius: moderateScale(4),
+    backgroundColor: Colors.divider,
+    marginHorizontal: scale(4),
+  },
+  activeIndicator: {
+    backgroundColor: Colors.white,
+    width: scale(24),
+  },
+  menuGrid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    padding: scale(8),
+    justifyContent: 'space-between',
+  },
+  menuItem: {
+    width: '31%',
+    aspectRatio: 1,
+    backgroundColor: Colors.lightblue,
+    borderRadius: moderateScale(16),
+    padding: scale(12),
+    marginBottom: verticalScale(12),
+    alignItems: 'center',
+    justifyContent: 'center',
+    shadowColor: Colors.black,
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 0.1,
+    shadowRadius: 0.5,
+    borderWidth: 1,
+    borderColor: Colors.border,
+  },
+  iconContainer: {
+    width: scale(50),
+    height: scale(50),
+    borderRadius: moderateScale(25),
+    backgroundColor: Colors.divider,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: verticalScale(8),
+  },
+  iconText: {
+    fontSize: moderateScale(24),
+  },
+  menuItemText: {
+    fontSize: moderateScale(11),
+    textAlign: 'center',
+    color: Colors.black,
+    fontWeight: '500',
+  },
+});

package/src/screens/Tabs/NotificationsScreen.tsx

@@ -0,0 +1,25 @@
+import { StyleSheet, ScrollView } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { Colors } from '../../constants/Colors';
+import TabsHeader from '../../components/TabsHeader';
+
+const NotificationsScreen: React.FC = () => {
+  return (
+    <SafeAreaView style={styles.container} edges={['top', 'bottom']}>
+      <TabsHeader title="Notifications" />
+      <ScrollView style={styles.scrollView} />
+    </SafeAreaView>
+  );
+};
+
+export default NotificationsScreen;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.background,
+  },
+  scrollView: {
+    flex: 1,
+  },
+});