Implement role-based access control, admin portal, and global loader UI

app.py

@@ -1,3 +1,4 @@
+import os
 from dotenv import load_dotenv
 
 load_dotenv()
@@ -13,8 +14,10 @@ from routes.system import stages_bp, activities_bp, stats_bp, columns_bp, settin
 from routes.ai import ai_bp
 from routes.learning import learning_bp
 from routes.stt import stt_bp
+from routes.auth import auth_bp
 
 app = Flask(__name__)
+app.secret_key = os.environ.get("SECRET_KEY", "prospectiq_secure_dev_session_key_98765")
 
 from db import init_db, is_supabase_active
 # Ensure database is initialized
@@ -28,6 +31,7 @@ def index():
     return render_template("index.html")
 
 # Register Blueprints
+app.register_blueprint(auth_bp, url_prefix='/api/auth')
 app.register_blueprint(companies_bp, url_prefix='/api/companies')
 app.register_blueprint(contacts_bp, url_prefix='/api/contacts')
 app.register_blueprint(stages_bp, url_prefix='/api/stages')
@@ -43,8 +47,6 @@ app.register_blueprint(learning_bp, url_prefix='/api/learning')
 app.register_blueprint(bootstrap_bp, url_prefix='/api/bootstrap')
 app.register_blueprint(stt_bp)
 
-import os
-
 if __name__ == "__main__":
     port = int(os.environ.get("PORT", 5000))
     app.run(host="0.0.0.0", port=port, debug=True)

celery_app.py

@@ -9,7 +9,7 @@ sys.path.insert(0, os.path.abspath(os.path.dirname(__file__)))
 
 from celery import Celery
 
-redis_url = os.environ.get("REDIS_URL", "redis://localhost:6379/0")
+redis_url = os.environ.get("REDIS_URL", "redis://127.0.0.1:6379/0")
 broker_url = os.environ.get("CELERY_BROKER_URL", redis_url)
 backend_url = os.environ.get("CELERY_RESULT_BACKEND", redis_url)
 

db.py

@@ -114,6 +114,8 @@ class PostgresCursorWrapper:
             sql = sql.replace("INSERT OR IGNORE INTO", "INSERT INTO") + " ON CONFLICT DO NOTHING"
 
         is_insert = sql_upper.startswith("INSERT")
+        if is_insert and "RETURNING" not in sql_upper and "ROLE_PERMISSIONS" not in sql_upper:
+            sql = sql.rstrip().rstrip(';') + " RETURNING id"
 
         # Invalidate stage or user caches automatically on database writes
         is_write = sql_upper.startswith("INSERT") or sql_upper.startswith("UPDATE") or sql_upper.startswith("DELETE")
@@ -132,6 +134,13 @@ class PostgresCursorWrapper:
             self.cursor.execute(sql)
 
         self._lastrowid = None
+        if is_insert and "RETURNING" in sql.upper():
+            try:
+                row = self.cursor.fetchone()
+                if row:
+                    self._lastrowid = row[0]
+            except Exception:
+                pass
             
         return self
 
@@ -461,16 +470,47 @@ def init_db():
 from flask import request
 
 def get_request_user():
-    user_id = request.headers.get("X-User-Id")
-    role = request.headers.get("X-User-Role")
-    name = request.headers.get("X-User-Name")
+    from flask import session
+    try:
+        if 'user_id' in session:
+            return session['user_id'], session['user_role'], session['user_name']
+    except Exception:
+        pass
+
+    try:
+        user_id = request.headers.get("X-User-Id")
+        role = request.headers.get("X-User-Role")
+        name = request.headers.get("X-User-Name")
+        try:
+            user_id = int(user_id) if user_id else 2
+        except (ValueError, TypeError):
+            user_id = 2
+        role = role if role else "BD Rep"
+        name = name if name else "bd rep1"
+        return user_id, role, name
+    except Exception:
+        return 2, "BD Rep", "bd rep1"
+
+def get_request_tenant_id():
+    from flask import session
+    try:
+        if 'tenant_id' in session:
+            return session['tenant_id']
+    except Exception:
+        pass
+
     try:
-        user_id = int(user_id) if user_id else 2
-    except (ValueError, TypeError):
-        user_id = 2
-    role = role if role else "BD Rep"
-    name = name if name else "bd rep1"
-    return user_id, role, name
+        user_id, _, _ = get_request_user()
+        conn = get_db_connection()
+        cursor = conn.cursor()
+        cursor.execute("SELECT tenant_id FROM users WHERE id = ?", (user_id,))
+        row = cursor.fetchone()
+        conn.close()
+        if row:
+            return row[0]
+    except Exception:
+        pass
+    return 1
 
 def get_user_access_level(db_conn, user_id, user_role, company_id):
     if user_role in ('Super Admin', 'Admin'):
@@ -530,7 +570,7 @@ def get_redis_client():
             os.environ.get("REDIS_URL")
             or os.environ.get("CELERY_BROKER_URL")
             or os.environ.get("CELERY_RESULT_BACKEND")
-            or "redis://localhost:6379/0"
+            or "redis://127.0.0.1:6379/0"
         )
         client = redis.Redis.from_url(redis_url, decode_responses=True, socket_connect_timeout=2)
         client.ping()

routes/system.py

@@ -1,6 +1,6 @@
 import re
 from flask import Blueprint, jsonify, request
-from db import get_db_connection, dict_from_row, get_request_user, get_user_access_level
+from db import get_db_connection, dict_from_row, get_request_user, get_user_access_level, get_request_tenant_id
 from services.ai_service import base_company_context_status, save_base_company_context
 
 stages_bp = Blueprint('stages', __name__)
@@ -416,14 +416,16 @@ def api_bootstrap():
             cache_set("prospectiq:stages", stages, timeout=3600)
 
         # Fetch companies
+        tenant_id = get_request_tenant_id()
         if role in ('Super Admin', 'Admin', 'Viewer'):
             cursor.execute("""
                 SELECT c.*, s.name as stage_name, s.color_bg as stage_color_bg, s.color_text as stage_color_text, u.name as rep_name
                 FROM companies c
                 JOIN stages s ON c.stage_id = s.id
                 LEFT JOIN users u ON c.assigned_rep_id = u.id
+                WHERE c.tenant_id = ?
                 ORDER BY c.maplempss_fit_score DESC, c.name ASC
-            """)
+            """, (tenant_id,))
         else:
             cursor.execute("""
                 SELECT 
@@ -441,8 +443,9 @@ def api_bootstrap():
                 FROM companies c
                 JOIN stages s ON c.stage_id = s.id
                 LEFT JOIN users u ON c.assigned_rep_id = u.id
+                WHERE c.tenant_id = ?
                 ORDER BY c.maplempss_fit_score DESC, c.name ASC
-            """, (user_id, user_id, user_id, user_id, user_id, user_id, user_id, user_id))
+            """, (user_id, user_id, user_id, user_id, user_id, user_id, user_id, user_id, tenant_id))
         companies = [dict_from_row(r) for r in cursor.fetchall()]
 
         # Fetch contacts
@@ -451,16 +454,17 @@ def api_bootstrap():
                 SELECT co.*, cp.name as company_name 
                 FROM contacts co
                 JOIN companies cp ON co.company_id = cp.id
+                WHERE cp.tenant_id = ?
                 ORDER BY co.first_name ASC
-            """)
+            """, (tenant_id,))
         else:
             cursor.execute("""
                 SELECT co.*, cp.name as company_name 
                 FROM contacts co
                 JOIN companies cp ON co.company_id = cp.id
-                WHERE cp.assigned_rep_id = ?
+                WHERE cp.tenant_id = ? AND cp.assigned_rep_id = ?
                 ORDER BY co.first_name ASC
-            """, (user_id,))
+            """, (tenant_id, user_id))
         contacts = [dict_from_row(r) for r in cursor.fetchall()]
 
         # Fetch company columns schema if not cached

static/js/api.js

@@ -1,6 +1,6 @@
 async function loadDataFromDb() {
+    showGlobalLoader('Synchronizing workspace data...');
     try {
-        // Try the combined bootstrap endpoint first (single round-trip)
         const bootstrapRes = await fetch('/api/bootstrap');
         if (bootstrapRes.ok) {
             const data = await bootstrapRes.json();
@@ -101,6 +101,8 @@ async function loadDataFromDb() {
         }
     } catch (err) {
         console.error("Failed to load data from database: ", err);
+    } finally {
+        hideGlobalLoader();
     }
 }
 

static/js/app.js

@@ -1,11 +1,22 @@
 
+// Global fetch interceptor to inject simulated user context
 // Global fetch interceptor to inject simulated user context
 (function() {
     const originalFetch = window.fetch;
     window.fetch = async function(url, options = {}) {
-        const userId = sessionStorage.getItem('prospectiq_user_id') || '2';
-        const userRole = sessionStorage.getItem('prospectiq_user_role') || 'BD Rep';
-        const userName = sessionStorage.getItem('prospectiq_user_name') || 'bd rep1';
+        let userId = '2';
+        let userRole = 'BD Rep';
+        let userName = 'bd rep1';
+        
+        if (window.currentUser) {
+            userId = String(window.currentUser.id);
+            userRole = window.currentUser.role;
+            userName = window.currentUser.name;
+        } else {
+            userId = sessionStorage.getItem('prospectiq_user_id') || '2';
+            userRole = sessionStorage.getItem('prospectiq_user_role') || 'BD Rep';
+            userName = sessionStorage.getItem('prospectiq_user_name') || 'bd rep1';
+        }
         
         options.headers = options.headers || {};
         if (options.headers instanceof Headers) {
@@ -25,6 +36,217 @@
     };
 })();
 
+// Global Authentication State
+window.currentUser = null;
+window.userPermissions = [];
+
+async function checkAuthentication() {
+    showGlobalLoader('Verifying session...');
+    try {
+        const res = await fetch('/api/auth/me');
+        if (res.ok) {
+            const data = await res.json();
+            
+            // Set viewMode default to portal on new user login session
+            if (!window.currentUser || window.currentUser.id !== data.user.id) {
+                sessionStorage.setItem('admin_view_mode', 'portal');
+            }
+
+            window.currentUser = data.user;
+            window.userPermissions = data.user.permissions;
+            
+            // Sync to sessionStorage for backward compatibility across other script files
+            sessionStorage.setItem('prospectiq_user_id', String(data.user.id));
+            sessionStorage.setItem('prospectiq_user_role', data.user.role);
+            sessionStorage.setItem('prospectiq_user_name', data.user.name);
+            
+            const authContainer = document.getElementById('auth-container');
+            if (authContainer) authContainer.classList.add('d-none');
+            const appLayout = document.querySelector('.app-layout');
+            if (appLayout) appLayout.classList.remove('blur-layout');
+            
+            // Show sidebar and header when logged in
+            const sidebar = document.querySelector('.sidebar');
+            const header = document.querySelector('.top-command-header');
+            if (sidebar) sidebar.style.display = '';
+            if (header) header.style.display = '';
+            
+            updateActiveUserUIFromSession();
+            renderConditionalNav();
+            hideGlobalLoader();
+            return true;
+        }
+    } catch (err) {
+        console.warn("User not authenticated:", err);
+    }
+    
+    sessionStorage.removeItem('prospectiq_user_id');
+    sessionStorage.removeItem('prospectiq_user_role');
+    sessionStorage.removeItem('prospectiq_user_name');
+    window.currentUser = null;
+    window.userPermissions = [];
+    showLoginScreen();
+    hideGlobalLoader();
+    return false;
+}
+
+function showLoginScreen() {
+    const authContainer = document.getElementById('auth-container');
+    if (authContainer) authContainer.classList.remove('d-none');
+    const appLayout = document.querySelector('.app-layout');
+    if (appLayout) appLayout.classList.add('blur-layout');
+    
+    // Hide sidebar and header during login
+    const sidebar = document.querySelector('.sidebar');
+    const header = document.querySelector('.top-command-header');
+    if (sidebar) sidebar.style.display = 'none';
+    if (header) header.style.display = 'none';
+}
+
+function updateActiveUserUIFromSession() {
+    if (!window.currentUser) return;
+    const nameEl = document.getElementById('user-profile-name');
+    const roleEl = document.getElementById('user-profile-role');
+    const avatarEl = document.getElementById('user-profile-avatar');
+    
+    if (nameEl) nameEl.textContent = window.currentUser.name;
+    if (roleEl) roleEl.textContent = window.currentUser.role;
+    if (avatarEl) {
+        let initials = window.currentUser.name.split(' ').map(n => n[0]).join('').substring(0, 2).toUpperCase();
+        avatarEl.textContent = initials;
+        avatarEl.className = 'user-avatar';
+        if (window.currentUser.role === 'Admin') {
+            avatarEl.classList.add('admin');
+        } else if (window.currentUser.role === 'BD Rep') {
+            avatarEl.classList.add('bd-rep');
+        } else {
+            avatarEl.classList.add('viewer');
+        }
+    }
+}
+
+function renderConditionalNav() {
+    const dropdown = document.getElementById('user-profile-dropdown');
+    if (!dropdown) return;
+    
+    // Clear any previous dynamic options to prevent duplicates
+    const oldLogout = dropdown.querySelector('.logout-option-item');
+    if (oldLogout) oldLogout.remove();
+    const oldAdmin = dropdown.querySelector('.admin-toggle-option-item');
+    if (oldAdmin) oldAdmin.remove();
+
+    // 1. If Admin, append workspace/portal toggle option with premium UI style
+    const isAdmin = window.userPermissions && window.userPermissions.includes('users:manage');
+    if (isAdmin) {
+        const viewMode = sessionStorage.getItem('admin_view_mode') || 'portal';
+        const adminDiv = document.createElement('div');
+        adminDiv.className = 'admin-toggle-option-item';
+        
+        // Premium custom layout properties for high-contrast card look
+        adminDiv.style.display = 'flex';
+        adminDiv.style.alignItems = 'center';
+        adminDiv.style.gap = '10px';
+        adminDiv.style.padding = '8px 12px';
+        adminDiv.style.margin = '8px 8px 4px 8px';
+        adminDiv.style.borderRadius = '10px';
+        adminDiv.style.cursor = 'pointer';
+        adminDiv.style.transition = 'all 0.2s ease';
+        
+        if (viewMode === 'workspace') {
+            // High-contrast slate gradient for Admin Console Toggle
+            adminDiv.style.background = 'linear-gradient(135deg, #1e293b 0%, #0f172a 100%)';
+            adminDiv.style.color = '#ffffff';
+            adminDiv.style.boxShadow = '0 2px 8px rgba(15, 23, 42, 0.15)';
+            adminDiv.style.border = 'none';
+            
+            adminDiv.innerHTML = `
+                <div style="width: 28px; height: 28px; background: rgba(255,255,255,0.15) !important; color: white !important; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 1rem;"><i class="bi bi-shield-check"></i></div>
+                <div style="flex-grow: 1;">
+                    <div style="font-weight: 600; color: #ffffff; line-height: 1.2; font-size: 0.8rem;">Admin Console</div>
+                    <div style="font-size: 0.65rem; color: #cbd5e1; line-height: 1.2; margin-top: 1px;">Manage reps & roles</div>
+                </div>
+                <i class="bi bi-chevron-right" style="color: #94a3b8 !important; font-size: 0.75rem;"></i>
+            `;
+            
+            adminDiv.addEventListener('mouseenter', () => {
+                adminDiv.style.background = 'linear-gradient(135deg, #334155 0%, #1e293b 100%)';
+                adminDiv.style.transform = 'translateY(-1px)';
+            });
+            adminDiv.addEventListener('mouseleave', () => {
+                adminDiv.style.background = 'linear-gradient(135deg, #1e293b 0%, #0f172a 100%)';
+                adminDiv.style.transform = 'translateY(0)';
+            });
+            
+            adminDiv.addEventListener('click', (e) => {
+                e.stopPropagation();
+                sessionStorage.setItem('admin_view_mode', 'portal');
+                window.location.hash = '#/';
+                if (typeof handleNavigation === 'function') handleNavigation();
+                renderConditionalNav();
+            });
+        } else {
+            // Elegant green gradient for Sales Workspace Toggle
+            adminDiv.style.background = 'linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%)';
+            adminDiv.style.color = '#14532d';
+            adminDiv.style.boxShadow = '0 2px 8px rgba(20, 83, 45, 0.08)';
+            adminDiv.style.border = '1px solid #bbf7d0';
+            
+            adminDiv.innerHTML = `
+                <div style="width: 28px; height: 28px; background: #22c55e !important; color: white !important; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 1rem;"><i class="bi bi-briefcase"></i></div>
+                <div style="flex-grow: 1;">
+                    <div style="font-weight: 600; color: #14532d; line-height: 1.2; font-size: 0.8rem;">Sales Workspace</div>
+                    <div style="font-size: 0.65rem; color: #16a34a; line-height: 1.2; margin-top: 1px;">Access pipeline data</div>
+                </div>
+                <i class="bi bi-chevron-right" style="color: #16a34a !important; font-size: 0.75rem;"></i>
+            `;
+            
+            adminDiv.addEventListener('mouseenter', () => {
+                adminDiv.style.background = 'linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%)';
+                adminDiv.style.transform = 'translateY(-1px)';
+            });
+            adminDiv.addEventListener('mouseleave', () => {
+                adminDiv.style.background = 'linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%)';
+                adminDiv.style.transform = 'translateY(0)';
+            });
+            
+            adminDiv.addEventListener('click', (e) => {
+                e.stopPropagation();
+                sessionStorage.setItem('admin_view_mode', 'workspace');
+                window.location.hash = '#/';
+                if (typeof handleNavigation === 'function') handleNavigation();
+                renderConditionalNav();
+            });
+        }
+        dropdown.appendChild(adminDiv);
+    }
+
+    // 2. Append Logout option
+    const logoutDiv = document.createElement('div');
+    logoutDiv.className = 'user-option-item logout-option-item';
+    logoutDiv.style.borderTop = '1px solid rgba(0,0,0,0.06)';
+    logoutDiv.style.marginTop = '4px';
+    logoutDiv.style.paddingTop = '8px';
+    logoutDiv.innerHTML = `
+        <div class="option-avatar" style="background: #dc3545 !important; color: white !important; display: flex; align-items: center; justify-content: center;"><i class="bi bi-box-arrow-right"></i></div>
+        <div>
+            <div style="font-weight: 600; color: #dc3545; line-height: 1.2;">Sign Out</div>
+            <div style="font-size: 0.68rem; color: var(--text-secondary); line-height: 1.2;">Exit Session</div>
+        </div>
+    `;
+    logoutDiv.addEventListener('click', async (e) => {
+        e.stopPropagation();
+        showGlobalLoader('Logging out, please wait...');
+        await fetch('/api/auth/logout', { method: 'POST' });
+        window.location.reload();
+    });
+    dropdown.appendChild(logoutDiv);
+
+    // Remove sidebar toggle if present to avoid duplicate buttons
+    const oldToggle = document.getElementById('nav-admin-workspace-toggle');
+    if (oldToggle) oldToggle.remove();
+}
+
+
 function commandEscapeHtml(value) {
     const div = document.createElement('div');
     div.textContent = value == null ? '' : String(value);
@@ -328,9 +550,12 @@ document.addEventListener('DOMContentLoaded', async () => {
     
     // Check if collapsed state was saved in localStorage
     const isCollapsed = localStorage.getItem('prospectiq-sidebar-collapsed') === 'true';
+    const sidebarIcon = document.getElementById('sidebar-toggle-icon');
     if (isCollapsed) {
         document.body.classList.add('sidebar-collapsed');
-        if (sidebarToggleBtn) sidebarToggleBtn.textContent = '>>';
+        if (sidebarIcon) {
+            sidebarIcon.className = 'bi bi-chevron-right';
+        }
         if (sidebarLogoText) sidebarLogoText.textContent = 'PIQ';
     }
 
@@ -339,25 +564,15 @@ document.addEventListener('DOMContentLoaded', async () => {
             const willCollapse = !document.body.classList.contains('sidebar-collapsed');
             document.body.classList.toggle('sidebar-collapsed', willCollapse);
             localStorage.setItem('prospectiq-sidebar-collapsed', willCollapse);
-            sidebarToggleBtn.textContent = willCollapse ? '>>' : '<<';
-            if (sidebarLogoText) {
-                sidebarLogoText.textContent = willCollapse ? 'PIQ' : 'ProspectIQ';
-            }
-            const profileDropdown = document.getElementById('user-profile-dropdown');
-            const profileTrigger = document.getElementById('user-profile-trigger');
-            if (profileDropdown) {
-                profileDropdown.style.display = 'none';
-                profileDropdown.classList.remove('is-floating');
-                profileDropdown.style.left = '';
-                profileDropdown.style.top = '';
-                profileDropdown.style.width = '';
-            }
-            if (profileTrigger) {
-                profileTrigger.setAttribute('aria-expanded', 'false');
-            }
-            // Trigger window resize to adjust layout if needed
-            window.dispatchEvent(new Event('resize'));
-        });
+            if (sidebarIcon) {
+                sidebarIcon.className = willCollapse ? 'bi bi-chevron-right' : 'bi bi-chevron-left';
+            }
+            if (sidebarLogoText) {
+                sidebarLogoText.textContent = willCollapse ? 'PIQ' : 'ProspectIQ';
+            }
+            // Trigger window resize to adjust layout if needed
+            window.dispatchEvent(new Event('resize'));
+        });
     }
 
     const searchInput = document.getElementById('global-command-bar');
@@ -388,170 +603,239 @@ document.addEventListener('DOMContentLoaded', async () => {
     updatePlaceholder();
     window.addEventListener('resize', updatePlaceholder);
 
-    // Wire User Simulator Switcher (Custom Profile Widget in Sidebar Footer)
+    // Dynamic Authentication Setup
+    setupAuthListeners();
+
+    // Wire User Profile Dropdown Toggle (Custom Profile Widget in Sidebar Footer)
     const profileTrigger = document.getElementById('user-profile-trigger');
     const profileDropdown = document.getElementById('user-profile-dropdown');
     
     if (profileTrigger && profileDropdown) {
-        const savedUserId = sessionStorage.getItem('prospectiq_user_id') || '2';
-        const savedRole = sessionStorage.getItem('prospectiq_user_role') || 'BD Rep';
-        const savedName = sessionStorage.getItem('prospectiq_user_name') || 'bd rep1';
-        
-        // Function to update UI display of current user
-        const updateActiveUserUI = (userId, role, name) => {
-            const avatarEl = document.getElementById('user-profile-avatar');
-            const nameEl = document.getElementById('user-profile-name');
-            const roleEl = document.getElementById('user-profile-role');
-            
-            if (nameEl) nameEl.textContent = name;
-            if (roleEl) roleEl.textContent = role;
-            if (avatarEl) {
-                // Determine initials
-                let initials = name.split(' ').map(n => n[0]).join('').substring(0, 2).toUpperCase();
-                if (name === 'bd rep1') initials = 'R1';
-                else if (name === 'bd rep2') initials = 'R2';
-                else if (name === 'bd rep3') initials = 'R3';
-                else if (name === 'admin1') initials = 'A1';
-                else if (name === 'viewer1') initials = 'V1';
-                avatarEl.textContent = initials;
-                
-                // Clear existing classes and add the custom role-based theme color
-                avatarEl.className = 'user-avatar';
-                if (role === 'Admin') {
-                    avatarEl.classList.add('admin');
-                } else if (role === 'BD Rep') {
-                    avatarEl.classList.add('bd-rep');
-                } else {
-                    avatarEl.classList.add('viewer');
-                }
+        const resetProfileDropdownPosition = () => {
+            profileDropdown.classList.remove('is-floating');
+            profileDropdown.style.left = '';
+            profileDropdown.style.top = '';
+            profileDropdown.style.width = '';
+        };
+
+        const positionProfileDropdown = () => {
+            const collapsedDesktop = document.body.classList.contains('sidebar-collapsed') && window.innerWidth >= 992;
+            if (!collapsedDesktop) {
+                resetProfileDropdownPosition();
+                return;
             }
+
+            profileDropdown.classList.add('is-floating');
+            profileDropdown.style.width = '220px';
+
+            const triggerRect = profileTrigger.getBoundingClientRect();
+            const sidebarRect = document.querySelector('.sidebar')?.getBoundingClientRect();
+            const dropdownRect = profileDropdown.getBoundingClientRect();
+            const gap = 10;
+            const viewportPadding = 12;
+            const dropdownWidth = dropdownRect.width || 220;
+            const dropdownHeight = dropdownRect.height || 260;
+            const anchorLeft = Math.max(
+                triggerRect.right + gap,
+                (sidebarRect?.right || triggerRect.right) + gap
+            );
+
+            const left = Math.min(
+                anchorLeft,
+                window.innerWidth - dropdownWidth - viewportPadding
+            );
+            const top = Math.min(
+                Math.max(viewportPadding, triggerRect.bottom - dropdownHeight),
+                window.innerHeight - dropdownHeight - viewportPadding
+            );
+
+            profileDropdown.style.left = `${Math.max(viewportPadding, left)}px`;
+            profileDropdown.style.top = `${Math.max(viewportPadding, top)}px`;
+        };
+
+        const openProfileDropdown = () => {
+            profileDropdown.style.display = 'block';
+            profileTrigger.setAttribute('aria-expanded', 'true');
+            positionProfileDropdown();
+        };
+
+        const closeProfileDropdown = () => {
+            profileDropdown.style.display = 'none';
+            profileTrigger.setAttribute('aria-expanded', 'false');
+            resetProfileDropdownPosition();
+        };
+
+        // Toggle dropdown on click
+        profileTrigger.addEventListener('click', (e) => {
+            e.stopPropagation();
+            const isOpen = profileDropdown.style.display === 'block';
+            if (isOpen) closeProfileDropdown();
+            else openProfileDropdown();
+        });
+
+        // Close dropdown when clicking anywhere else
+        document.addEventListener('click', () => {
+            closeProfileDropdown();
+        });
+
+        window.addEventListener('resize', () => {
+            if (profileDropdown.style.display === 'block') positionProfileDropdown();
+        });
+
+        window.addEventListener('scroll', () => {
+            if (profileDropdown.style.display === 'block') positionProfileDropdown();
+        }, true);
+    }
+
+    // Wire setupAuthListeners helper
+    function setupAuthListeners() {
+        const tabSignin = document.getElementById('auth-tab-signin');
+        const tabSignup = document.getElementById('auth-tab-signup');
+        const groupOrg = document.getElementById('auth-group-org');
+        const groupName = document.getElementById('auth-group-name');
+        const subtitle = document.getElementById('auth-subtitle');
+        const submitBtn = document.getElementById('auth-submit-btn');
+        const authForm = document.getElementById('auth-form');
+        const errorAlert = document.getElementById('auth-error-alert');
+        
+        let isSignupMode = false;
+        
+        if (tabSignin && tabSignup) {
+            tabSignin.addEventListener('click', () => {
+                isSignupMode = false;
+                tabSignin.classList.add('active');
+                tabSignup.classList.remove('active');
+                if (groupOrg) groupOrg.classList.add('d-none');
+                if (groupName) groupName.classList.add('d-none');
+                const orgInput = document.getElementById('auth-org-name');
+                const userInput = document.getElementById('auth-user-name');
+                if (orgInput) orgInput.required = false;
+                if (userInput) userInput.required = false;
+                if (subtitle) subtitle.textContent = 'Sign in to manage your pipeline';
+                if (submitBtn) submitBtn.textContent = 'Sign In';
+                if (errorAlert) errorAlert.classList.add('d-none');
+            });
             
-            // Mark active item in dropdown list
-            const optionItems = profileDropdown.querySelectorAll('.user-option-item');
-            optionItems.forEach(item => {
-                const val = item.getAttribute('data-value');
-                if (val.startsWith(`${userId}|`)) {
-                    item.classList.add('active');
-                } else {
-                    item.classList.remove('active');
-                }
+            tabSignup.addEventListener('click', () => {
+                isSignupMode = true;
+                tabSignup.classList.add('active');
+                tabSignin.classList.remove('active');
+                if (groupOrg) groupOrg.classList.remove('d-none');
+                if (groupName) groupName.classList.remove('d-none');
+                const orgInput = document.getElementById('auth-org-name');
+                const userInput = document.getElementById('auth-user-name');
+                if (orgInput) orgInput.required = true;
+                if (userInput) userInput.required = true;
+                if (subtitle) subtitle.textContent = 'Register a new organization and admin account';
+                if (submitBtn) submitBtn.textContent = 'Register Organization';
+                if (errorAlert) errorAlert.classList.add('d-none');
             });
-        };
+        }
         
-        // Initial setup on page load
-        updateActiveUserUI(savedUserId, savedRole, savedName);
-
-        const resetProfileDropdownPosition = () => {
-            profileDropdown.classList.remove('is-floating');
-            profileDropdown.style.left = '';
-            profileDropdown.style.top = '';
-            profileDropdown.style.width = '';
-        };
-
-        const positionProfileDropdown = () => {
-            const collapsedDesktop = document.body.classList.contains('sidebar-collapsed') && window.innerWidth >= 992;
-            if (!collapsedDesktop) {
-                resetProfileDropdownPosition();
-                return;
-            }
-
-            profileDropdown.classList.add('is-floating');
-            profileDropdown.style.width = '220px';
-
-            const triggerRect = profileTrigger.getBoundingClientRect();
-            const sidebarRect = document.querySelector('.sidebar')?.getBoundingClientRect();
-            const dropdownRect = profileDropdown.getBoundingClientRect();
-            const gap = 10;
-            const viewportPadding = 12;
-            const dropdownWidth = dropdownRect.width || 220;
-            const dropdownHeight = dropdownRect.height || 260;
-            const anchorLeft = Math.max(
-                triggerRect.right + gap,
-                (sidebarRect?.right || triggerRect.right) + gap
-            );
-
-            const left = Math.min(
-                anchorLeft,
-                window.innerWidth - dropdownWidth - viewportPadding
-            );
-            const top = Math.min(
-                Math.max(viewportPadding, triggerRect.bottom - dropdownHeight),
-                window.innerHeight - dropdownHeight - viewportPadding
-            );
-
-            profileDropdown.style.left = `${Math.max(viewportPadding, left)}px`;
-            profileDropdown.style.top = `${Math.max(viewportPadding, top)}px`;
-        };
-
-        const openProfileDropdown = () => {
-            profileDropdown.style.display = 'block';
-            profileTrigger.setAttribute('aria-expanded', 'true');
-            positionProfileDropdown();
-        };
-
-        const closeProfileDropdown = () => {
-            profileDropdown.style.display = 'none';
-            profileTrigger.setAttribute('aria-expanded', 'false');
-            resetProfileDropdownPosition();
-        };
-
-        // Toggle dropdown on click
-        profileTrigger.addEventListener('click', (e) => {
-            e.stopPropagation();
-            const isOpen = profileDropdown.style.display === 'block';
-            if (isOpen) closeProfileDropdown();
-            else openProfileDropdown();
-        });
-
-        // Close dropdown when clicking anywhere else
-        document.addEventListener('click', () => {
-            closeProfileDropdown();
-        });
-
-        window.addEventListener('resize', () => {
-            if (profileDropdown.style.display === 'block') positionProfileDropdown();
-        });
-
-        window.addEventListener('scroll', () => {
-            if (profileDropdown.style.display === 'block') positionProfileDropdown();
-        }, true);
-
-        // Handle option selection
-        const optionItems = profileDropdown.querySelectorAll('.user-option-item');
-        optionItems.forEach(item => {
-            item.addEventListener('click', async (e) => {
-                e.stopPropagation();
-                const val = item.getAttribute('data-value');
-                const [userId, role, name] = val.split('|');
+        if (authForm) {
+            authForm.addEventListener('submit', async (e) => {
+                e.preventDefault();
+                if (errorAlert) errorAlert.classList.add('d-none');
                 
-                sessionStorage.setItem('prospectiq_user_id', userId);
-                sessionStorage.setItem('prospectiq_user_role', role);
-                sessionStorage.setItem('prospectiq_user_name', name);
-
-                updateActiveUserUI(userId, role, name);
-                closeProfileDropdown();
+                const emailInput = document.getElementById('auth-email');
+                const passwordInput = document.getElementById('auth-password');
+                const email = emailInput ? emailInput.value : '';
+                const password = passwordInput ? passwordInput.value : '';
                 
-                if (typeof addNotification === 'function') {
-                    addNotification('User Switched', `Simulating as ${name} (${role})`);
-                }
-                if (typeof loadDataFromDb === 'function') {
-                    await loadDataFromDb();
-                }
-                if (typeof handleNavigation === 'function') {
-                    handleNavigation();
+                if (isSignupMode) {
+                    const orgInput = document.getElementById('auth-org-name');
+                    const nameInput = document.getElementById('auth-user-name');
+                    const org_name = orgInput ? orgInput.value : '';
+                    const name = nameInput ? nameInput.value : '';
+                    
+                    showGlobalLoader('Creating organization & admin account...');
+                    try {
+                        const res = await fetch('/api/auth/register', {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify({ org_name, name, email, password })
+                        });
+                        const data = await res.json();
+                        if (res.ok) {
+                            showGlobalLoader('Authenticating details...');
+                            const loginRes = await fetch('/api/auth/login', {
+                                method: 'POST',
+                                headers: { 'Content-Type': 'application/json' },
+                                body: JSON.stringify({ email, password })
+                            });
+                            if (loginRes.ok) {
+                                await checkAuthentication();
+                                await loadDataFromDb();
+                                handleNavigation();
+                            } else {
+                                hideGlobalLoader();
+                                if (tabSignin) tabSignin.click();
+                                const emailInputSign = document.getElementById('auth-email');
+                                const passwordInputSign = document.getElementById('auth-password');
+                                if (emailInputSign) emailInputSign.value = email;
+                                if (passwordInputSign) passwordInputSign.value = password;
+                                if (errorAlert) {
+                                    errorAlert.textContent = 'Registration succeeded. Please sign in.';
+                                    errorAlert.classList.remove('d-none');
+                                }
+                            }
+                        } else {
+                            hideGlobalLoader();
+                            if (errorAlert) {
+                                errorAlert.textContent = data.error || 'Registration failed';
+                                errorAlert.classList.remove('d-none');
+                            }
+                        }
+                    } catch (err) {
+                        hideGlobalLoader();
+                        if (errorAlert) {
+                            errorAlert.textContent = 'Network error connecting to server';
+                            errorAlert.classList.remove('d-none');
+                        }
+                    }
+                } else {
+                    showGlobalLoader('Authenticating credentials...');
+                    try {
+                        const res = await fetch('/api/auth/login', {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify({ email, password })
+                        });
+                        const data = await res.json();
+                        if (res.ok) {
+                            await checkAuthentication();
+                            await loadDataFromDb();
+                            handleNavigation();
+                        } else {
+                            hideGlobalLoader();
+                            if (errorAlert) {
+                                errorAlert.textContent = data.error || 'Invalid credentials';
+                                errorAlert.classList.remove('d-none');
+                            }
+                        }
+                    } catch (err) {
+                        hideGlobalLoader();
+                        if (errorAlert) {
+                            errorAlert.textContent = 'Network error connecting to server';
+                            errorAlert.classList.remove('d-none');
+                        }
+                    }
                 }
             });
-        });
+        }
     }
 
     // Listen for hash change for routing
     window.addEventListener('hashchange', handleNavigation);
     
-    // Load all initial data in one shot via bootstrap endpoint
-    await loadDataFromDb();
-
-    // Initial load check
-    handleNavigation();
+    // Check if user is authenticated before loading initial data and executing route
+    const isAuthenticated = await checkAuthentication();
+    if (isAuthenticated) {
+        // Load all initial data in one shot via bootstrap endpoint
+        await loadDataFromDb();
+        // Initial load check
+        handleNavigation();
+    }
 
     // Ctrl + K functionality removed per user request
 

static/js/components/tasks.js

@@ -11,13 +11,10 @@ function initTaskManagement() {
         window.calendarCurrentDate = new Date();
     }
 
-    // Populate initial tasks if none exist
+    // Ensure no mock tasks are loaded in local storage
     let tasks = JSON.parse(localStorage.getItem('prospectiq-tasks') || '[]');
-    if (tasks.length === 0) {
-        tasks = [
-            { id: 1, title: 'Upload primary contact data sheets', completed: true, date: formatDate(new Date()), time: '09:00', notes: 'Initial import step' },
-            { id: 2, title: 'Read the learning playbook on MapleMPSS', completed: false, date: formatDate(new Date()), time: '14:00', notes: 'Read carefully' }
-        ];
+    if (tasks.length > 0 && tasks.some(t => t.title === 'Upload primary contact data sheets' || t.title === 'Read the learning playbook on MapleMPSS')) {
+        tasks = [];
         localStorage.setItem('prospectiq-tasks', JSON.stringify(tasks));
     }
 

static/js/router.js

@@ -148,7 +148,15 @@ function handleNavigation() {
     }
 
     if (hash === '#/' || hash === '') {
-        renderHome(pageContent);
+        const isAdmin = window.userPermissions && window.userPermissions.includes('users:manage');
+        const viewMode = sessionStorage.getItem('admin_view_mode') || 'portal';
+        if (isAdmin && viewMode === 'portal') {
+            renderAdminPortal(pageContent);
+        } else {
+            renderHome(pageContent);
+        }
+    } else if (hash === '#/admin-portal') {
+        renderAdminPortal(pageContent);
     } else if (/^#\/companies\/\d+$/.test(hash)) {
         const companyId = parseInt(hash.split('/').pop(), 10);
         renderCompanyProfilePage(pageContent, companyId);

static/js/utils.js

@@ -1,3 +1,50 @@
+function showGlobalLoader(message = 'Loading...') {
+    let loader = document.getElementById('global-app-loader');
+    if (!loader) {
+        loader = document.createElement('div');
+        loader.id = 'global-app-loader';
+        loader.style.position = 'fixed';
+        loader.style.top = '0';
+        loader.style.left = '0';
+        loader.style.width = '100vw';
+        loader.style.height = '100vh';
+        loader.style.background = 'rgba(255, 255, 255, 0.4)';
+        loader.style.backdropFilter = 'blur(10px)';
+        loader.style.display = 'flex';
+        loader.style.alignItems = 'center';
+        loader.style.justifyContent = 'center';
+        loader.style.zIndex = '99999';
+        loader.style.transition = 'opacity 0.2s ease-in-out';
+        
+        loader.innerHTML = `
+            <div class="card p-4 border shadow-lg" style="width: 320px; border-radius: 16px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(16px); border: 1px solid rgba(0,0,0,0.06) !important;">
+                <div class="d-flex flex-column align-items-center text-center gap-3">
+                    <div class="spinner-border text-dark" role="status" style="width: 2.4rem; height: 2.4rem; border-width: 0.2em;">
+                        <span class="visually-hidden">Loading...</span>
+                    </div>
+                    <span class="fw-bold text-dark" id="global-app-loader-text" style="font-size: 0.9rem; letter-spacing: 0.5px; font-family: sans-serif;">${message}</span>
+                </div>
+            </div>
+        `;
+        document.body.appendChild(loader);
+    } else {
+        const text = document.getElementById('global-app-loader-text');
+        if (text) text.textContent = message;
+        loader.style.display = 'flex';
+        loader.style.opacity = '1';
+    }
+}
+
+function hideGlobalLoader() {
+    const loader = document.getElementById('global-app-loader');
+    if (loader) {
+        loader.style.opacity = '0';
+        setTimeout(() => {
+            loader.style.display = 'none';
+        }, 200);
+    }
+}
+
 function escapeHtml(str) {
     if (str === null || str === undefined) return '';
     return String(str)

static/js/views/mockups.js

@@ -78,6 +78,14 @@ function renderSettingsPage(container) {
 
     initBaseCompanyContextSettings();
     initCommandMemorySettings();
+
+    if (window.userPermissions && window.userPermissions.includes('users:manage')) {
+        const workspaceDiv = container.querySelector('.settings-workspace');
+        if (workspaceDiv) {
+            appendAdminConsole(workspaceDiv);
+            initSettingsAdminConsole();
+        }
+    }
 }
 
 async function loadBaseCompanyContext() {
@@ -257,3 +265,415 @@ function initCommandMemorySettings() {
     }
     loadSettingsCommandMemory();
 }
+
+function appendAdminConsole(workspaceDiv) {
+    const adminDiv = document.createElement('div');
+    adminDiv.className = 'section-card mt-4';
+    adminDiv.id = 'org-admin-card';
+    adminDiv.innerHTML = `
+        <div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-3 pb-3 border-bottom">
+            <div>
+                <h3 class="section-card-title m-0 border-0 p-0">Organization & Team Access Matrix</h3>
+                <p class="text-muted small mb-0 mt-1">Invite team members, define roles, and toggle granular permissions.</p>
+            </div>
+        </div>
+        
+        <!-- Tab headers -->
+        <ul class="nav nav-tabs mb-3" id="adminConsoleTabs" role="tablist">
+            <li class="nav-item" role="presentation">
+                <button class="nav-link active btn-sm" id="users-tab" data-bs-toggle="tab" data-bs-target="#users-tab-pane" type="button" role="tab" style="padding: 6px 16px;">Team Members</button>
+            </li>
+            <li class="nav-item" role="presentation">
+                <button class="nav-link btn-sm" id="roles-tab" data-bs-toggle="tab" data-bs-target="#roles-tab-pane" type="button" role="tab" style="padding: 6px 16px;">Roles & Permissions</button>
+            </li>
+        </ul>
+
+        <div class="tab-content" id="adminConsoleTabsContent">
+            <!-- Team Members Tab -->
+            <div class="tab-pane fade show active" id="users-tab-pane" role="tabpanel">
+                <div class="d-flex justify-content-between align-items-center mb-3">
+                    <h6 class="fw-bold m-0" style="font-size: 0.95rem;">Organization Members</h6>
+                    <button class="btn btn-dark-custom btn-sm rounded-pill px-3" id="btn-show-add-user-form" type="button">+ Create User</button>
+                </div>
+
+                <!-- Add User Form (hidden by default) -->
+                <form id="add-user-form" class="border p-4 rounded-4 mb-4 d-none bg-light-subtle">
+                    <h6 class="fw-bold mb-3" style="font-size: 0.9rem;">Add New Team Member</h6>
+                    <div class="row g-3">
+                        <div class="col-md-3">
+                            <label class="form-label small fw-semibold">Full Name</label>
+                            <input type="text" class="form-control form-control-sm shadow-none" id="new-user-name" placeholder="John Doe" required>
+                        </div>
+                        <div class="col-md-3">
+                            <label class="form-label small fw-semibold">Email Address</label>
+                            <input type="email" class="form-control form-control-sm shadow-none" id="new-user-email" placeholder="john@company.com" required>
+                        </div>
+                        <div class="col-md-3">
+                            <label class="form-label small fw-semibold">Password</label>
+                            <input type="password" class="form-control form-control-sm shadow-none" id="new-user-password" placeholder="••••••••" required>
+                        </div>
+                        <div class="col-md-3">
+                            <label class="form-label small fw-semibold">Role</label>
+                            <select class="form-select form-select-sm shadow-none" id="new-user-role-select" required>
+                                <!-- Dynamically loaded roles -->
+                            </select>
+                        </div>
+                    </div>
+                    <div id="add-user-error-alert" class="alert alert-danger btn-sm p-2 mt-3 d-none" style="font-size: 0.8rem;"></div>
+                    <div class="d-flex gap-2 mt-3 justify-content-end">
+                        <button class="btn btn-outline-secondary btn-sm rounded-pill px-3" type="button" id="btn-cancel-add-user">Cancel</button>
+                        <button class="btn btn-dark-custom btn-sm rounded-pill px-4" type="submit">Create User</button>
+                    </div>
+                </form>
+
+                <div class="table-responsive">
+                    <table class="table table-hover align-middle table-sm border" style="font-size: 0.85rem; border-radius: 8px; overflow: hidden;">
+                        <thead class="table-light">
+                            <tr>
+                                <th style="padding: 10px 12px;">Name</th>
+                                <th style="padding: 10px 12px;">Email</th>
+                                <th style="padding: 10px 12px;">Role</th>
+                                <th style="padding: 10px 12px;">Status</th>
+                            </tr>
+                        </thead>
+                        <tbody id="admin-users-table-body">
+                            <tr><td colspan="4" class="text-center text-muted py-3">Loading team members...</td></tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+
+            <!-- Roles & Permissions Tab -->
+            <div class="tab-pane fade" id="roles-tab-pane" role="tabpanel">
+                <div class="row g-4">
+                    <div class="col-md-4 border-end">
+                        <h6 class="fw-bold mb-3" style="font-size: 0.95rem;">Defined Roles</h6>
+                        <div class="list-group" id="admin-roles-list-group" style="font-size: 0.85rem; border-radius: 8px; overflow: hidden;">
+                            <!-- Dynamic list of roles -->
+                        </div>
+                        <button class="btn btn-outline-dark btn-sm mt-3 w-100 rounded-pill" type="button" id="btn-show-create-role-modal">+ Create Custom Role</button>
+                        
+                        <!-- Create Role Inline Form (hidden by default) -->
+                        <form id="create-role-form" class="border p-3 rounded-4 mt-3 bg-light-subtle d-none">
+                            <h6 class="fw-bold mb-2 small">New Custom Role</h6>
+                            <input type="text" class="form-control form-control-sm mb-2 shadow-none" id="new-role-name" placeholder="Role Name (e.g. Senior Sales)" required>
+                            <input type="text" class="form-control form-control-sm mb-2 shadow-none" id="new-role-desc" placeholder="Role Description">
+                            <div id="create-role-error-alert" class="alert alert-danger btn-sm p-2 d-none" style="font-size: 0.75rem;"></div>
+                            <div class="d-flex gap-2 justify-content-end mt-2">
+                                <button class="btn btn-outline-secondary btn-sm p-1 px-2" type="button" id="btn-cancel-create-role" style="font-size: 0.75rem;">Cancel</button>
+                                <button class="btn btn-dark-custom btn-sm p-1 px-3" type="submit" style="font-size: 0.75rem;">Save Role</button>
+                            </div>
+                        </form>
+                    </div>
+                    <div class="col-md-8">
+                        <div class="border rounded-4 p-4 bg-light-subtle">
+                            <h6 class="fw-bold mb-3" id="selected-role-name-display" style="font-size: 0.95rem;">Select a role to configure permissions</h6>
+                            <form id="update-role-permissions-form">
+                                <input type="hidden" id="selected-role-id-input">
+                                <div class="d-flex flex-column gap-3" id="permissions-checkboxes-container" style="font-size: 0.88rem;">
+                                    <!-- Dynamic checkboxes for permissions -->
+                                </div>
+                                <div id="permissions-update-success-alert" class="alert alert-success btn-sm p-2 mt-3 d-none" style="font-size: 0.8rem;">Configuration saved successfully!</div>
+                                <div id="permissions-update-error-alert" class="alert alert-danger btn-sm p-2 mt-3 d-none" style="font-size: 0.8rem;"></div>
+                                <button class="btn btn-dark-custom btn-sm rounded-pill mt-3 px-4 d-none" type="submit" id="btn-save-role-permissions">Save Permissions Configuration</button>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    `;
+    workspaceDiv.appendChild(adminDiv);
+}
+
+async function initSettingsAdminConsole() {
+    const tableBody = document.getElementById('admin-users-table-body');
+    const rolesListGroup = document.getElementById('admin-roles-list-group');
+    const userRoleSelect = document.getElementById('new-user-role-select');
+    const addForm = document.getElementById('add-user-form');
+    const btnShowAddForm = document.getElementById('btn-show-add-user-form');
+    const btnCancelAddUser = document.getElementById('btn-cancel-add-user');
+    const createRoleForm = document.getElementById('create-role-form');
+    const btnShowCreateRole = document.getElementById('btn-show-create-role-modal');
+    const btnCancelCreateRole = document.getElementById('btn-cancel-create-role');
+    
+    // Global lists
+    let allRoles = [];
+    let allPermissions = [];
+    
+    // 1. Toggle add user form
+    if (btnShowAddForm && addForm) {
+        btnShowAddForm.addEventListener('click', () => {
+            addForm.classList.remove('d-none');
+            btnShowAddForm.classList.add('d-none');
+        });
+    }
+    if (btnCancelAddUser && addForm && btnShowAddForm) {
+        btnCancelAddUser.addEventListener('click', () => {
+            addForm.classList.add('d-none');
+            addForm.reset();
+            btnShowAddForm.classList.remove('d-none');
+            document.getElementById('add-user-error-alert').classList.add('d-none');
+        });
+    }
+    
+    // 2. Toggle create role form
+    if (btnShowCreateRole && createRoleForm) {
+        btnShowCreateRole.addEventListener('click', () => {
+            createRoleForm.classList.remove('d-none');
+            btnShowCreateRole.classList.add('d-none');
+        });
+    }
+    if (btnCancelCreateRole && createRoleForm && btnShowCreateRole) {
+        btnCancelCreateRole.addEventListener('click', () => {
+            createRoleForm.classList.add('d-none');
+            createRoleForm.reset();
+            btnShowCreateRole.classList.remove('d-none');
+            document.getElementById('create-role-error-alert').classList.add('d-none');
+        });
+    }
+
+    // Helper: Load Roles & Permissions lists
+    async function loadRolesAndUsers() {
+        try {
+            // Load Permissions
+            const permRes = await fetch('/api/auth/permissions');
+            if (permRes.ok) {
+                allPermissions = await permRes.json();
+            }
+
+            // Load Roles
+            const rolesRes = await fetch('/api/auth/roles');
+            if (rolesRes.ok) {
+                allRoles = await rolesRes.json();
+                
+                // Populate New User Role Select
+                if (userRoleSelect) {
+                    userRoleSelect.innerHTML = allRoles.map(r => `
+                        <option value="${r.id}">${r.name}</option>
+                    `).join('');
+                }
+
+                // Populate Roles List Group
+                if (rolesListGroup) {
+                    rolesListGroup.innerHTML = allRoles.map((r, i) => `
+                        <button type="button" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center py-2.5" data-role-id="${r.id}" style="font-weight: 500;">
+                            <span>${escapeHtml(r.name)}</span>
+                            <span class="badge bg-secondary-subtle text-secondary-emphasis rounded-pill" style="font-size: 0.72rem;">${r.permissions.length} perms</span>
+                        </button>
+                    `).join('');
+
+                    // Bind clicks to roles
+                    rolesListGroup.querySelectorAll('[data-role-id]').forEach(btn => {
+                        btn.addEventListener('click', () => selectRoleForPermissions(parseInt(btn.dataset.roleId, 10)));
+                    });
+                }
+            }
+
+            // Load Users
+            const usersRes = await fetch('/api/auth/users');
+            if (usersRes.ok && tableBody) {
+                const usersList = await usersRes.json();
+                tableBody.innerHTML = usersList.map(u => `
+                    <tr>
+                        <td style="padding: 10px 12px; font-weight: 500;">${escapeHtml(u.name)}</td>
+                        <td style="padding: 10px 12px; color: var(--grey-text);">${escapeHtml(u.email)}</td>
+                        <td style="padding: 10px 12px;"><span class="badge bg-dark-subtle text-dark border px-2 py-1 rounded-pill">${escapeHtml(u.role_name)}</span></td>
+                        <td style="padding: 10px 12px;"><span class="badge bg-success-subtle text-success px-2 py-1 rounded-pill">${u.is_active === 1 ? 'Active' : 'Inactive'}</span></td>
+                    </tr>
+                `).join('');
+            }
+        } catch (err) {
+            console.error('Failed to load admin console data:', err);
+        }
+    }
+
+    // Select Role & Render Permissions checkboxes
+    function selectRoleForPermissions(roleId) {
+        // Toggle active list item
+        rolesListGroup.querySelectorAll('[data-role-id]').forEach(btn => {
+            if (parseInt(btn.dataset.roleId, 10) === roleId) {
+                btn.classList.add('active');
+            } else {
+                btn.classList.remove('active');
+            }
+        });
+
+        const role = allRoles.find(r => r.id === roleId);
+        if (!role) return;
+
+        document.getElementById('selected-role-name-display').textContent = `Granular Permissions for Role: ${role.name}`;
+        document.getElementById('selected-role-id-input').value = role.id;
+        
+        // Hide success alerts
+        document.getElementById('permissions-update-success-alert').classList.add('d-none');
+        document.getElementById('permissions-update-error-alert').classList.add('d-none');
+
+        const container = document.getElementById('permissions-checkboxes-container');
+        const saveBtn = document.getElementById('btn-save-role-permissions');
+
+        if (container) {
+            if (role.name === 'Admin') {
+                container.innerHTML = `
+                    <div class="alert alert-info py-2" style="font-size: 0.82rem;">
+                        <i class="bi bi-info-circle me-1"></i> Core Admin permissions cannot be modified to prevent system administrative lockouts.
+                    </div>
+                ` + allPermissions.map(p => `
+                    <div class="form-check">
+                        <input class="form-check-input" type="checkbox" checked disabled>
+                        <label class="form-check-label text-muted">
+                            <strong>${escapeHtml(p.code)}</strong> — <span class="small">${escapeHtml(p.description)}</span>
+                        </label>
+                    </div>
+                `).join('');
+                if (saveBtn) saveBtn.classList.add('d-none');
+            } else {
+                container.innerHTML = allPermissions.map(p => {
+                    const isChecked = role.permissions.includes(p.code);
+                    return `
+                        <div class="form-check py-0.5">
+                            <input class="form-check-input" type="checkbox" id="perm-${p.code}" value="${p.code}" ${isChecked ? 'checked' : ''}>
+                            <label class="form-check-label" for="perm-${p.code}" style="cursor: pointer;">
+                                <strong>${escapeHtml(p.code)}</strong> — <span class="small text-muted">${escapeHtml(p.description)}</span>
+                            </label>
+                        </div>
+                    `;
+                }).join('');
+                if (saveBtn) saveBtn.classList.remove('d-none');
+            }
+        }
+    }
+
+    // Submit Create User
+    if (addForm) {
+        addForm.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const errAlert = document.getElementById('add-user-error-alert');
+            if (errAlert) errAlert.classList.add('d-none');
+
+            const name = document.getElementById('new-user-name').value;
+            const email = document.getElementById('new-user-email').value;
+            const password = document.getElementById('new-user-password').value;
+            const role_id = parseInt(document.getElementById('new-user-role-select').value, 10);
+
+            try {
+                const res = await fetch('/api/auth/users/create', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ name, email, password, role_id })
+                });
+                const data = await res.json();
+                if (res.ok) {
+                    addForm.reset();
+                    addForm.classList.add('d-none');
+                    btnShowAddForm.classList.remove('d-none');
+                    await loadRolesAndUsers();
+                    if (typeof addNotification === 'function') {
+                        addNotification('User Created', `Created user account for ${name}`);
+                    }
+                } else {
+                    if (errAlert) {
+                        errAlert.textContent = data.error || 'Failed to create user';
+                        errAlert.classList.remove('d-none');
+                    }
+                }
+            } catch (err) {
+                if (errAlert) {
+                    errAlert.textContent = 'Connection error occurred.';
+                    errAlert.classList.remove('d-none');
+                }
+            }
+        });
+    }
+
+    // Submit Create Custom Role
+    if (createRoleForm) {
+        createRoleForm.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const errAlert = document.getElementById('create-role-error-alert');
+            if (errAlert) errAlert.classList.add('d-none');
+
+            const name = document.getElementById('new-role-name').value;
+            const description = document.getElementById('new-role-desc').value;
+
+            try {
+                const res = await fetch('/api/auth/roles/create', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ name, description })
+                });
+                const data = await res.json();
+                if (res.ok) {
+                    createRoleForm.reset();
+                    createRoleForm.classList.add('d-none');
+                    btnShowCreateRole.classList.remove('d-none');
+                    await loadRolesAndUsers();
+                    if (typeof addNotification === 'function') {
+                        addNotification('Role Created', `Custom role '${name}' created successfully`);
+                    }
+                } else {
+                    if (errAlert) {
+                        errAlert.textContent = data.error || 'Failed to create role';
+                        errAlert.classList.remove('d-none');
+                    }
+                }
+            } catch (err) {
+                if (errAlert) {
+                    errAlert.textContent = 'Connection error occurred.';
+                    errAlert.classList.remove('d-none');
+                }
+            }
+        });
+    }
+
+    // Submit Update Role Permissions mapping
+    const permissionsForm = document.getElementById('update-role-permissions-form');
+    if (permissionsForm) {
+        permissionsForm.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const successAlert = document.getElementById('permissions-update-success-alert');
+            const errAlert = document.getElementById('permissions-update-error-alert');
+            if (successAlert) successAlert.classList.add('d-none');
+            if (errAlert) errAlert.classList.add('d-none');
+
+            const roleId = parseInt(document.getElementById('selected-role-id-input').value, 10);
+            if (!roleId) return;
+
+            // Gather all checked checkbox values
+            const checkedPerms = [];
+            const checkboxes = document.getElementById('permissions-checkboxes-container').querySelectorAll('input[type="checkbox"]');
+            checkboxes.forEach(cb => {
+                if (cb.checked) {
+                    checkedPerms.push(cb.value);
+                }
+            });
+
+            try {
+                const res = await fetch(`/api/auth/roles/${roleId}/permissions`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ permissions: checkedPerms })
+                });
+                const data = await res.json();
+                if (res.ok) {
+                    if (successAlert) successAlert.classList.remove('d-none');
+                    await loadRolesAndUsers();
+                    setTimeout(() => selectRoleForPermissions(roleId), 100);
+                } else {
+                    if (errAlert) {
+                        errAlert.textContent = data.error || 'Failed to save configuration';
+                        errAlert.classList.remove('d-none');
+                    }
+                }
+            } catch (err) {
+                if (errAlert) {
+                    errAlert.textContent = 'Connection error occurred.';
+                    errAlert.classList.remove('d-none');
+                }
+            }
+        });
+    }
+
+    // Run Initial Load
+    await loadRolesAndUsers();
+}

static/styles.css

@@ -5247,3 +5247,70 @@ th {
     }
 }
 
+/* Auth Styles */
+.auth-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: radial-gradient(circle at 10% 20%, rgb(240, 243, 248) 0%, rgb(217, 227, 242) 90%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 9999;
+}
+
+.auth-card {
+    background: rgba(255, 255, 255, 0.85);
+    backdrop-filter: blur(20px);
+    border: 1px solid rgba(255, 255, 255, 0.4);
+    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
+    border-radius: 24px;
+    width: 100%;
+    max-width: 440px;
+    padding: 40px;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.auth-logo {
+    font-family: 'Outfit', 'Inter', sans-serif;
+    font-weight: 800;
+    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    letter-spacing: -0.5px;
+    margin-bottom: 8px;
+}
+
+.auth-tabs {
+    display: flex;
+    background: rgba(0, 0, 0, 0.05);
+    padding: 4px;
+    border-radius: 30px;
+}
+
+.auth-tab-btn {
+    flex: 1;
+    border: none;
+    background: transparent;
+    padding: 8px 16px;
+    font-size: 0.88rem;
+    font-weight: 600;
+    border-radius: 20px;
+    color: var(--text-secondary);
+    transition: all 0.2s ease;
+}
+
+.auth-tab-btn.active {
+    background: #FFFFFF;
+    color: var(--black);
+    box-shadow: 0 4px 10px rgba(0,0,0,0.04);
+}
+
+.app-layout.blur-layout {
+    filter: blur(8px);
+    pointer-events: none;
+}
+
+

templates/index.html

@@ -19,13 +19,13 @@
 
     <div class="app-layout">
         <!-- Sidebar Navigation -->
-        <aside class="sidebar">
+        <aside class="sidebar" style="display: none;">
             <div class="sidebar-header d-flex justify-content-between align-items-center">
                 <div class="brand-logo">
                     <span id="sidebar-logo-text">ProspectIQ</span>
                 </div>
-                <button class="btn p-0 d-none d-lg-inline-flex align-items-center justify-content-center" id="sidebar-toggle-btn" type="button" style="border: none; background: transparent; color: var(--black); font-size: 1.25rem; font-weight: bold; cursor: pointer; padding: 4px;" title="Toggle Sidebar">
-                    &lt;&lt;
+                <button class="btn p-0 d-none d-lg-inline-flex align-items-center justify-content-center" id="sidebar-toggle-btn" type="button" style="border: none; background: transparent; color: var(--black); font-size: 1.1rem; cursor: pointer; padding: 6px; transition: transform 0.2s;" title="Toggle Sidebar">
+                    <i class="bi bi-chevron-left" id="sidebar-toggle-icon"></i>
                 </button>
                 <!-- Opened and closed with a three horizontal lines icon -->
                 <button class="btn d-lg-none p-0" id="sidebar-mobile-close" type="button" aria-label="Close Sidebar" style="font-size: 1.5rem; color: var(--black); border: none; background: transparent; line-height: 1;">
@@ -115,42 +115,7 @@
                 
                 <!-- Custom Dropdown Menu -->
                 <div class="user-profile-dropdown" id="user-profile-dropdown">
-                    <div class="dropdown-header-title">Switch User Account</div>
-                    <div class="user-option-item" data-value="1|Admin|admin1">
-                        <div class="option-avatar admin">A1</div>
-                        <div>
-                            <div style="font-weight: 600; color: var(--black); line-height: 1.2;">admin1</div>
-                            <div style="font-size: 0.68rem; color: var(--text-secondary); line-height: 1.2;">Admin</div>
-                        </div>
-                    </div>
-                    <div class="user-option-item" data-value="2|BD Rep|bd rep1">
-                        <div class="option-avatar bd-rep">R1</div>
-                        <div>
-                            <div style="font-weight: 600; color: var(--black); line-height: 1.2;">bd rep1</div>
-                            <div style="font-size: 0.68rem; color: var(--text-secondary); line-height: 1.2;">BD Rep</div>
-                        </div>
-                    </div>
-                    <div class="user-option-item" data-value="4|BD Rep|bd rep2">
-                        <div class="option-avatar bd-rep">R2</div>
-                        <div>
-                            <div style="font-weight: 600; color: var(--black); line-height: 1.2;">bd rep2</div>
-                            <div style="font-size: 0.68rem; color: var(--text-secondary); line-height: 1.2;">BD Rep</div>
-                        </div>
-                    </div>
-                    <div class="user-option-item" data-value="5|BD Rep|bd rep3">
-                        <div class="option-avatar bd-rep">R3</div>
-                        <div>
-                            <div style="font-weight: 600; color: var(--black); line-height: 1.2;">bd rep3</div>
-                            <div style="font-size: 0.68rem; color: var(--text-secondary); line-height: 1.2;">BD Rep</div>
-                        </div>
-                    </div>
-                    <div class="user-option-item" data-value="3|Viewer|viewer1">
-                        <div class="option-avatar viewer">V1</div>
-                        <div>
-                            <div style="font-weight: 600; color: var(--black); line-height: 1.2;">viewer1</div>
-                            <div style="font-size: 0.68rem; color: var(--text-secondary); line-height: 1.2;">Viewer</div>
-                        </div>
-                    </div>
+                    <!-- Dynamic actions and Sign Out added via app.js -->
                 </div>
             </div>
         </aside>
@@ -161,7 +126,7 @@
         <!-- Main Content Area -->
         <main class="main-content">
             <!-- Top Command Bar -->
-            <header class="top-command-header">
+            <header class="top-command-header" style="display: none;">
                 <!-- Left Section (for mobile hamburger toggle) -->
                 <div class="header-left">
                     <button class="btn p-0" id="sidebar-mobile-toggle" type="button" aria-label="Toggle Sidebar">
@@ -316,6 +281,7 @@
     <script src="/static/js/components/inline_assistant.js"></script>
     
     <!-- Page Views -->
+    <script src="/static/js/views/admin_portal.js"></script>
     <script src="/static/js/views/mockups.js"></script>
     <script src="/static/js/views/home.js"></script>
     <script src="/static/js/views/companies.js"></script>
@@ -331,5 +297,54 @@
     <button id="floating-ai-assistant-btn" class="floating-ai-assistant-btn" type="button" title="Open AI Assistant">
         AI
     </button>
+
+    <!-- Dynamic Auth Overlay -->
+    <div id="auth-container" class="auth-overlay animate-fade-in d-none">
+        <div class="auth-card">
+            <div class="auth-card-header text-center">
+                <h2 class="auth-logo">ProspectIQ</h2>
+                <p class="auth-subtitle" id="auth-subtitle">Sign in to manage your pipeline</p>
+            </div>
+            
+            <!-- Toggle tabs for Sign In / Register -->
+            <div class="auth-tabs mb-4">
+                <button class="auth-tab-btn active" id="auth-tab-signin" type="button">Sign In</button>
+                <button class="auth-tab-btn" id="auth-tab-signup" type="button">Register Org</button>
+            </div>
+
+            <form id="auth-form" class="auth-form">
+                <!-- Organization Name (Visible only on Signup) -->
+                <div class="form-group mb-3 d-none" id="auth-group-org">
+                    <label for="auth-org-name" class="form-label">Organization Name</label>
+                    <input type="text" id="auth-org-name" class="form-control" placeholder="e.g. MapleMPSS Sourcing">
+                </div>
+
+                <!-- Name (Visible only on Signup) -->
+                <div class="form-group mb-3 d-none" id="auth-group-name">
+                    <label for="auth-user-name" class="form-label">Full Name</label>
+                    <input type="text" id="auth-user-name" class="form-control" placeholder="John Doe">
+                </div>
+
+                <!-- Email -->
+                <div class="form-group mb-3">
+                    <label for="auth-email" class="form-label">Email Address</label>
+                    <input type="email" id="auth-email" class="form-control" placeholder="name@company.com" required>
+                </div>
+
+                <!-- Password -->
+                <div class="form-group mb-4">
+                    <label for="auth-password" class="form-label">Password</label>
+                    <input type="password" id="auth-password" class="form-control" placeholder="••••••••" required>
+                </div>
+
+                <!-- Error message container -->
+                <div id="auth-error-alert" class="alert alert-danger d-none" role="alert"></div>
+
+                <button type="submit" class="btn btn-dark-custom w-100 py-2.5 rounded-pill btn-auth-submit" id="auth-submit-btn">
+                    Sign In
+                </button>
+            </form>
+        </div>
+    </div>
 </body>
 </html>