react-native-salespanda 0.4.1 → 0.4.3

package/src/components/BottomSheet.tsx

@@ -0,0 +1,146 @@
+import {
+  View,
+  Text,
+  StyleSheet,
+  Modal,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+} from 'react-native';
+import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
+import { Colors } from '../constants/Colors';
+
+interface BottomSheetProps {
+  visible: boolean;
+  onClose: () => void;
+  title: string;
+  children: React.ReactNode;
+}
+
+export const BottomSheet: React.FC<BottomSheetProps> = ({
+  visible,
+  onClose,
+  title,
+  children,
+}) => {
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="slide"
+      onRequestClose={onClose}
+    >
+      <TouchableWithoutFeedback onPress={onClose}>
+        <View style={styles.overlay}>
+          <TouchableWithoutFeedback>
+            <View style={styles.bottomSheet}>
+              <View style={styles.header}>
+                <Text style={styles.title}>{title}</Text>
+                <TouchableOpacity onPress={onClose} style={styles.closeButton}>
+                  <Text style={styles.closeIcon}>✕</Text>
+                </TouchableOpacity>
+              </View>
+              <View style={styles.content}>{children}</View>
+            </View>
+          </TouchableWithoutFeedback>
+        </View>
+      </TouchableWithoutFeedback>
+    </Modal>
+  );
+};
+
+interface BottomSheetOptionProps {
+  icon: string;
+  label: string;
+  onPress: () => void;
+  iconColor?: string;
+}
+
+export const BottomSheetOption: React.FC<BottomSheetOptionProps> = ({
+  icon,
+  label,
+  onPress,
+  iconColor,
+}) => {
+  return (
+    <TouchableOpacity style={styles.option} onPress={onPress}>
+      <View
+        style={[
+          styles.iconContainer,
+          iconColor && { backgroundColor: iconColor },
+        ]}
+      >
+        <Text style={styles.optionIcon}>{icon}</Text>
+      </View>
+      <Text style={styles.optionLabel}>{label}</Text>
+      <Text style={styles.arrow}>›</Text>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'flex-end',
+  },
+  bottomSheet: {
+    backgroundColor: Colors.white,
+    borderTopLeftRadius: moderateScale(20),
+    borderTopRightRadius: moderateScale(20),
+    paddingBottom: verticalScale(30),
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: scale(20),
+    borderBottomWidth: 1,
+    borderBottomColor: '#E0E0E0',
+  },
+  title: {
+    fontSize: moderateScale(20),
+    fontWeight: '700',
+    color: Colors.black,
+  },
+  closeButton: {
+    padding: scale(4),
+  },
+  closeIcon: {
+    fontSize: moderateScale(24),
+    color: Colors.black,
+  },
+  content: {
+    padding: scale(16),
+  },
+  option: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: scale(16),
+    backgroundColor: Colors.white,
+    borderWidth: 1,
+    borderColor: '#E0E0E0',
+    borderRadius: moderateScale(12),
+    marginBottom: verticalScale(12),
+  },
+  iconContainer: {
+    width: scale(30),
+    height: scale(30),
+    borderRadius: moderateScale(20),
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: scale(12),
+  },
+  optionIcon: {
+    fontSize: moderateScale(16),
+  },
+  optionLabel: {
+    flex: 1,
+    fontSize: moderateScale(12),
+    fontWeight: '600',
+    color: Colors.black,
+  },
+  arrow: {
+    fontSize: moderateScale(24),
+    color: '#999',
+  },
+});

package/src/components/ContactViaModal.tsx

@@ -0,0 +1,80 @@
+import { BottomSheet, BottomSheetOption } from './BottomSheet';
+
+interface ContactViaModalProps {
+  visible: boolean;
+  onClose: () => void;
+  onCall?: () => void;
+  onWhatsapp?: () => void;
+  onEmail?: () => void;
+  onSMS?: () => void;
+  onAddTask?: () => void;
+  onAddNote?: () => void;
+}
+
+export const ContactViaModal: React.FC<ContactViaModalProps> = ({
+  visible,
+  onClose,
+  onCall,
+  onWhatsapp,
+  onEmail,
+  onSMS,
+  onAddTask,
+  onAddNote,
+}) => {
+  return (
+    <BottomSheet visible={visible} onClose={onClose} title="Contact Via">
+      <BottomSheetOption
+        icon="📞"
+        label="Call"
+        iconColor="#FF6B6B"
+        onPress={() => {
+          onClose();
+          onCall?.();
+        }}
+      />
+      <BottomSheetOption
+        icon="💬"
+        label="Whatsapp"
+        iconColor="#25D366"
+        onPress={() => {
+          onClose();
+          onWhatsapp?.();
+        }}
+      />
+      <BottomSheetOption
+        icon="✉️"
+        label="E-mail"
+        iconColor="#9B59B6"
+        onPress={() => {
+          onClose();
+          onEmail?.();
+        }}
+      />
+      <BottomSheetOption
+        icon="💬"
+        label="SMS"
+        iconColor="#3498DB"
+        onPress={() => {
+          onClose();
+          onSMS?.();
+        }}
+      />
+      <BottomSheetOption
+        icon="📋"
+        label="Add Task"
+        onPress={() => {
+          onClose();
+          onAddTask?.();
+        }}
+      />
+      <BottomSheetOption
+        icon="📝"
+        label="Add Note"
+        onPress={() => {
+          onClose();
+          onAddNote?.();
+        }}
+      />
+    </BottomSheet>
+  );
+};

package/src/components/ScreenHeader.tsx

@@ -0,0 +1,57 @@
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
+import { Colors } from '../constants/Colors';
+
+interface ScreenHeaderProps {
+  title?: string;
+  onBackPress: () => void;
+  showCrossOnLeft?: boolean; // If true, shows cross icon instead of back arrow on left
+}
+
+export const ScreenHeader: React.FC<ScreenHeaderProps> = ({
+  title,
+  onBackPress,
+  showCrossOnLeft = false,
+}) => {
+  return (
+    <View style={styles.header}>
+      <TouchableOpacity onPress={onBackPress} style={styles.iconButton}>
+        <Text style={styles.icon}>{showCrossOnLeft ? '✕' : '←'}</Text>
+      </TouchableOpacity>
+      {title && <Text style={styles.title}>{title}</Text>}
+      <TouchableOpacity onPress={onBackPress} style={styles.iconButton}>
+        <Text style={styles.icon}>✕</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: scale(16),
+    paddingVertical: verticalScale(12),
+    backgroundColor: Colors.white,
+    borderBottomWidth: 1,
+    borderBottomColor: '#e0e0e0',
+  },
+  iconButton: {
+    width: scale(40),
+    height: scale(40),
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  icon: {
+    fontSize: moderateScale(24),
+    color: Colors.black,
+  },
+  title: {
+    fontSize: moderateScale(18),
+    fontWeight: '600',
+    color: Colors.black,
+    flex: 1,
+    textAlign: 'center',
+  },
+});

package/src/components/SearchBar.tsx

@@ -0,0 +1,59 @@
+import { View, Text, StyleSheet, TextInput } from 'react-native';
+import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
+import { Colors } from '../constants/Colors';
+
+interface SearchBarProps {
+  placeholder?: string;
+  onChangeText?: (text: string) => void;
+  value?: string;
+}
+
+export const SearchBar: React.FC<SearchBarProps> = ({
+  placeholder = 'Search by name',
+  onChangeText,
+  value,
+}) => {
+  return (
+    <View style={styles.searchContainer}>
+      <View style={styles.searchBar}>
+        <Text style={styles.searchIcon}>🔍</Text>
+        <TextInput
+          style={styles.searchInput}
+          placeholder={placeholder}
+          placeholderTextColor="#ccc"
+          onChangeText={onChangeText}
+          value={value}
+        />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  searchContainer: {
+    backgroundColor: Colors.white,
+    paddingHorizontal: scale(16),
+    paddingVertical: verticalScale(12),
+  },
+  searchBar: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: Colors.white,
+    borderWidth: 1,
+    borderColor: '#E0E0E0',
+    borderRadius: moderateScale(8),
+    paddingHorizontal: scale(12),
+    paddingVertical: verticalScale(8),
+  },
+  searchIcon: {
+    fontSize: moderateScale(18),
+    marginRight: scale(8),
+    color: '#999',
+  },
+  searchInput: {
+    flex: 1,
+    fontSize: moderateScale(16),
+    color: Colors.black,
+    padding: 0,
+  },
+});

package/src/components/TabsHeader.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import { scale, moderateScale } from 'react-native-size-matters';
+import { Colors } from '../constants/Colors';
+
+interface TabsHeaderProps {
+  title: string;
+  rightSlot?: React.ReactNode;
+}
+
+const TabsHeader: React.FC<TabsHeaderProps> = ({ title, rightSlot }) => {
+  const navigation = useNavigation<any>();
+
+  return (
+    <View style={styles.container}>
+      <TouchableOpacity
+        style={styles.toggleButton}
+        onPress={() => navigation.toggleDrawer?.()}
+        hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+        accessibilityRole="button"
+        accessibilityLabel="Open navigation drawer"
+      >
+        <Text style={styles.toggleIcon}>☰</Text>
+      </TouchableOpacity>
+      <Text style={styles.title}>{title}</Text>
+      <View style={styles.rightSlot}>{rightSlot}</View>
+    </View>
+  );
+};
+
+export default TabsHeader;
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: moderateScale(12),
+    paddingVertical: moderateScale(4),
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: Colors.divider,
+    backgroundColor: Colors.white,
+  },
+  toggleButton: {
+    width: scale(36),
+    height: scale(36),
+    borderRadius: moderateScale(18),
+    borderWidth: 1,
+    borderColor: Colors.border,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: Colors.lightblue,
+  },
+  toggleIcon: {
+    fontSize: moderateScale(20),
+    color: Colors.black,
+  },
+  title: {
+    flex: 1,
+    textAlign: 'left',
+    fontSize: moderateScale(16),
+    fontWeight: '600',
+    color: Colors.black,
+    marginLeft: 12,
+  },
+  rightSlot: {
+    minWidth: scale(36),
+    minHeight: scale(36),
+    alignItems: 'flex-end',
+    justifyContent: 'center',
+  },
+});

package/src/components/index.ts

@@ -0,0 +1,5 @@
+// Reusable Components
+export { SearchBar } from './SearchBar';
+export { BottomSheet, BottomSheetOption } from './BottomSheet';
+export { ContactViaModal } from './ContactViaModal';
+export { ScreenHeader } from './ScreenHeader';

package/src/config/FlavorConfig.ts

@@ -20,7 +20,7 @@ interface FlavorConfig {
 export const getFlavorConfig = (): FlavorConfig => {
   if (Platform.OS === 'android') {
     const { BuildConfig } = NativeModules;
-    
+
     if (BuildConfig) {
       return {
         appName: BuildConfig.APP_NAME || 'Salespanda',
@@ -30,8 +30,10 @@ export const getFlavorConfig = (): FlavorConfig => {
         clevertapToken: BuildConfig.CLEVERTAP_TOKEN || '',
         twScheme: BuildConfig.TWSCHEME || '',
         fileProviderAuthority: BuildConfig.FILE_PROVIDER_AUTHORITY || '',
-        freshchatFileProviderAuthority: BuildConfig.FRESHCHAT_FILE_PROVIDER_AUTHORITY || '',
-        defaultNotificationChannelId: BuildConfig.DEFAULT_NOTIFICATION_CHANNEL_ID || '',
+        freshchatFileProviderAuthority:
+          BuildConfig.FRESHCHAT_FILE_PROVIDER_AUTHORITY || '',
+        defaultNotificationChannelId:
+          BuildConfig.DEFAULT_NOTIFICATION_CHANNEL_ID || '',
       };
     }
   }

package/src/constants/Colors.ts

@@ -4,13 +4,14 @@ export const Colors = {
   white: '#ffffff',
   black: '#322F2F',
   background: '#ffffff',
-  border: '#e0e0e0',
+  border: '#ffffff',
   divider: '#e0e0e0',
   white50: 'rgba(255, 255, 255, 0.5)',
   black50: 'rgba(0, 0, 0, 0.2)',
   black30: 'rgba(0, 0, 0, 0.3)',
   black20: 'rgba(0, 0, 0, 0.2)',
   black10: 'rgba(0, 0, 0, 0.1)',
+  lightblue: '#E1F5FE',
 } as const;
 
 export type ColorKey = keyof typeof Colors;

package/src/index.tsx

@@ -11,6 +11,8 @@
  *    import { HomeScreen, ProfileScreen } from 'react-native-salespanda';
  */
 
+// Import gesture handler at the very top
+
 // ============================================
 // MAIN APP EXPORT (Default)
 // ============================================
@@ -28,6 +30,12 @@ export {
 } from './config/SalespandaConfig';
 export type { SalespandaConfig } from './config/SalespandaConfig';
 
+// ============================================
+// FLAVOR CONFIGURATION
+// ============================================
+export { getFlavorConfig } from './config/FlavorConfig';
+export { default as FlavorConfig } from './config/FlavorConfig';
+
 // ============================================
 // NAVIGATION COMPONENTS
 // ============================================
@@ -38,8 +46,8 @@ export { default as BottomTabNavigator } from './navigation/BottomTabNavigator';
 // ============================================
 // SCREEN COMPONENTS (Library Mode)
 // ============================================
-export { default as HomeScreen } from './screens/HomeScreen';
-export { default as ProfileScreen } from './screens/ProfileScreen';
-export { default as NotificationsScreen } from './screens/NotificationsScreen';
+export { default as HomeScreen } from './screens/Tabs/HomeScreen';
+export { default as ProfileScreen } from './screens/Tabs/ActivityAnalytics';
+export { default as NotificationsScreen } from './screens/Tabs/NotificationsScreen';
 export { default as ReportsScreen } from './screens/ReportsScreen';
-export { default as PremiumScreen } from './screens/CRMScreen';
+export { default as PremiumScreen } from './screens/Tabs/CRMScreen';

package/src/navigation/AppNavigator.tsx

@@ -1,17 +1,24 @@
 import { NavigationContainer } from '@react-navigation/native';
-import BottomTabNavigator from './BottomTabNavigator';
+import { StyleSheet } from 'react-native';
+import StackNavigator from './StackNavigator';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { Colors } from '../constants/Colors';
 
-export default function AppNavigator() {
+const AppNavigator: React.FC = () => {
   return (
     <NavigationContainer>
-      <SafeAreaView
-        style={{ flex: 1, backgroundColor: Colors.background }}
-        edges={['bottom', 'top']}
-      >
-        <BottomTabNavigator />
+      <SafeAreaView style={styles.container} edges={['bottom', 'top']}>
+        <StackNavigator />
       </SafeAreaView>
     </NavigationContainer>
   );
-}
+};
+
+export default AppNavigator;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.background,
+  },
+});