v0.9.35 settings redesign

.env.example

@@ -10,7 +10,7 @@
 PROJECT_NAME=jama
 
 # Image version to run (set by build.sh, or use 'latest')
-JAMA_VERSION=0.9.34
+JAMA_VERSION=0.9.35
 
 # App port — the host port Docker maps to the container
 PORT=3000

backend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jama-backend",
-  "version": "0.9.34",
+  "version": "0.9.35",
   "description": "TeamChat backend server",
   "main": "src/index.js",
   "scripts": {

backend/src/models/db.js

@@ -216,6 +216,10 @@ function initDb() {
   insertSetting.run('registration_code', '');
   insertSetting.run('feature_branding', 'false');
   insertSetting.run('feature_group_manager', 'false');
+  insertSetting.run('feature_schedule_manager', 'false');
+  insertSetting.run('app_type', 'JAMA-Chat');
+  insertSetting.run('team_group_managers', '');    -- JSON array of user_group IDs
+  insertSetting.run('team_schedule_managers', ''); -- JSON array of user_group IDs
 
   // Migration: add hide_admin_tag if upgrading from older version
   try {

backend/src/routes/settings.js

@@ -137,8 +137,12 @@ router.post('/reset', authMiddleware, adminMiddleware, (req, res) => {
 // ── Registration code ─────────────────────────────────────────────────────────
 // Valid codes — in production these would be stored/validated server-side
 const VALID_CODES = {
-  'JAMA-FULL-2024':     { branding: true,  groupManager: true },
+  // JAMA-Team: full access — chat, branding, group manager, schedule manager
-  'JAMA-BRAND-2024':    { branding: true,  groupManager: false },
+  'JAMA-TEAM-2024':     { appType: 'JAMA-Team',  branding: true,  groupManager: true,  scheduleManager: true  },
+  // JAMA-Brand: chat + branding only
+  'JAMA-BRAND-2024':    { appType: 'JAMA-Brand', branding: true,  groupManager: false, scheduleManager: false },
+  // Legacy codes — map to new tiers
+  'JAMA-FULL-2024':     { appType: 'JAMA-Team',  branding: true,  groupManager: true,  scheduleManager: true  },
 };
 
 router.post('/register', authMiddleware, adminMiddleware, (req, res) => {
@@ -149,19 +153,33 @@ router.post('/register', authMiddleware, adminMiddleware, (req, res) => {
   if (!code?.trim()) {
     // Clear registration
     upd.run('registration_code', '', '');
+    upd.run('app_type', 'JAMA-Chat', 'JAMA-Chat');
     upd.run('feature_branding', 'false', 'false');
     upd.run('feature_group_manager', 'false', 'false');
-    return res.json({ success: true, features: { branding: false, groupManager: false } });
+    upd.run('feature_schedule_manager', 'false', 'false');
+    return res.json({ success: true, features: { branding: false, groupManager: false, scheduleManager: false, appType: 'JAMA-Chat' } });
   }
 
   const match = VALID_CODES[code.trim().toUpperCase()];
   if (!match) return res.status(400).json({ error: 'Invalid registration code' });
 
   upd.run('registration_code', code.trim(), code.trim());
-  upd.run('feature_branding',      match.branding      ? 'true' : 'false', match.branding      ? 'true' : 'false');
+  upd.run('app_type',               match.appType || 'JAMA-Chat', match.appType || 'JAMA-Chat');
-  upd.run('feature_group_manager', match.groupManager  ? 'true' : 'false', match.groupManager  ? 'true' : 'false');
+  upd.run('feature_branding',       match.branding         ? 'true' : 'false', match.branding         ? 'true' : 'false');
+  upd.run('feature_group_manager',  match.groupManager     ? 'true' : 'false', match.groupManager     ? 'true' : 'false');
+  upd.run('feature_schedule_manager', match.scheduleManager ? 'true' : 'false', match.scheduleManager ? 'true' : 'false');
 
-  res.json({ success: true, features: { branding: match.branding, groupManager: match.groupManager } });
+  res.json({ success: true, features: { branding: match.branding, groupManager: match.groupManager, scheduleManager: match.scheduleManager, appType: match.appType } });
+});
+
+// Save team management group assignments
+router.patch('/team', authMiddleware, adminMiddleware, (req, res) => {
+  const { groupManagers, scheduleManagers } = req.body;
+  const db = getDb();
+  const upd = db.prepare("INSERT INTO settings (key, value) VALUES (?, ?) ON CONFLICT(key) DO UPDATE SET value = ?, updated_at = datetime('now')");
+  if (groupManagers    !== undefined) upd.run('team_group_managers',    JSON.stringify(groupManagers    || []), JSON.stringify(groupManagers    || []));
+  if (scheduleManagers !== undefined) upd.run('team_schedule_managers', JSON.stringify(scheduleManagers || []), JSON.stringify(scheduleManagers || []));
+  res.json({ success: true });
 });
 
 module.exports = router;

build.sh

@@ -13,7 +13,7 @@
 # ─────────────────────────────────────────────────────────────
 set -euo pipefail
 
-VERSION="${1:-0.9.34}"
+VERSION="${1:-0.9.35}"
 ACTION="${2:-}"
 REGISTRY="${REGISTRY:-}"
 IMAGE_NAME="jama"

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jama-frontend",
-  "version": "0.9.34",
+  "version": "0.9.35",
   "private": true,
   "scripts": {
     "dev": "vite",

frontend/src/components/NavDrawer.jsx

@@ -11,12 +11,18 @@ const NAV_ICON = {
   settings: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M5.34 18.66l-1.41 1.41M12 2v2M12 20v2M4.93 4.93l1.41 1.41M18.66 18.66l1.41 1.41M2 12h2M20 12h2"/></svg>,
 };
 
-export default function NavDrawer({ open, onClose, onMessages, onGroupManager, onBranding, onSettings, onUsers, features = {} }) {
+export default function NavDrawer({ open, onClose, onMessages, onGroupManager, onScheduleManager, onBranding, onSettings, onUsers, features = {} }) {
   const { user } = useAuth();
   const drawerRef = useRef(null);
   const isAdmin = user?.role === 'admin';
   const isMobile = window.matchMedia('(pointer: coarse)').matches || window.innerWidth < 768;
 
+  // Team-managed access: check if user is in any of the designated manager groups
+  // (frontend-only — no API enforcement yet)
+  const userGroupIds = features.userGroupMemberships || [];
+  const canAccessGroupManager = isAdmin || (features.teamGroupManagers || []).some(gid => userGroupIds.includes(gid));
+  const canAccessScheduleManager = isAdmin || (features.teamScheduleManagers || []).some(gid => userGroupIds.includes(gid));
+
   // Close on outside click
   useEffect(() => {
     if (!open) return;
@@ -72,10 +78,10 @@ export default function NavDrawer({ open, onClose, onMessages, onGroupManager, o
           <>
             <div className="nav-drawer-section-label admin">Admin</div>
             {item(NAV_ICON.users,   'User Manager',  onUsers)}
-            {features.groupManager && !isMobile && item(NAV_ICON.groups,   'Group Manager',  onGroupManager)}
+            {features.groupManager    && !isMobile && canAccessGroupManager    && item(NAV_ICON.groups,   'Group Manager',     onGroupManager)}
-            {features.branding     && item(NAV_ICON.branding, 'Branding',       onBranding)}
+            {features.scheduleManager && !isMobile && canAccessScheduleManager && item(NAV_ICON.schedules, 'Schedule Manager',  onScheduleManager || (() => {}))}
-            {!isMobile && item(NAV_ICON.schedules, 'Schedule Manager', () => {}, true)}
+            {features.branding && item(NAV_ICON.branding, 'Branding', onBranding)}
-            {item(NAV_ICON.settings, 'Settings', onSettings)}
+            {isAdmin && item(NAV_ICON.settings, 'Settings', onSettings)}
           </>
         )}
       </div>

frontend/src/components/SettingsModal.jsx

@@ -2,27 +2,224 @@ import { useState, useEffect } from 'react';
 import { api } from '../utils/api.js';
 import { useToast } from '../contexts/ToastContext.jsx';
 
-export default function SettingsModal({ onClose, onFeaturesChanged }) {
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+const APP_TYPES = {
+  'JAMA-Chat':  { label: 'JAMA-Chat',  desc: 'Chat only. No Branding, Group Manager or Schedule Manager.' },
+  'JAMA-Brand': { label: 'JAMA-Brand', desc: 'Chat and Branding.' },
+  'JAMA-Team':  { label: 'JAMA-Team',  desc: 'Chat, Branding, Group Manager and Schedule Manager.' },
+};
+
+// ── Team Management Tab ───────────────────────────────────────────────────────
+function TeamManagementTab({ features }) {
+  const toast = useToast();
+  const [userGroups, setUserGroups] = useState([]);
+  const [groupManagers, setGroupManagers] = useState([]);
+  const [scheduleManagers, setScheduleManagers] = useState([]);
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    api.getUserGroups().then(({ groups }) => setUserGroups(groups || [])).catch(() => {});
+    api.getSettings().then(({ settings }) => {
+      setGroupManagers(JSON.parse(settings.team_group_managers || '[]'));
+      setScheduleManagers(JSON.parse(settings.team_schedule_managers || '[]'));
+    }).catch(() => {});
+  }, []);
+
+  const toggle = (id, list, setList) => {
+    setList(prev => prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id]);
+  };
+
+  const handleSave = async () => {
+    setSaving(true);
+    try {
+      await api.updateTeamSettings({ groupManagers, scheduleManagers });
+      toast('Team settings saved', 'success');
+      window.dispatchEvent(new Event('jama:settings-changed'));
+    } catch (e) { toast(e.message, 'error'); }
+    finally { setSaving(false); }
+  };
+
+  const GroupSelectList = ({ title, description, selected, onToggle }) => (
+    <div style={{ marginBottom: 24 }}>
+      <div className="settings-section-label">{title}</div>
+      <p style={{ fontSize: 12, color: 'var(--text-tertiary)', marginBottom: 10 }}>{description}</p>
+      {userGroups.length === 0 ? (
+        <p style={{ fontSize: 13, color: 'var(--text-tertiary)' }}>No user groups created yet. Create groups in the Group Manager first.</p>
+      ) : (
+        <div style={{ border: '1px solid var(--border)', borderRadius: 'var(--radius)', overflow: 'hidden' }}>
+          {userGroups.map(g => (
+            <label key={g.id} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '9px 14px', borderBottom: '1px solid var(--border)', cursor: 'pointer' }}>
+              <input type="checkbox" checked={selected.includes(g.id)} onChange={() => onToggle(g.id)}
+                style={{ accentColor: 'var(--primary)', width: 15, height: 15 }} />
+              <div style={{ width: 24, height: 24, borderRadius: 5, background: 'var(--primary)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'white', fontSize: 9, fontWeight: 700, flexShrink: 0 }}>UG</div>
+              <span style={{ flex: 1, fontSize: 14 }}>{g.name}</span>
+              <span style={{ fontSize: 12, color: 'var(--text-tertiary)' }}>{g.member_count} member{g.member_count !== 1 ? 's' : ''}</span>
+            </label>
+          ))}
+        </div>
+      )}
+      {selected.length === 0 && (
+        <p style={{ fontSize: 12, color: 'var(--text-tertiary)', marginTop: 6 }}>No groups selected — admins only.</p>
+      )}
+    </div>
+  );
+
+  return (
+    <div>
+      <GroupSelectList
+        title="Group Managers"
+        description="Members of selected groups can access the Group Manager tool."
+        selected={groupManagers}
+        onToggle={id => toggle(id, groupManagers, setGroupManagers)}
+      />
+      <GroupSelectList
+        title="Schedule Managers"
+        description="Members of selected groups can access the Schedule Manager tool."
+        selected={scheduleManagers}
+        onToggle={id => toggle(id, scheduleManagers, setScheduleManagers)}
+      />
+      <button className="btn btn-primary" onClick={handleSave} disabled={saving}>
+        {saving ? 'Saving…' : 'Save Team Settings'}
+      </button>
+    </div>
+  );
+}
+
+// ── Registration Tab ──────────────────────────────────────────────────────────
+function RegistrationTab({ onFeaturesChanged }) {
+  const toast = useToast();
+  const [settings, setSettings] = useState({});
+  const [regCode, setRegCode] = useState('');
+  const [regLoading, setRegLoading] = useState(false);
+  const [copied, setCopied] = useState(false);
+
+  useEffect(() => {
+    api.getSettings().then(({ settings }) => setSettings(settings)).catch(() => {});
+  }, []);
+
+  const appType = settings.app_type || 'JAMA-Chat';
+  const activeCode = settings.registration_code || '';
+  const adminEmail = settings.admin_email || '—';
+
+  // Placeholder serial number derived from hostname
+  const serialNumber = btoa(window.location.hostname).replace(/[^A-Z0-9]/gi, '').toUpperCase().slice(0, 16).padEnd(16, '0');
+
+  const handleCopySerial = async () => {
+    await navigator.clipboard.writeText(serialNumber).catch(() => {});
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  const handleRegister = async () => {
+    if (!regCode.trim()) return toast('Enter a registration code', 'error');
+    setRegLoading(true);
+    try {
+      const { features: f } = await api.registerCode(regCode.trim());
+      setRegCode('');
+      const fresh = await api.getSettings();
+      setSettings(fresh.settings);
+      toast('Registration applied successfully.', 'success');
+      window.dispatchEvent(new Event('jama:settings-changed'));
+      onFeaturesChanged && onFeaturesChanged(f);
+    } catch (e) { toast(e.message || 'Invalid registration code', 'error'); }
+    finally { setRegLoading(false); }
+  };
+
+  const handleClear = async () => {
+    try {
+      const { features: f } = await api.registerCode('');
+      const fresh = await api.getSettings();
+      setSettings(fresh.settings);
+      toast('Registration cleared.', 'success');
+      window.dispatchEvent(new Event('jama:settings-changed'));
+      onFeaturesChanged && onFeaturesChanged(f);
+    } catch (e) { toast(e.message, 'error'); }
+  };
+
+  const typeInfo = APP_TYPES[appType] || APP_TYPES['JAMA-Chat'];
+  const siteUrl = window.location.origin;
+
+  return (
+    <div>
+      {/* Info box */}
+      <div style={{ background: 'var(--surface-variant)', border: '1px solid var(--border)', borderRadius: 'var(--radius)', padding: '14px 16px', marginBottom: 24 }}>
+        <p style={{ fontSize: 13, fontWeight: 600, marginBottom: 6 }}>
+          Registration {activeCode ? 'is' : 'required:'}
+        </p>
+        <p style={{ fontSize: 13, color: 'var(--text-secondary)', lineHeight: 1.6 }}>
+          JAMA {activeCode ? 'is' : 'will be'} registered to:<br />
+          <strong>Type:</strong> {typeInfo.label}<br />
+          <strong>URL:</strong> {siteUrl}
+        </p>
+      </div>
+
+      {/* Type */}
+      <div style={{ marginBottom: 16 }}>
+        <div className="settings-section-label">Application Type</div>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 6 }}>
+          <div style={{ padding: '7px 14px', borderRadius: 'var(--radius)', border: '1px solid var(--border)', background: 'var(--surface-variant)', fontSize: 14, fontWeight: 600, color: 'var(--primary)' }}>
+            {typeInfo.label}
+          </div>
+          <span style={{ fontSize: 12, color: 'var(--text-tertiary)' }}>{typeInfo.desc}</span>
+        </div>
+      </div>
+
+      {/* Serial Number */}
+      <div style={{ marginBottom: 16 }}>
+        <div className="settings-section-label">Serial Number</div>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 6 }}>
+          <input className="input flex-1" value={serialNumber} readOnly style={{ fontFamily: 'monospace', letterSpacing: 1 }} />
+          <button className="btn btn-secondary btn-sm" onClick={handleCopySerial} style={{ flexShrink: 0 }}>
+            {copied ? '✓ Copied' : (
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
+            )}
+          </button>
+        </div>
+      </div>
+
+      {/* Registration Code */}
+      <div style={{ marginBottom: 20 }}>
+        <div className="settings-section-label">Registration Code</div>
+        <div style={{ display: 'flex', gap: 8, marginTop: 6 }}>
+          <input className="input flex-1" placeholder="Enter registration code" value={regCode}
+            onChange={e => setRegCode(e.target.value)} onKeyDown={e => e.key === 'Enter' && handleRegister()} />
+          <button className="btn btn-primary btn-sm" onClick={handleRegister} disabled={regLoading}>
+            {regLoading ? '…' : 'Register'}
+          </button>
+        </div>
+      </div>
+
+      {activeCode && (
+        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+          <span style={{ fontSize: 13, color: 'var(--success)', display: 'flex', alignItems: 'center', gap: 5 }}>
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
+            Registered — {typeInfo.label}
+          </span>
+          <button className="btn btn-secondary btn-sm" onClick={handleClear}>Clear</button>
+        </div>
+      )}
+
+      <p style={{ fontSize: 12, color: 'var(--text-tertiary)', marginTop: 16, lineHeight: 1.5 }}>
+        Registration codes unlock application features. Contact your JAMA provider for a code.<br />
+        <strong>JAMA-Brand</strong> — unlocks Branding.&nbsp;
+        <strong>JAMA-Team</strong> — unlocks Branding, Group Manager and Schedule Manager.
+      </p>
+    </div>
+  );
+}
+
+// ── Web Push Tab ──────────────────────────────────────────────────────────────
+function WebPushTab() {
   const toast = useToast();
   const [vapidPublic, setVapidPublic] = useState('');
   const [loading, setLoading] = useState(true);
   const [generating, setGenerating] = useState(false);
   const [showRegenWarning, setShowRegenWarning] = useState(false);
 
-  // Registration
-  const [regCode, setRegCode] = useState('');
-  const [activeCode, setActiveCode] = useState('');
-  const [features, setFeatures] = useState({ branding: false, groupManager: false });
-  const [regLoading, setRegLoading] = useState(false);
-
   useEffect(() => {
     api.getSettings().then(({ settings }) => {
       setVapidPublic(settings.vapid_public || '');
-      setActiveCode(settings.registration_code || '');
-      setFeatures({
-        branding:      settings.feature_branding      === 'true',
-        groupManager:  settings.feature_group_manager === 'true',
-      });
       setLoading(false);
     }).catch(() => setLoading(false));
   }, []);
@@ -36,41 +233,81 @@ export default function SettingsModal({ onClose, onFeaturesChanged }) {
       toast('VAPID keys generated. Push notifications are now active.', 'success');
     } catch (e) {
       toast(e.message || 'Failed to generate keys', 'error');
-    } finally {
+    } finally { setGenerating(false); }
-      setGenerating(false);
-    }
   };
 
-  const handleGenerateClick = () => {
+  if (loading) return <p style={{ fontSize: 13, color: 'var(--text-secondary)' }}>Loading…</p>;
-    if (vapidPublic) setShowRegenWarning(true);
-    else doGenerate();
-  };
 
-  const handleRegister = async () => {
+  return (
-    setRegLoading(true);
+    <div>
-    try {
+      <div className="settings-section-label" style={{ marginBottom: 12 }}>Web Push Notifications (VAPID)</div>
-      const { features: f } = await api.registerCode(regCode.trim());
-      setFeatures(f);
-      setActiveCode(regCode.trim());
-      setRegCode('');
-      toast(regCode.trim() ? 'Registration code applied.' : 'Registration cleared.', 'success');
-      window.dispatchEvent(new Event('jama:settings-changed'));
-      onFeaturesChanged && onFeaturesChanged(f);
-    } catch (e) {
-      toast(e.message || 'Invalid code', 'error');
-    } finally {
-      setRegLoading(false);
-    }
-  };
 
-  const featureList = [
+      {vapidPublic ? (
-    features.branding     && 'Branding',
+        <div style={{ marginBottom: 16 }}>
-    features.groupManager && 'Group Manager',
+          <div style={{ background: 'var(--surface-variant)', border: '1px solid var(--border)', borderRadius: 'var(--radius)', padding: '10px 12px', marginBottom: 10 }}>
+            <div style={{ fontSize: 11, color: 'var(--text-tertiary)', marginBottom: 4, textTransform: 'uppercase', letterSpacing: '0.5px' }}>Public Key</div>
+            <code style={{ fontSize: 11, color: 'var(--text-primary)', wordBreak: 'break-all', lineHeight: 1.5, display: 'block' }}>{vapidPublic}</code>
+          </div>
+          <span style={{ fontSize: 13, color: 'var(--success)', display: 'flex', alignItems: 'center', gap: 5 }}>
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
+            Push notifications active
+          </span>
+        </div>
+      ) : (
+        <p style={{ fontSize: 13, color: 'var(--text-secondary)', marginBottom: 12 }}>
+          No VAPID keys found. Generate keys to enable Web Push notifications.
+        </p>
+      )}
+
+      {showRegenWarning && (
+        <div style={{ background: '#fce8e6', border: '1px solid #f5c6c2', borderRadius: 'var(--radius)', padding: '14px 16px', marginBottom: 16 }}>
+          <p style={{ fontSize: 13, fontWeight: 600, color: 'var(--error)', marginBottom: 8 }}>⚠️ Regenerate VAPID keys?</p>
+          <p style={{ fontSize: 13, color: '#5c2c28', marginBottom: 12, lineHeight: 1.5 }}>
+            Generating new keys will <strong>invalidate all existing push subscriptions</strong>. Users will need to re-enable notifications.
+          </p>
+          <div style={{ display: 'flex', gap: 8 }}>
+            <button className="btn btn-sm" style={{ background: 'var(--error)', color: 'white' }} onClick={doGenerate} disabled={generating}>{generating ? 'Generating…' : 'Yes, regenerate keys'}</button>
+            <button className="btn btn-secondary btn-sm" onClick={() => setShowRegenWarning(false)}>Cancel</button>
+          </div>
+        </div>
+      )}
+      {!showRegenWarning && (
+        <button className="btn btn-primary btn-sm" onClick={() => vapidPublic ? setShowRegenWarning(true) : doGenerate()} disabled={generating}>
+          {generating ? 'Generating…' : vapidPublic ? 'Regenerate Keys' : 'Generate Keys'}
+        </button>
+      )}
+      <p style={{ fontSize: 12, color: 'var(--text-tertiary)', marginTop: 12, lineHeight: 1.5 }}>
+        Requires HTTPS. On iOS, the app must be installed to the home screen first.
+      </p>
+    </div>
+  );
+}
+
+// ── Main modal ────────────────────────────────────────────────────────────────
+export default function SettingsModal({ onClose, onFeaturesChanged }) {
+  const [tab, setTab] = useState('registration');
+  const [appType, setAppType] = useState('JAMA-Chat');
+
+  useEffect(() => {
+    api.getSettings().then(({ settings }) => {
+      setAppType(settings.app_type || 'JAMA-Chat');
+    }).catch(() => {});
+    const handler = () => api.getSettings().then(({ settings }) => setAppType(settings.app_type || 'JAMA-Chat')).catch(() => {});
+    window.addEventListener('jama:settings-changed', handler);
+    return () => window.removeEventListener('jama:settings-changed', handler);
+  }, []);
+
+  const isTeam = appType === 'JAMA-Team';
+
+  const tabs = [
+    isTeam && { id: 'team', label: 'Team Management' },
+    { id: 'registration', label: 'Registration' },
+    { id: 'webpush', label: 'Web Push' },
   ].filter(Boolean);
 
   return (
     <div className="modal-overlay" onClick={e => e.target === e.currentTarget && onClose()}>
-      <div className="modal" style={{ maxWidth: 480 }}>
+      <div className="modal" style={{ maxWidth: 520 }}>
         <div className="flex items-center justify-between" style={{ marginBottom: 20 }}>
           <h2 className="modal-title" style={{ margin: 0 }}>Settings</h2>
           <button className="btn-icon" onClick={onClose}>
@@ -78,82 +315,18 @@ export default function SettingsModal({ onClose, onFeaturesChanged }) {
           </button>
         </div>
 
-        {/* Registration Code */}
+        {/* Tab buttons */}
-        <div style={{ marginBottom: 28 }}>
+        <div className="flex gap-2" style={{ marginBottom: 24 }}>
-          <div className="settings-section-label">Feature Registration</div>
+          {tabs.map(t => (
-          {activeCode && featureList.length > 0 && (
+            <button key={t.id} className={`btn btn-sm ${tab === t.id ? 'btn-primary' : 'btn-secondary'}`} onClick={() => setTab(t.id)}>
-            <div style={{ marginBottom: 10, display: 'flex', alignItems: 'center', gap: 6, fontSize: 13, color: 'var(--success)' }}>
+              {t.label}
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
-              Active — unlocks: {featureList.join(', ')}
-            </div>
-          )}
-          <div style={{ display: 'flex', gap: 8, marginBottom: 8 }}>
-            <input
-              className="input flex-1"
-              placeholder="Enter registration code"
-              value={regCode}
-              onChange={e => setRegCode(e.target.value)}
-              onKeyDown={e => e.key === 'Enter' && handleRegister()}
-            />
-            <button className="btn btn-primary btn-sm" onClick={handleRegister} disabled={regLoading}>
-              {regLoading ? '…' : 'Apply'}
             </button>
-          </div>
+          ))}
-          {activeCode && (
-            <button className="btn btn-secondary btn-sm" onClick={() => { setRegCode(''); api.registerCode('').then(() => { setFeatures({ branding: false, groupManager: false }); setActiveCode(''); window.dispatchEvent(new Event('jama:settings-changed')); onFeaturesChanged && onFeaturesChanged({ branding: false, groupManager: false }); }); }}>
-              Clear Registration
-            </button>
-          )}
-          <p style={{ fontSize: 12, color: 'var(--text-tertiary)', marginTop: 8 }}>
-            A registration code unlocks Branding and Group Manager features. Contact your jama provider for a code.
-          </p>
         </div>
 
-        <div style={{ borderTop: '1px solid var(--border)', paddingTop: 20 }}>
+        {tab === 'team'         && <TeamManagementTab features={{ appType }} />}
-          <div className="settings-section-label">Web Push Notifications (VAPID)</div>
+        {tab === 'registration' && <RegistrationTab onFeaturesChanged={onFeaturesChanged} />}
-          {loading ? (
+        {tab === 'webpush'      && <WebPushTab />}
-            <p style={{ fontSize: 13, color: 'var(--text-secondary)' }}>Loading…</p>
-          ) : (
-            <>
-              {vapidPublic ? (
-                <div style={{ marginBottom: 16 }}>
-                  <div style={{ background: 'var(--surface-variant)', border: '1px solid var(--border)', borderRadius: 'var(--radius)', padding: '10px 12px', marginBottom: 10 }}>
-                    <div style={{ fontSize: 11, color: 'var(--text-tertiary)', marginBottom: 4, textTransform: 'uppercase', letterSpacing: '0.5px' }}>Public Key</div>
-                    <code style={{ fontSize: 11, color: 'var(--text-primary)', wordBreak: 'break-all', lineHeight: 1.5, display: 'block' }}>{vapidPublic}</code>
-                  </div>
-                  <span style={{ fontSize: 13, color: 'var(--success)', display: 'flex', alignItems: 'center', gap: 5 }}>
-                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
-                    Push notifications active
-                  </span>
-                </div>
-              ) : (
-                <p style={{ fontSize: 13, color: 'var(--text-secondary)', marginBottom: 12 }}>
-                  No VAPID keys found. Generate keys to enable Web Push notifications.
-                </p>
-              )}
-              {showRegenWarning && (
-                <div style={{ background: '#fce8e6', border: '1px solid #f5c6c2', borderRadius: 'var(--radius)', padding: '14px 16px', marginBottom: 16 }}>
-                  <p style={{ fontSize: 13, fontWeight: 600, color: 'var(--error)', marginBottom: 8 }}>⚠️ Regenerate VAPID keys?</p>
-                  <p style={{ fontSize: 13, color: '#5c2c28', marginBottom: 12, lineHeight: 1.5 }}>
-                    Generating new keys will <strong>invalidate all existing push subscriptions</strong>. Users will need to re-enable notifications.
-                  </p>
-                  <div style={{ display: 'flex', gap: 8 }}>
-                    <button className="btn btn-sm" style={{ background: 'var(--error)', color: 'white' }} onClick={doGenerate} disabled={generating}>{generating ? 'Generating…' : 'Yes, regenerate keys'}</button>
-                    <button className="btn btn-secondary btn-sm" onClick={() => setShowRegenWarning(false)}>Cancel</button>
-                  </div>
-                </div>
-              )}
-              {!showRegenWarning && (
-                <button className="btn btn-primary btn-sm" onClick={handleGenerateClick} disabled={generating}>
-                  {generating ? 'Generating…' : vapidPublic ? 'Regenerate Keys' : 'Generate Keys'}
-                </button>
-              )}
-              <p style={{ fontSize: 12, color: 'var(--text-tertiary)', marginTop: 12, lineHeight: 1.5 }}>
-                Requires HTTPS. On iOS, the app must be installed to the home screen first.
-              </p>
-            </>
-          )}
-        </div>
       </div>
     </div>
   );

frontend/src/pages/Chat.jsx

@@ -38,7 +38,7 @@ export default function Chat() {
   const [unreadGroups, setUnreadGroups] = useState(new Map());
   const [modal, setModal] = useState(null); // 'profile' | 'users' | 'settings' | 'newchat' | 'help' | 'groupmanager'
   const [drawerOpen, setDrawerOpen] = useState(false);
-  const [features, setFeatures] = useState({ branding: false, groupManager: false });
+  const [features, setFeatures] = useState({ branding: false, groupManager: false, scheduleManager: false, appType: 'JAMA-Chat', teamGroupManagers: [], teamScheduleManagers: [] });
   const [helpDismissed, setHelpDismissed] = useState(true); // true until status loaded
   const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
   const [showSidebar, setShowSidebar] = useState(true);
@@ -73,14 +73,22 @@ export default function Chat() {
   useEffect(() => {
     api.getSettings().then(({ settings }) => {
       setFeatures({
-        branding:     settings.feature_branding      === 'true',
+        branding:         settings.feature_branding          === 'true',
-        groupManager: settings.feature_group_manager === 'true',
+        groupManager:     settings.feature_group_manager     === 'true',
+        scheduleManager:  settings.feature_schedule_manager  === 'true',
+        appType:          settings.app_type || 'JAMA-Chat',
+        teamGroupManagers:    JSON.parse(settings.team_group_managers    || '[]'),
+        teamScheduleManagers: JSON.parse(settings.team_schedule_managers || '[]'),
       });
     }).catch(() => {});
     const handler = () => api.getSettings().then(({ settings }) => {
       setFeatures({
-        branding:     settings.feature_branding      === 'true',
+        branding:         settings.feature_branding          === 'true',
-        groupManager: settings.feature_group_manager === 'true',
+        groupManager:     settings.feature_group_manager     === 'true',
+        scheduleManager:  settings.feature_schedule_manager  === 'true',
+        appType:          settings.app_type || 'JAMA-Chat',
+        teamGroupManagers:    JSON.parse(settings.team_group_managers    || '[]'),
+        teamScheduleManagers: JSON.parse(settings.team_schedule_managers || '[]'),
       });
     }).catch(() => {});
     window.addEventListener('jama:settings-changed', handler);

frontend/src/utils/api.js

@@ -102,6 +102,7 @@ export const api = {
   updateAppName: (name) => req('PATCH', '/settings/app-name', { name }),
   updateColors: (body) => req('PATCH', '/settings/colors', body),
   registerCode: (code) => req('POST', '/settings/register', { code }),
+  updateTeamSettings: (body) => req('PATCH', '/settings/team', body),
 
   // User groups (Group Manager)
   getUserGroups: () => req('GET', '/usergroups'),