Function openClientPortalsModal

public/js/adminPortals.js:714–840

()

//  Public entry point from adminPanel.js
// ─────────────────────────────────────────
export async function openClientPortalsModal() {
  const isDark = document.body.classList.contains('dark-mode');
  const overlayBg = isDark ? 'rgba(0,0,0,0.7)' : 'rgba(0,0,0,0.3)';
  const contentBg = isDark ? '#2c2c2c' : '#fff';
  const contentFg = isDark ? '#e0e0e0' : '#000';
  const borderCol = isDark ? '#555' : '#ccc';

  let modal = document.getElementById('clientPortalsModal');
  if (!modal) {
    modal = document.createElement('div');
    modal.id = 'clientPortalsModal';
    modal.style.cssText = `
      position:fixed; inset:0; background:${overlayBg};
      display:flex; align-items:center; justify-content:center; z-index:3650;
    `;
    modal.innerHTML = `
      <div class="modal-content"
           style="background:${contentBg}; color:${contentFg};
                  padding:16px; max-width:980px; width:95%;
                  position:relative;
                  border:1px solid ${borderCol}; max-height:90vh; overflow:auto;">
        <span id="closeClientPortalsModal"
              class="editor-close-btn"
              style="right:8px; top:8px;">&times;</span>

        <h3>Client Portals</h3>
        <p class="muted" style="margin-top:-6px;">
          Create client portals for specific folders and configure access, users, branding, and intake details per portal.
        </p>

<div class="d-flex justify-content-between align-items-center" style="margin:8px 0 10px;">
  <div>
    <button type="button" id="addPortalBtn" class="btn btn-sm btn-success">
      <i class="material-icons" style="font-size:16px;">cloud_upload</i>
      <span style="margin-left:4px;">Add portal</span>
    </button>

    <button type="button"
            id="clientPortalsQuickAddUser"
            class="btn btn-sm btn-primary ms-1">
      <i class="material-icons" style="font-size:16px; vertical-align:middle;">people</i>
      <span style="margin-left:4px;">Manage users…</span>
    </button>

    <button
      type="button"
      id="clientPortalsOpenUserPerms"
      class="btn btn-sm btn-secondary ms-1">
      <i class="material-icons" style="font-size:16px; vertical-align:middle;">folder_shared</i>
      <span style="margin-left:4px;">Folder access…</span>
    </button>

    <button
      type="button"
      id="clientPortalsOpenUserGroups"
      class="btn btn-sm btn-secondary ms-1">
      <i class="material-icons" style="font-size:16px; vertical-align:middle;">groups</i>
      <span style="margin-left:4px;">User groups…</span>