react-native-salespanda 0.4.2 → 0.4.3

package/src/screens/CRM/ContactItem.tsx

@@ -0,0 +1,168 @@
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
+import { Colors } from '../../constants/Colors';
+
+interface ContactItemProps {
+  name: string;
+  phone?: string;
+  email?: string;
+  description?: string;
+  avatarColor: string;
+  avatarInitial: string;
+  selected?: boolean;
+  onPress?: () => void;
+  onSelectToggle?: () => void;
+  onReminderPress?: () => void;
+  onCallPress?: () => void;
+  onMenuPress?: () => void;
+  showCheckbox?: boolean;
+  showActionButtons?: boolean;
+}
+
+export const ContactItem: React.FC<ContactItemProps> = ({
+  name,
+  phone,
+  email,
+  description,
+  avatarColor,
+  avatarInitial,
+  selected = false,
+  onPress,
+  onSelectToggle,
+  onReminderPress,
+  onCallPress,
+  onMenuPress,
+  showCheckbox = false,
+  showActionButtons = false,
+}) => {
+  return (
+    <TouchableOpacity
+      style={styles.contactItem}
+      onPress={onPress}
+      activeOpacity={0.7}
+    >
+      <View style={[styles.avatar, { backgroundColor: avatarColor }]}>
+        <Text style={styles.avatarText}>{avatarInitial}</Text>
+      </View>
+      <View style={styles.contactInfo}>
+        <Text style={styles.contactName}>{name}</Text>
+        {phone && <Text style={styles.contactPhone}>{phone}</Text>}
+        {email && <Text style={styles.contactEmail}>{email}</Text>}
+        {description && (
+          <Text
+            style={styles.contactDescription}
+            numberOfLines={1}
+            ellipsizeMode="tail"
+          >
+            {description}
+          </Text>
+        )}
+      </View>
+      {showActionButtons && (
+        <View style={styles.actionButtons}>
+          <TouchableOpacity
+            style={styles.actionButton}
+            onPress={onReminderPress}
+          >
+            <Text style={styles.actionIcon}>⏰</Text>
+          </TouchableOpacity>
+          <TouchableOpacity style={styles.actionButton} onPress={onCallPress}>
+            <Text style={styles.actionIcon}>📞</Text>
+          </TouchableOpacity>
+          <TouchableOpacity style={styles.actionButton} onPress={onMenuPress}>
+            <Text style={styles.actionIcon}>⋮</Text>
+          </TouchableOpacity>
+        </View>
+      )}
+      {showCheckbox && (
+        <TouchableOpacity style={styles.checkbox} onPress={onSelectToggle}>
+          <View
+            style={[styles.checkboxInner, selected && styles.checkboxSelected]}
+          >
+            {selected && <Text style={styles.checkmark}>✓</Text>}
+          </View>
+        </TouchableOpacity>
+      )}
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  contactItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: Colors.white,
+    padding: scale(16),
+    borderBottomWidth: 1,
+    borderBottomColor: '#E0E0E0',
+  },
+  avatar: {
+    width: scale(46),
+    height: scale(46),
+    borderRadius: moderateScale(23),
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: scale(12),
+  },
+  avatarText: {
+    fontSize: moderateScale(24),
+    fontWeight: '700',
+    color: Colors.white,
+  },
+  contactInfo: {
+    flex: 1,
+  },
+  contactName: {
+    fontSize: moderateScale(16),
+    fontWeight: '700',
+    color: Colors.black,
+    marginBottom: verticalScale(4),
+  },
+  contactPhone: {
+    fontSize: moderateScale(12),
+    color: Colors.black,
+    marginBottom: verticalScale(2),
+  },
+  contactEmail: {
+    fontSize: moderateScale(12),
+    color: '#666',
+    marginBottom: verticalScale(4),
+  },
+  contactDescription: {
+    fontSize: moderateScale(12),
+    color: Colors.black,
+    lineHeight: verticalScale(18),
+  },
+  actionButtons: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  actionButton: {
+    padding: scale(8),
+    marginLeft: scale(8),
+  },
+  actionIcon: {
+    fontSize: moderateScale(20),
+    color: Colors.black,
+  },
+  checkbox: {
+    padding: scale(8),
+  },
+  checkboxInner: {
+    width: scale(28),
+    height: scale(28),
+    borderWidth: 2,
+    borderColor: '#FF9800',
+    borderRadius: moderateScale(4),
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  checkboxSelected: {
+    backgroundColor: '#FF9800',
+  },
+  checkmark: {
+    color: Colors.white,
+    fontSize: moderateScale(16),
+    fontWeight: '700',
+  },
+});

package/src/screens/CRM/FilterDropdown.tsx

@@ -0,0 +1,34 @@
+import { Text, StyleSheet, TouchableOpacity } from 'react-native';
+import { scale, moderateScale } from 'react-native-size-matters';
+
+interface FilterDropdownProps {
+  onPress?: () => void;
+}
+
+export const FilterDropdown: React.FC<FilterDropdownProps> = ({ onPress }) => {
+  return (
+    <TouchableOpacity style={styles.filterButton} onPress={onPress}>
+      <Text style={styles.filterText}>Filter By</Text>
+      <Text style={styles.filterArrow}>▼</Text>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  filterButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    paddingHorizontal: scale(16),
+  },
+  filterText: {
+    fontSize: moderateScale(16),
+    fontWeight: '600',
+    color: '#FF9800',
+    marginRight: scale(4),
+  },
+  filterArrow: {
+    fontSize: moderateScale(12),
+    color: '#FF9800',
+  },
+});

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