CBS-Mobile-App/src/navigation/AgentNavigator.tsx

import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

import { TabBarIcon, useTabBarScreenOptions } from './tabBarTheme';
import type {
  AgentTabParamList,
  AgentDashboardStackParamList,
  AgentCustomersStackParamList,
  AgentCollectionsStackParamList,
  AgentLoansStackParamList,
  AgentProfileStackParamList,
} from '../modules/agent/navigation/agentNavigationTypes';
import {
  AGENT_COLLECTIONS_ROUTE_FEATURES,
  AGENT_CUSTOMERS_ROUTE_FEATURES,
  AGENT_DASHBOARD_ROUTE_FEATURES,
  AGENT_LOANS_ROUTE_FEATURES,
  AGENT_PROFILE_ROUTE_FEATURES,
  AGENT_TAB_FEATURES,
  useRouteGuard,
} from './featureRoutes';

import AgentDashboardScreen from '../modules/agent/screens/AgentDashboardScreen';
import AgentRouteScreen from '../modules/agent/screens/AgentRouteScreen';

import CustomerListScreen from '../modules/agent/screens/CustomerListScreen';
import CustomerDetailScreen from '../modules/agent/screens/CustomerDetailScreen';
import AddEditCustomerScreen from '../modules/agent/screens/AddEditCustomerScreen';
import CustomerInstallmentHistoryScreen from '../modules/agent/screens/CustomerInstallmentHistoryScreen';

import DailyCollectionScreen from '../modules/agent/screens/DailyCollectionScreen';
import CollectionHistoryScreen from '../modules/agent/screens/CollectionHistoryScreen';
import CollectionReceiptScreen from '../modules/agent/screens/CollectionReceiptScreen';

import AgentLoansScreen from '../modules/agent/screens/AgentLoansScreen';
import CreateLoanRequestScreen from '../modules/agent/screens/CreateLoanRequestScreen';
import AccountOpeningScreen from '../modules/agent/screens/AccountOpeningScreen';
import CommissionDashboardScreen from '../modules/agent/screens/CommissionDashboardScreen';

import AgentProfileScreen from '../modules/agent/screens/AgentProfileScreen';
import SmsHistoryScreen from '../modules/agent/screens/SmsHistoryScreen';
import AgentChangePasswordScreen from '../modules/agent/screens/AgentChangePasswordScreen';

const Tab = createBottomTabNavigator<AgentTabParamList>();

const DashboardStack = createNativeStackNavigator<AgentDashboardStackParamList>();
const DashboardNavigator = () => {
  const canRoute = useRouteGuard(AGENT_DASHBOARD_ROUTE_FEATURES);

  return (
    <DashboardStack.Navigator screenOptions={{ headerShown: false }}>
      {canRoute('AgentDashboardMain') && (
        <DashboardStack.Screen name="AgentDashboardMain" component={AgentDashboardScreen} />
      )}
      {canRoute('AgentRoute') && (
        <DashboardStack.Screen name="AgentRoute" component={AgentRouteScreen} />
      )}
    </DashboardStack.Navigator>
  );
};

const CustomersStack = createNativeStackNavigator<AgentCustomersStackParamList>();
const CustomersNavigator = () => {
  const canRoute = useRouteGuard(AGENT_CUSTOMERS_ROUTE_FEATURES);

  return (
    <CustomersStack.Navigator screenOptions={{ headerShown: false }}>
      {canRoute('CustomerList') && (
        <CustomersStack.Screen name="CustomerList" component={CustomerListScreen} />
      )}
      {canRoute('CustomerDetail') && (
        <CustomersStack.Screen name="CustomerDetail" component={CustomerDetailScreen} />
      )}
      {canRoute('AddEditCustomer') && (
        <CustomersStack.Screen name="AddEditCustomer" component={AddEditCustomerScreen} />
      )}
      {canRoute('CustomerInstallmentHistory') && (
        <CustomersStack.Screen
          name="CustomerInstallmentHistory"
          component={CustomerInstallmentHistoryScreen}
        />
      )}
    </CustomersStack.Navigator>
  );
};

const CollectionsStack = createNativeStackNavigator<AgentCollectionsStackParamList>();
const CollectionsNavigator = () => {
  const canRoute = useRouteGuard(AGENT_COLLECTIONS_ROUTE_FEATURES);

  return (
    <CollectionsStack.Navigator screenOptions={{ headerShown: false }}>
      {canRoute('DailyCollection') && (
        <CollectionsStack.Screen name="DailyCollection" component={DailyCollectionScreen} />
      )}
      {canRoute('CollectionHistory') && (
        <CollectionsStack.Screen name="CollectionHistory" component={CollectionHistoryScreen} />
      )}
      {canRoute('CollectionReceipt') && (
        <CollectionsStack.Screen name="CollectionReceipt" component={CollectionReceiptScreen} />
      )}
    </CollectionsStack.Navigator>
  );
};

const LoansStack = createNativeStackNavigator<AgentLoansStackParamList>();
const LoansNavigator = () => {
  const canRoute = useRouteGuard(AGENT_LOANS_ROUTE_FEATURES);

  return (
    <LoansStack.Navigator screenOptions={{ headerShown: false }}>
      {canRoute('AgentLoansMain') && (
        <LoansStack.Screen name="AgentLoansMain" component={AgentLoansScreen} />
      )}
      {canRoute('CreateLoanRequest') && (
        <LoansStack.Screen name="CreateLoanRequest" component={CreateLoanRequestScreen} />
      )}
      {canRoute('AccountOpening') && (
        <LoansStack.Screen name="AccountOpening" component={AccountOpeningScreen} />
      )}
      {canRoute('CommissionDashboard') && (
        <LoansStack.Screen name="CommissionDashboard" component={CommissionDashboardScreen} />
      )}
    </LoansStack.Navigator>
  );
};

const ProfileStack = createNativeStackNavigator<AgentProfileStackParamList>();
const ProfileNavigator = () => {
  const canRoute = useRouteGuard(AGENT_PROFILE_ROUTE_FEATURES);

  return (
    <ProfileStack.Navigator screenOptions={{ headerShown: false }}>
      {canRoute('AgentProfileMain') && (
        <ProfileStack.Screen name="AgentProfileMain" component={AgentProfileScreen} />
      )}
      {canRoute('SmsHistory') && (
        <ProfileStack.Screen name="SmsHistory" component={SmsHistoryScreen} />
      )}
      {canRoute('AgentChangePassword') && (
        <ProfileStack.Screen name="AgentChangePassword" component={AgentChangePasswordScreen} />
      )}
    </ProfileStack.Navigator>
  );
};

export const AgentNavigator = () => {
  const canRoute = useRouteGuard(AGENT_TAB_FEATURES);
  const tabBarOptions = useTabBarScreenOptions();

  return (
    <Tab.Navigator
      screenOptions={{
        headerShown: false,
        lazy: true,
        ...tabBarOptions,
      }}
    >
      {canRoute('AgentDashboard') && (
        <Tab.Screen
          name="AgentDashboard"
          component={DashboardNavigator}
          options={{
            title: 'Home',
            tabBarIcon: ({ color, focused }) => <TabBarIcon color={color} focused={focused} name={focused ? 'home' : 'home-outline'} />,
          }}
        />
      )}
      {canRoute('AgentCustomers') && (
        <Tab.Screen
          name="AgentCustomers"
          component={CustomersNavigator}
          options={{
            title: 'Clients',
            tabBarIcon: ({ color, focused }) => <TabBarIcon color={color} focused={focused} name={focused ? 'people' : 'people-outline'} />,
          }}
        />
      )}
      {canRoute('AgentCollections') && (
        <Tab.Screen
          name="AgentCollections"
          component={CollectionsNavigator}
          options={{
            title: 'Collect',
            tabBarIcon: ({ color, focused }) => <TabBarIcon color={color} focused={focused} name={focused ? 'wallet' : 'wallet-outline'} />,
          }}
        />
      )}
      {canRoute('AgentLoans') && (
        <Tab.Screen
          name="AgentLoans"
          component={LoansNavigator}
          options={{
            title: 'Workspace',
            tabBarIcon: ({ color, focused }) => <TabBarIcon color={color} focused={focused} name={focused ? 'document-text' : 'document-text-outline'} />,
          }}
        />
      )}
      {canRoute('AgentProfile') && (
        <Tab.Screen
          name="AgentProfile"
          component={ProfileNavigator}
          options={{
            title: 'Profile',
            tabBarIcon: ({ color, focused }) => <TabBarIcon color={color} focused={focused} name={focused ? 'person' : 'person-outline'} />,
          }}
        />
      )}
    </Tab.Navigator>
  );
};