lst_v3/lstMobile/src/app/(tabs)/_layout.tsx

import { Redirect, Tabs, useRouter } from "expo-router";
import {
	Boxes,
	Container,
	Home,
	LogOut,
	Logs,
	Rows4,
	Settings,
} from "lucide-react-native";
import { Alert } from "react-native";
import { useAppStore } from "../../hooks/useAppStore";
import { useMobileAuthStore } from "../../hooks/useMobileAuth";

// const roles = {
// 	adminOnly: ["admin"],
// 	management: ["admin", "manager"],
// 	allStaff: ["admin", "manager", "driver", "lead", "user"],
// };

export default function TabsLayout() {
	const serverPort = useAppStore((s) => s.serverPort);
	const user = useMobileAuthStore((s) => s.user);
	const isUnlocked = useMobileAuthStore((s) => s.isUnlocked);
	const logoutScanner = useMobileAuthStore((s) => s.logout);
	const router = useRouter();

	const port = parseInt(serverPort || "0", 10) >= 50000;

	if (!port) {
		if (!user || !isUnlocked) {
			return <Redirect href="/login" />;
		}
	}

	const isNormalScanner = parseInt(serverPort || "0", 10) >= 50000;

	const hasRole = (allowed: string[] = []) => {
		const role = user?.role?.toLowerCase();
		return role ? allowed.includes(role) : false;
	};

	const logout = async () => {
		try {
			// optional confirm
			Alert.alert("Logout", "Are you sure?", [
				{ text: "Cancel", style: "cancel" },
				{
					text: "Logout",
					style: "destructive",
					onPress: async () => {
						// clear auth/session
						logoutScanner();
						router.replace("/(tabs)/scanner");

						// clear zustand/session stuff
						//useAuthStore.getState().reset();

						// maybe clear async storage too
						// await AsyncStorage.clear();
					},
				},
			]);
		} catch (err) {
			console.error(err);
		}
	};

	return (
		<Tabs
			screenOptions={{
				headerShown: false, // Hides the header for all screens in this navigator
			}}
		>
			<Tabs.Screen
				name="scanner"
				options={{
					title: "Scan",
					tabBarIcon: ({ color, size }) => <Home size={size} color={color} />,
					// header: ({ route }) => {
					// 	const version = serverVersion?.versionCode;

					// 	const hasUpdate = version && version > build;

					// 	if (!hasUpdate) return null; // 👈 hides header completely

					// 	return <GlobalHeader title={route.name} />;
					// },
				}}
			/>
			<Tabs.Screen
				name="ppoo"
				options={{
					title: "PPOO",
					// href:
					// 	isNormalScanner || !hasRole(["admin", "manager"])
					// 		? null
					// 		: "/(tabs)/ppoo",
					tabBarIcon: ({ color, size }) => <Boxes size={size} color={color} />,
				}}
			/>
			<Tabs.Screen
				name="laneCheck"
				options={{
					title: "Lane Check",
					// href:
					// 	isNormalScanner || !hasRole(["admin", "manager"])
					// 		? null
					// 		: "/(tabs)/laneCheck",
					tabBarIcon: ({ color, size }) => <Rows4 size={size} color={color} />,
				}}
			/>
			<Tabs.Screen
				name="dockScan"
				options={{
					title: "Dock scan",
					href:
						isNormalScanner || !hasRole(["admin", "manager"])
							? null
							: "/(tabs)/dockScan",
					tabBarIcon: ({ color, size }) => (
						<Container size={size} color={color} />
					),
				}}
			/>
			<Tabs.Screen
				name="logs"
				options={{
					title: "Logs",
					href:
						isNormalScanner || !hasRole(["admin", "manager"])
							? null
							: "/(tabs)/logs",
					tabBarIcon: ({ color, size }) => <Logs size={size} color={color} />,
				}}
			/>
			{/* <Tabs.Screen
				name="lanes"
				options={{
					title: "Lanes",
					href:
						parseInt(serverPort || "0", 10) >= 50000 ? null : "/(tabs)/logs",
				}}
			/> */}

			<Tabs.Screen
				name="config"
				options={{
					title: "settings",
					tabBarIcon: ({ color, size }) => (
						<Settings size={size} color={color} />
					),
				}}
			/>
			<Tabs.Screen
				name="logout"
				options={{
					title: "Logout",
					tabBarIcon: ({ color, size }) => <LogOut color={color} size={size} />,
				}}
				listeners={{
					tabPress: (e) => {
						// stop navigation
						e.preventDefault();

						// run logout logic
						logout();
					},
				}}
			/>
		</Tabs>
	);
}