Add create game and manage game pages, update navigation and session handling for individual and business users

app/components/ScreenHeader.jsx

@@ -1,13 +1,69 @@
 import React from 'react';
-import { View, Text, StyleSheet } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import {Pressable, StyleSheet, Text, View} from 'react-native';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import {useRouter, useSegments} from 'expo-router';
+import {getSession, setSessionGroup, setSessionTeam, setSessionUser} from '../Model/SessionStore';
 
-const ScreenHeader = ({ title }) => {
+const ScreenHeader = ({ title, showBack = true }) => {
   const insets = useSafeAreaInsets();
+  const router = useRouter();
+  const segments = useSegments();
+  const session = getSession();
+
+  // Check if user is logged in by checking if currentUid exists
+  const isLoggedIn = Boolean(session.currentUid);
+
+  // Pages where back navigation should be disabled
+  const blockedLastSegments = ['login', 'register', 'index'];
+
+  // compute last meaningful segment (filter out route groups like "(routes)")
+  const meaningfulSegments = segments.filter((s) => !s.startsWith('('));
+  const lastSegment = meaningfulSegments.length > 0 ? meaningfulSegments[meaningfulSegments.length - 1] : 'index';
+  const isBlocked = blockedLastSegments.includes(lastSegment);
+
+
+  const handleBack = () => {
+    if (isBlocked || !showBack) return;
+    try {
+      router.back();
+    } catch {
+      // fallback: nothing
+    }
+  };
+
+  const handleLogout = () => {
+    // clear session and route to login (replace so user cannot go back)
+    try {
+      setSessionUser(null);
+      setSessionGroup(null);
+      setSessionTeam(null);
+    } catch {
+      // ignore
+    }
+    try {
+      router.replace('/login');
+    } catch {
+      // noop
+    }
+  };
 
   return (
     <View style={[styles.container, { paddingTop: insets.top + 10 }]}>
+      {showBack && !isBlocked ? (
+        <Pressable style={styles.backButton} onPress={handleBack} accessibilityLabel="Go back">
+          <Text style={styles.backText}>←</Text>
+        </Pressable>
+      ) : (
+        <View style={styles.backButtonPlaceholder} />
+      )}
       <Text style={styles.title}>{title}</Text>
+      {isLoggedIn ? (
+        <Pressable style={styles.backButton} onPress={handleLogout} accessibilityLabel="Logout">
+          <Text style={styles.backText}>⎋</Text>
+        </Pressable>
+      ) : (
+        <View style={styles.backButtonPlaceholder} />
+      )}
     </View>
   );
 };
@@ -18,13 +74,34 @@ const styles = StyleSheet.create({
     paddingHorizontal: 16,
     paddingBottom: 12,
     minHeight: 72,
-    justifyContent: 'flex-end',
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    justifyContent: 'space-between',
   },
   title: {
     color: '#ffffff',
     fontSize: 20,
     fontWeight: '700',
   },
+  backButton: {
+    width: 44,
+    height: 44,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  backText: {
+    color: '#ffffff',
+    fontSize: 22,
+    lineHeight: 22,
+  },
+  backButtonPlaceholder: {
+    width: 44,
+    height: 44,
+  },
+  rightPlaceholder: {
+    width: 44,
+    height: 44,
+  },
 });
 
 export default ScreenHeader;

app/components/UI/EntityCard.jsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import {Pressable, StyleSheet, Text, View} from 'react-native';
+
+const EntityCard = ({
+  title,
+  subtitle,
+  metaLabel1,
+  metaValue1,
+  metaLabel2,
+  metaValue2,
+  metaLabel3,
+  metaValue3,
+  onPress,
+}) => {
+  return (
+    <Pressable style={styles.card} onPress={onPress}>
+      <Text style={styles.title}>{title}</Text>
+      {subtitle && <Text style={styles.subtitle}>{subtitle}</Text>}
+      <View style={styles.metaContainer}>
+        {metaLabel1 && metaValue1 && (
+          <Text style={styles.metaText}>{metaLabel1}: {metaValue1}</Text>
+        )}
+        {metaLabel2 && metaValue2 && (
+          <Text style={styles.metaText}>{metaLabel2}: {metaValue2}</Text>
+        )}
+        {metaLabel3 && metaValue3 && (
+          <Text style={styles.metaText}>{metaLabel3}: {metaValue3}</Text>
+        )}
+      </View>
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  card: {
+    borderWidth: 1,
+    borderColor: '#d1d5db',
+    borderRadius: 8,
+    padding: 12,
+    marginBottom: 10,
+    backgroundColor: '#ffffff',
+  },
+  title: {
+    fontSize: 15,
+    fontWeight: '700',
+    color: '#111827',
+    marginBottom: 4,
+  },
+  subtitle: {
+    fontSize: 13,
+    color: '#6b7280',
+    marginBottom: 8,
+  },
+  metaContainer: {
+    gap: 4,
+  },
+  metaText: {
+    fontSize: 13,
+    color: '#4b5563',
+  },
+});
+
+export default EntityCard;
+

app/components/UI/SearchBar.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import {StyleSheet, TextInput, View} from 'react-native';
+
+const SearchBar = ({ placeholder = 'Search...', value, onChangeText, style = {} }) => {
+  return (
+    <View style={[styles.container, style]}>
+      <TextInput
+        style={styles.input}
+        placeholder={placeholder}
+        value={value}
+        onChangeText={onChangeText}
+        placeholderTextColor="#9ca3af"
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 12,
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: '#d1d5db',
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    fontSize: 14,
+    color: '#111827',
+  },
+});
+
+export default SearchBar;
+