react-native-salespanda 0.5.3 → 0.7.1

package/src/screens/CRM/FunnelChart.tsx

@@ -1,103 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

@@ -1,69 +0,0 @@
-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

@@ -1,318 +0,0 @@
-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

@@ -1,95 +0,0 @@
-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

@@ -1,10 +0,0 @@
-// 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

@@ -1,37 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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,
-  },
-});