221 queue screen responder

mobile/App.tsx

@@ -10,7 +10,7 @@ import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { TabParams } from './src/types/TabParams'
 import { borderRadius, colors, globalStyles, palette, size, spacing, typography } from './src/styles';
 import { View, StyleSheet, Dimensions } from 'react-native';
-import { BarGraphIcon, CalendarIcon, LineGraphIcon, MapIcon, PlusIcon, SearchIcon, UserIcon } from './src/components/Icons';
+import { BarGraphIcon, CalendarIcon, ClipBoardIcon, LineGraphIcon, MapIcon, PlusIcon, SearchIcon, UserIcon } from './src/components/Icons';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import FlashMessage from 'react-native-flash-message';
 import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -26,6 +26,8 @@ import LoadingScreen from './src/screens/Misc/LoadingScreen';
 import { StatusBar } from "expo-status-bar";
 import Constants from 'expo-constants';
 import { SafeAreaView } from 'react-native-safe-area-context';
+import QueueNav from './src/screens/Queue/QueueNav';
+import QueueScreen from './src/screens/Queue/QueueScreen';
 
 const Tab = createBottomTabNavigator<TabParams>();
 
@@ -47,6 +49,7 @@ const Stack = createNativeStackNavigator<StackParams>();
 
 function MainTabNavigator() {
   const { width, height } = Dimensions.get("window")
+  const { role } = useAuth()
   return (
     <SafeAreaView style={{
       width,
@@ -94,7 +97,6 @@ function MainTabNavigator() {
                 headerShown: false
               }} />
 
-
             <Tab.Screen name="ReportIssue" component={IssueCreationNav}
               options={{
                 tabBarIcon: ({ focused }) => (
@@ -113,6 +115,23 @@ function MainTabNavigator() {
                 headerShown: false
               }} />
 
+            {role != "REPORTER" && <Tab.Screen name="Queue Nav" component={QueueNav}
+              options={{
+                tabBarIcon: ({ color, focused }) => (
+                  <View style={{
+                    ...styles.iconBackground,
+                    backgroundColor: focused ? palette.ckGrayBlue : palette.ckVeryLightGray
+                  }}>
+                    <ClipBoardIcon
+                      color={color}
+                      size={size.lg}
+                      style={{ ...styles.icon, ...styles.navIcons }}
+                    />
+                  </View>
+                ),
+                headerShown: false
+              }} />}
+
             <Tab.Screen name="Stats Nav" component={StatsNav}
               options={{
                 tabBarIcon: ({ color, focused }) => (

mobile/src/components/Icons.tsx

@@ -455,4 +455,14 @@ export function TextIcon(props: IconProps) {
             size={props.size}
             style={props.style} />
     )
+}
+
+
+export function ClipBoardIcon(props: IconProps) {
+    return (
+        <Feather name="clipboard"
+            color={props.color}
+            size={props.size}
+            style={props.style} />
+    )
 }

mobile/src/screens/Queue/QueueNav.tsx

@@ -0,0 +1,60 @@
+// mobile/src/screens/Queue/QueueNav.tsx
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import IssueDetailScreen from '../Misc/IssueDetailScreen';
+import ErrorScreen from '../Misc/ErrorScreen';
+import { StackParams } from '../../types/StackParams';
+import { colors, typography } from '../../styles';
+import PhotoValidationScreen from '../IssueCreation/PhotoValidationScreen';
+import CameraScreen from '../IssueCreation/CameraScreen';
+import { userLocation } from '../../types/userLocation';
+import { useState } from 'react';
+import { ImagesContext, PhotoMetadataContext, UserLocationContext, AddressContext, TitleContext, CategoryContext, DescriptionContext, FormStartedContext } from '../../contexts/FormContexts';
+import type { PhotoMetadata } from '../../utils/photoMetadata';
+import QueueScreen from './QueueScreen';
+
+const Stack = createNativeStackNavigator<StackParams>();
+
+export default function QueueNav() {
+
+    return (
+
+        <Stack.Navigator screenOptions={{
+            headerStyle: {
+                backgroundColor: colors.background,
+            },
+            headerTintColor: colors.textPrimary,
+            headerTitleStyle: {
+                fontWeight: typography.weightRegular,
+            },
+            headerTitleAlign: "left"
+
+        }}
+        >
+            <Stack.Screen name="Queue" component={QueueScreen}
+                options={{
+                    headerShown: false,
+                }} />
+            <Stack.Screen name="Camera" component={CameraScreen}
+                options={{
+                    headerShown: false,
+                }} />
+            <Stack.Screen name="Issue Details" component={IssueDetailScreen}
+                options={{
+                    headerTitle: "",
+                    headerShadowVisible: false,
+                    headerShown: false
+                }} />
+            <Stack.Screen name="Photo Validation" component={PhotoValidationScreen}
+                options={{
+                    headerShown: false
+                }} />
+            <Stack.Screen name="Error" component={ErrorScreen}
+                options={{
+                    headerTitle: "",
+                    headerShadowVisible: false,
+                    headerBackVisible: false,
+                }} />
+        </Stack.Navigator>
+    );
+
+}