From dd5dd8373731fd552f75cffdcb85a9da2415ee4b Mon Sep 17 00:00:00 2001
From: mudabbir-ahmad <mudabbira.uk@gmail.com>
Date: Thu, 9 Apr 2026 12:32:29 +0100
Subject: [PATCH] Refactor business settings: update department-related UI
 elements, enhance game reset functionality, and improve data handling for
 business accounts.

---
 .../screens/DepartmentSettingsScreen.js       |  2 +-
 src/components/screens/GameSettingsScreen.js  | 58 ++++++++-------
 src/components/screens/LeaderboardScreen.js   | 71 ++++++++++++++++---
 src/components/screens/MapScreen.js           | 70 ++++++------------
 src/components/screens/PlayersScreen.js       | 21 +++++-
 src/hooks/useGameHook.js                      |  8 ++-
 6 files changed, 143 insertions(+), 87 deletions(-)

diff --git a/src/components/screens/DepartmentSettingsScreen.js b/src/components/screens/DepartmentSettingsScreen.js
index 21aeff6..8c4b13c 100644
--- a/src/components/screens/DepartmentSettingsScreen.js
+++ b/src/components/screens/DepartmentSettingsScreen.js
@@ -60,7 +60,7 @@ const DepartmentSettingsScreen = ({route, navigation}) => {
                     text: 'Reset',
                     style: 'destructive',
                     onPress: async () => {
-                        await resetGame(Gid);
+                        await resetGame(Gid, SGid);
                         Alert.alert('Done', 'Department progress has been reset.');
                     },
                 },
diff --git a/src/components/screens/GameSettingsScreen.js b/src/components/screens/GameSettingsScreen.js
index 85fb26c..c5115dd 100644
--- a/src/components/screens/GameSettingsScreen.js
+++ b/src/components/screens/GameSettingsScreen.js
@@ -10,7 +10,7 @@ const GameSettingsScreen = ({navigation}) => {
 //   Initialisation ------------
 
     const session = getSession();
-    const {getLobby, updateGroup, getSubgroups, createSubgroup, updateSubgroup, deleteSubgroup, resetGame, getAdminWaitlist, approveAdmin, rejectAdmin, getUser, disbandTeams} = useGameHook();
+    const {getLobby, updateGroup, getSubgroups, createSubgroup, deleteSubgroup, resetGame, getAdminWaitlist, approveAdmin, rejectAdmin, getUser, disbandTeams} = useGameHook();
     const isBusiness = Boolean(session.isBusiness);
 
 //   State ----------------------
@@ -209,24 +209,24 @@ const GameSettingsScreen = ({navigation}) => {
         return (
             <Screen>
                 <ScrollView contentContainerStyle={styles.formContainer} showsVerticalScrollIndicator={false}>
-                    <Text style={styles.sectionTitle}>Business Settings</Text>
+                    <Text style={styles.sectionTitle}>Game Configuration :</Text>
 
-                    <Text style={styles.label}>Business Name</Text>
+                    <Text style={styles.label}>Organisation Name:</Text>
                     <TextInput
                         style={styles.input}
                         value={businessName}
                         onChangeText={setBusinessName}
-                        placeholder="Enter business name"
+                        placeholder="Enter organisation name"
                         placeholderTextColor="#9ca3af"
                     />
 
                     <View style={styles.codeSection}>
-                        <Text style={styles.codeLabel}>Admin Join Code</Text>
+                        <Text style={styles.codeLabel}>Admin join code:</Text>
                         <Text style={styles.codeValue}>{adminJoinCode || '—'}</Text>
                     </View>
 
                     <View style={styles.codeSection}>
-                        <Text style={styles.codeLabel}>Organisation Join Code</Text>
+                        <Text style={styles.codeLabel}>Org join code:</Text>
                         <Text style={styles.codeValue}>{orgJoinCode || '—'}</Text>
                     </View>
 
@@ -243,27 +243,36 @@ const GameSettingsScreen = ({navigation}) => {
 
                     {/* Departments List */}
                     <View style={styles.deptSection}>
-                        <Text style={styles.sectionTitle}>Departments</Text>
-                        {departments.map((sg) => (
+                        <Text style={styles.sectionTitle}>Departments:</Text>
+                        {departments.map((sg, index) => (
                             <Card key={sg.SGid}>
-                                <View style={styles.deptRow}>
-                                    <View style={styles.deptInfo}>
+                                <Text style={styles.deptIndexLabel}>Department {index + 1}:</Text>
+                                <View style={styles.deptCardRow}>
+                                    <View style={styles.deptCardInfo}>
+                                        <Text style={styles.deptInfoLabel}>Department Name</Text>
                                         <Text style={styles.deptName}>{sg.SubGroupName}</Text>
-                                        <Text style={styles.deptCode}>Join Code: {sg.JoinCode || '—'}</Text>
                                     </View>
-                                    <View style={styles.deptActions}>
+                                    <View style={styles.deptCardActions}>
                                         <Button
-                                            label="Delete"
+                                            label="Open Department Game Settings"
+                                            onClick={() => handleEnterDepartment(sg)}
+                                            styleButton={styles.deptOpenButton}
+                                            styleLabel={styles.deptBtnLabel}
+                                        />
+                                    </View>
+                                </View>
+                                <View style={styles.deptCardRow}>
+                                    <View style={styles.deptCardInfo}>
+                                        <Text style={styles.deptInfoLabel}>Department Join code</Text>
+                                        <Text style={styles.deptCode}>{sg.JoinCode || '—'}</Text>
+                                    </View>
+                                    <View style={styles.deptCardActions}>
+                                        <Button
+                                            label="Delete Department"
                                             onClick={() => handleDeleteDepartment(sg)}
                                             styleButton={styles.deptDeleteButton}
                                             styleLabel={styles.deptBtnLabel}
                                         />
-                                        <Button
-                                            label="→"
-                                            onClick={() => handleEnterDepartment(sg)}
-                                            styleButton={styles.deptArrowButton}
-                                            styleLabel={styles.deptArrowLabel}
-                                        />
                                     </View>
                                 </View>
                             </Card>
@@ -475,15 +484,16 @@ const styles = StyleSheet.create({
     saveLabel: {color: '#ffffff', fontWeight: '600'},
     // Department / subgroup styles
     deptSection: {marginTop: 30},
-    deptRow: {flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'},
-    deptInfo: {flex: 1},
+    deptIndexLabel: {fontSize: 14, fontWeight: '700', color: '#374151', marginBottom: 8},
+    deptCardRow: {flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8},
+    deptCardInfo: {flex: 1, paddingRight: 10},
+    deptCardActions: {flexDirection: 'row', gap: 6, flex: 0},
+    deptInfoLabel: {fontSize: 12, fontWeight: '600', color: '#6b7280', marginBottom: 2},
     deptName: {fontSize: 15, fontWeight: '700', color: '#1f2937'},
     deptCode: {fontSize: 13, fontWeight: '600', color: '#2563eb', marginTop: 2, letterSpacing: 1},
-    deptActions: {flexDirection: 'row', gap: 6},
     deptDeleteButton: {backgroundColor: '#dc2626', borderColor: '#dc2626', minHeight: 36, flex: 0, paddingHorizontal: 10},
+    deptOpenButton: {backgroundColor: '#2563eb', borderColor: '#2563eb', minHeight: 36, flex: 0, paddingHorizontal: 10},
     deptBtnLabel: {color: '#ffffff', fontWeight: '600', fontSize: 13},
-    deptArrowButton: {backgroundColor: '#2563eb', borderColor: '#2563eb', minHeight: 36, flex: 0, paddingHorizontal: 14},
-    deptArrowLabel: {color: '#ffffff', fontWeight: '700', fontSize: 18},
     createDeptRow: {flexDirection: 'row', gap: 10, marginTop: 12, alignItems: 'center'},
     createDeptButton: {backgroundColor: '#16a34a', borderColor: '#16a34a', flex: 0, paddingHorizontal: 16},
     createDeptLabel: {color: '#ffffff', fontWeight: '600'},
diff --git a/src/components/screens/LeaderboardScreen.js b/src/components/screens/LeaderboardScreen.js
index 55b6b3d..2b93636 100644
--- a/src/components/screens/LeaderboardScreen.js
+++ b/src/components/screens/LeaderboardScreen.js
@@ -6,12 +6,14 @@ import {Button} from '../UI/Button';
 import useGameHook from '../../hooks/useGameHook';
 import {getSession} from '../../hooks/SessionStore';
 
-const LeaderboardScreen = () => {
+const LeaderboardScreen = ({navigation, route}) => {
 //   Initialisation ------------
 
     const session = getSession();
     const isAdmin = session.isAcceptedAdmin;
-    const {getLobby, getTeams, getTeamMembers, getGroupMembers, getCaches, getUser, deleteTeam, resetPlayerProgress, resetTeamProgress} = useGameHook();
+    const isBusiness = Boolean(session.isBusiness);
+    const selectedDepartment = route?.params?.department || null;
+    const {getLobby, getTeams, getTeamMembers, getGroupMembers, getCaches, getUser, deleteTeam, resetPlayerProgress, resetTeamProgress, getSubgroups} = useGameHook();
 
 //   State ----------------------
 
@@ -23,6 +25,7 @@ const LeaderboardScreen = () => {
     const [myTeamRanking, setMyTeamRanking] = useState([]);
     const [expandedTeam, setExpandedTeam] = useState(null);
     const [totalCacheCount, setTotalCacheCount] = useState(0);
+    const [departmentList, setDepartmentList] = useState([]);
 
 //   Handlers -------------------
 
@@ -33,7 +36,18 @@ const LeaderboardScreen = () => {
         const isTeams = Boolean(group?.TeamsEnabled);
         setTeamsEnabled(isTeams);
 
-        const caches = await getCaches(session.currentGid, null);
+        if (isBusiness && isAdmin && !selectedDepartment) {
+            const sgs = await getSubgroups(session.currentGid);
+            setDepartmentList((sgs || []).filter((sg) => !sg.IsAdminGroup));
+            setLoading(false);
+            return;
+        }
+
+        const leaderboardSGid = (isBusiness && isAdmin && selectedDepartment?.SGid)
+            ? selectedDepartment.SGid
+            : null;
+
+        const caches = await getCaches(session.currentGid, leaderboardSGid);
         const total = (caches || []).length;
         setTotalCacheCount(total);
 
@@ -42,7 +56,11 @@ const LeaderboardScreen = () => {
             const teams = await getTeams(session.currentGid);
             const teamData = [];
 
-            for (const team of (teams || [])) {
+            const scopedTeams = leaderboardSGid
+                ? (teams || []).filter((team) => !team.SGid || team.SGid === leaderboardSGid)
+                : (teams || []);
+
+            for (const team of scopedTeams) {
                 const members = await getTeamMembers(team.Tid);
                 const memberData = [];
                 for (const m of (members || [])) {
@@ -81,8 +99,11 @@ const LeaderboardScreen = () => {
         } else {
             // Build player rankings (no teams)
             const allMembers = await getGroupMembers(session.currentGid);
+            const scopedMembers = leaderboardSGid
+                ? (allMembers || []).filter((mem) => mem.SGid === leaderboardSGid)
+                : (allMembers || []);
             const playerData = [];
-            for (const m of (allMembers || []).filter((mem) => !mem.IsAcceptedAdmin)) {
+            for (const m of scopedMembers.filter((mem) => !mem.IsAcceptedAdmin)) {
                 const user = await getUser(m.Uid);
                 const count = (caches || []).filter((c) =>
                     (c.Claims || []).some((cl) => cl.Uid === m.Uid)
@@ -98,7 +119,7 @@ const LeaderboardScreen = () => {
         }
 
         setLoading(false);
-    }, [session.currentGid, session.currentTid]);
+    }, [session.currentGid, session.currentTid, isBusiness, isAdmin, selectedDepartment, selectedDepartment?.SGid]);
 
     useEffect(() => { loadData(); }, [loadData]);
 
@@ -166,6 +187,32 @@ const LeaderboardScreen = () => {
         );
     }
 
+    if (isBusiness && isAdmin && !selectedDepartment) {
+        return (
+            <Screen style={styles.container}>
+                <Text style={styles.departmentTitle}>Departments</Text>
+                <ScrollView style={styles.listSection}>
+                    {departmentList.map((department) => (
+                        <Pressable
+                            key={department.SGid}
+                            onPress={() => navigation.navigate('LeaderboardScreen', {department})}
+                        >
+                            <Card>
+                                <View style={styles.rankRow}>
+                                    <Text style={styles.rankName}>{department.SubGroupName}</Text>
+                                    <Text style={styles.openLabel}>Open</Text>
+                                </View>
+                            </Card>
+                        </Pressable>
+                    ))}
+                    {departmentList.length === 0 && (
+                        <Text style={styles.emptyText}>No departments yet.</Text>
+                    )}
+                </ScrollView>
+            </Screen>
+        );
+    }
+
     // Helper: render an expandable team card (admin version with delete + reset)
     const renderAdminTeamCard = (team, index) => (
         <Card key={team.tid}>
@@ -269,7 +316,10 @@ const LeaderboardScreen = () => {
         // Teams enabled: show team list (no tabs for admin)
         if (teamsEnabled) {
             return (
-                <Screen style={styles.container}>
+                <Screen style={styles.container} showBack={Boolean(selectedDepartment)}>
+                    {selectedDepartment && (
+                        <Text style={styles.departmentTitle}>{selectedDepartment.SubGroupName}</Text>
+                    )}
                     <ScrollView style={styles.listSection}>
                         {teamRankings.map((team, index) => renderAdminTeamCard(team, index))}
                         {teamRankings.length === 0 && (
@@ -282,7 +332,10 @@ const LeaderboardScreen = () => {
 
         // Teams disabled: show player list with reset buttons
         return (
-            <Screen style={styles.container}>
+            <Screen style={styles.container} showBack={Boolean(selectedDepartment)}>
+                {selectedDepartment && (
+                    <Text style={styles.departmentTitle}>{selectedDepartment.SubGroupName}</Text>
+                )}
                 <ScrollView style={styles.listSection}>
                     {playerRankings.map((player, index) => renderAdminPlayerCard(player, index))}
                     {playerRankings.length === 0 && (
@@ -361,6 +414,8 @@ const styles = StyleSheet.create({
     center: {justifyContent: 'center', alignItems: 'center'},
     container: {padding: 0},
     body: {color: '#4b5563', fontSize: 15},
+    departmentTitle: {fontSize: 20, fontWeight: '700', color: '#1f2937', paddingHorizontal: 15, paddingTop: 15, marginBottom: 6},
+    openLabel: {fontSize: 13, fontWeight: '700', color: '#2563eb'},
     tabRow: {
         flexDirection: 'row',
         borderBottomWidth: 1,
diff --git a/src/components/screens/MapScreen.js b/src/components/screens/MapScreen.js
index b933e5a..8835177 100644
--- a/src/components/screens/MapScreen.js
+++ b/src/components/screens/MapScreen.js
@@ -42,7 +42,7 @@ const MapScreen = ({navigation}) => {
     const [subgroups, setSubgroups] = useState([]);
 
     // Business join flow state
-    const [joinStep, setJoinStep] = useState(null); // null | 'orgCode' | 'deptCode'
+    const [joinStep, setJoinStep] = useState(null); // null | 'deptCode'
     const [orgCode, setOrgCode] = useState('');
     const [deptCode, setDeptCode] = useState('');
     const [matchedGroup, setMatchedGroup] = useState(null);
@@ -365,7 +365,7 @@ const MapScreen = ({navigation}) => {
                         <ButtonTray>
                             <Button
                                 label="Back"
-                                onClick={() => { setJoinStep('orgCode'); setDeptCode(''); setJoinError(''); }}
+                                onClick={() => { setJoinStep(null); setDeptCode(''); setJoinError(''); }}
                                 styleButton={styles.backButton}
                                 styleLabel={styles.backLabel}
                             />
@@ -375,48 +375,28 @@ const MapScreen = ({navigation}) => {
             );
         }
 
-        // Step 1: Enter org code (or choose create / join)
-        if (joinStep === 'orgCode') {
-            return (
-                <Screen style={styles.center}>
-                    <Text style={styles.bizTitle}>Join a Company</Text>
-                    <Text style={styles.bizSubtitle}>Enter the organisation code provided by your company</Text>
-                    <View style={styles.inputRow}>
-                        <TextInput
-                            style={styles.codeInput}
-                            placeholder="Organisation Code"
-                            placeholderTextColor="#9ca3af"
-                            value={orgCode}
-                            onChangeText={(text) => setOrgCode(text.toUpperCase())}
-                            autoCapitalize="characters"
-                        />
-                        <Button
-                            label="Next"
-                            onClick={handleVerifyOrgCode}
-                            styleButton={styles.joinButton}
-                            styleLabel={styles.joinLabel}
-                        />
-                    </View>
-                    {joinError ? <Text style={styles.joinError}>{joinError}</Text> : null}
-                    <View style={styles.fullRow}>
-                        <ButtonTray>
-                            <Button
-                                label="Back"
-                                onClick={() => { setJoinStep(null); setOrgCode(''); setJoinError(''); }}
-                                styleButton={styles.backButton}
-                                styleLabel={styles.backLabel}
-                            />
-                        </ButtonTray>
-                    </View>
-                </Screen>
-            );
-        }
-
-        // Default: Create company or Join company choice
+        // Default: Join company or Create company choice
         return (
             <Screen style={styles.center}>
                 <Text style={styles.bizTitle}>Welcome</Text>
                 <Text style={styles.bizSubtitle}>Set up your organisation or join an existing one</Text>
+                <View style={styles.inputRow}>
+                    <TextInput
+                        style={styles.codeInput}
+                            placeholder="Company Code"
+                        placeholderTextColor="#9ca3af"
+                        value={orgCode}
+                        onChangeText={(text) => setOrgCode(text.toUpperCase())}
+                        autoCapitalize="characters"
+                    />
+                    <Button
+                        label="Join Company"
+                        onClick={handleVerifyOrgCode}
+                        styleButton={styles.joinButton}
+                        styleLabel={styles.joinLabel}
+                    />
+                </View>
+                {joinError ? <Text style={styles.joinError}>{joinError}</Text> : null}
                 <View style={styles.fullRow}>
                     <ButtonTray>
                         <Button
@@ -427,16 +407,6 @@ const MapScreen = ({navigation}) => {
                         />
                     </ButtonTray>
                 </View>
-                <View style={styles.fullRow}>
-                    <ButtonTray>
-                        <Button
-                            label="Join Company"
-                            onClick={() => setJoinStep('orgCode')}
-                            styleButton={styles.joinButton}
-                            styleLabel={styles.joinLabel}
-                        />
-                    </ButtonTray>
-                </View>
             </Screen>
         );
     }
diff --git a/src/components/screens/PlayersScreen.js b/src/components/screens/PlayersScreen.js
index 86ab0c8..c4aec28 100644
--- a/src/components/screens/PlayersScreen.js
+++ b/src/components/screens/PlayersScreen.js
@@ -10,7 +10,8 @@ const PlayersScreen = () => {
 //   Initialisation ------------
 
     const session = getSession();
-    const {getTeams, getTeamMembers, getGroupMembers, removeMember, resetPlayerProgress, getUser, getAdminWaitlist, approveAdmin, rejectAdmin} = useGameHook();
+    const {getTeams, getTeamMembers, getGroupMembers, removeMember, resetPlayerProgress, getUser, getAdminWaitlist, approveAdmin, rejectAdmin, getSubgroups} = useGameHook();
+    const isBusiness = Boolean(session.isBusiness);
 
 //   State ----------------------
 
@@ -22,6 +23,15 @@ const PlayersScreen = () => {
     const loadData = useCallback(async () => {
         if (!session.currentGid) { setLoading(false); return; }
 
+        // Load subgroup names for department display (business accounts)
+        let subgroupNameMap = {};
+        if (isBusiness) {
+            const sgs = await getSubgroups(session.currentGid);
+            for (const sg of (sgs || [])) {
+                if (!sg.IsAdminGroup) subgroupNameMap[sg.SGid] = sg.SubGroupName;
+            }
+        }
+
         // Get ALL members (including admins)
         const allMembers = await getGroupMembers(session.currentGid);
 
@@ -73,6 +83,7 @@ const PlayersScreen = () => {
                     team: teamInfoByUid[m.Uid] || null,
                     adminTag,
                     waitlistId,
+                    departmentName: subgroupNameMap[m.SGid] || null,
                 });
             }
         }
@@ -89,6 +100,7 @@ const PlayersScreen = () => {
                     team: null,
                     adminTag: '[Admin Awaiting Response]',
                     waitlistId: w.id,
+                    departmentName: null,
                 });
             }
         }
@@ -167,6 +179,12 @@ const PlayersScreen = () => {
                                         {' '}{player.adminTag}
                                     </Text>
                                 )}
+                                {/* Show department name in brackets for non-admin players (org accounts) */}
+                                {!player.adminTag && player.departmentName && (
+                                    <Text style={styles.departmentName}>
+                                        {' '}({player.departmentName})
+                                    </Text>
+                                )}
                             </Text>
                             <View style={styles.playerMeta}>
                                 {player.team?.isLeader && (
@@ -255,6 +273,7 @@ const styles = StyleSheet.create({
     resetButton: {backgroundColor: '#f59e0b', borderColor: '#f59e0b', minHeight: 36, flex: 1, paddingHorizontal: 10},
     removeButton: {backgroundColor: '#dc2626', borderColor: '#dc2626', minHeight: 36, flex: 1, paddingHorizontal: 10},
     actionLabel: {color: '#ffffff', fontWeight: '600', fontSize: 13},
+    departmentName: {fontSize: 14, color: '#6b7280', fontStyle: 'italic'},
     // Waitlisted admin card tint — light red so they read as pending, not regular players
     waitlistCard: {backgroundColor: '#FFD1DC', borderColor: '#fca5a5'},
     // Approve / deny buttons for waitlisted admins
diff --git a/src/hooks/useGameHook.js b/src/hooks/useGameHook.js
index f50c85f..b181658 100644
--- a/src/hooks/useGameHook.js
+++ b/src/hooks/useGameHook.js
@@ -175,9 +175,11 @@ const useGameHook = () => {
     return response.isSuccess;
   };
 
-  // Game reset — remove all caches for a game
-  const resetGame = async (gid) => {
-    const response = await API.post(`${cachesEndpoint}/reset?Gid=${gid}`, {});
+  // Game reset — remove all caches for a game (optionally scoped to a subgroup)
+  const resetGame = async (gid, sgid = null) => {
+    let url = `${cachesEndpoint}/reset?Gid=${gid}`;
+    if (sgid !== null) url += `&SGid=${sgid}`;
+    const response = await API.post(url, {});
     return response.isSuccess;
   };