v0.9.44 permissions changes

frontend/src/components/SettingsModal.jsx

@@ -11,46 +11,47 @@ const APP_TYPES = {
 };
 
 // ── Team Management Tab ───────────────────────────────────────────────────────
-function TeamManagementTab({ features }) {
+function TeamManagementTab() {
   const toast = useToast();
   const [userGroups, setUserGroups] = useState([]);
-  const [groupManagers, setGroupManagers] = useState([]);
-  const [scheduleManagers, setScheduleManagers] = useState([]);
+  const [toolManagers, setToolManagers] = 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 || '[]'));
+      // Read from unified key, fall back to legacy key
+      setToolManagers(JSON.parse(settings.team_tool_managers || settings.team_group_managers || '[]'));
     }).catch(() => {});
   }, []);
 
-  const toggle = (id, list, setList) => {
-    setList(prev => prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id]);
+  const toggle = (id) => {
+    setToolManagers(prev => prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id]);
   };
 
   const handleSave = async () => {
     setSaving(true);
     try {
-      await api.updateTeamSettings({ groupManagers, scheduleManagers });
+      await api.updateTeamSettings({ toolManagers });
       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>
+  return (
+    <div>
+      <div className="settings-section-label">Tool Managers</div>
+      <p style={{ fontSize: 12, color: 'var(--text-tertiary)', marginBottom: 12 }}>
+        Members of selected groups can access Group Manager, Schedule Manager, and User Manager. Admin users always have access to all three tools.
+      </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>
+        <p style={{ fontSize: 13, color: 'var(--text-tertiary)', marginBottom: 16 }}>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' }}>
+        <div style={{ border: '1px solid var(--border)', borderRadius: 'var(--radius)', overflow: 'hidden', marginBottom: 16 }}>
           {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)}
+              <input type="checkbox" checked={toolManagers.includes(g.id)} onChange={() => toggle(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>
@@ -59,28 +60,11 @@ function TeamManagementTab({ features }) {
           ))}
         </div>
       )}
-      {selected.length === 0 && (
-        <p style={{ fontSize: 12, color: 'var(--text-tertiary)', marginTop: 6 }}>No groups selected — admins only.</p>
+      {toolManagers.length === 0 && (
+        <p style={{ fontSize: 12, color: 'var(--text-tertiary)', marginBottom: 16 }}>No groups selected — tools are admin-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'}
+        {saving ? 'Saving…' : 'Save'}
       </button>
     </div>
   );
@@ -324,7 +308,7 @@ export default function SettingsModal({ onClose, onFeaturesChanged }) {
           ))}
         </div>
 
-        {tab === 'team'         && <TeamManagementTab features={{ appType }} />}
+        {tab === 'team'         && <TeamManagementTab />}
         {tab === 'registration' && <RegistrationTab onFeaturesChanged={onFeaturesChanged} />}
         {tab === 'webpush'      && <WebPushTab />}
       </div>