Update CBS Mobile App codebase

src/navigation/AgentNavigator.tsx

@@ -1,10 +1,8 @@
 import React from 'react';
-import { View, StyleSheet } from 'react-native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import Ionicons from '@react-native-vector-icons/ionicons';
 
-import { useTheme } from '../theme';
+import { TabBarIcon, useTabBarScreenOptions } from './tabBarTheme';
 import type {
   AgentTabParamList,
   AgentDashboardStackParamList,
@@ -13,6 +11,15 @@ import type {
   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';
@@ -38,156 +45,168 @@ import AgentChangePasswordScreen from '../modules/agent/screens/AgentChangePassw
 const Tab = createBottomTabNavigator<AgentTabParamList>();
 
 const DashboardStack = createNativeStackNavigator<AgentDashboardStackParamList>();
-const DashboardNavigator = () => (
-  <DashboardStack.Navigator screenOptions={{ headerShown: false }}>
-    <DashboardStack.Screen name="AgentDashboardMain" component={AgentDashboardScreen} />
-    <DashboardStack.Screen name="AgentRoute" component={AgentRouteScreen} />
-  </DashboardStack.Navigator>
-);
+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 = () => (
-  <CustomersStack.Navigator screenOptions={{ headerShown: false }}>
-    <CustomersStack.Screen name="CustomerList" component={CustomerListScreen} />
-    <CustomersStack.Screen name="CustomerDetail" component={CustomerDetailScreen} />
-    <CustomersStack.Screen name="AddEditCustomer" component={AddEditCustomerScreen} />
-    <CustomersStack.Screen name="CustomerInstallmentHistory" component={CustomerInstallmentHistoryScreen} />
-  </CustomersStack.Navigator>
-);
+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 = () => (
-  <CollectionsStack.Navigator screenOptions={{ headerShown: false }}>
-    <CollectionsStack.Screen name="DailyCollection" component={DailyCollectionScreen} />
-    <CollectionsStack.Screen name="CollectionHistory" component={CollectionHistoryScreen} />
-    <CollectionsStack.Screen name="CollectionReceipt" component={CollectionReceiptScreen} />
-  </CollectionsStack.Navigator>
-);
+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 = () => (
-  <LoansStack.Navigator screenOptions={{ headerShown: false }}>
-    <LoansStack.Screen name="AgentLoansMain" component={AgentLoansScreen} />
-    <LoansStack.Screen name="CreateLoanRequest" component={CreateLoanRequestScreen} />
-    <LoansStack.Screen name="AccountOpening" component={AccountOpeningScreen} />
-    <LoansStack.Screen name="CommissionDashboard" component={CommissionDashboardScreen} />
-  </LoansStack.Navigator>
-);
+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 = () => (
-  <ProfileStack.Navigator screenOptions={{ headerShown: false }}>
-    <ProfileStack.Screen name="AgentProfileMain" component={AgentProfileScreen} />
-    <ProfileStack.Screen name="SmsHistory" component={SmsHistoryScreen} />
-    <ProfileStack.Screen name="AgentChangePassword" component={AgentChangePasswordScreen} />
-  </ProfileStack.Navigator>
-);
+const ProfileNavigator = () => {
+  const canRoute = useRouteGuard(AGENT_PROFILE_ROUTE_FEATURES);
 
-type TabIconName =
-  | 'home-outline' | 'home'
-  | 'people-outline' | 'people'
-  | 'wallet-outline' | 'wallet'
-  | 'document-text-outline' | 'document-text'
-  | 'person-outline' | 'person';
-
-const TabIcon = ({ color, focused, name }: { color: string; focused: boolean; name: TabIconName }) => {
-  const activeBackground = focused ? `${color}22` : 'transparent';
   return (
-    <View style={[styles.iconFrame, { borderColor: color, backgroundColor: activeBackground }]}>
-      <Ionicons name={name} size={18} color={color} />
-    </View>
+    <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 theme = useTheme();
+  const canRoute = useRouteGuard(AGENT_TAB_FEATURES);
+  const tabBarOptions = useTabBarScreenOptions();
 
   return (
     <Tab.Navigator
       screenOptions={{
         headerShown: false,
         lazy: true,
-        tabBarActiveTintColor: theme.colors.primary,
-        tabBarInactiveTintColor: theme.colors.textMuted,
-        tabBarStyle: {
-          backgroundColor: theme.colors.white,
-          borderTopColor: theme.colors.cardBorder,
-          borderTopWidth: 1,
-          height: 90,
-          paddingBottom: 30,
-          paddingTop: 12,
-          position: 'absolute',
-          bottom: 0,
-          left: 0,
-          right: 0,
-          elevation: 20,
-          shadowColor: '#000',
-          shadowOffset: { width: 0, height: -4 },
-          shadowOpacity: 0.05,
-          shadowRadius: 8,
-        },
-        tabBarLabelStyle: {
-          fontSize: 10,
-          fontWeight: '700',
-          marginTop: 6,
-          textTransform: 'uppercase',
-          letterSpacing: 0.5,
-        },
-        tabBarItemStyle: {
-          paddingVertical: 5,
-        },
+        ...tabBarOptions,
       }}
     >
-      <Tab.Screen
-        name="AgentDashboard"
-        component={DashboardNavigator}
-        options={{
-          title: 'Home',
-          tabBarIcon: ({ color, focused }) => <TabIcon color={color} focused={focused} name={focused ? 'home' : 'home-outline'} />,
-        }}
-      />
-      <Tab.Screen
-        name="AgentCustomers"
-        component={CustomersNavigator}
-        options={{
-          title: 'Clients',
-          tabBarIcon: ({ color, focused }) => <TabIcon color={color} focused={focused} name={focused ? 'people' : 'people-outline'} />,
-        }}
-      />
-      <Tab.Screen
-        name="AgentCollections"
-        component={CollectionsNavigator}
-        options={{
-          title: 'Collect',
-          tabBarIcon: ({ color, focused }) => <TabIcon color={color} focused={focused} name={focused ? 'wallet' : 'wallet-outline'} />,
-        }}
-      />
-      <Tab.Screen
-        name="AgentLoans"
-        component={LoansNavigator}
-        options={{
-          title: 'Workspace',
-          tabBarIcon: ({ color, focused }) => <TabIcon color={color} focused={focused} name={focused ? 'document-text' : 'document-text-outline'} />,
-        }}
-      />
-      <Tab.Screen
-        name="AgentProfile"
-        component={ProfileNavigator}
-        options={{
-          title: 'Profile',
-          tabBarIcon: ({ color, focused }) => <TabIcon color={color} focused={focused} name={focused ? 'person' : 'person-outline'} />,
-        }}
-      />
+      {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>
   );
 };
-
-const styles = StyleSheet.create({
-  iconFrame: {
-    width: 32,
-    height: 32,
-    borderRadius: 8,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});