react-native-salespanda 0.7.6 → 0.7.7

package/src/screens/CRM/FunnelChart.tsx

@@ -0,0 +1,103 @@
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  Dimensions,
+} from 'react-native';
+import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
+import { Colors } from '../../constants/Colors';
+
+const { width } = Dimensions.get('window');
+
+interface FunnelData {
+  followUp: number;
+  new: number;
+  engaged: number;
+  deal: number;
+  quoteSent: number;
+  won: number;
+  dropped: number;
+}
+
+interface FunnelChartProps {
+  data: FunnelData;
+  totalLeads: number;
+  onListPress?: () => void;
+}
+
+export const FunnelChart: React.FC<FunnelChartProps> = ({
+  data,
+  totalLeads,
+  onListPress,
+}) => {
+  const stages = [
+    { label: 'Follow Up', value: data.followUp, width: 1.0 },
+    { label: 'New', value: data.new, width: 0.85 },
+    { label: 'Engaged', value: data.engaged, width: 0.7 },
+    { label: 'Deal', value: data.deal, width: 0.55 },
+    { label: 'Quote sent', value: data.quoteSent, width: 0.4 },
+    { label: 'Won', value: data.won, width: 0.25 },
+    { label: 'Dropped', value: data.dropped, width: 0.15 },
+  ];
+
+  return (
+    <View style={styles.funnelContainer}>
+      <View style={styles.funnelHeader}>
+        <Text style={styles.totalLeadsText}>Total Leads: {totalLeads}</Text>
+        <TouchableOpacity onPress={onListPress}>
+          <Text style={styles.listIcon}>☰</Text>
+        </TouchableOpacity>
+      </View>
+      {stages.map((stage, index) => (
+        <View
+          key={index}
+          style={[
+            styles.funnelStage,
+            { width: width * 0.8 * stage.width, alignSelf: 'center' },
+          ]}
+        >
+          <Text style={styles.funnelStageText}>
+            {stage.label}: {stage.value}
+          </Text>
+        </View>
+      ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  funnelContainer: {
+    backgroundColor: Colors.white,
+    margin: scale(16),
+    padding: scale(16),
+    borderRadius: moderateScale(12),
+  },
+  funnelHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: verticalScale(20),
+  },
+  totalLeadsText: {
+    fontSize: moderateScale(16),
+    fontWeight: '700',
+    color: Colors.black,
+  },
+  listIcon: {
+    fontSize: moderateScale(20),
+    color: Colors.black,
+  },
+  funnelStage: {
+    backgroundColor: '#A5C9CA',
+    paddingVertical: verticalScale(20),
+    marginBottom: verticalScale(4),
+    borderRadius: moderateScale(4),
+    alignItems: 'center',
+  },
+  funnelStageText: {
+    fontSize: moderateScale(16),
+    fontWeight: '600',
+    color: Colors.black,
+  },
+});

package/src/screens/CRM/InfoCard.tsx

@@ -0,0 +1,51 @@
+import { View, Text, StyleSheet } from 'react-native';
+import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
+import { Colors } from '../../constants/Colors';
+
+interface InfoCardProps {
+  title?: string;
+  description?: string;
+}
+
+export const InfoCard: React.FC<InfoCardProps> = ({
+  title = 'Engaged',
+  description = 'A Lead that is paying attention to your marketing methods and offers is called Engaged. For example,...',
+}) => {
+  return (
+    <View style={styles.infoCard}>
+      <Text style={styles.infoTitle}>{title}</Text>
+      <Text style={styles.infoDescription}>
+        {description} <Text style={styles.readMore}>Read More</Text>
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  infoCard: {
+    backgroundColor: Colors.white,
+    margin: scale(16),
+    padding: scale(16),
+    borderRadius: moderateScale(12),
+    shadowColor: Colors.black,
+    shadowOffset: { width: 0, height: verticalScale(2) },
+    shadowOpacity: 0.1,
+    shadowRadius: moderateScale(4),
+    elevation: 3,
+  },
+  infoTitle: {
+    fontSize: moderateScale(18),
+    fontWeight: '700',
+    color: Colors.black,
+    marginBottom: verticalScale(8),
+  },
+  infoDescription: {
+    fontSize: moderateScale(14),
+    color: Colors.black,
+    lineHeight: verticalScale(20),
+  },
+  readMore: {
+    color: '#FF9800',
+    fontWeight: '600',
+  },
+});

package/src/screens/CRM/LeadCard.tsx

@@ -0,0 +1,69 @@
+import { View, Text, StyleSheet } from 'react-native';
+import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
+import { Colors } from '../../constants/Colors';
+
+interface LeadCardProps {
+  name: string;
+  email: string;
+  description: string;
+  timestamp: string;
+}
+
+export const LeadCard: React.FC<LeadCardProps> = ({
+  name,
+  email,
+  description,
+  timestamp,
+}) => {
+  return (
+    <View style={styles.leadCard}>
+      <Text style={styles.leadName}>{name}</Text>
+      <Text style={styles.leadEmail}>{email}</Text>
+      <View style={styles.leadDivider} />
+      <Text style={styles.leadDescription}>{description}</Text>
+      <Text style={styles.leadTimestamp}>{timestamp}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  leadCard: {
+    backgroundColor: Colors.white,
+    margin: scale(16),
+    marginTop: 0,
+    marginBottom: verticalScale(16),
+    padding: scale(16),
+    borderRadius: moderateScale(12),
+    shadowColor: Colors.black,
+    shadowOffset: { width: 0, height: verticalScale(2) },
+    shadowOpacity: 0.1,
+    shadowRadius: moderateScale(4),
+    elevation: 3,
+  },
+  leadName: {
+    fontSize: moderateScale(18),
+    fontWeight: '700',
+    color: Colors.black,
+    marginBottom: verticalScale(6),
+  },
+  leadEmail: {
+    fontSize: moderateScale(14),
+    color: '#666',
+    marginBottom: verticalScale(12),
+  },
+  leadDivider: {
+    height: 1,
+    backgroundColor: '#E0E0E0',
+    marginVertical: verticalScale(12),
+  },
+  leadDescription: {
+    fontSize: moderateScale(14),
+    color: Colors.black,
+    lineHeight: verticalScale(20),
+    marginBottom: verticalScale(12),
+  },
+  leadTimestamp: {
+    fontSize: moderateScale(13),
+    color: '#666',
+  },
+});

package/src/screens/CRM/LogCallScreen.tsx

@@ -0,0 +1,318 @@
+import { useState } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  ScrollView,
+} 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 { ScreenHeader } from '../../components/ScreenHeader';
+import { useNavigation, useRoute } from '@react-navigation/native';
+import type { RouteProp } from '@react-navigation/native';
+import type { RootStackParamList } from '../../navigation/StackNavigator';
+
+type LogCallScreenRouteProp = RouteProp<RootStackParamList, 'LogCall'>;
+
+interface LogCallScreenProps {
+  visible?: boolean;
+  onClose?: () => void;
+  contactName?: string;
+  contactAvatar?: string;
+  contactAvatarColor?: string;
+  onSave?: (outcome: string, leadStage: string, followUpDays: string) => void;
+  showCrossOnLeft?: boolean;
+}
+
+const callOutcomes = [
+  'Interested',
+  'Drop',
+  'Hold',
+  'Call back later',
+  'Busy',
+  'Other',
+];
+
+const leadStages = [
+  'All',
+  'Follow Up',
+  'New',
+  'Engaged',
+  'Deal',
+  'Quote sent',
+  'Won',
+  'Dropped',
+];
+
+const LogCallScreen: React.FC<LogCallScreenProps> = ({
+  visible,
+  onClose,
+  contactName: propContactName,
+  contactAvatar: propContactAvatar,
+  contactAvatarColor: propContactAvatarColor,
+  onSave,
+  showCrossOnLeft = false,
+} = {}) => {
+  const navigation = useNavigation();
+  const route = useRoute<LogCallScreenRouteProp>();
+
+  const contact = route.params?.contact;
+  const contactName = propContactName || contact?.name || 'Contact';
+  const contactAvatar = propContactAvatar || contact?.avatarInitial || 'H';
+  const contactAvatarColor =
+    propContactAvatarColor || contact?.avatarColor || '#C84B9E';
+
+  const [selectedOutcome, setSelectedOutcome] = useState('Interested');
+  const [selectedStage, setSelectedStage] = useState('All');
+  const [selectedFollowUp] = useState('1 day');
+
+  const handleSave = () => {
+    onSave?.(selectedOutcome, selectedStage, selectedFollowUp);
+    if (onClose) {
+      onClose();
+    } else {
+      navigation.goBack();
+    }
+  };
+
+  const handleBack = () => {
+    if (onClose) {
+      onClose();
+    } else {
+      navigation.goBack();
+    }
+  };
+
+  if (visible === false) return null;
+
+  return (
+    <SafeAreaView style={styles.container} edges={['top']}>
+      {/* Header */}
+      <ScreenHeader
+        title="Log Call"
+        onBackPress={handleBack}
+        showCrossOnLeft={showCrossOnLeft}
+      />
+
+      <ScrollView style={styles.content}>
+        {/* Contact Info */}
+        <View style={styles.contactSection}>
+          <View
+            style={[styles.avatar, { backgroundColor: contactAvatarColor }]}
+          >
+            <Text style={styles.avatarText}>{contactAvatar}</Text>
+          </View>
+          <Text style={styles.contactName}>{contactName}</Text>
+        </View>
+
+        {/* Follow up task */}
+        <View style={styles.followUpSection}>
+          <View style={styles.followUpRow}>
+            <View style={styles.iconWrapper}>
+              <Text style={styles.calendarIcon}>📅</Text>
+            </View>
+            <Text style={styles.followUpText}>Follow up task</Text>
+            <TouchableOpacity style={styles.dropdown}>
+              <Text style={styles.dropdownText}>{selectedFollowUp}</Text>
+              <Text style={styles.dropdownArrow}>▼</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+
+        {/* Call outcome */}
+        <View style={styles.section}>
+          <Text style={styles.sectionTitle}>Call outcome</Text>
+          <View style={styles.optionsGrid}>
+            {callOutcomes.map((outcome) => (
+              <TouchableOpacity
+                key={outcome}
+                style={[
+                  styles.optionButton,
+                  selectedOutcome === outcome && styles.optionButtonSelected,
+                ]}
+                onPress={() => setSelectedOutcome(outcome)}
+              >
+                <Text
+                  style={[
+                    styles.optionText,
+                    selectedOutcome === outcome && styles.optionTextSelected,
+                  ]}
+                >
+                  {outcome}
+                </Text>
+              </TouchableOpacity>
+            ))}
+          </View>
+        </View>
+
+        {/* Lead stage */}
+        <View style={styles.section}>
+          <Text style={styles.sectionTitle}>Lead stage</Text>
+          <Text style={styles.sectionSubtitle}>
+            Stage is same as lead stage
+          </Text>
+          <View style={styles.optionsGrid}>
+            {leadStages.map((stage) => (
+              <TouchableOpacity
+                key={stage}
+                style={[
+                  styles.optionButton,
+                  selectedStage === stage && styles.optionButtonSelected,
+                ]}
+                onPress={() => setSelectedStage(stage)}
+              >
+                <Text
+                  style={[
+                    styles.optionText,
+                    selectedStage === stage && styles.optionTextSelected,
+                  ]}
+                >
+                  {stage}
+                </Text>
+              </TouchableOpacity>
+            ))}
+          </View>
+        </View>
+      </ScrollView>
+
+      {/* Save Button */}
+      <View style={styles.footer}>
+        <TouchableOpacity style={styles.saveButton} onPress={handleSave}>
+          <Text style={styles.saveButtonText}>Save</Text>
+        </TouchableOpacity>
+      </View>
+    </SafeAreaView>
+  );
+};
+
+export default LogCallScreen;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.white,
+  },
+  content: {
+    flex: 1,
+  },
+  contactSection: {
+    alignItems: 'center',
+    paddingVertical: verticalScale(24),
+  },
+  avatar: {
+    width: scale(80),
+    height: scale(80),
+    borderRadius: moderateScale(40),
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: verticalScale(12),
+  },
+  avatarText: {
+    fontSize: moderateScale(36),
+    fontWeight: '700',
+    color: Colors.white,
+  },
+  contactName: {
+    fontSize: moderateScale(24),
+    fontWeight: '700',
+    color: Colors.black,
+  },
+  followUpSection: {
+    paddingHorizontal: scale(16),
+    marginBottom: verticalScale(24),
+  },
+  followUpRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#F5F5F5',
+    borderRadius: moderateScale(12),
+    padding: scale(16),
+    borderWidth: 1,
+    borderColor: '#E0E0E0',
+  },
+  iconWrapper: {
+    marginRight: scale(12),
+  },
+  calendarIcon: {
+    fontSize: moderateScale(24),
+  },
+  followUpText: {
+    flex: 1,
+    fontSize: moderateScale(16),
+    fontWeight: '600',
+    color: Colors.black,
+  },
+  dropdown: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: scale(12),
+    paddingVertical: verticalScale(6),
+  },
+  dropdownText: {
+    fontSize: moderateScale(16),
+    color: Colors.black,
+    marginRight: scale(4),
+  },
+  dropdownArrow: {
+    fontSize: moderateScale(12),
+    color: Colors.black,
+  },
+  section: {
+    paddingHorizontal: scale(16),
+    marginBottom: verticalScale(32),
+  },
+  sectionTitle: {
+    fontSize: moderateScale(20),
+    fontWeight: '700',
+    color: Colors.black,
+    marginBottom: verticalScale(8),
+  },
+  sectionSubtitle: {
+    fontSize: moderateScale(14),
+    color: '#666',
+    marginBottom: verticalScale(16),
+  },
+  optionsGrid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: scale(12),
+  },
+  optionButton: {
+    paddingHorizontal: scale(20),
+    paddingVertical: verticalScale(12),
+    borderRadius: moderateScale(24),
+    borderWidth: 1,
+    borderColor: '#E0E0E0',
+    backgroundColor: Colors.white,
+  },
+  optionButtonSelected: {
+    borderColor: '#FF9800',
+    borderWidth: 2,
+  },
+  optionText: {
+    fontSize: moderateScale(15),
+    fontWeight: '500',
+    color: Colors.black,
+  },
+  optionTextSelected: {
+    color: '#FF9800',
+    fontWeight: '600',
+  },
+  footer: {
+    padding: scale(16),
+    paddingBottom: verticalScale(32),
+  },
+  saveButton: {
+    backgroundColor: '#46bdd3',
+    paddingVertical: verticalScale(16),
+    borderRadius: moderateScale(12),
+    alignItems: 'center',
+  },
+  saveButtonText: {
+    fontSize: moderateScale(18),
+    fontWeight: '700',
+    color: Colors.white,
+  },
+});

package/src/screens/CRM/TopTabs.tsx

@@ -0,0 +1,95 @@
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
+import { Colors } from '../../constants/Colors';
+
+interface TopTabsProps {
+  selectedTab: 'leads' | 'prospects' | 'contacts';
+  onSelectTab: (tab: 'leads' | 'prospects' | 'contacts') => void;
+  counts: {
+    leads: number;
+    prospects: number;
+    contacts: number;
+  };
+}
+
+export const TopTabs: React.FC<TopTabsProps> = ({
+  selectedTab,
+  onSelectTab,
+  counts,
+}) => {
+  return (
+    <View style={styles.topTabsContainer}>
+      <TouchableOpacity
+        style={[styles.topTab, selectedTab === 'leads' && styles.topTabActive]}
+        onPress={() => onSelectTab('leads')}
+      >
+        <Text
+          style={[
+            styles.topTabText,
+            selectedTab === 'leads' && styles.topTabTextActive,
+          ]}
+        >
+          Leads({counts.leads})
+        </Text>
+      </TouchableOpacity>
+      <TouchableOpacity
+        style={[
+          styles.topTab,
+          selectedTab === 'prospects' && styles.topTabActive,
+        ]}
+        onPress={() => onSelectTab('prospects')}
+      >
+        <Text
+          style={[
+            styles.topTabText,
+            selectedTab === 'prospects' && styles.topTabTextActive,
+          ]}
+        >
+          Prospects({counts.prospects})
+        </Text>
+      </TouchableOpacity>
+      <TouchableOpacity
+        style={[
+          styles.topTab,
+          selectedTab === 'contacts' && styles.topTabActive,
+        ]}
+        onPress={() => onSelectTab('contacts')}
+      >
+        <Text
+          style={[
+            styles.topTabText,
+            selectedTab === 'contacts' && styles.topTabTextActive,
+          ]}
+        >
+          Contacts({counts.contacts})
+        </Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  topTabsContainer: {
+    flexDirection: 'row',
+    backgroundColor: Colors.white,
+    paddingHorizontal: scale(8),
+  },
+  topTab: {
+    flex: 1,
+    paddingVertical: verticalScale(16),
+    alignItems: 'center',
+    borderBottomWidth: 3,
+    borderBottomColor: 'transparent',
+  },
+  topTabActive: {
+    borderBottomColor: '#FF9800',
+  },
+  topTabText: {
+    fontSize: moderateScale(16),
+    fontWeight: '600',
+    color: Colors.black,
+  },
+  topTabTextActive: {
+    color: '#FF9800',
+  },
+});

package/src/screens/CRM/index.ts

@@ -0,0 +1,10 @@
+// CRM Screen Components
+export { FilterDropdown } from './FilterDropdown';
+export { TopTabs } from './TopTabs';
+export { InfoCard } from './InfoCard';
+export { CategoryTabs } from './CategoryTabs';
+export { ContactItem } from './ContactItem';
+export { LeadCard } from './LeadCard';
+export { FunnelChart } from './FunnelChart';
+export { AddContactModal } from './AddContactModal';
+export { default as LogCallScreen } from './LogCallScreen';

package/src/screens/ReportsScreen.tsx

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

package/src/screens/Tabs/ActivityAnalytics.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 ActivityAnalytics: React.FC = () => {
+  return (
+    <SafeAreaView style={styles.container} edges={['top', 'bottom']}>
+      <TabsHeader title="Analytics" />
+      <ScrollView style={styles.scrollView} />
+    </SafeAreaView>
+  );
+};
+
+export default ActivityAnalytics;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.background,
+  },
+  scrollView: {
+    flex: 1,
+  },
+});