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

app/Screens/AdminHubPage.jsx

@@ -1,12 +1,14 @@
 import React from 'react';
-import { View, Text, Pressable, StyleSheet } from 'react-native';
-import { useNavigation } from '@react-navigation/native';
+import {Pressable, ScrollView, StyleSheet, Text, View} from 'react-native';
+import {useNavigation} from '@react-navigation/native';
 import AdminFooterNavbar from '../components/AdminFooterNavbar';
 import useAdminViewModel from '../ViewModel/useAdminViewModel';
 import ScreenHeader from '../components/ScreenHeader';
+import {getSession} from '../Model/SessionStore';
 
 const AdminHubPage = () => {
   const navigation = useNavigation();
+  const { currentIsBusiness } = getSession();
   const { createGame } = useAdminViewModel();
 
   const handleCreateGame = async () => {
@@ -19,19 +21,38 @@ const AdminHubPage = () => {
     navigation.navigate('(routes)/game-lobby');
   };
 
+  if (!currentIsBusiness) {
+    return (
+      <View style={styles.wrapper}>
+        <ScreenHeader title="Admin Hub" />
+        <View style={styles.container}>
+          <Text style={styles.message}>
+            As an individual, your game is managed automatically. You can view and manage your active team from the Game Lobby.
+          </Text>
+          <Pressable style={styles.button} onPress={() => navigation.navigate('(routes)/game-lobby')}>
+            <Text style={styles.buttonText}>Go to Game Lobby</Text>
+          </Pressable>
+        </View>
+        <AdminFooterNavbar />
+      </View>
+    );
+  }
+
   return (
     <View style={styles.wrapper}>
       <ScreenHeader title="Admin Hub" />
       <View style={styles.container}>
-        <Pressable style={styles.button} onPress={handleCreateGame}>
-          <Text style={styles.buttonText}>Create a Game</Text>
-        </Pressable>
-        <Pressable style={styles.button} onPress={() => navigation.navigate('(routes)/game-lobby')}>
-          <Text style={styles.buttonText}>Manage Existing Game</Text>
-        </Pressable>
-        <Pressable style={styles.button} onPress={() => navigation.navigate('(routes)/manage-subgroups')}>
-          <Text style={styles.buttonText}>Manage Subgroups</Text>
-        </Pressable>
+        <ScrollView style={styles.buttonList}>
+          <Pressable style={styles.button} onPress={handleCreateGame}>
+            <Text style={styles.buttonText}>Create a Game</Text>
+          </Pressable>
+          <Pressable style={styles.button} onPress={() => navigation.navigate('(routes)/game-lobby')}>
+            <Text style={styles.buttonText}>Manage Existing Game</Text>
+          </Pressable>
+          <Pressable style={styles.button} onPress={() => navigation.navigate('(routes)/manage-subgroups')}>
+            <Text style={styles.buttonText}>Manage Subgroups</Text>
+          </Pressable>
+        </ScrollView>
       </View>
       <AdminFooterNavbar />
     </View>
@@ -49,11 +70,21 @@ const styles = StyleSheet.create({
     padding: 20,
     gap: 12,
   },
+  message: {
+    color: '#4b5563',
+    fontSize: 15,
+    lineHeight: 22,
+    marginBottom: 20,
+  },
+  buttonList: {
+    flex: 1,
+  },
   button: {
     backgroundColor: '#2563eb',
     borderRadius: 8,
     paddingVertical: 12,
     alignItems: 'center',
+    marginBottom: 10,
   },
   buttonText: {
     color: '#ffffff',

app/Screens/CreateGamePage.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import {StyleSheet, Text, View} from 'react-native';
+import ScreenHeader from '../components/ScreenHeader';
+
+const CreateGamePage = () => {
+  return (
+    <View style={styles.wrapper}>
+      <ScreenHeader title="Create Game" />
+      <View style={styles.container}>
+        <Text style={styles.body}>Create game setup goes here.</Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    flex: 1,
+    backgroundColor: '#ffffff',
+  },
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 20,
+  },
+  body: {
+    color: '#4b5563',
+    fontSize: 15,
+  },
+});
+
+export default CreateGamePage;
+

app/Screens/GameLobbyPage.jsx

@@ -1,15 +1,19 @@
-import React, { useState } from 'react';
-import { View, Text, Pressable, TextInput, StyleSheet } from 'react-native';
-import { useNavigation } from '@react-navigation/native';
+import React, {useState} from 'react';
+import {Pressable, StyleSheet, Text, TextInput, View} from 'react-native';
+import {useNavigation} from '@react-navigation/native';
 import MemberFooterNavbar from '../components/MemberFooterNavbar';
 import useLobbyViewModel from '../ViewModel/useLobbyViewModel';
 import ScreenHeader from '../components/ScreenHeader';
+import {getSession} from '../Model/SessionStore';
 
 const GameLobbyPage = () => {
   const navigation = useNavigation();
+  const { currentSGid, currentIsAcceptedAdmin } = getSession();
   const { teamCode, error, setTeamCode, createLobbyTeam, joinLobbyTeam } = useLobbyViewModel();
   const [hasTeam, setHasTeam] = useState(false);
 
+  const isAdminUser = currentSGid === 0 && currentIsAcceptedAdmin;
+
   const handleCreateTeam = async () => {
     const team = await createLobbyTeam({
       teamName: `Team-${Date.now().toString().slice(-4)}`,
@@ -34,20 +38,31 @@ const GameLobbyPage = () => {
     <View style={styles.wrapper}>
       <ScreenHeader title="Game Lobby" />
       <View style={styles.container}>
-        <TextInput
-          style={styles.input}
-          placeholder="Join Team Code"
-          autoCapitalize="characters"
-          maxLength={6}
-          value={teamCode}
-          onChangeText={setTeamCode}
-        />
-        <Pressable style={styles.secondaryButton} onPress={handleJoinTeam}>
-          <Text style={styles.buttonText}>Join Team</Text>
-        </Pressable>
-        <Pressable style={styles.primaryButton} onPress={handleCreateTeam}>
-          <Text style={styles.buttonText}>Create Team</Text>
-        </Pressable>
+        {isAdminUser && (
+          <View style={styles.adminMessage}>
+            <Text style={styles.adminMessageText}>
+              Admins cannot participate in teams. Manage your game from the Admin Hub instead.
+            </Text>
+          </View>
+        )}
+        {!isAdminUser && (
+          <>
+            <TextInput
+              style={styles.input}
+              placeholder="Join Team Code"
+              autoCapitalize="characters"
+              maxLength={6}
+              value={teamCode}
+              onChangeText={setTeamCode}
+            />
+            <Pressable style={styles.secondaryButton} onPress={handleJoinTeam}>
+              <Text style={styles.buttonText}>Join Team</Text>
+            </Pressable>
+            <Pressable style={styles.primaryButton} onPress={handleCreateTeam}>
+              <Text style={styles.buttonText}>Create Team</Text>
+            </Pressable>
+          </>
+        )}
         <Pressable style={styles.secondaryButton} onPress={() => navigation.navigate('(routes)/map')}>
           <Text style={styles.buttonText}>Open Map</Text>
         </Pressable>
@@ -95,6 +110,19 @@ const styles = StyleSheet.create({
   errorText: {
     color: '#dc2626',
   },
+  adminMessage: {
+    backgroundColor: '#fef3c7',
+    borderWidth: 1,
+    borderColor: '#fcd34d',
+    borderRadius: 8,
+    padding: 12,
+    marginBottom: 12,
+  },
+  adminMessageText: {
+    color: '#92400e',
+    fontSize: 13,
+    fontWeight: '500',
+  },
 });
 
 export default GameLobbyPage;

app/Screens/ManageGamePage.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import {Pressable, StyleSheet, Text, View} from 'react-native';
+import {useNavigation} from '@react-navigation/native';
+import ScreenHeader from '../components/ScreenHeader';
+
+const ManageGamePage = () => {
+  const navigation = useNavigation();
+
+  return (
+    <View style={styles.wrapper}>
+      <ScreenHeader title="Manage Game" />
+      <View style={styles.container}>
+        <Text style={styles.body}>Manage your active team from here.</Text>
+        <Pressable style={styles.button} onPress={() => navigation.navigate('(routes)/team')}>
+          <Text style={styles.buttonText}>Open Team Manager</Text>
+        </Pressable>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    flex: 1,
+    backgroundColor: '#ffffff',
+  },
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: 12,
+    padding: 20,
+  },
+  body: {
+    color: '#4b5563',
+    fontSize: 15,
+  },
+  button: {
+    backgroundColor: '#2563eb',
+    borderRadius: 8,
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+  },
+  buttonText: {
+    color: '#ffffff',
+    fontWeight: '600',
+  },
+});
+
+export default ManageGamePage;
+

app/Screens/ManagePrivateSubtaskPage.jsx

@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
-import { View, Text, TextInput, Pressable, StyleSheet } from 'react-native';
-import { useNavigation } from '@react-navigation/native';
+import React, {useState} from 'react';
+import {Pressable, StyleSheet, Text, TextInput, View} from 'react-native';
+import {useNavigation} from '@react-navigation/native';
 import useManagePrivateSubtaskViewModel from '../ViewModel/useManagePrivateSubtaskViewModel';
 import ScreenHeader from '../components/ScreenHeader';
 
@@ -9,14 +9,25 @@ const ManagePrivateSubtaskPage = () => {
   const {
     businessOrSchoolName,
     error,
+    isBusinessUser,
     setBusinessOrSchoolName,
     createNewPrivateGame,
+    resolveIndividualPrivateRoute,
     joinAdminForPrivate,
   } = useManagePrivateSubtaskViewModel();
   const [submitting, setSubmitting] = useState(false);
 
   const handleCreate = async () => {
     setSubmitting(true);
+    if (!isBusinessUser) {
+      const nextRoute = await resolveIndividualPrivateRoute();
+      setSubmitting(false);
+      if (nextRoute) {
+        navigation.navigate(nextRoute);
+      }
+      return;
+    }
+
     const group = await createNewPrivateGame();
     setSubmitting(false);
     if (!group) {
@@ -40,20 +51,22 @@ const ManagePrivateSubtaskPage = () => {
       <ScreenHeader title="Manage Private Game" />
       <View style={styles.container}>
         <Pressable style={styles.primaryButton} onPress={handleCreate}>
-          <Text style={styles.buttonText}>{submitting ? 'Please wait...' : 'Create New Private Game'}</Text>
+          <Text style={styles.buttonText}>{submitting ? 'Please wait...' : isBusinessUser ? 'Create New Private Game' : 'Create or Manage My Game'}</Text>
         </Pressable>
-        <View style={styles.adminJoinSection}>
-          <Text style={styles.helperText}>Business/School Name is only required for admin join.</Text>
-          <TextInput
-            style={styles.input}
-            placeholder="Business/School Name"
-            value={businessOrSchoolName}
-            onChangeText={setBusinessOrSchoolName}
-          />
-          <Pressable style={styles.secondaryButton} onPress={handleJoinAdmin}>
-            <Text style={styles.buttonText}>Join as Admin for Private Game</Text>
-          </Pressable>
-        </View>
+        {isBusinessUser && (
+          <View style={styles.adminJoinSection}>
+            <Text style={styles.helperText}>Business/School Name is only required for admin join.</Text>
+            <TextInput
+              style={styles.input}
+              placeholder="Business/School Name"
+              value={businessOrSchoolName}
+              onChangeText={setBusinessOrSchoolName}
+            />
+            <Pressable style={styles.secondaryButton} onPress={handleJoinAdmin}>
+              <Text style={styles.buttonText}>Join as Admin for Private Game</Text>
+            </Pressable>
+          </View>
+        )}
         {!!error && <Text style={styles.errorText}>{error}</Text>}
       </View>
     </View>

app/Screens/ManageSubgroupsPage.jsx

@@ -1,54 +1,93 @@
 import React from 'react';
-import { View, Text, TextInput, Pressable, StyleSheet } from 'react-native';
+import {Pressable, ScrollView, StyleSheet, Text, TextInput, View} from 'react-native';
 import useSubgroupAdminViewModel from '../ViewModel/useSubgroupAdminViewModel';
 import AdminFooterNavbar from '../components/AdminFooterNavbar';
 import ScreenHeader from '../components/ScreenHeader';
+import EntityCard from '../components/UI/EntityCard';
+import SearchBar from '../components/UI/SearchBar';
+import {getSession} from '../Model/SessionStore';
 
 const ManageSubgroupsPage = () => {
   const {
-    subgroups,
+    filteredSubgroups,
+    searchQuery,
     subgroupName,
     cacheTriggerMeters,
     error,
+    setSearchQuery,
     setSubgroupName,
     setCacheTriggerMeters,
     addSubgroup,
     updateCacheForSubgroup,
   } = useSubgroupAdminViewModel();
+  const { currentIsBusiness } = getSession();
+
+  if (!currentIsBusiness) {
+    return (
+      <View style={styles.wrapper}>
+        <ScreenHeader title="Manage Subgroups" />
+        <View style={styles.container}>
+          <Text style={styles.message}>
+            Subgroups are managed automatically for individual accounts.
+          </Text>
+        </View>
+        <AdminFooterNavbar />
+      </View>
+    );
+  }
 
   return (
     <View style={styles.wrapper}>
       <ScreenHeader title="Manage Subgroups" />
       <View style={styles.container}>
-        {subgroups.map((subgroup) => (
-          <View key={`${subgroup.Gid}_${subgroup.SGid}`} style={styles.row}>
-            <Text style={styles.rowText}>
-              SGid {subgroup.SGid} | {subgroup.SubGroupName} | Code: {subgroup.JoinCode || 'ADMIN'} | Trigger: {subgroup.CacheTriggerMeters}m
-            </Text>
-            <Pressable
-              style={styles.inlineButton}
-              onPress={() => updateCacheForSubgroup(subgroup.SGid, (subgroup.CacheTriggerMeters || 20) + 5)}
-            >
-              <Text style={styles.inlineButtonText}>+5m</Text>
-            </Pressable>
-          </View>
-        ))}
-        <TextInput
-          style={styles.input}
-          placeholder="New subgroup name"
-          value={subgroupName}
-          onChangeText={setSubgroupName}
-        />
-        <TextInput
-          style={styles.input}
-          placeholder="Cache trigger meters"
-          keyboardType="numeric"
-          value={cacheTriggerMeters}
-          onChangeText={setCacheTriggerMeters}
-        />
-        <Pressable style={styles.button} onPress={addSubgroup}>
-          <Text style={styles.buttonText}>Create Subgroup</Text>
+        <Pressable style={styles.createButton} onPress={addSubgroup}>
+          <Text style={styles.createButtonText}>+ Create Subgroup</Text>
         </Pressable>
+        <SearchBar
+          placeholder="Search by name or ID"
+          value={searchQuery}
+          onChangeText={setSearchQuery}
+        />
+        <ScrollView style={styles.cardList} showsVerticalScrollIndicator={false}>
+          {filteredSubgroups.length === 0 && (
+            <Text style={styles.emptyText}>
+              {searchQuery ? 'No subgroups match your search.' : 'No subgroups yet. Create one to get started.'}
+            </Text>
+          )}
+          {filteredSubgroups.map((subgroup) => (
+            <EntityCard
+              key={`${subgroup.Gid}_${subgroup.SGid}`}
+              title={subgroup.SubGroupName}
+              subtitle={`ID: ${subgroup.SGid}`}
+              metaLabel1="Status"
+              metaValue1={subgroup.IsGameStarted ? 'Active' : 'Inactive'}
+              metaLabel2="Teams"
+              metaValue2={String(true)}
+              onPress={() => {
+                updateCacheForSubgroup(subgroup.SGid, (subgroup.CacheTriggerMeters || 20) + 5);
+              }}
+            />
+          ))}
+        </ScrollView>
+        <View style={styles.createForm}>
+          <Text style={styles.formTitle}>Create New Subgroup</Text>
+          <TextInput
+            style={styles.input}
+            placeholder="Subgroup name"
+            value={subgroupName}
+            onChangeText={setSubgroupName}
+          />
+          <TextInput
+            style={styles.input}
+            placeholder="Cache trigger meters"
+            keyboardType="numeric"
+            value={cacheTriggerMeters}
+            onChangeText={setCacheTriggerMeters}
+          />
+          <Pressable style={styles.submitButton} onPress={addSubgroup}>
+            <Text style={styles.submitButtonText}>Create</Text>
+          </Pressable>
+        </View>
         {!!error && <Text style={styles.errorText}>{error}</Text>}
       </View>
       <AdminFooterNavbar />
@@ -63,30 +102,50 @@ const styles = StyleSheet.create({
   },
   container: {
     flex: 1,
-    gap: 10,
     padding: 20,
+    flexDirection: 'column',
   },
-  row: {
-    borderWidth: 1,
-    borderColor: '#d1d5db',
-    borderRadius: 8,
-    padding: 10,
-    gap: 8,
+  message: {
+    textAlign: 'center',
+    color: '#6b7280',
+    fontSize: 15,
   },
-  rowText: {
-    color: '#111827',
-    fontSize: 13,
-  },
-  inlineButton: {
-    alignSelf: 'flex-start',
+  createButton: {
     backgroundColor: '#2563eb',
-    paddingHorizontal: 10,
-    paddingVertical: 6,
-    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: '#2563eb',
+    borderRadius: 8,
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    alignItems: 'center',
+    marginBottom: 12,
   },
-  inlineButtonText: {
+  createButtonText: {
     color: '#ffffff',
     fontWeight: '600',
+    fontSize: 14,
+  },
+  cardList: {
+    flex: 1,
+    gap: 8,
+  },
+  emptyText: {
+    textAlign: 'center',
+    color: '#9ca3af',
+    fontSize: 14,
+    marginTop: 20,
+  },
+  createForm: {
+    gap: 10,
+    paddingTop: 12,
+    borderTopWidth: 1,
+    borderTopColor: '#d1d5db',
+    marginTop: 12,
+  },
+  formTitle: {
+    fontSize: 13,
+    fontWeight: '600',
+    color: '#111827',
   },
   input: {
     borderWidth: 1,
@@ -95,18 +154,19 @@ const styles = StyleSheet.create({
     paddingHorizontal: 12,
     paddingVertical: 10,
   },
-  button: {
-    backgroundColor: '#2563eb',
+  submitButton: {
+    backgroundColor: '#4b5563',
     borderRadius: 8,
     alignItems: 'center',
-    paddingVertical: 12,
+    paddingVertical: 10,
   },
-  buttonText: {
+  submitButtonText: {
     color: '#ffffff',
     fontWeight: '600',
   },
   errorText: {
     color: '#dc2626',
+    marginTop: 8,
   },
 });