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

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,
   },
 });