v0.10.4 new UI changes

frontend/src/components/NavDrawer.jsx

@@ -79,8 +79,8 @@ export default function NavDrawer({ open, onClose, onMessages, onSchedule, onSch
         {canAccessTools && (
           <>
             <div className="nav-drawer-section-label admin">Tools</div>
-            {item(NAV_ICON.users, 'User Manager', onUsers)}
-            {features.groupManager && item(NAV_ICON.groups, 'Group Manager', onGroupManager)}
+            {item(NAV_ICON.users, 'User Manager', onUsers, { active: currentPage === 'users' })}
+            {features.groupManager && item(NAV_ICON.groups, 'Group Manager', onGroupManager, { active: currentPage === 'groups' })}
           </>
         )}
       </div>

frontend/src/pages/Chat.jsx

@@ -6,7 +6,8 @@ import { api } from '../utils/api.js';
 import Sidebar from '../components/Sidebar.jsx';
 import ChatWindow from '../components/ChatWindow.jsx';
 import ProfileModal from '../components/ProfileModal.jsx';
-import UserManagerModal from '../components/UserManagerModal.jsx';
+import UserManagerPage from './UserManagerPage.jsx';
+import GroupManagerPage from './GroupManagerPage.jsx';
 import HostPanel from '../components/HostPanel.jsx';
 import SettingsModal from '../components/SettingsModal.jsx';
 import BrandingModal from '../components/BrandingModal.jsx';
@@ -15,9 +16,7 @@ import GlobalBar from '../components/GlobalBar.jsx';
 import AboutModal from '../components/AboutModal.jsx';
 import HelpModal from '../components/HelpModal.jsx';
 import NavDrawer from '../components/NavDrawer.jsx';
-import GroupManagerModal from '../components/GroupManagerModal.jsx';
 import SchedulePage from '../components/SchedulePage.jsx';
-import MobileGroupManager from '../components/MobileGroupManager.jsx';
 import './Chat.css';
 
 function urlBase64ToUint8Array(base64String) {
@@ -334,6 +333,54 @@ export default function Chat() {
 
   const isToolManager = user?.role === 'admin' || (features.teamToolManagers || []).some(gid => (features.userGroupMemberships || []).includes(gid));
 
+  if (page === 'users') {
+    return (
+      <div className="chat-layout">
+        <GlobalBar isMobile={isMobile} showSidebar={true} onBurger={() => setDrawerOpen(true)} />
+        <div className="chat-body" style={{ overflow: 'hidden' }}>
+          <UserManagerPage />
+        </div>
+        <NavDrawer
+          open={drawerOpen} onClose={() => setDrawerOpen(false)}
+          onMessages={() => { setDrawerOpen(false); setPage('chat'); }}
+          onSchedule={() => { setDrawerOpen(false); setPage('schedule'); }}
+          onGroupManager={() => { setDrawerOpen(false); setPage('groups'); }}
+          onBranding={() => { setDrawerOpen(false); setModal('branding'); }}
+          onSettings={() => { setDrawerOpen(false); setModal('settings'); }}
+          onUsers={() => { setDrawerOpen(false); setPage('users'); }}
+          onHostPanel={() => { setDrawerOpen(false); setPage('hostpanel'); }}
+          features={features} currentPage={page} isMobile={isMobile}
+        />
+        {modal === 'profile'  && <ProfileModal onClose={() => setModal(null)} />}
+        {modal === 'settings' && <SettingsModal onClose={() => setModal(null)} onFeaturesChanged={setFeatures} />}
+      </div>
+    );
+  }
+
+  if (page === 'groups') {
+    return (
+      <div className="chat-layout">
+        <GlobalBar isMobile={isMobile} showSidebar={true} onBurger={() => setDrawerOpen(true)} />
+        <div className="chat-body" style={{ overflow: 'hidden' }}>
+          <GroupManagerPage />
+        </div>
+        <NavDrawer
+          open={drawerOpen} onClose={() => setDrawerOpen(false)}
+          onMessages={() => { setDrawerOpen(false); setPage('chat'); }}
+          onSchedule={() => { setDrawerOpen(false); setPage('schedule'); }}
+          onGroupManager={() => { setDrawerOpen(false); setPage('groups'); }}
+          onBranding={() => { setDrawerOpen(false); setModal('branding'); }}
+          onSettings={() => { setDrawerOpen(false); setModal('settings'); }}
+          onUsers={() => { setDrawerOpen(false); setPage('users'); }}
+          onHostPanel={() => { setDrawerOpen(false); setPage('hostpanel'); }}
+          features={features} currentPage={page} isMobile={isMobile}
+        />
+        {modal === 'profile'  && <ProfileModal onClose={() => setModal(null)} />}
+        {modal === 'settings' && <SettingsModal onClose={() => setModal(null)} onFeaturesChanged={setFeatures} />}
+      </div>
+    );
+  }
+
   if (page === 'hostpanel') {
     return (
       <div className="chat-layout">
@@ -382,20 +429,19 @@ export default function Chat() {
           onMessages={() => { setDrawerOpen(false); setPage('chat'); }}
           onSchedule={() => { setDrawerOpen(false); setPage('schedule'); }}
           onScheduleManager={() => { setDrawerOpen(false); setPage('schedule'); }}
-          onGroupManager={() => { setDrawerOpen(false); if(isMobile) setModal('mobilegroupmanager'); else setModal('groupmanager'); }}
+          onGroupManager={() => { setDrawerOpen(false); setPage('groups'); }}
           onBranding={() => { setDrawerOpen(false); setModal('branding'); }}
           onSettings={() => { setDrawerOpen(false); setModal('settings'); }}
-          onUsers={() => { setDrawerOpen(false); setModal('users'); }}
+          onUsers={() => { setDrawerOpen(false); setPage('users'); }}
           onHostPanel={() => { setDrawerOpen(false); setPage('hostpanel'); }}
           features={features}
           currentPage={page}
           isMobile={isMobile}
         />
         {modal === 'profile'      && <ProfileModal onClose={() => setModal(null)} />}
-        {modal === 'users'        && <UserManagerModal onClose={() => setModal(null)} />}
         {modal === 'settings'     && <SettingsModal onClose={() => setModal(null)} onFeaturesChanged={setFeatures} />}
         {modal === 'branding'     && <BrandingModal onClose={() => setModal(null)} />}
-        {modal === 'groupmanager' && <GroupManagerModal onClose={() => setModal(null)} />}
+
         {modal === 'mobilegroupmanager' && (
           <div style={{ position:'fixed',inset:0,zIndex:200,background:'var(--background)' }}>
             <MobileGroupManager onClose={() => setModal(null)}/>
@@ -422,10 +468,10 @@ export default function Chat() {
             unreadGroups={unreadGroups}
             onNewChat={() => setModal('newchat')}
             onProfile={() => setModal('profile')}
-            onUsers={() => setModal('users')}
+            onUsers={() => setPage('users')}
             onSettings={() => setModal('settings')}
             onBranding={() => setModal('branding')}
-            onGroupManager={() => isMobile ? setModal('mobilegroupmanager') : setModal('groupmanager')}
+            onGroupManager={() => setPage('groups')}
             features={features}
             onGroupsUpdated={loadGroups}
             isMobile={isMobile}
@@ -452,25 +498,18 @@ export default function Chat() {
         onMessages={() => { setDrawerOpen(false); setPage('chat'); }}
         onSchedule={() => { setDrawerOpen(false); setPage('schedule'); }}
         onScheduleManager={() => { setDrawerOpen(false); setPage('schedule'); }}
-        onGroupManager={() => { setDrawerOpen(false); if(isMobile) setModal('mobilegroupmanager'); else setModal('groupmanager'); }}
+        onGroupManager={() => { setDrawerOpen(false); setPage('groups'); }}
         onBranding={() => { setDrawerOpen(false); setModal('branding'); }}
         onSettings={() => { setDrawerOpen(false); setModal('settings'); }}
-        onUsers={() => { setDrawerOpen(false); setModal('users'); }}
+        onUsers={() => { setDrawerOpen(false); setPage('users'); }}
         onHostPanel={() => { setDrawerOpen(false); setPage('hostpanel'); }}
         features={features}
         currentPage={page}
         isMobile={isMobile}
       />
       {modal === 'profile' && <ProfileModal onClose={() => setModal(null)} />}
-      {modal === 'users' && <UserManagerModal onClose={() => setModal(null)} />}
       {modal === 'settings' && <SettingsModal onClose={() => setModal(null)} onFeaturesChanged={setFeatures} />}
       {modal === 'branding' && <BrandingModal onClose={() => setModal(null)} />}
-      {modal === 'groupmanager' && <GroupManagerModal onClose={() => setModal(null)} />}
-      {modal === 'mobilegroupmanager' && (
-        <div style={{ position:'fixed',inset:0,zIndex:200,background:'var(--background)' }}>
-          <MobileGroupManager onClose={() => setModal(null)}/>
-        </div>
-      )}
 
       {modal === 'newchat' && <NewChatModal onClose={() => setModal(null)} onCreated={(g) => { loadGroups(); setModal(null); setActiveGroupId(g.id); }} />}
       {modal === 'about' && <AboutModal onClose={() => setModal(null)} />}

frontend/src/pages/GroupManagerPage.jsx

@@ -0,0 +1,305 @@
+import { useState, useEffect, useCallback } from 'react';
+import { api } from '../utils/api.js';
+import { useToast } from '../contexts/ToastContext.jsx';
+import Avatar from '../components/Avatar.jsx';
+
+// ── Shared sub-components (identical logic to modal versions) ─────────────────
+
+function UserCheckList({ allUsers, selectedIds, onChange }) {
+  const [search, setSearch] = useState('');
+  const filtered = allUsers.filter(u => (u.display_name||u.name).toLowerCase().includes(search.toLowerCase()));
+  return (
+    <div>
+      <input className="input" placeholder="Search users…" value={search} onChange={e => setSearch(e.target.value)}
+        style={{ marginBottom:8 }} autoComplete="new-password" />
+      <div style={{ maxHeight:220, overflowY:'auto', border:'1px solid var(--border)', borderRadius:'var(--radius)' }}>
+        {filtered.map(u => (
+          <label key={u.id} style={{ display:'flex', alignItems:'center', gap:10, padding:'8px 12px', borderBottom:'1px solid var(--border)', cursor:'pointer' }}>
+            <input type="checkbox" checked={selectedIds.has(u.id)} onChange={() => { const n=new Set(selectedIds); n.has(u.id)?n.delete(u.id):n.add(u.id); onChange(n); }}
+              style={{ accentColor:'var(--primary)', width:15, height:15 }} />
+            <Avatar user={u} size="sm" />
+            <span className="flex-1 text-sm">{u.display_name||u.name}</span>
+            <span className="text-xs" style={{ color:'var(--text-tertiary)' }}>{u.role}</span>
+          </label>
+        ))}
+        {filtered.length === 0 && <div style={{ padding:16, textAlign:'center', color:'var(--text-tertiary)', fontSize:13 }}>No users found</div>}
+      </div>
+    </div>
+  );
+}
+
+function GroupCheckList({ allGroups, selectedIds, onChange }) {
+  return (
+    <div style={{ border:'1px solid var(--border)', borderRadius:'var(--radius)', maxHeight:220, overflowY:'auto' }}>
+      {allGroups.map(g => (
+        <label key={g.id} style={{ display:'flex', alignItems:'center', gap:10, padding:'8px 12px', borderBottom:'1px solid var(--border)', cursor:'pointer' }}>
+          <input type="checkbox" checked={selectedIds.has(g.id)} onChange={() => { const n=new Set(selectedIds); n.has(g.id)?n.delete(g.id):n.add(g.id); onChange(n); }}
+            style={{ accentColor:'var(--primary)', width:15, height:15 }} />
+          <span className="flex-1 text-sm">{g.name}</span>
+          <span className="text-xs" style={{ color:'var(--text-tertiary)' }}>{g.member_count} member{g.member_count!==1?'s':''}</span>
+        </label>
+      ))}
+      {allGroups.length === 0 && <div style={{ padding:16, textAlign:'center', color:'var(--text-tertiary)', fontSize:13 }}>No user groups yet</div>}
+    </div>
+  );
+}
+
+// ── All Groups tab ────────────────────────────────────────────────────────────
+function AllGroupsTab({ allUsers, onRefresh }) {
+  const toast = useToast();
+  const [groups, setGroups] = useState([]);
+  const [selected, setSelected] = useState(null);
+  const [savedMembers, setSavedMembers] = useState(new Set());
+  const [members, setMembers] = useState(new Set());
+  const [editName, setEditName] = useState('');
+  const [saving, setSaving] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+  const [showDelete, setShowDelete] = useState(false);
+
+  const load = useCallback(() =>
+    api.getUserGroups().then(({ groups }) => setGroups(groups)).catch(() => {}), []);
+  useEffect(() => { load(); }, [load]);
+
+  const selectGroup = async (g) => {
+    setShowDelete(false);
+    const { members: mems } = await api.getUserGroup(g.id);
+    const ids = new Set(mems.map(m => m.id));
+    setSelected(g); setEditName(g.name); setMembers(ids); setSavedMembers(ids);
+  };
+  const clearSelection = () => { setSelected(null); setEditName(''); setMembers(new Set()); setSavedMembers(new Set()); setShowDelete(false); };
+
+  const handleSave = async () => {
+    if (!editName.trim()) return toast('Name required', 'error');
+    setSaving(true);
+    try {
+      if (selected) {
+        await api.updateUserGroup(selected.id, { name: editName.trim(), memberIds: [...members] });
+        toast('Group updated', 'success');
+        const { members: fresh } = await api.getUserGroup(selected.id);
+        const freshIds = new Set(fresh.map(m => m.id));
+        setSavedMembers(freshIds); setMembers(freshIds);
+        setSelected(prev => ({ ...prev, name: editName.trim() }));
+      } else {
+        await api.createUserGroup({ name: editName.trim(), memberIds: [...members] });
+        toast(`Group "${editName.trim()}" created`, 'success');
+        clearSelection();
+      }
+      load(); onRefresh();
+    } catch(e) { toast(e.message, 'error'); }
+    finally { setSaving(false); }
+  };
+
+  const handleDelete = async () => {
+    setDeleting(true);
+    try { await api.deleteUserGroup(selected.id); toast('Group deleted', 'success'); clearSelection(); load(); onRefresh(); }
+    catch(e) { toast(e.message, 'error'); }
+    finally { setDeleting(false); }
+  };
+
+  const canDelete = selected && savedMembers.size === 0;
+  const isCreating = !selected;
+
+  return (
+    <div style={{ display:'flex', gap:0, height:'100%', minHeight:0 }}>
+      {/* Sidebar list */}
+      <div style={{ width:220, flexShrink:0, borderRight:'1px solid var(--border)', overflowY:'auto', padding:'12px 8px' }}>
+        <div style={{ fontSize:11, fontWeight:700, letterSpacing:'0.8px', textTransform:'uppercase', color:'var(--text-tertiary)', marginBottom:8, paddingLeft:4 }}>User Groups</div>
+        <button onClick={clearSelection} style={{ display:'block', width:'100%', textAlign:'left', padding:'8px 10px', borderRadius:'var(--radius)', border:'none',
+          background:isCreating?'var(--primary-light)':'transparent', color:isCreating?'var(--primary)':'var(--text-secondary)',
+          cursor:'pointer', fontWeight:isCreating?600:400, fontSize:13, marginBottom:4 }}>+ New Group</button>
+        {groups.map(g => (
+          <button key={g.id} onClick={() => selectGroup(g)} style={{ display:'block', width:'100%', textAlign:'left', padding:'8px 10px', borderRadius:'var(--radius)', border:'none',
+            background:selected?.id===g.id?'var(--primary-light)':'transparent', color:selected?.id===g.id?'var(--primary)':'var(--text-primary)',
+            cursor:'pointer', fontWeight:selected?.id===g.id?600:400, fontSize:13, marginBottom:2 }}>
+            <div style={{ display:'flex', alignItems:'center', gap:8 }}>
+              <div style={{ width:26, height:26, borderRadius:6, background:'var(--primary)', display:'flex', alignItems:'center', justifyContent:'center', color:'white', fontSize:9, fontWeight:700, flexShrink:0 }}>UG</div>
+              <div><div style={{ fontSize:13 }}>{g.name}</div><div style={{ fontSize:11, color:'var(--text-tertiary)' }}>{g.member_count} member{g.member_count!==1?'s':''}</div></div>
+            </div>
+          </button>
+        ))}
+        {groups.length===0 && <div style={{ fontSize:13, color:'var(--text-tertiary)', padding:'8px 4px' }}>No groups yet</div>}
+      </div>
+
+      {/* Form */}
+      <div style={{ flex:1, overflowY:'auto', padding:'16px 24px' }}>
+        <div style={{ display:'flex', flexDirection:'column', gap:18, maxWidth:520 }}>
+          <div>
+            <label className="settings-section-label">Group Name</label>
+            <input className="input" value={editName} onChange={e => setEditName(e.target.value)}
+              placeholder="e.g. Coaches" style={{ marginTop:6 }} autoComplete="new-password" />
+            {isCreating && <p style={{ fontSize:12, color:'var(--text-tertiary)', marginTop:5 }}>A matching Direct Message group will be created automatically.</p>}
+          </div>
+          <div>
+            <label className="settings-section-label">Members</label>
+            <div style={{ marginTop:6 }}><UserCheckList allUsers={allUsers} selectedIds={members} onChange={setMembers} /></div>
+            <p style={{ fontSize:12, color:'var(--text-tertiary)', marginTop:5 }}>{members.size} selected</p>
+          </div>
+          <div style={{ display:'flex', gap:8, alignItems:'center', flexWrap:'wrap' }}>
+            <button className="btn btn-primary btn-sm" onClick={handleSave} disabled={saving}>{saving?'Saving…':isCreating?'Create Group':'Save Changes'}</button>
+            {!isCreating && <button className="btn btn-secondary btn-sm" onClick={clearSelection}>Cancel</button>}
+            {!isCreating && (
+              <button className="btn btn-sm" style={{ marginLeft:'auto', background:canDelete?'var(--error)':'var(--surface-variant)', color:canDelete?'white':'var(--text-tertiary)', cursor:canDelete?'pointer':'not-allowed' }}
+                onClick={canDelete ? () => setShowDelete(true) : undefined} disabled={!canDelete}
+                title={canDelete?'Delete group':'Remove all members before deleting'}>Delete Group</button>
+            )}
+          </div>
+          {showDelete && (
+            <div style={{ background:'#fce8e6', border:'1px solid #f5c6c2', borderRadius:'var(--radius)', padding:'14px 16px' }}>
+              <p style={{ fontSize:13, color:'var(--error)', marginBottom:12 }}>Delete <strong>{selected?.name}</strong>? This also deletes the associated direct message group.</p>
+              <div style={{ display:'flex', gap:8 }}>
+                <button className="btn btn-sm" style={{ background:'var(--error)', color:'white' }} onClick={handleDelete} disabled={deleting}>{deleting?'Deleting…':'Yes, Delete'}</button>
+                <button className="btn btn-secondary btn-sm" onClick={() => setShowDelete(false)}>Cancel</button>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ── Direct Messages tab ───────────────────────────────────────────────────────
+function DirectMessagesTab({ allUserGroups, onRefresh, refreshKey }) {
+  const toast = useToast();
+  const [dms, setDms] = useState([]);
+  const [selected, setSelected] = useState(null);
+  const [savedGroupIds, setSavedGroupIds] = useState(new Set());
+  const [groupIds, setGroupIds] = useState(new Set());
+  const [dmName, setDmName] = useState('');
+  const [saving, setSaving] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+  const [showDelete, setShowDelete] = useState(false);
+
+  const load = useCallback(() =>
+    api.getMultiGroupDms().then(({ dms }) => setDms(dms||[])).catch(() => {}), []);
+  useEffect(() => { load(); }, [load, refreshKey]);
+
+  const clearSelection = () => { setSelected(null); setDmName(''); setGroupIds(new Set()); setSavedGroupIds(new Set()); setShowDelete(false); };
+  const selectDm = (dm) => {
+    setShowDelete(false); setSelected(dm); setDmName(dm.name);
+    const ids = new Set(dm.memberGroupIds||[]); setGroupIds(ids); setSavedGroupIds(ids);
+  };
+
+  const handleSave = async () => {
+    if (!dmName.trim()) return toast('Name required', 'error');
+    if (!selected && groupIds.size < 2) return toast('Select at least two user groups', 'error');
+    setSaving(true);
+    try {
+      if (selected) {
+        await api.updateMultiGroupDm(selected.id, { name:dmName.trim(), userGroupIds:[...groupIds] });
+        toast('Multi-group DM updated', 'success');
+        const freshDms = await api.getMultiGroupDms();
+        const fresh = freshDms.dms.find(d => d.id===selected.id);
+        if (fresh) { const ids=new Set(fresh.memberGroupIds||[]); setSavedGroupIds(ids); setGroupIds(ids); setSelected(fresh); }
+      } else {
+        await api.createMultiGroupDm({ name:dmName.trim(), userGroupIds:[...groupIds] });
+        toast(`"${dmName.trim()}" created`, 'success');
+        clearSelection();
+      }
+      load(); onRefresh();
+    } catch(e) { toast(e.message, 'error'); }
+    finally { setSaving(false); }
+  };
+
+  const handleDelete = async () => {
+    setDeleting(true);
+    try { await api.deleteMultiGroupDm(selected.id); toast('Deleted', 'success'); clearSelection(); load(); onRefresh(); }
+    catch(e) { toast(e.message, 'error'); }
+    finally { setDeleting(false); }
+  };
+
+  const canDelete = selected && savedGroupIds.size === 0;
+  const isCreating = !selected;
+
+  return (
+    <div style={{ display:'flex', gap:0, height:'100%', minHeight:0 }}>
+      <div style={{ width:220, flexShrink:0, borderRight:'1px solid var(--border)', overflowY:'auto', padding:'12px 8px' }}>
+        <div style={{ fontSize:11, fontWeight:700, letterSpacing:'0.8px', textTransform:'uppercase', color:'var(--text-tertiary)', marginBottom:8, paddingLeft:4 }}>Multi-Group DMs</div>
+        <button onClick={clearSelection} style={{ display:'block', width:'100%', textAlign:'left', padding:'8px 10px', borderRadius:'var(--radius)', border:'none',
+          background:isCreating?'var(--primary-light)':'transparent', color:isCreating?'var(--primary)':'var(--text-secondary)',
+          cursor:'pointer', fontWeight:isCreating?600:400, fontSize:13, marginBottom:4 }}>+ New Multi-Group DM</button>
+        {dms.map(dm => (
+          <button key={dm.id} onClick={() => selectDm(dm)} style={{ display:'block', width:'100%', textAlign:'left', padding:'8px 10px', borderRadius:'var(--radius)', border:'none',
+            background:selected?.id===dm.id?'var(--primary-light)':'transparent', color:selected?.id===dm.id?'var(--primary)':'var(--text-primary)',
+            cursor:'pointer', fontWeight:selected?.id===dm.id?600:400, fontSize:13, marginBottom:2 }}>
+            <div style={{ display:'flex', alignItems:'center', gap:8 }}>
+              <div style={{ width:26, height:26, borderRadius:6, background:'var(--primary)', display:'flex', alignItems:'center', justifyContent:'center', color:'white', fontSize:9, fontWeight:700, flexShrink:0 }}>MG</div>
+              <div><div style={{ fontSize:13 }}>{dm.name}</div><div style={{ fontSize:11, color:'var(--text-tertiary)' }}>{dm.group_count} group{dm.group_count!==1?'s':''}</div></div>
+            </div>
+          </button>
+        ))}
+        {dms.length===0 && <div style={{ fontSize:13, color:'var(--text-tertiary)', padding:'8px 4px' }}>No multi-group DMs yet</div>}
+      </div>
+      <div style={{ flex:1, overflowY:'auto', padding:'16px 24px' }}>
+        <div style={{ display:'flex', flexDirection:'column', gap:18, maxWidth:520 }}>
+          <div>
+            <label className="settings-section-label">DM Name</label>
+            <input className="input" value={dmName} onChange={e => setDmName(e.target.value)} placeholder="e.g. Coaches + Players" style={{ marginTop:6 }} autoComplete="new-password" />
+          </div>
+          <div>
+            <label className="settings-section-label">Member Groups</label>
+            <p style={{ fontSize:12, color:'var(--text-tertiary)', margin:'4px 0 8px' }}>Select two or more user groups. All their members get access to this conversation.</p>
+            <GroupCheckList allGroups={allUserGroups} selectedIds={groupIds} onChange={setGroupIds} />
+            <p style={{ fontSize:12, color:'var(--text-tertiary)', marginTop:5 }}>{groupIds.size} group{groupIds.size!==1?'s':''} selected</p>
+          </div>
+          <div style={{ display:'flex', gap:8, alignItems:'center', flexWrap:'wrap' }}>
+            <button className="btn btn-primary btn-sm" onClick={handleSave} disabled={saving}>{saving?'Saving…':isCreating?'Create Multi-Group DM':'Save Changes'}</button>
+            {!isCreating && <button className="btn btn-secondary btn-sm" onClick={clearSelection}>Cancel</button>}
+            {!isCreating && (
+              <button className="btn btn-sm" style={{ marginLeft:'auto', background:canDelete?'var(--error)':'var(--surface-variant)', color:canDelete?'white':'var(--text-tertiary)', cursor:canDelete?'pointer':'not-allowed' }}
+                onClick={canDelete ? () => setShowDelete(true) : undefined} disabled={!canDelete}
+                title={canDelete?'Delete':'Remove all member groups first'}>Delete</button>
+            )}
+          </div>
+          {showDelete && (
+            <div style={{ background:'#fce8e6', border:'1px solid #f5c6c2', borderRadius:'var(--radius)', padding:'14px 16px' }}>
+              <p style={{ fontSize:13, color:'var(--error)', marginBottom:12 }}>Delete <strong>{selected?.name}</strong>? Also deletes the associated DM group.</p>
+              <div style={{ display:'flex', gap:8 }}>
+                <button className="btn btn-sm" style={{ background:'var(--error)', color:'white' }} onClick={handleDelete} disabled={deleting}>{deleting?'Deleting…':'Yes, Delete'}</button>
+                <button className="btn btn-secondary btn-sm" onClick={() => setShowDelete(false)}>Cancel</button>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ── Main page ─────────────────────────────────────────────────────────────────
+export default function GroupManagerPage() {
+  const [tab, setTab] = useState('all');
+  const [allUsers, setAllUsers] = useState([]);
+  const [allUserGroups, setAllUserGroups] = useState([]);
+  const [refreshKey, setRefreshKey] = useState(0);
+  const onRefresh = () => setRefreshKey(k => k+1);
+
+  useEffect(() => {
+    api.searchUsers('').then(({ users }) => setAllUsers(users.filter(u => u.status==='active'))).catch(() => {});
+    api.getUserGroups().then(({ groups }) => setAllUserGroups(groups)).catch(() => {});
+  }, [refreshKey]);
+
+  return (
+    <div style={{ flex:1, display:'flex', flexDirection:'column', overflow:'hidden', background:'var(--background)' }}>
+      {/* Page header */}
+      <div style={{ background:'var(--surface)', borderBottom:'1px solid var(--border)', padding:'0 24px', flexShrink:0 }}>
+        <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', height:52 }}>
+          <div style={{ display:'flex', alignItems:'center', gap:10 }}>
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" strokeWidth="2"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/></svg>
+            <span style={{ fontWeight:700, fontSize:15 }}>Group Manager</span>
+          </div>
+          <div style={{ display:'flex', gap:8 }}>
+            <button className={`btn btn-sm ${tab==='all'?'btn-primary':'btn-secondary'}`} onClick={() => setTab('all')}>User Groups</button>
+            <button className={`btn btn-sm ${tab==='dm'?'btn-primary':'btn-secondary'}`} onClick={() => setTab('dm')}>Multi-Group DMs</button>
+          </div>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div style={{ flex:1, display:'flex', overflow:'hidden' }}>
+        {tab==='all' && <AllGroupsTab allUsers={allUsers} onRefresh={onRefresh} />}
+        {tab==='dm'  && <DirectMessagesTab allUserGroups={allUserGroups} onRefresh={onRefresh} refreshKey={refreshKey} />}
+      </div>
+    </div>
+  );
+}

frontend/src/pages/UserManagerPage.jsx

@@ -0,0 +1,372 @@
+import { useState, useEffect, useRef } from 'react';
+import { useToast } from '../contexts/ToastContext.jsx';
+import { api } from '../utils/api.js';
+import Avatar from '../components/Avatar.jsx';
+
+function isValidEmail(e) { return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e); }
+
+function parseCSV(text) {
+  const lines = text.split(/\r?\n/).map(l => l.trim()).filter(Boolean);
+  const rows = [], invalid = [];
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    if (i === 0 && /^name\s*,/i.test(line)) continue;
+    const parts = line.split(',').map(p => p.trim());
+    if (parts.length < 2 || parts.length > 4) { invalid.push({ line, reason: 'Must have 2–4 comma-separated fields' }); continue; }
+    const [name, email, password, role] = parts;
+    if (!name || !/\S+\s+\S+/.test(name)) { invalid.push({ line, reason: 'Name must be two words (First Last)' }); continue; }
+    if (!email || !isValidEmail(email)) { invalid.push({ line, reason: `Invalid email: "${email}"` }); continue; }
+    rows.push({ name: name.trim(), email: email.trim().toLowerCase(), password: (password || '').trim(), role: (role || 'member').trim().toLowerCase() });
+  }
+  return { rows, invalid };
+}
+
+// ── User row (accordion) ──────────────────────────────────────────────────────
+function UserRow({ u, onUpdated }) {
+  const toast = useToast();
+  const [open, setOpen] = useState(false);
+  const [resetPw, setResetPw] = useState('');
+  const [showReset, setShowReset] = useState(false);
+  const [editName, setEditName] = useState(false);
+  const [nameVal, setNameVal] = useState(u.name);
+  const [roleWarning, setRoleWarning] = useState(false);
+
+  const handleRole = async (role) => {
+    if (!role) { setRoleWarning(true); return; }
+    setRoleWarning(false);
+    try { await api.updateRole(u.id, role); toast('Role updated', 'success'); onUpdated(); }
+    catch (e) { toast(e.message, 'error'); }
+  };
+  const handleResetPw = async () => {
+    if (!resetPw || resetPw.length < 6) return toast('Min 6 characters', 'error');
+    try { await api.resetPassword(u.id, resetPw); toast('Password reset', 'success'); setShowReset(false); setResetPw(''); onUpdated(); }
+    catch (e) { toast(e.message, 'error'); }
+  };
+  const handleSaveName = async () => {
+    if (!nameVal.trim()) return toast('Name cannot be empty', 'error');
+    try {
+      const { name } = await api.updateName(u.id, nameVal.trim());
+      toast(name !== nameVal.trim() ? `Saved as "${name}"` : 'Name updated', 'success');
+      setEditName(false); onUpdated();
+    } catch (e) { toast(e.message, 'error'); }
+  };
+  const handleSuspend = async () => {
+    if (!confirm(`Suspend ${u.name}?`)) return;
+    try { await api.suspendUser(u.id); toast('User suspended', 'success'); onUpdated(); }
+    catch (e) { toast(e.message, 'error'); }
+  };
+  const handleActivate = async () => {
+    try { await api.activateUser(u.id); toast('User activated', 'success'); onUpdated(); }
+    catch (e) { toast(e.message, 'error'); }
+  };
+  const handleDelete = async () => {
+    if (u.role === 'admin') return toast('Demote to member before deleting an admin', 'error');
+    if (!confirm(`Delete ${u.name}? Their messages will remain but they cannot log in.`)) return;
+    try { await api.deleteUser(u.id); toast('User deleted', 'success'); onUpdated(); }
+    catch (e) { toast(e.message, 'error'); }
+  };
+
+  return (
+    <div style={{ borderBottom: '1px solid var(--border)' }}>
+      <button onClick={() => { setOpen(o => !o); setShowReset(false); setEditName(false); }}
+        style={{ width:'100%', display:'flex', alignItems:'center', gap:10, padding:'10px 12px',
+          background:'none', border:'none', cursor:'pointer', textAlign:'left', color:'var(--text-primary)' }}>
+        <Avatar user={u} size="sm" />
+        <div style={{ flex:1, minWidth:0 }}>
+          <div style={{ display:'flex', alignItems:'center', gap:6, flexWrap:'wrap' }}>
+            <span style={{ fontWeight:600, fontSize:14 }}>{u.display_name || u.name}</span>
+            {u.display_name && <span style={{ fontSize:12, color:'var(--text-tertiary)' }}>({u.name})</span>}
+            <span className={`role-badge role-${u.role}`}>{u.role}</span>
+            {u.status !== 'active' && <span className="role-badge status-suspended">{u.status}</span>}
+            {!!u.is_default_admin && <span className="text-xs" style={{ color:'var(--text-tertiary)' }}>Default Admin</span>}
+          </div>
+          <div style={{ fontSize:12, color:'var(--text-secondary)', marginTop:1, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{u.email}</div>
+          <div style={{ fontSize:11, color:'var(--text-tertiary)', marginTop:1 }}>
+            Last online: {(() => {
+              if (!u.last_online) return 'Never';
+              const d = new Date(u.last_online); const today = new Date(); today.setHours(0,0,0,0);
+              const yesterday = new Date(today); yesterday.setDate(yesterday.getDate()-1);
+              const dd = new Date(d); dd.setHours(0,0,0,0);
+              if (dd >= today) return 'Today'; if (dd >= yesterday) return 'Yesterday';
+              return dd.toISOString().slice(0,10);
+            })()}
+          </div>
+          {!!u.must_change_password && <div className="text-xs" style={{ color:'var(--warning)' }}>⚠ Must change password</div>}
+        </div>
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"
+          style={{ flexShrink:0, transition:'transform 0.2s', transform:open?'rotate(180deg)':'none', color:'var(--text-tertiary)' }}>
+          <polyline points="6 9 12 15 18 9"/>
+        </svg>
+      </button>
+
+      {open && !u.is_default_admin && (
+        <div style={{ padding:'4px 12px 14px 52px', display:'flex', flexDirection:'column', gap:10 }}>
+          {editName ? (
+            <div style={{ display:'flex', gap:6, alignItems:'center' }}>
+              <input className="input" style={{ flex:1, fontSize:13, padding:'5px 8px' }}
+                value={nameVal} onChange={e => setNameVal(e.target.value)}
+                onKeyDown={e => { if(e.key==='Enter') handleSaveName(); if(e.key==='Escape'){setEditName(false);setNameVal(u.name);} }}
+                autoComplete="new-password" />
+              <button className="btn btn-primary btn-sm" onClick={handleSaveName}>Save</button>
+              <button className="btn btn-secondary btn-sm" onClick={() => { setEditName(false); setNameVal(u.name); }}>✕</button>
+            </div>
+          ) : (
+            <button className="btn btn-secondary btn-sm" style={{ display:'flex', alignItems:'center', gap:5, alignSelf:'flex-start' }}
+              onClick={() => { setEditName(true); setShowReset(false); }}>
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
+              Edit Name
+            </button>
+          )}
+
+          <div style={{ display:'flex', flexDirection:'column', alignItems:'flex-start', gap:4 }}>
+            <select value={roleWarning ? '' : u.role} onChange={e => handleRole(e.target.value)}
+              className="input" style={{ width:140, padding:'5px 8px', fontSize:13, borderColor:roleWarning?'#e53935':undefined }}>
+              <option value="" disabled>User Role</option>
+              <option value="member">Member</option>
+              <option value="admin">Admin</option>
+            </select>
+            {roleWarning && <span style={{ fontSize:12, color:'#e53935' }}>Role Required</span>}
+          </div>
+
+          {showReset ? (
+            <div style={{ display:'flex', gap:6, alignItems:'center' }}>
+              <input className="input" style={{ flex:1, fontSize:13, padding:'5px 8px' }}
+                type="text" placeholder="New password (min 6)" value={resetPw}
+                onChange={e => setResetPw(e.target.value)}
+                onKeyDown={e => { if(e.key==='Enter') handleResetPw(); if(e.key==='Escape'){setShowReset(false);setResetPw('');} }}
+                autoComplete="new-password" />
+              <button className="btn btn-primary btn-sm" onClick={handleResetPw}>Set</button>
+              <button className="btn btn-secondary btn-sm" onClick={() => { setShowReset(false); setResetPw(''); }}>✕</button>
+            </div>
+          ) : (
+            <button className="btn btn-secondary btn-sm" style={{ display:'flex', alignItems:'center', gap:5, alignSelf:'flex-start' }}
+              onClick={() => { setShowReset(true); setEditName(false); }}>
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
+              Reset Password
+            </button>
+          )}
+
+          <div style={{ display:'flex', gap:6, flexWrap:'wrap' }}>
+            {u.status==='active' ? (
+              <button className="btn btn-secondary btn-sm" onClick={handleSuspend}>Suspend</button>
+            ) : u.status==='suspended' ? (
+              <button className="btn btn-secondary btn-sm" style={{ color:'var(--success)' }} onClick={handleActivate}>Activate</button>
+            ) : null}
+            <button className="btn btn-danger btn-sm" onClick={handleDelete}>Delete User</button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ── Create user form ──────────────────────────────────────────────────────────
+function CreateUserForm({ userPass, onCreated }) {
+  const toast = useToast();
+  const [form, setForm] = useState({ name:'', email:'', password:'', role:'member' });
+  const [saving, setSaving] = useState(false);
+  const set = k => v => setForm(f => ({ ...f, [k]: v }));
+
+  const handle = async () => {
+    if (!form.name.trim() || !form.email.trim()) return toast('Name and email are required', 'error');
+    if (!isValidEmail(form.email)) return toast('Invalid email address', 'error');
+    if (!/\S+\s+\S+/.test(form.name.trim())) return toast('Name must be two words (First Last)', 'error');
+    setSaving(true);
+    try {
+      await api.createUser(form);
+      toast('User created', 'success');
+      setForm({ name:'', email:'', password:'', role:'member' });
+      onCreated();
+    } catch(e) { toast(e.message, 'error'); }
+    finally { setSaving(false); }
+  };
+
+  return (
+    <div style={{ maxWidth:560 }}>
+      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:12, marginBottom:12 }}>
+        <div className="flex-col gap-1">
+          <label className="text-sm font-medium" style={{ color:'var(--text-secondary)' }}>Full Name <span style={{ fontWeight:400, color:'var(--text-tertiary)' }}>(First Last)</span></label>
+          <input className="input" placeholder="Jane Smith" autoComplete="new-password" autoCorrect="off" autoCapitalize="words" value={form.name} onChange={e => set('name')(e.target.value)} />
+        </div>
+        <div className="flex-col gap-1">
+          <label className="text-sm font-medium" style={{ color:'var(--text-secondary)' }}>Email</label>
+          <input className="input" type="email" placeholder="jane@example.com" autoComplete="new-password" value={form.email} onChange={e => set('email')(e.target.value)} />
+        </div>
+        <div className="flex-col gap-1">
+          <label className="text-sm font-medium" style={{ color:'var(--text-secondary)' }}>Temp Password <span style={{ fontWeight:400, color:'var(--text-tertiary)' }}>(blank = {userPass})</span></label>
+          <input className="input" type="text" autoComplete="new-password" value={form.password} onChange={e => set('password')(e.target.value)} />
+        </div>
+        <div className="flex-col gap-1">
+          <label className="text-sm font-medium" style={{ color:'var(--text-secondary)' }}>Role</label>
+          <select className="input" value={form.role} onChange={e => set('role')(e.target.value)}>
+            <option value="member">Member</option>
+            <option value="admin">Admin</option>
+          </select>
+        </div>
+      </div>
+      <p className="text-xs" style={{ color:'var(--text-secondary)', marginBottom:12 }}>User must change password on first login. Duplicate names get a number suffix.</p>
+      <button className="btn btn-primary" onClick={handle} disabled={saving}>{saving ? 'Creating…' : 'Create User'}</button>
+    </div>
+  );
+}
+
+// ── Bulk import form ──────────────────────────────────────────────────────────
+function BulkImportForm({ userPass, onCreated }) {
+  const toast = useToast();
+  const fileRef = useRef(null);
+  const [csvFile, setCsvFile] = useState(null);
+  const [csvRows, setCsvRows] = useState([]);
+  const [csvInvalid, setCsvInvalid] = useState([]);
+  const [bulkResult, setBulkResult] = useState(null);
+  const [loading, setLoading] = useState(false);
+
+  const handleFile = e => {
+    const file = e.target.files?.[0]; if (!file) return;
+    setCsvFile(file); setBulkResult(null);
+    const reader = new FileReader();
+    reader.onload = ev => { const { rows, invalid } = parseCSV(ev.target.result); setCsvRows(rows); setCsvInvalid(invalid); };
+    reader.readAsText(file);
+  };
+
+  const handleImport = async () => {
+    if (!csvRows.length) return;
+    setLoading(true);
+    try {
+      const result = await api.bulkUsers(csvRows);
+      setBulkResult(result); setCsvRows([]); setCsvFile(null); setCsvInvalid([]);
+      if (fileRef.current) fileRef.current.value = '';
+      onCreated();
+    } catch(e) { toast(e.message, 'error'); }
+    finally { setLoading(false); }
+  };
+
+  return (
+    <div style={{ maxWidth:560 }} className="flex-col gap-4">
+      <div className="card" style={{ background:'var(--background)', border:'1px dashed var(--border)' }}>
+        <p className="text-sm font-medium" style={{ marginBottom:6 }}>CSV Format</p>
+        <code style={{ fontSize:12, color:'var(--text-secondary)', display:'block', background:'var(--surface)', padding:8, borderRadius:4, border:'1px solid var(--border)', whiteSpace:'pre' }}>{"name,email,password,role\nJane Smith,jane@company.com,,member\nBob Jones,bob@company.com,TempPass1,admin"}</code>
+        <p className="text-xs" style={{ color:'var(--text-tertiary)', marginTop:8 }}>
+          Name and email required. Blank password defaults to <strong>{userPass}</strong>, blank role defaults to member.
+        </p>
+      </div>
+      <div style={{ display:'flex', alignItems:'center', gap:10, flexWrap:'wrap' }}>
+        <label className="btn btn-secondary" style={{ cursor:'pointer', margin:0 }}>
+          Select CSV File
+          <input ref={fileRef} type="file" accept=".csv,.txt" style={{ display:'none' }} onChange={handleFile} />
+        </label>
+        {csvFile && <span className="text-sm" style={{ color:'var(--text-secondary)' }}>{csvFile.name}{csvRows.length > 0 && <span style={{ color:'var(--text-tertiary)', marginLeft:6 }}>({csvRows.length} valid)</span>}</span>}
+        {csvRows.length > 0 && (
+          <button className="btn btn-primary" onClick={handleImport} disabled={loading}>
+            {loading ? 'Creating…' : `Create ${csvRows.length} User${csvRows.length!==1?'s':''}`}
+          </button>
+        )}
+      </div>
+      {csvInvalid.length > 0 && (
+        <div style={{ background:'rgba(229,57,53,0.07)', border:'1px solid #e53935', borderRadius:'var(--radius)', padding:10 }}>
+          <p className="text-sm font-medium" style={{ color:'#e53935', marginBottom:6 }}>{csvInvalid.length} line{csvInvalid.length!==1?'s':''} skipped</p>
+          <div style={{ maxHeight:100, overflowY:'auto' }}>
+            {csvInvalid.map((e,i) => <div key={i} style={{ fontSize:12, padding:'2px 0', color:'var(--text-secondary)' }}><code style={{ fontSize:11 }}>{e.line}</code><span style={{ color:'#e53935', marginLeft:8 }}>— {e.reason}</span></div>)}
+          </div>
+        </div>
+      )}
+      {bulkResult && (
+        <div style={{ border:'1px solid var(--border)', borderRadius:'var(--radius)', padding:12 }}>
+          <p className="text-sm font-medium" style={{ color:'var(--success)', marginBottom: bulkResult.skipped.length ? 8 : 0 }}>✓ {bulkResult.created.length} user{bulkResult.created.length!==1?'s':''} created</p>
+          {bulkResult.skipped.length > 0 && (
+            <>
+              <p className="text-sm font-medium" style={{ color:'var(--text-secondary)', marginBottom:6 }}>{bulkResult.skipped.length} skipped:</p>
+              <div style={{ maxHeight:112, overflowY:'auto', border:'1px solid var(--border)', borderRadius:'var(--radius)' }}>
+                {bulkResult.skipped.map((s,i) => (
+                  <div key={i} style={{ display:'flex', justifyContent:'space-between', padding:'5px 10px', borderBottom: i<bulkResult.skipped.length-1?'1px solid var(--border)':'none', fontSize:13, gap:12 }}>
+                    <span>{s.email}</span><span style={{ color:'var(--text-tertiary)', flexShrink:0 }}>{s.reason}</span>
+                  </div>
+                ))}
+              </div>
+            </>
+          )}
+          <button className="btn btn-secondary btn-sm" style={{ marginTop:10 }} onClick={() => setBulkResult(null)}>Dismiss</button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ── Main page ─────────────────────────────────────────────────────────────────
+export default function UserManagerPage() {
+  const isMobile = window.innerWidth < 768;
+  const [users, setUsers] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [loadError, setLoadError] = useState('');
+  const [search, setSearch] = useState('');
+  const [tab, setTab] = useState('users');
+  const [userPass, setUserPass] = useState('user@1234');
+
+  const load = async () => {
+    setLoadError(''); setLoading(true);
+    try {
+      const { users } = await api.getUsers();
+      setUsers(users || []);
+    } catch(e) { setLoadError(e.message || 'Failed to load users'); }
+    finally { setLoading(false); }
+  };
+
+  useEffect(() => {
+    load();
+    api.getSettings().then(({ settings }) => { if (settings.user_pass) setUserPass(settings.user_pass); }).catch(() => {});
+  }, []);
+
+  const filtered = users.filter(u =>
+    !search || u.name?.toLowerCase().includes(search.toLowerCase()) ||
+    u.display_name?.toLowerCase().includes(search.toLowerCase()) ||
+    u.email?.toLowerCase().includes(search.toLowerCase())
+  );
+
+  return (
+    <div style={{ flex:1, display:'flex', flexDirection:'column', overflow:'hidden', background:'var(--background)' }}>
+      {/* Page header */}
+      <div style={{ background:'var(--surface)', borderBottom:'1px solid var(--border)', padding:'0 24px', flexShrink:0 }}>
+        <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', height:52 }}>
+          <div style={{ display:'flex', alignItems:'center', gap:10 }}>
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" strokeWidth="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
+            <span style={{ fontWeight:700, fontSize:15 }}>User Manager</span>
+            {!loading && <span style={{ fontSize:12, color:'var(--text-tertiary)' }}>{users.length} user{users.length!==1?'s':''}</span>}
+          </div>
+          <div style={{ display:'flex', gap:8 }}>
+            <button className={`btn btn-sm ${tab==='users'?'btn-primary':'btn-secondary'}`} onClick={() => setTab('users')}>All Users</button>
+            <button className={`btn btn-sm ${tab==='create'?'btn-primary':'btn-secondary'}`} onClick={() => setTab('create')}>+ Create</button>
+            {!isMobile && <button className={`btn btn-sm ${tab==='bulk'?'btn-primary':'btn-secondary'}`} onClick={() => setTab('bulk')}>Bulk Import</button>}
+          </div>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div style={{ flex:1, overflowY:'auto', padding:24 }}>
+        {tab === 'users' && (
+          <>
+            <input className="input" placeholder="Search users…" value={search} onChange={e => setSearch(e.target.value)}
+              autoComplete="new-password" autoCorrect="off" spellCheck={false}
+              style={{ marginBottom:16, maxWidth:400 }} />
+            <div style={{ background:'var(--surface)', borderRadius:'var(--radius)', boxShadow:'var(--shadow-sm)', overflow:'hidden' }}>
+              {loading ? (
+                <div style={{ padding:48, textAlign:'center' }}><div className="spinner" /></div>
+              ) : loadError ? (
+                <div style={{ padding:32, textAlign:'center', color:'var(--error)' }}>
+                  <div style={{ marginBottom:12 }}>⚠ {loadError}</div>
+                  <button className="btn btn-secondary btn-sm" onClick={load}>Retry</button>
+                </div>
+              ) : filtered.length === 0 ? (
+                <div style={{ padding:32, textAlign:'center', color:'var(--text-tertiary)', fontSize:14 }}>
+                  {search ? 'No users match your search.' : 'No users yet.'}
+                </div>
+              ) : (
+                filtered.map(u => <UserRow key={u.id} u={u} onUpdated={load} />)
+              )}
+            </div>
+          </>
+        )}
+        {tab === 'create' && <CreateUserForm userPass={userPass} onCreated={() => { load(); setTab('users'); }} />}
+        {tab === 'bulk'   && <BulkImportForm userPass={userPass} onCreated={load} />}
+      </div>
+    </div>
+  );
+}