148 lines
4.7 KiB
TypeScript
148 lines
4.7 KiB
TypeScript
/*
|
|
* File: MainTabNavigator.tsx
|
|
* Description: Bottom tab navigator for the main app interface
|
|
* Design & Developed by Tech4Biz Solutions
|
|
* Copyright (c) Spurrin Innovations. All rights reserved.
|
|
*/
|
|
|
|
import React from 'react';
|
|
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
|
|
import { theme } from '../theme/theme';
|
|
import { DashboardStackNavigator } from '../modules/Dashboard/navigation';
|
|
import { SettingsStackNavigator } from '../modules/Settings/navigation';
|
|
import { MainTabParamList } from './navigationTypes';
|
|
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
|
|
|
|
// Create the bottom tab navigator
|
|
const Tab = createBottomTabNavigator<MainTabParamList>();
|
|
|
|
/**
|
|
* MainTabNavigator Component
|
|
*
|
|
* Purpose: Creates the bottom tab navigation for the main app interface
|
|
*
|
|
* Tab Structure:
|
|
* - Dashboard: Main ER dashboard with patient overview and statistics
|
|
* - Patients: Detailed patient list and management interface
|
|
* - Alerts: Critical notifications and alert management
|
|
* - Reports: Medical reports and documentation access
|
|
* - Settings: User preferences and app configuration
|
|
*
|
|
* Features:
|
|
* - Consistent styling with app theme
|
|
* - Tab-specific icons and labels
|
|
* - Proper parameter passing to screens
|
|
* - Accessibility support
|
|
*/
|
|
export const MainTabNavigator: React.FC = () => {
|
|
return (
|
|
<Tab.Navigator
|
|
screenOptions={{
|
|
// Tab bar styling for active and inactive states
|
|
tabBarActiveTintColor: theme.colors.primary, // Blue color for active tab
|
|
tabBarInactiveTintColor: theme.colors.textMuted, // Gray color for inactive tab
|
|
|
|
// Tab bar container styling
|
|
tabBarStyle: {
|
|
backgroundColor: theme.colors.background,
|
|
borderTopColor: theme.colors.border,
|
|
borderTopWidth: 1,
|
|
paddingBottom: 8,
|
|
paddingTop: 8,
|
|
height: 60, // Fixed height for tab bar
|
|
},
|
|
|
|
// Header styling for each screen
|
|
headerStyle: {
|
|
backgroundColor: theme.colors.background,
|
|
borderBottomColor: theme.colors.border,
|
|
borderBottomWidth: 1,
|
|
},
|
|
headerTitleStyle: {
|
|
color: theme.colors.textPrimary,
|
|
fontFamily: theme.typography.fontFamily.bold,
|
|
},
|
|
}}
|
|
>
|
|
{/* Dashboard Tab - Main ER overview */}
|
|
<Tab.Screen
|
|
name="Dashboard"
|
|
component={DashboardStackNavigator}
|
|
options={{
|
|
title: 'ER Dashboard',
|
|
tabBarLabel: 'Dashboard',
|
|
// TODO: Add tab bar icon
|
|
tabBarIcon: ({ color, size }) => (
|
|
<MaterialIcons name="dashboard" size={size} color={color} />
|
|
),
|
|
headerShown: false,
|
|
}}
|
|
/>
|
|
|
|
{/* Patients Tab - Patient list and management */}
|
|
<Tab.Screen
|
|
name="Patients"
|
|
component={DashboardStackNavigator} // TODO: Replace with actual PatientsScreen
|
|
options={{
|
|
title: 'Patient List',
|
|
tabBarLabel: 'Patients',
|
|
// TODO: Add tab bar icon
|
|
tabBarIcon: ({ color, size }) => (
|
|
<MaterialIcons name="people" size={size} color={color} />
|
|
),
|
|
headerShown: false,
|
|
}}
|
|
/>
|
|
|
|
{/* Alerts Tab - Critical notifications */}
|
|
<Tab.Screen
|
|
name="Alerts"
|
|
component={DashboardStackNavigator} // TODO: Replace with actual AlertsScreen
|
|
options={{
|
|
title: 'Alerts',
|
|
tabBarLabel: 'Alerts',
|
|
// TODO: Add tab bar icon
|
|
tabBarIcon: ({ color, size }) => (
|
|
<MaterialIcons name="notifications" size={size} color={color} />
|
|
),
|
|
headerShown: false,
|
|
}}
|
|
/>
|
|
|
|
{/* Reports Tab - Medical documentation */}
|
|
<Tab.Screen
|
|
name="Reports"
|
|
component={DashboardStackNavigator} // TODO: Replace with actual ReportsScreen
|
|
options={{
|
|
title: 'Reports',
|
|
tabBarLabel: 'Reports',
|
|
// TODO: Add tab bar icon
|
|
tabBarIcon: ({ color, size }) => (
|
|
<MaterialIcons name="description" size={size} color={color} />
|
|
),
|
|
headerShown: false,
|
|
}}
|
|
/>
|
|
|
|
{/* Settings Tab - User preferences */}
|
|
<Tab.Screen
|
|
name="Settings"
|
|
component={SettingsStackNavigator}
|
|
options={{
|
|
title: 'Settings',
|
|
tabBarLabel: 'Settings',
|
|
tabBarIcon: ({ color, size }) => (
|
|
<MaterialIcons name="settings" size={size} color={color} />
|
|
),
|
|
headerShown: false,
|
|
}}
|
|
/>
|
|
</Tab.Navigator>
|
|
);
|
|
};
|
|
|
|
/*
|
|
* End of File: MainTabNavigator.tsx
|
|
* Design & Developed by Tech4Biz Solutions
|
|
* Copyright (c) Spurrin Innovations. All rights reserved.
|
|
*/
|