LeaderBoard All Users improvements

.gitignore

@@ -34,4 +34,3 @@ public/precache-manifest.*
 
 # Project management (internal)
 .project/
-package-lock.json

src/App.tsx

@@ -639,7 +639,7 @@ class App extends React.Component<Props, State> {
             />
             <PrivateRoute
                 auth={this.state.auth}
-                allowedRoles={[Role.ADMIN, Role.PROGRAMLEADER, Role.SITELEADER]}
+                allowedRoles={[Role.ADMIN]}
                 userRole={role}
                 path="/AllUsers"
                 component={AllUsersPage}
@@ -888,6 +888,15 @@ class App extends React.Component<Props, State> {
               render={(props: {
                 history: H.History
               }) : React.ReactElement=> <UsersPage {...props}/>}
+            />
+            <PrivateRoute
+              auth={auth}
+              path="/LeadersAllUsers"
+              allowedRoles={[Role.ADMIN]}
+              userRole={role}
+              render={(props: {
+                history: H.History
+              }) : React.ReactElement=> <UsersPage {...props}/>}
             />    
 
             <PrivateRoute

src/components/BurgerMenu.tsx

@@ -37,7 +37,6 @@ import * as Types from '../constants/Types';
 import * as H from 'history';
 import Firebase from './Firebase';
 import SupervisedUserCircleIcon from '@material-ui/icons/SupervisedUserCircle';
-import GroupIcon from '@material-ui/icons/Group';
 
 const styles: object = {
   toolbarIcon: {
@@ -489,22 +488,6 @@ class BurgerMenu extends React.Component<Props, State>{
                       />
                   </ListItem>
               </>}
-              {(role == Role.ADMIN || role == Role.PROGRAMLEADER || role == Role.SITELEADER) && <>
-                  <ListItem
-                      button
-                      onClick={() => this.props.handleNavigation( (): void => {
-                          this.setState({ menu: 16, chalkOpen: false });
-                          this.props.history.push("/AllUsers");
-                      })}
-                  >
-                      <ListItemIcon>
-                          <GroupIcon style={{ fill: Constants.Colors.SE }} />
-                      </ListItemIcon>
-                      <ListItemText
-                          primary="All Users"
-                      />
-                  </ListItem>
-              </>}
               {(role == Role.ADMIN || role == Role.PROGRAMLEADER || role == Role.SITELEADER) && <>
                   <ListItem
                       button

src/components/Firebase/Firebase.tsx

@@ -4744,22 +4744,35 @@ class Firebase {
       lastName: string
       email: string
       role: string
-      school: string
+      program: string
       archived: boolean
       lastLogin: Date | null
     }> = []
 
+    // Fetch all programs to build a lookup map
+    const programsSnapshot = await this.db.collection('programs').get()
+    const programsMap = new Map<string, string>()
+    programsSnapshot.docs.forEach(doc => {
+      programsMap.set(doc.id, doc.data().name || '')
+    })
+
     const usersSnapshot = await this.db.collection('users').get()
 
     usersSnapshot.docs.forEach(doc => {
       const data = doc.data()
+      // Get first program name from user's programs array
+      let programName = ''
+      if (data.programs && Array.isArray(data.programs) && data.programs.length > 0) {
+        const firstProgramId = data.programs[0].id || data.programs[0]
+        programName = programsMap.get(firstProgramId) || ''
+      }
       result.push({
         id: doc.id,
         firstName: data.firstName || '',
         lastName: data.lastName || '',
         email: data.email || '',
         role: data.role || '',
-        school: data.school || '',
+        program: programName,
         archived: data.archived || false,
         lastLogin: data.lastLogin ? data.lastLogin.toDate() : null,
       })

src/components/UsersComponents/AllUsersTable.tsx

@@ -20,13 +20,17 @@ import * as Types from '../../constants/Types'
 
 const TableRow = styled.tr`
   background-color: white;
-  :nth-child(odd) { background-color: #eaeaea; }
+  :nth-child(odd) { background-color: rgb(234, 234, 234); }
   &:hover { background-color: rgba(9, 136, 236, 0.4); cursor: pointer; }
 `
 
 const TableCell = styled.td`
-  padding: 10px 8px;
+  padding: 4px 8px;
   text-align: left;
+  font-size: 1.25rem;
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-weight: 400;
+  line-height: 1.6;
 `
 
 const StatusBadge = styled.span<{ archived: boolean }>`
@@ -78,7 +82,7 @@ class AllUsersTable extends React.Component<Props, State> {
     if (search) {
       const s = search.toLowerCase()
       users = users.filter(u =>
-        `${u.firstName} ${u.lastName} ${u.email} ${u.role} ${u.school}`.toLowerCase().includes(s)
+        `${u.firstName} ${u.lastName} ${u.email} ${u.role} ${u.program}`.toLowerCase().includes(s)
       )
     }
     if (roleFilter) users = users.filter(u => u.role === roleFilter)
@@ -106,11 +110,11 @@ class AllUsersTable extends React.Component<Props, State> {
 
   handleExport = () => {
     const users = this.getFilteredUsers()
-    const headers = ['Last Name', 'First Name', 'Email', 'Role', 'School', 'Status', 'Last Login']
+    const headers = ['Last Name', 'First Name', 'Email', 'Role', 'Program', 'Status', 'Last Login']
     const escape = (val: string) => `"${(val || '').replace(/"/g, '""')}"`
     const rows = users.map(u => [
       escape(u.lastName), escape(u.firstName), escape(u.email),
-      escape(this.formatRole(u.role)), escape(u.school || ''),
+      escape(this.formatRole(u.role)), escape(u.program || ''),
       escape(u.archived ? 'Archived' : 'Active'),
       escape(this.formatDate(u.lastLogin))
     ].join(','))
@@ -129,7 +133,7 @@ class AllUsersTable extends React.Component<Props, State> {
     const roles = [...new Set(this.props.users.map(u => u.role))].sort()
 
     const SortHeader = ({ field, label }: { field: string; label: string }) => (
-      <th style={{ padding: '10px 8px', cursor: 'pointer' }} onClick={() => this.handleSort(field)}>
+      <th style={{ padding: '4px 8px', cursor: 'pointer', fontSize: '1.25rem', fontWeight: 500 }} onClick={() => this.handleSort(field)}>
         <TableSortLabel active={sortField === field} direction={sortField === field ? sortDir : 'asc'}>
           <strong>{label}</strong>
         </TableSortLabel>
@@ -172,10 +176,10 @@ class AllUsersTable extends React.Component<Props, State> {
                 <SortHeader field="firstName" label="First Name" />
                 <SortHeader field="email" label="Email" />
                 <SortHeader field="role" label="Role" />
-                <SortHeader field="school" label="School" />
+                <SortHeader field="program" label="Program" />
                 <SortHeader field="archived" label="Status" />
                 <SortHeader field="lastLogin" label="Last Login" />
-                <th style={{ padding: '10px 8px' }}><strong>Actions</strong></th>
+                <th style={{ padding: '4px 8px', textAlign: 'center', fontSize: '1.25rem', fontWeight: 500 }}><strong>Edit</strong></th>
               </tr>
             </thead>
             <tbody>
@@ -187,15 +191,9 @@ class AllUsersTable extends React.Component<Props, State> {
                   <TableCell>{user.firstName}</TableCell>
                   <TableCell>{user.email}</TableCell>
                   <TableCell>{this.formatRole(user.role)}</TableCell>
-                  <TableCell>{user.school}</TableCell>
-                  <TableCell><StatusBadge archived={user.archived}>{user.archived ? 'Archived' : 'Active'}</StatusBadge></TableCell>
-                  <TableCell>{this.formatDate(user.lastLogin)}</TableCell>
-                  <TableCell onClick={e => e.stopPropagation()} style={{ whiteSpace: 'nowrap' }}>
-                    <Tooltip title="Edit user">
-                      <IconButton size="small" onClick={() => this.props.onUserClick?.(user)}>
-                        <EditIcon fontSize="small" />
-                      </IconButton>
-                    </Tooltip>
+                  <TableCell>{user.program}</TableCell>
+                  <TableCell onClick={e => e.stopPropagation()} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                    <StatusBadge archived={user.archived}>{user.archived ? 'Archived' : 'Active'}</StatusBadge>
                     <Tooltip title={user.archived ? 'Activate user' : 'Archive user'}>
                       <Switch
                         size="small"
@@ -205,6 +203,14 @@ class AllUsersTable extends React.Component<Props, State> {
                       />
                     </Tooltip>
                   </TableCell>
+                  <TableCell>{this.formatDate(user.lastLogin)}</TableCell>
+                  <TableCell onClick={e => e.stopPropagation()} style={{ textAlign: 'center' }}>
+                    <Tooltip title="Edit user">
+                      <IconButton size="small" onClick={() => this.props.onUserClick?.(user)}>
+                        <EditIcon fontSize="small" />
+                      </IconButton>
+                    </Tooltip>
+                  </TableCell>
                 </TableRow>
               ))}
             </tbody>

src/constants/Types.tsx

@@ -235,5 +235,6 @@ export interface User {
   lastLogin?: Date,
   email?: string,
   school?: string,
+  program?: string,
   archived?: boolean
 }

src/views/protected/AdminViews/AllUsersPage.tsx

@@ -142,5 +142,5 @@ class AllUsersPage extends React.Component<Props, State> {
 }
 
 export default connect(state => ({
-  isAdmin: [Role.ADMIN, Role.PROGRAMLEADER, Role.SITELEADER].includes(state.coachState.role),
+  isAdmin: state.coachState.role === Role.ADMIN,
 }))(AllUsersPage)

src/views/protected/UsersViews/UsersPage.tsx

@@ -17,6 +17,7 @@ import Coaches from "../../../components/UsersComponents/Coaches";
 import Skeleton from "./Skeleton"
 import Archives from "../../../components/UsersComponents/Archives";
 import Sites from "../../../components/UsersComponents/Sites";
+import AllUsersTable from "../../../components/UsersComponents/AllUsersTable";
 
 
 const styles: object = {
@@ -108,6 +109,8 @@ interface State {
   currentPage: string
   propFilter: Array<string>
   sendToSites: Array<Object>
+  allUsers: Types.User[]
+  allUsersLoading: boolean
 }
 
 function checkCurrent(item: string) {
@@ -136,7 +139,9 @@ class UsersPage extends React.Component<Props, State> {
       archivedTeachers: [],
       archivedCoaches: [],
       propFilter: [],
-      sendToSites: []
+      sendToSites: [],
+      allUsers: [],
+      allUsersLoading: true
     }
   }
 
@@ -510,6 +515,10 @@ class UsersPage extends React.Component<Props, State> {
     let sendToSites = this.buildSiteData(coachData, siteData, programData, filter ? filter : []);
     this.setState({sendToSites: sendToSites});
 
+    // Load All Users if on that route and user is admin
+    if (this.props.userRole === 'admin' && location.pathname === '/LeadersAllUsers') {
+      this.loadAllUsers()
+    }
 
   }
 
@@ -546,6 +555,29 @@ class UsersPage extends React.Component<Props, State> {
     this.setState({programData: data})
   }
 
+  loadAllUsers = async () => {
+    if (this.props.userRole !== 'admin') return
+    this.setState({ allUsersLoading: true })
+    try {
+      const users = await this.context.getAllUsers()
+      this.setState({ allUsers: users, allUsersLoading: false })
+    } catch (e) {
+      console.error('Error loading all users:', e)
+      this.setState({ allUsersLoading: false })
+    }
+  }
+
+  handleAllUserClick = (user: Types.User) => {
+    // Could open edit dialog - for now just log
+    console.log('User clicked:', user)
+  }
+
+  handleAllUserArchive = async (user: Types.User) => {
+    await this.context.db.collection('users').doc(user.id).update({ archived: !user.archived })
+    this.setState(s => ({
+      allUsers: s.allUsers.map(u => u.id === user.id ? { ...u, archived: !user.archived } : u)
+    }))
+  }
 
   static propTypes = {
     classes: PropTypes.exact({
@@ -589,6 +621,16 @@ class UsersPage extends React.Component<Props, State> {
                             </li>
                         )
                     })}
+                    {userRole === 'admin' && (
+                      <li style={{float: 'left'}}>
+                        <a style={Styles.navLinks(checkCurrent('/LeadersAllUsers'))} onClick={() => {
+                          this.loadAllUsers()
+                          this.props.history.push('/LeadersAllUsers')
+                        }}>
+                          All Users
+                        </a>
+                      </li>
+                    )}
                 </ul>
                 <ul style={{listStyle: 'none'}}>
                   <li style={{float: 'right', marginRight:'3vw'}}>
@@ -604,6 +646,19 @@ class UsersPage extends React.Component<Props, State> {
                 <Grid item xs={12} style={{paddingTop:"1em"}}>
                   <Switch location={location} key={location.pathname}>
                     <Route path="/LeadersUsers" component={Skeleton} />
+                    <Route path="/LeadersAllUsers" render={() =>
+                      userRole === 'admin' ? (
+                        <div style={{ padding: '30px 30px 40px 30px' }}>
+                          <AllUsersTable
+                            users={this.state.allUsers}
+                            onUserClick={this.handleAllUserClick}
+                            onArchiveClick={this.handleAllUserArchive}
+                          />
+                        </div>
+                      ) : (
+                        <div style={{ padding: '2em' }}>You must be an admin to access this page.</div>
+                      )
+                    } />
                     <Route path="/LeadersCoaches" render={(props) =>
                       <Coaches
                         changePage={(pageName: string) => this.changePage(pageName)}