react-native-salespanda 0.4.2 → 0.4.3

package/lib/typescript/src/screens/CRM/LogCallScreen.d.ts

@@ -0,0 +1,12 @@
+interface LogCallScreenProps {
+    visible?: boolean;
+    onClose?: () => void;
+    contactName?: string;
+    contactAvatar?: string;
+    contactAvatarColor?: string;
+    onSave?: (outcome: string, leadStage: string, followUpDays: string) => void;
+    showCrossOnLeft?: boolean;
+}
+declare const LogCallScreen: React.FC<LogCallScreenProps>;
+export default LogCallScreen;
+//# sourceMappingURL=LogCallScreen.d.ts.map

package/lib/typescript/src/screens/CRM/LogCallScreen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogCallScreen.d.ts","sourceRoot":"","sources":["../../../../../src/screens/CRM/LogCallScreen.tsx"],"names":[],"mappings":"AAkBA,UAAU,kBAAkB;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5E,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAsBD,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA2I/C,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/typescript/src/screens/CRM/TopTabs.d.ts

@@ -0,0 +1,12 @@
+interface TopTabsProps {
+    selectedTab: 'leads' | 'prospects' | 'contacts';
+    onSelectTab: (tab: 'leads' | 'prospects' | 'contacts') => void;
+    counts: {
+        leads: number;
+        prospects: number;
+        contacts: number;
+    };
+}
+export declare const TopTabs: React.FC<TopTabsProps>;
+export {};
+//# sourceMappingURL=TopTabs.d.ts.map

package/lib/typescript/src/screens/CRM/TopTabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopTabs.d.ts","sourceRoot":"","sources":["../../../../../src/screens/CRM/TopTabs.tsx"],"names":[],"mappings":"AAIA,UAAU,YAAY;IACpB,WAAW,EAAE,OAAO,GAAG,WAAW,GAAG,UAAU,CAAC;IAChD,WAAW,EAAE,CAAC,GAAG,EAAE,OAAO,GAAG,WAAW,GAAG,UAAU,KAAK,IAAI,CAAC;IAC/D,MAAM,EAAE;QACN,KAAK,EAAE,MAAM,CAAC;QACd,SAAS,EAAE,MAAM,CAAC;QAClB,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;CACH;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAsD1C,CAAC"}

package/lib/typescript/src/screens/CRM/index.d.ts

@@ -0,0 +1,10 @@
+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';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/screens/CRM/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/screens/CRM/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC"}

package/lib/typescript/src/screens/ReportsScreen.d.ts

@@ -1,2 +1,3 @@
-export default function NotificationsScreen(): import("react/jsx-runtime").JSX.Element;
+declare const ReportsScreen: React.FC;
+export default ReportsScreen;
 //# sourceMappingURL=ReportsScreen.d.ts.map

package/lib/typescript/src/screens/ReportsScreen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReportsScreen.d.ts","sourceRoot":"","sources":["../../../../src/screens/ReportsScreen.tsx"],"names":[],"mappings":"AAIA,MAAM,CAAC,OAAO,UAAU,mBAAmB,4CAS1C"}
+{"version":3,"file":"ReportsScreen.d.ts","sourceRoot":"","sources":["../../../../src/screens/ReportsScreen.tsx"],"names":[],"mappings":"AAKA,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAS1B,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/typescript/src/screens/Tabs/ActivityAnalytics.d.ts

@@ -0,0 +1,3 @@
+declare const ActivityAnalytics: React.FC;
+export default ActivityAnalytics;
+//# sourceMappingURL=ActivityAnalytics.d.ts.map

package/lib/typescript/src/screens/Tabs/ActivityAnalytics.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActivityAnalytics.d.ts","sourceRoot":"","sources":["../../../../../src/screens/Tabs/ActivityAnalytics.tsx"],"names":[],"mappings":"AAKA,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAO9B,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/lib/typescript/src/screens/Tabs/CRMScreen.d.ts

@@ -0,0 +1,3 @@
+declare const CRMScreen: React.FC;
+export default CRMScreen;
+//# sourceMappingURL=CRMScreen.d.ts.map

package/lib/typescript/src/screens/Tabs/CRMScreen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CRMScreen.d.ts","sourceRoot":"","sources":["../../../../../src/screens/Tabs/CRMScreen.tsx"],"names":[],"mappings":"AA8BA,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAmTtB,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/typescript/src/screens/Tabs/DigitalDiary.d.ts

@@ -0,0 +1,3 @@
+declare const DigitalDiary: React.FC;
+export default DigitalDiary;
+//# sourceMappingURL=DigitalDiary.d.ts.map

package/lib/typescript/src/screens/Tabs/DigitalDiary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DigitalDiary.d.ts","sourceRoot":"","sources":["../../../../../src/screens/Tabs/DigitalDiary.tsx"],"names":[],"mappings":"AAKA,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAWzB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/typescript/src/screens/Tabs/HomeScreen.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare const HomeScreen: React.FC;
+export default HomeScreen;
+//# sourceMappingURL=HomeScreen.d.ts.map

package/lib/typescript/src/screens/Tabs/HomeScreen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HomeScreen.d.ts","sourceRoot":"","sources":["../../../../../src/screens/Tabs/HomeScreen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAiC1B,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAuGvB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/typescript/src/screens/Tabs/NotificationsScreen.d.ts

@@ -0,0 +1,3 @@
+declare const NotificationsScreen: React.FC;
+export default NotificationsScreen;
+//# sourceMappingURL=NotificationsScreen.d.ts.map

package/lib/typescript/src/screens/Tabs/NotificationsScreen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationsScreen.d.ts","sourceRoot":"","sources":["../../../../../src/screens/Tabs/NotificationsScreen.tsx"],"names":[],"mappings":"AAKA,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAOhC,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/lib/typescript/src/screens/contentliberary/contentliberary.d.ts

@@ -0,0 +1,2 @@
+export default function DashboardScreen(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=contentliberary.d.ts.map

package/lib/typescript/src/screens/contentliberary/contentliberary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"contentliberary.d.ts","sourceRoot":"","sources":["../../../../../src/screens/contentliberary/contentliberary.tsx"],"names":[],"mappings":"AAyCA,MAAM,CAAC,OAAO,UAAU,eAAe,4CAoEtC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-salespanda",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "sdk",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -73,9 +73,11 @@
     "@react-navigation/bottom-tabs": "^7.8.2",
     "@react-navigation/drawer": "^7.7.2",
     "@react-navigation/native": "^7.1.19",
+    "@react-navigation/native-stack": "^7.6.4",
     "@release-it/conventional-changelog": "^10.0.1",
     "@types/jest": "^29.5.14",
     "@types/react": "^19.1.0",
+    "@types/react-native-vector-icons": "^6.4.18",
     "babel-plugin-module-resolver": "^5.0.2",
     "commitlint": "^19.8.1",
     "del-cli": "^6.0.0",
@@ -91,6 +93,8 @@
     "react-native-reanimated": "^3.15.4",
     "react-native-safe-area-context": "^5.6.2",
     "react-native-screens": "^4.18.0",
+    "react-native-size-matters": "^0.4.2",
+    "react-native-vector-icons": "^10.2.0",
     "release-it": "^19.0.4",
     "turbo": "^2.5.6",
     "typescript": "^5.9.2"

package/src/SalespandaApp.tsx

@@ -2,8 +2,7 @@ import React from 'react';
 import { NavigationContainer, DefaultTheme } from '@react-navigation/native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { StyleSheet } from 'react-native';
-import DrawerNavigator from './navigation/DrawerNavigator';
-import BottomTabNavigator from './navigation/BottomTabNavigator';
+import StackNavigator from './navigation/StackNavigator';
 import {
   SafeAreaProvider,
   initialWindowMetrics,
@@ -61,55 +60,30 @@ export interface SalespandaAppProps {
 /**
  * Render appropriate navigation based on type
  */
-function AppContent({
-  navigationType,
-}: {
-  navigationType: 'drawer' | 'tabs' | 'both';
-}) {
-  switch (navigationType) {
-    case 'drawer':
-      // Drawer navigation only (no tabs)
-      return <DrawerNavigator />;
-
-    case 'tabs':
-      // Bottom tabs only (no drawer)
-      return <BottomTabNavigator />;
-
-    case 'both':
-    default:
-      // Drawer wrapping bottom tabs (recommended)
-      // The DrawerNavigator will internally render BottomTabNavigator
-      return <DrawerNavigator />;
-  }
-}
+const AppContent: React.FC = () => {
+  // Always wrap with StackNavigator to support modal screens like LogCall
+  return <StackNavigator />;
+};
 
 /**
  * Main Salespanda App Component
  * Can be used as a standalone app or embedded in another React Native app
  */
-export default function SalespandaApp({
+const SalespandaApp: React.FC<SalespandaAppProps> = ({
   navigationRef,
   theme: _customTheme,
   standalone = false,
   onReady,
-  navigationType = 'both',
-  useDrawer, // deprecated, kept for backward compatibility
   wrapWithGestureHandler = true,
-}: SalespandaAppProps = {}) {
+} = {}) => {
   // TODO: Apply custom theme to app (future enhancement)
   // Currently theme is managed through SalespandaConfig
   // _customTheme is reserved for future use
 
-  // Handle backward compatibility with useDrawer prop
-  let finalNavigationType = navigationType;
-  if (useDrawer !== undefined) {
-    finalNavigationType = useDrawer ? 'drawer' : 'tabs';
-  }
-
   // If standalone mode, don't wrap with NavigationContainer
   // (parent app will provide it)
   if (standalone) {
-    return <AppContent navigationType={finalNavigationType} />;
+    return <AppContent />;
   }
 
   // Navigation content with SafeAreaProvider
@@ -132,7 +106,7 @@ export default function SalespandaApp({
         onReady={onReady}
         theme={navTheme}
       >
-        <AppContent navigationType={finalNavigationType} />
+        <AppContent />
       </NavigationContainer>
     </SafeAreaProvider>
   );
@@ -148,7 +122,9 @@ export default function SalespandaApp({
   }
 
   return NavigationContent;
-}
+};
+
+export default SalespandaApp;
 
 const styles = StyleSheet.create({
   container: {

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/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;