143 lines
5.0 KiB
TypeScript
143 lines
5.0 KiB
TypeScript
import React from "react";
|
|
import { TouchableOpacity, View } from "react-native";
|
|
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
|
|
import { Ionicons } from "@expo/vector-icons";
|
|
import { useAuth } from "../auth/AuthContext";
|
|
import { useTheme } from "../context/ThemeContext";
|
|
import { logoutAdmin } from "../api/api_admin";
|
|
import { fontSize, spacing } from "../theme";
|
|
import type { CabineTabParamList } from "./types";
|
|
|
|
import DashboardScreen from "../screens/cabine/DashboardScreen";
|
|
import OrdersScreen from "../screens/cabine/OrdersScreen";
|
|
import DeliveryScreen from "../screens/cabine/DeliveryScreen";
|
|
import UsersScreen from "../screens/cabine/UsersScreen";
|
|
import AlertsScreen from "../screens/cabine/AlertsScreen";
|
|
|
|
const Tab = createBottomTabNavigator<CabineTabParamList>();
|
|
|
|
export default function CabineNavigator() {
|
|
const { logout } = useAuth();
|
|
const { colors, isDark, toggleTheme } = useTheme();
|
|
|
|
const handleLogout = async () => {
|
|
await logoutAdmin();
|
|
await logout();
|
|
};
|
|
|
|
return (
|
|
<Tab.Navigator
|
|
screenOptions={{
|
|
headerStyle: { backgroundColor: colors.bgSecondary },
|
|
headerTintColor: colors.textWhite,
|
|
headerRight: () => (
|
|
<View
|
|
style={{
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
marginRight: spacing.l,
|
|
}}
|
|
>
|
|
<TouchableOpacity
|
|
onPress={toggleTheme}
|
|
style={{ marginRight: spacing.m }}
|
|
>
|
|
<Ionicons
|
|
name={isDark ? "sunny-outline" : "moon-outline"}
|
|
size={22}
|
|
color={colors.textSecondary}
|
|
/>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity onPress={handleLogout}>
|
|
<Ionicons
|
|
name="log-out-outline"
|
|
size={24}
|
|
color={colors.textSecondary}
|
|
/>
|
|
</TouchableOpacity>
|
|
</View>
|
|
),
|
|
tabBarStyle: {
|
|
backgroundColor: colors.bgSecondary,
|
|
borderTopColor: colors.border,
|
|
borderTopWidth: 1,
|
|
},
|
|
tabBarActiveTintColor: colors.info,
|
|
tabBarInactiveTintColor: colors.textMuted,
|
|
tabBarLabelStyle: { fontSize: fontSize.xs },
|
|
}}
|
|
>
|
|
<Tab.Screen
|
|
name="Dashboard"
|
|
component={DashboardScreen}
|
|
options={{
|
|
title: "Dashboard",
|
|
tabBarIcon: ({ color, size }) => (
|
|
<Ionicons
|
|
name="grid-outline"
|
|
size={size}
|
|
color={color}
|
|
/>
|
|
),
|
|
}}
|
|
/>
|
|
<Tab.Screen
|
|
name="Orders"
|
|
component={OrdersScreen}
|
|
options={{
|
|
title: "Commandes",
|
|
tabBarIcon: ({ color, size }) => (
|
|
<Ionicons
|
|
name="receipt-outline"
|
|
size={size}
|
|
color={color}
|
|
/>
|
|
),
|
|
}}
|
|
/>
|
|
<Tab.Screen
|
|
name="Delivery"
|
|
component={DeliveryScreen}
|
|
options={{
|
|
title: "Livreurs",
|
|
tabBarIcon: ({ color, size }) => (
|
|
<Ionicons
|
|
name="bicycle-outline"
|
|
size={size}
|
|
color={color}
|
|
/>
|
|
),
|
|
}}
|
|
/>
|
|
<Tab.Screen
|
|
name="Users"
|
|
component={UsersScreen}
|
|
options={{
|
|
title: "Clients",
|
|
tabBarIcon: ({ color, size }) => (
|
|
<Ionicons
|
|
name="people-outline"
|
|
size={size}
|
|
color={color}
|
|
/>
|
|
),
|
|
}}
|
|
/>
|
|
<Tab.Screen
|
|
name="Alerts"
|
|
component={AlertsScreen}
|
|
options={{
|
|
title: "Alertes",
|
|
tabBarIcon: ({ color, size }) => (
|
|
<Ionicons
|
|
name="alert-circle-outline"
|
|
size={size}
|
|
color={color}
|
|
/>
|
|
),
|
|
}}
|
|
/>
|
|
</Tab.Navigator>
|
|
);
|
|
}
|