react-native-salespanda 0.4.2 → 0.4.3

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

@@ -1,8 +1,9 @@
 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';
 
-export default function NotificationsScreen() {
+const ReportsScreen: React.FC = () => {
   return (
     <SafeAreaView style={styles.container} edges={['bottom']}>
       <View style={styles.header}>
@@ -11,7 +12,9 @@ export default function NotificationsScreen() {
       <ScrollView style={styles.scrollView} />
     </SafeAreaView>
   );
-}
+};
+
+export default ReportsScreen;
 
 const styles = StyleSheet.create({
   container: {
@@ -20,10 +23,10 @@ const styles = StyleSheet.create({
   },
   header: {
     backgroundColor: Colors.white,
-    padding: 16,
+    padding: scale(16),
   },
   headerTitle: {
-    fontSize: 20,
+    fontSize: moderateScale(20),
     fontWeight: '600',
     color: Colors.black,
     textAlign: 'center',

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,
+  },
+});