refactor(mobile): moved logout to the tab bar

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

@@ -1,12 +1,14 @@
-import { Redirect, Tabs } from "expo-router";
+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";
 
@@ -20,6 +22,8 @@ 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;
 
@@ -36,6 +40,32 @@ export default function TabsLayout() {
 		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={{
@@ -62,10 +92,10 @@ export default function TabsLayout() {
 				name="ppoo"
 				options={{
 					title: "PPOO",
-					href:
-						isNormalScanner || !hasRole(["admin", "manager"])
-							? null
-							: "/(tabs)/ppoo",
+					// href:
+					// 	isNormalScanner || !hasRole(["admin", "manager"])
+					// 		? null
+					// 		: "/(tabs)/ppoo",
 					tabBarIcon: ({ color, size }) => <Boxes size={size} color={color} />,
 				}}
 			/>
@@ -73,10 +103,10 @@ export default function TabsLayout() {
 				name="laneCheck"
 				options={{
 					title: "Lane Check",
-					href:
-						isNormalScanner || !hasRole(["admin", "manager"])
-							? null
-							: "/(tabs)/laneCheck",
+					// href:
+					// 	isNormalScanner || !hasRole(["admin", "manager"])
+					// 		? null
+					// 		: "/(tabs)/laneCheck",
 					tabBarIcon: ({ color, size }) => <Rows4 size={size} color={color} />,
 				}}
 			/>
@@ -112,6 +142,7 @@ export default function TabsLayout() {
 						parseInt(serverPort || "0", 10) >= 50000 ? null : "/(tabs)/logs",
 				}}
 			/> */}
+
 			<Tabs.Screen
 				name="config"
 				options={{
@@ -121,6 +152,22 @@ export default function TabsLayout() {
 					),
 				}}
 			/>
+			<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>
 	);
 }