363 lines
11 KiB
TypeScript
363 lines
11 KiB
TypeScript
import React from 'react';
|
|
import { TouchableOpacity, View, Text } from 'react-native';
|
|
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
|
|
import { createNativeStackNavigator } from '@react-navigation/native-stack';
|
|
import { NavigatorScreenParams } from '@react-navigation/native';
|
|
import { DrawerNavigationProp } from '@react-navigation/drawer';
|
|
import Icon from 'react-native-vector-icons/Ionicons';
|
|
import { route, RouteParams } from '@utils';
|
|
import {
|
|
DashboardScreen,
|
|
AddLeadScreen,
|
|
ProfileScreen,
|
|
NotificationScreen,
|
|
EditProfileScreen,
|
|
} from '@features';
|
|
import { LeadsStack, LeadsStackParamList } from './leadsStack';
|
|
import { CustomersStack, CustomersStackParamList } from './customersStack';
|
|
import { useTheme } from '@theme';
|
|
import { useAppSelector, RootState } from '@store';
|
|
import { getStyles } from './tabStack.styles';
|
|
|
|
export type DashboardStackParamList = {
|
|
dashboardList: undefined;
|
|
notifications: undefined;
|
|
};
|
|
|
|
export type AddLeadStackParamList = {
|
|
addLeadForm: undefined;
|
|
};
|
|
|
|
export type ProfileStackParamList = {
|
|
profileForm: undefined;
|
|
editProfile: undefined;
|
|
};
|
|
|
|
export type TabStackParamList = {
|
|
dashboard: NavigatorScreenParams<DashboardStackParamList> | undefined;
|
|
leads: NavigatorScreenParams<LeadsStackParamList> | undefined;
|
|
addLead: NavigatorScreenParams<AddLeadStackParamList> | undefined;
|
|
customers: NavigatorScreenParams<CustomersStackParamList> | undefined;
|
|
profile: NavigatorScreenParams<ProfileStackParamList> | undefined;
|
|
};
|
|
|
|
const Tab = createBottomTabNavigator<TabStackParamList>();
|
|
|
|
const DashboardStackNav = createNativeStackNavigator<DashboardStackParamList>();
|
|
const DashboardStack = () => {
|
|
const { theme: colors } = useTheme();
|
|
const styles = getStyles(colors);
|
|
const userData = useAppSelector((state: RootState) => state.auth.user_data);
|
|
const { items: notificationItems, hasFetched } = useAppSelector((state: RootState) => state.notifications);
|
|
|
|
// Calculate unread count from actual items if they've been fetched, otherwise fallback to userData's initial count
|
|
const unreadCount = hasFetched
|
|
? notificationItems.filter(n => String(n.isread) === '0').length
|
|
: parseInt(userData?.total_unread_notifications ?? '0', 10);
|
|
|
|
return (
|
|
<DashboardStackNav.Navigator
|
|
screenOptions={{
|
|
headerStyle: {
|
|
backgroundColor: colors.header,
|
|
},
|
|
headerTitleStyle: {
|
|
fontSize: 17,
|
|
fontWeight: '700',
|
|
color: colors.text,
|
|
},
|
|
headerTitleAlign: 'center',
|
|
headerTintColor: colors.text,
|
|
headerShadowVisible: false,
|
|
statusBarTranslucent: false,
|
|
}}>
|
|
<DashboardStackNav.Screen
|
|
name="dashboardList"
|
|
component={DashboardScreen}
|
|
options={({ navigation }) => ({
|
|
headerTitle: 'Convex CRM',
|
|
headerLeft: () => (
|
|
<TouchableOpacity
|
|
style={styles.drawerButton}
|
|
activeOpacity={0.7}
|
|
onPress={() => {
|
|
const parentNav = navigation.getParent<DrawerNavigationProp<any>>();
|
|
if (parentNav) {
|
|
parentNav.openDrawer();
|
|
} else {
|
|
(navigation as any).openDrawer?.();
|
|
}
|
|
}}>
|
|
<Icon name="menu-outline" size={20} color={colors.text} />
|
|
</TouchableOpacity>
|
|
),
|
|
headerRight: () => (
|
|
<TouchableOpacity
|
|
style={styles.notificationButton}
|
|
activeOpacity={0.7}
|
|
onPress={() => {
|
|
// Navigate to notification screen if exists, or profile/other suitable route
|
|
navigation.navigate(route.notifications);
|
|
}}>
|
|
<Icon name="notifications-outline" size={20} color='#EF4444' />
|
|
{unreadCount > 0 ? (
|
|
<View style={styles.badgeContainer}>
|
|
<Text style={styles.badgeText}>
|
|
{unreadCount > 99 ? '99+' : unreadCount}
|
|
</Text>
|
|
</View>
|
|
) : null}
|
|
</TouchableOpacity>
|
|
),
|
|
})}
|
|
/>
|
|
<DashboardStackNav.Screen
|
|
name={route.notifications}
|
|
component={NotificationScreen}
|
|
options={{
|
|
headerTitle: 'Notifications',
|
|
}}
|
|
/>
|
|
</DashboardStackNav.Navigator>
|
|
);
|
|
};
|
|
|
|
const AddLeadStackNav = createNativeStackNavigator<AddLeadStackParamList>();
|
|
const AddLeadStack = () => {
|
|
const { theme: colors } = useTheme();
|
|
const styles = getStyles(colors);
|
|
return (
|
|
<AddLeadStackNav.Navigator
|
|
screenOptions={{
|
|
headerStyle: {
|
|
backgroundColor: colors.header,
|
|
},
|
|
headerTitleStyle: {
|
|
fontSize: 17,
|
|
fontWeight: '700',
|
|
color: colors.text,
|
|
},
|
|
headerTitleAlign: 'center',
|
|
headerTintColor: colors.text,
|
|
headerShadowVisible: false,
|
|
statusBarTranslucent: false,
|
|
}}>
|
|
<AddLeadStackNav.Screen
|
|
name="addLeadForm"
|
|
component={AddLeadScreen}
|
|
options={({ navigation }) => ({
|
|
headerTitle: 'Add Lead',
|
|
headerLeft: () => (
|
|
<TouchableOpacity
|
|
style={styles.drawerButton}
|
|
activeOpacity={0.7}
|
|
onPress={() => {
|
|
const parentNav = navigation.getParent<DrawerNavigationProp<any>>();
|
|
if (parentNav) {
|
|
parentNav.openDrawer();
|
|
} else {
|
|
(navigation as any).openDrawer?.();
|
|
}
|
|
}}>
|
|
<Icon name="menu-outline" size={20} color={colors.text} />
|
|
</TouchableOpacity>
|
|
),
|
|
})}
|
|
/>
|
|
</AddLeadStackNav.Navigator>
|
|
);
|
|
};
|
|
|
|
const ProfileStackNav = createNativeStackNavigator<ProfileStackParamList>();
|
|
const ProfileStack = () => {
|
|
const { theme: colors } = useTheme();
|
|
const styles = getStyles(colors);
|
|
return (
|
|
<ProfileStackNav.Navigator
|
|
screenOptions={{
|
|
headerStyle: {
|
|
backgroundColor: colors.header,
|
|
},
|
|
headerTitleStyle: {
|
|
fontSize: 17,
|
|
fontWeight: '700',
|
|
color: colors.text,
|
|
},
|
|
headerTitleAlign: 'center',
|
|
headerTintColor: colors.text,
|
|
headerShadowVisible: false,
|
|
statusBarTranslucent: false,
|
|
}}>
|
|
<ProfileStackNav.Screen
|
|
name="profileForm"
|
|
component={ProfileScreen}
|
|
options={({ navigation }) => ({
|
|
headerTitle: 'Profile',
|
|
headerLeft: () => (
|
|
<TouchableOpacity
|
|
style={styles.drawerButton}
|
|
activeOpacity={0.7}
|
|
onPress={() => {
|
|
const parentNav = navigation.getParent<DrawerNavigationProp<any>>();
|
|
if (parentNav) {
|
|
parentNav.openDrawer();
|
|
} else {
|
|
(navigation as any).openDrawer?.();
|
|
}
|
|
}}>
|
|
<Icon name="menu-outline" size={20} color={colors.text} />
|
|
</TouchableOpacity>
|
|
),
|
|
headerRight: () => (
|
|
<TouchableOpacity
|
|
onPress={() => navigation.navigate(route.editProfile)}
|
|
style={{
|
|
marginRight: 8,
|
|
backgroundColor: colors.icon,
|
|
width: 32,
|
|
height: 32,
|
|
borderRadius: 16,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
shadowColor: colors.icon,
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.25,
|
|
shadowRadius: 3.84,
|
|
elevation: 3,
|
|
}}
|
|
activeOpacity={0.7}
|
|
hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
|
|
<Icon name="create-outline" size={16} color="#FFFFFF" />
|
|
</TouchableOpacity>
|
|
),
|
|
})}
|
|
/>
|
|
<ProfileStackNav.Screen
|
|
name={route.editProfile}
|
|
component={EditProfileScreen}
|
|
options={{
|
|
headerTitle: 'Edit Profile',
|
|
}}
|
|
/>
|
|
</ProfileStackNav.Navigator>
|
|
);
|
|
};
|
|
|
|
export const TabStack = () => {
|
|
const { theme: colors } = useTheme();
|
|
const styles = getStyles(colors);
|
|
|
|
return (
|
|
<Tab.Navigator
|
|
screenOptions={({ route: tabRoute }) => ({
|
|
tabBarIcon: ({ focused, color }) => {
|
|
if (tabRoute.name === route.addLead) {
|
|
return (
|
|
<View style={styles.addLeadButtonWrapper}>
|
|
<Icon name="add" size={24} color="#FFFFFF" />
|
|
</View>
|
|
);
|
|
}
|
|
|
|
let iconName = 'square';
|
|
if (tabRoute.name === route.dashboard) {
|
|
iconName = focused ? 'grid' : 'grid-outline';
|
|
} else if (tabRoute.name === route.leads) {
|
|
iconName = focused ? 'funnel' : 'funnel-outline';
|
|
} else if (tabRoute.name === route.customers) {
|
|
iconName = focused ? 'people' : 'people-outline';
|
|
} else if (tabRoute.name === route.profile) {
|
|
iconName = focused ? 'person' : 'person-outline';
|
|
}
|
|
|
|
return (
|
|
<View style={[styles.iconContainer, focused && styles.iconContainerFocused]}>
|
|
<Icon name={iconName} size={20} color={color} />
|
|
</View>
|
|
);
|
|
},
|
|
tabBarActiveTintColor: colors.icon,
|
|
tabBarInactiveTintColor: colors.textMuted,
|
|
tabBarStyle: styles.tabBar,
|
|
tabBarLabelStyle: styles.tabBarLabel,
|
|
headerShown: false,
|
|
})}>
|
|
<Tab.Screen
|
|
name={route.dashboard}
|
|
component={DashboardStack}
|
|
options={{
|
|
tabBarLabel: 'Dashboard',
|
|
}}
|
|
listeners={({ navigation }) => ({
|
|
tabPress: (e) => {
|
|
e.preventDefault();
|
|
navigation.navigate(route.dashboard, {
|
|
screen: 'dashboardList',
|
|
});
|
|
},
|
|
})}
|
|
/>
|
|
<Tab.Screen
|
|
name={route.leads}
|
|
component={LeadsStack}
|
|
options={{
|
|
tabBarLabel: 'Leads',
|
|
}}
|
|
listeners={({ navigation }) => ({
|
|
tabPress: (e) => {
|
|
e.preventDefault();
|
|
navigation.navigate(route.leads, {
|
|
screen: route.leadsList,
|
|
});
|
|
},
|
|
})}
|
|
/>
|
|
<Tab.Screen
|
|
name={route.addLead}
|
|
component={AddLeadStack}
|
|
options={{
|
|
tabBarLabel: 'Add Lead',
|
|
}}
|
|
listeners={({ navigation }) => ({
|
|
tabPress: (e) => {
|
|
e.preventDefault();
|
|
navigation.navigate(route.addLead, {
|
|
screen: 'addLeadForm',
|
|
});
|
|
},
|
|
})}
|
|
/>
|
|
<Tab.Screen
|
|
name={route.customers}
|
|
component={CustomersStack}
|
|
options={{
|
|
tabBarLabel: 'Customers',
|
|
}}
|
|
listeners={({ navigation }) => ({
|
|
tabPress: (e) => {
|
|
e.preventDefault();
|
|
navigation.navigate(route.customers, {
|
|
screen: route.customersList,
|
|
});
|
|
},
|
|
})}
|
|
/>
|
|
<Tab.Screen
|
|
name={route.profile}
|
|
component={ProfileStack}
|
|
options={{
|
|
tabBarLabel: 'Profile',
|
|
}}
|
|
listeners={({ navigation }) => ({
|
|
tabPress: (e) => {
|
|
e.preventDefault();
|
|
navigation.navigate(route.profile, {
|
|
screen: 'profileForm',
|
|
});
|
|
},
|
|
})}
|
|
/>
|
|
</Tab.Navigator>
|
|
);
|
|
};
|