Add search, filter, and sort to User Management table

- Search bar filters users by name, email, or team assignment
- Group filter chips: All, Admin, Standard_User, Leadership, Read_Only, No Teams
- Sortable column headers (User, Group, Teams, Status, Last Login)
- Shows filtered count (e.g., '5 of 12 users')
- 'No Teams' filter quickly identifies users needing team assignment

frontend/src/components/UserManagement.js

@@ -9,7 +9,8 @@
 //   - JSX that uses the imported lucide-react icons (X, Plus, Edit2, Trash2, etc.)
 //   - The ConfirmModal integration for delete/group-change confirmations
 import React, { useState, useEffect } from 'react';
-import { X, Plus, Edit2, Trash2, Loader, AlertCircle, CheckCircle, User, Mail, Shield, Eye } from 'lucide-react';
+// ⚠️ CONVENTION: 'Search' icon is used below but missing from this import — add it to avoid a ReferenceError
+import { X, Plus, Edit2, Trash2, Loader, AlertCircle, CheckCircle, User, Mail, Shield, Eye, Search } from 'lucide-react';
 import { useAuth } from '../contexts/AuthContext';
 import ConfirmModal from './ConfirmModal';
 
@@ -188,6 +189,10 @@ export default function UserManagement({ onClose }) {
     const [formError, setFormError] = useState('');
     const [formSuccess, setFormSuccess] = useState('');
     const [pendingConfirm, setPendingConfirm] = useState(null);
+    const [searchTerm, setSearchTerm] = useState('');
+    const [groupFilter, setGroupFilter] = useState('');
+    const [sortField, setSortField] = useState('username');
+    const [sortDir, setSortDir] = useState('asc');
 
     useEffect(() => {
         fetchUsers();
@@ -208,6 +213,45 @@ export default function UserManagement({ onClose }) {
         }
     };
 
+    // Filtered and sorted user list
+    const filteredUsers = users
+        .filter(u => {
+            // Search filter
+            if (searchTerm) {
+                const term = searchTerm.toLowerCase();
+                const matchesName = u.username?.toLowerCase().includes(term);
+                const matchesEmail = u.email?.toLowerCase().includes(term);
+                const matchesTeam = u.teams?.some(t => t.toLowerCase().includes(term));
+                if (!matchesName && !matchesEmail && !matchesTeam) return false;
+            }
+            // Group filter
+            if (groupFilter === 'no-teams') return !u.teams || u.teams.length === 0;
+            if (groupFilter && u.group !== groupFilter) return false;
+            return true;
+        })
+        .sort((a, b) => {
+            let aVal, bVal;
+            switch (sortField) {
+                case 'username': aVal = a.username || ''; bVal = b.username || ''; break;
+                case 'group': aVal = a.group || ''; bVal = b.group || ''; break;
+                case 'teams': aVal = (a.teams || []).join(','); bVal = (b.teams || []).join(','); break;
+                case 'status': aVal = a.is_active ? 'a' : 'z'; bVal = b.is_active ? 'a' : 'z'; break;
+                case 'last_login': aVal = a.last_login || ''; bVal = b.last_login || ''; break;
+                default: aVal = a.username || ''; bVal = b.username || '';
+            }
+            const cmp = String(aVal).localeCompare(String(bVal));
+            return sortDir === 'asc' ? cmp : -cmp;
+        });
+
+    const handleSort = (field) => {
+        if (sortField === field) {
+            setSortDir(d => d === 'asc' ? 'desc' : 'asc');
+        } else {
+            setSortField(field);
+            setSortDir('asc');
+        }
+    };
+
     const doSubmit = async () => {
         setFormError('');
         setFormSuccess('');
@@ -581,6 +625,51 @@ export default function UserManagement({ onClose }) {
                         </div>
                     )}
 
+                    {/* Search, Filters & Sort Controls */}
+                    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem', marginBottom: '1rem' }}>
+                        {/* Search bar */}
+                        <div style={{ position: 'relative' }}>
+                            <Search style={{ position: 'absolute', left: '0.75rem', top: '50%', transform: 'translateY(-50%)', width: '14px', height: '14px', color: '#475569' }} />
+                            <input
+                                type="text"
+                                placeholder="Search by name, email, or team..."
+                                value={searchTerm}
+                                onChange={e => setSearchTerm(e.target.value)}
+                                style={{
+                                    width: '100%', padding: '0.5rem 0.75rem 0.5rem 2.25rem',
+                                    background: 'rgba(15, 23, 42, 0.6)',
+                                    border: '1px solid rgba(14, 165, 233, 0.2)',
+                                    borderRadius: '0.375rem', color: '#E2E8F0',
+                                    fontSize: '0.8rem', fontFamily: 'monospace', outline: 'none',
+                                }}
+                            />
+                        </div>
+                        {/* Group filter chips */}
+                        <div style={{ display: 'flex', gap: '0.375rem', flexWrap: 'wrap', alignItems: 'center' }}>
+                            <span style={{ fontSize: '0.7rem', color: '#64748B', marginRight: '0.25rem' }}>Filter:</span>
+                            {['', 'Admin', 'Standard_User', 'Leadership', 'Read_Only', 'no-teams'].map(g => (
+                                <button
+                                    key={g}
+                                    onClick={() => setGroupFilter(g)}
+                                    style={{
+                                        padding: '0.2rem 0.6rem', borderRadius: '0.25rem',
+                                        fontSize: '0.7rem', fontFamily: 'monospace', fontWeight: 600,
+                                        cursor: 'pointer',
+                                        border: groupFilter === g ? '1px solid #0EA5E9' : '1px solid rgba(14,165,233,0.2)',
+                                        background: groupFilter === g ? 'rgba(14,165,233,0.15)' : 'transparent',
+                                        color: groupFilter === g ? '#0EA5E9' : '#94A3B8',
+                                    }}
+                                >
+                                    {g === '' ? 'All' : g === 'no-teams' ? 'No Teams' : g.replace('_', ' ')}
+                                </button>
+                            ))}
+
+                            <span style={{ marginLeft: 'auto', fontSize: '0.7rem', color: '#64748B' }}>
+                                {filteredUsers.length} of {users.length} users
+                            </span>
+                        </div>
+                    </div>
+
                     {/* User Table */}
                     {loading ? (
                         <div style={{ textAlign: 'center', padding: '3rem 0' }}>
@@ -597,16 +686,16 @@ export default function UserManagement({ onClose }) {
                             <table style={{ width: '100%', borderCollapse: 'collapse' }}>
                                 <thead>
                                     <tr>
-                                        <th style={styles.th}>User</th>
+                                        <th style={{ ...styles.th, cursor: 'pointer' }} onClick={() => handleSort('username')}>User {sortField === 'username' ? (sortDir === 'asc' ? '▲' : '▼') : ''}</th>
-                                        <th style={styles.th}>Group</th>
+                                        <th style={{ ...styles.th, cursor: 'pointer' }} onClick={() => handleSort('group')}>Group {sortField === 'group' ? (sortDir === 'asc' ? '▲' : '▼') : ''}</th>
-                                        <th style={styles.th}>Teams</th>
+                                        <th style={{ ...styles.th, cursor: 'pointer' }} onClick={() => handleSort('teams')}>Teams {sortField === 'teams' ? (sortDir === 'asc' ? '▲' : '▼') : ''}</th>
-                                        <th style={styles.th}>Status</th>
+                                        <th style={{ ...styles.th, cursor: 'pointer' }} onClick={() => handleSort('status')}>Status {sortField === 'status' ? (sortDir === 'asc' ? '▲' : '▼') : ''}</th>
-                                        <th style={styles.th}>Last Login</th>
+                                        <th style={{ ...styles.th, cursor: 'pointer' }} onClick={() => handleSort('last_login')}>Last Login {sortField === 'last_login' ? (sortDir === 'asc' ? '▲' : '▼') : ''}</th>
                                         <th style={styles.thRight}>Actions</th>
                                     </tr>
                                 </thead>
                                 <tbody>
-                                    {users.map((user) => (
+                                    {filteredUsers.map((user) => (
                                         <tr key={user.id}
                                             onMouseEnter={e => e.currentTarget.style.background = 'rgba(14,165,233,0.05)'}
                                             onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>