// Tailwind CSS Integration with enhanced config var tailwindScript = document.createElement("script"); tailwindScript.src = "https://cdn.tailwindcss.com"; tailwindScript.onload = function () { // Tailwind CSS loaded tailwind.config = { theme: { extend: { fontFamily: { sans: ["Inter", "sans-serif"], }, colors: { 'campaign-blue': '#0033A0', 'campaign-orange': '#F37021', 'campaign-green': '#009B48', 'neutral-gray': '#6B7280', 'light-bg': '#F3F4F6', 'dark-bg': '#1F2937' }, animation: { 'fade-in-up': 'fadeInUp 0.6s ease-out', 'slide-in-right': 'slideInFromRight 0.5s ease-out', 'pulse-gentle': 'pulse 2s infinite', }, backdropBlur: { 'xs': '2px', } }, }, }; // Mark Tailwind as loaded and check if we can hide loading screen window.tailwindLoaded = true; checkAndHideLoadingScreen(); }; document.head.prepend(tailwindScript); // Chart.js Integration var chartJsScript = document.createElement("script"); chartJsScript.src = "https://cdn.jsdelivr.net/npm/chart.js"; document.head.appendChild(chartJsScript); // Enhanced Google Fonts Integration with preload var fontLink = document.createElement("link"); fontLink.href = "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"; fontLink.rel = "stylesheet"; fontLink.crossOrigin = "anonymous"; document.head.appendChild(fontLink); // Preload critical font weights var fontPreload = document.createElement("link"); fontPreload.href = "https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"; fontPreload.rel = "preload"; fontPreload.as = "style"; fontPreload.crossOrigin = "anonymous"; document.head.appendChild(fontPreload); // --- Global Authentication System --- window.CampaignAuth = { // Global phone number storage savedPhoneNumber: localStorage.getItem('campaignAuthPhone') || null, currentUserData: JSON.parse(localStorage.getItem('campaignUserData')) || null, // Cleared state tracking (initialized to false) isCleared: false, clearTimestamp: null, // Save authentication data saveAuth: function(phoneNumber, userData) { // 🔧 COMPREHENSIVE OVERWRITE: Clear any previous auth state first if (this.isCleared) { // Overwriting cleared authentication state } this.savedPhoneNumber = phoneNumber; this.currentUserData = userData; // Reset cleared state flags this.isCleared = false; this.clearTimestamp = null; // Store only essential lightweight data in localStorage (not massive datasets) var lightweightData = { name: userData.name, manager_record_id: userData.manager_record_id, phone: userData.phone, role: userData.role, total_constituencies: userData.total_constituencies, current_constituency_id: userData.current_constituency_id, current_constituency_name: userData.current_constituency_name, is_fast_auth: userData.is_fast_auth || false, needs_complete_load: userData.needs_complete_load || false, auth_timestamp: Date.now() // Add timestamp for debugging }; localStorage.setItem('campaignAuthPhone', phoneNumber); localStorage.setItem('campaignUserData', JSON.stringify(lightweightData)); // Authentication data saved this.showProfileIcon(); }, // Clear authentication data clearAuth: function() { this.savedPhoneNumber = null; this.currentUserData = null; localStorage.removeItem('campaignAuthPhone'); localStorage.removeItem('campaignUserData'); // 🔧 COMPREHENSIVE CLEAR: Remove ALL view-specific authentication data sessionStorage.clear(); // Clear all session data // Clear view-specific localStorage items that might persist localStorage.removeItem('campaignManager_selectedConstituency'); localStorage.removeItem('campaignManager_selectedConstituencyName'); // Mark that we're in a cleared state to prevent stale data usage this.isCleared = true; this.clearTimestamp = Date.now(); // Authentication data cleared this.hideProfileIcon(); // Redirect to home page if (typeof phoros !== 'undefined' && phoros.page) { phoros.page.change('home'); } }, // Auto-fill phone and trigger normal login flow autoAuthenticate: function() { if (!this.savedPhoneNumber) return false; // 🔧 STALE DATA PROTECTION: Don't auto-authenticate if recently cleared if (this.isCleared && this.clearTimestamp && (Date.now() - this.clearTimestamp) < 5000) { // Skipping auto-authentication - recently cleared return false; } // Starting simplified auto-authentication // Try different phone input selectors across views var phoneSelectors = [ '#phone-number', // Runner view '#agent-phone-number', // Agent view '#pd-captain-phone-number', // Captain view '#supervisor-phone-number', // Supervisor view '#manager-phone-number', // Divisional Manager view '#campaign-manager-phone-number', // Campaign Manager view '#leader-phone-number', // Leader view 'input[type="tel"]', // Generic tel input 'input[placeholder*="phone"]', // Phone placeholder 'input[placeholder*="Phone"]' // Phone placeholder capitalized ]; var phoneInput = null; for (var i = 0; i < phoneSelectors.length; i++) { phoneInput = document.querySelector(phoneSelectors[i]); if (phoneInput && phoneInput.value === '') break; // Only fill empty inputs } if (phoneInput && phoneInput.value === '') { phoneInput.value = this.savedPhoneNumber; // Auto-filled phone number // Mark that auto-auth is happening to prevent duplicate calls this.isAutoAuthenticating = true; this.lastAuthAttempt = Date.now(); var self = this; // Call the appropriate login handler directly (no button clicking) setTimeout(function() { try { // Check which view we're in and call the correct handler if (typeof handleLogin === 'function' && document.getElementById('phone-number')) { // Calling handleLogin for runner handleLogin(); } else if (typeof handleAgentLogin === 'function' && document.getElementById('agent-phone-number')) { // Calling handleAgentLogin for agent handleAgentLogin(); } else if (typeof handleSupervisorLogin === 'function' && document.getElementById('supervisor-phone-number')) { // Calling handleSupervisorLogin for supervisor handleSupervisorLogin(); } else if (typeof handlePDCaptainLogin === 'function' && document.getElementById('pd-captain-phone-number')) { // Calling handlePDCaptainLogin for pd-captain handlePDCaptainLogin(); } else if (typeof authenticateLeader === 'function' && document.getElementById('leader-phone-number')) { // Calling authenticateLeader for leader authenticateLeader(); } else if (typeof handleManagerLogin === 'function' && document.getElementById('manager-phone-number')) { // Calling handleManagerLogin for divisional-manager window.autoAuthInProgress = true; // Set flag for auto-auth handleManagerLogin(); } else if (typeof handleCampaignManagerLogin === 'function' && document.getElementById('campaign-manager-phone-number')) { // Calling handleCampaignManagerLogin for campaign-manager window.autoAuthInProgress = true; // Set flag for auto-auth handleCampaignManagerLogin(); } else { // No appropriate login handler found } } catch (error) { console.error('❌ Auto-auth error:', error); } // Clear auto-auth flag after delay setTimeout(function() { self.isAutoAuthenticating = false; }, 3000); }, 300); return true; } return false; }, // Show profile icon (Updated to use header account button) showProfileIcon: function() { // Show header account button var headerAccountBtn = document.getElementById('header-account-btn'); if (headerAccountBtn) { headerAccountBtn.classList.remove('hidden'); // Wire up the click event var self = this; headerAccountBtn.onclick = function() { self.showProfileModal(); }; } // Show mobile account section var mobileAccountSection = document.getElementById('mobile-account-section'); if (mobileAccountSection) { mobileAccountSection.classList.remove('hidden'); } // Remove any old bottom-left profile icon this.hideOldProfileIcon(); }, // Hide profile icon (Updated to hide header account button) hideProfileIcon: function() { // Hide header account button var headerAccountBtn = document.getElementById('header-account-btn'); if (headerAccountBtn) { headerAccountBtn.classList.add('hidden'); headerAccountBtn.onclick = null; } // Hide mobile account section var mobileAccountSection = document.getElementById('mobile-account-section'); if (mobileAccountSection) { mobileAccountSection.classList.add('hidden'); } // Remove any old bottom-left profile icon this.hideOldProfileIcon(); }, // Remove old bottom-left profile icon if it exists hideOldProfileIcon: function() { var existingIcon = document.getElementById('campaign-profile-icon'); if (existingIcon) { existingIcon.remove(); } }, // Show profile modal (Blaze-compatible DOM construction) showProfileModal: function() { if (!this.currentUserData) return; var userData = this.currentUserData; var self = this; // Create modal overlay var modal = document.createElement('div'); modal.id = 'campaign-profile-modal'; modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4'; // Create modal content container var modalContent = document.createElement('div'); modalContent.className = 'bg-white rounded-2xl shadow-2xl max-w-md w-full max-h-[500px] overflow-y-auto'; // Create modal body var modalBody = document.createElement('div'); modalBody.className = 'p-6'; // Create header var header = document.createElement('div'); header.className = 'flex items-center justify-between mb-6'; var title = document.createElement('h2'); title.className = 'text-2xl font-bold text-gray-900'; title.textContent = 'Profile'; var closeButton = document.createElement('button'); closeButton.className = 'text-gray-400 hover:text-gray-600'; closeButton.onclick = function() { self.closeProfileModal(); }; var closeIcon = document.createElement('svg'); closeIcon.className = 'w-6 h-6'; closeIcon.setAttribute('fill', 'none'); closeIcon.setAttribute('stroke', 'currentColor'); closeIcon.setAttribute('viewBox', '0 0 24 24'); var closePath = document.createElement('path'); closePath.setAttribute('stroke-linecap', 'round'); closePath.setAttribute('stroke-linejoin', 'round'); closePath.setAttribute('stroke-width', '2'); closePath.setAttribute('d', 'M6 18L18 6M6 6l12 12'); closeIcon.appendChild(closePath); closeButton.appendChild(closeIcon); header.appendChild(title); header.appendChild(closeButton); // Create content section var content = document.createElement('div'); content.className = 'space-y-4'; // Helper function to create field function createField(label, value) { var fieldDiv = document.createElement('div'); var labelEl = document.createElement('label'); labelEl.className = 'text-sm font-medium text-gray-500'; labelEl.textContent = label; var valueEl = document.createElement('p'); valueEl.className = label === 'Name' ? 'text-lg font-semibold text-gray-900' : 'text-gray-700'; valueEl.textContent = value; fieldDiv.appendChild(labelEl); fieldDiv.appendChild(valueEl); return fieldDiv; } // Add fields content.appendChild(createField('Name', userData.name || 'Unknown')); content.appendChild(createField('Phone', userData.phone || self.savedPhoneNumber || 'Unknown')); content.appendChild(createField('Role', userData.role || self.getUserRole())); // Add role-specific information if (userData.pd_venues) { content.appendChild(createField('Polling Stations', userData.pd_venues.join(', '))); } else if (userData.pd_venue) { content.appendChild(createField('Polling Station', userData.pd_venue)); } if (userData.assigned_voters !== undefined) { content.appendChild(createField('Assigned Voters', userData.assigned_voters.toString())); } // Create footer with sign out button var footer = document.createElement('div'); footer.className = 'mt-8 pt-6 border-t border-gray-200'; var signOutButton = document.createElement('button'); signOutButton.className = 'w-full bg-red-600 text-white px-4 py-3 rounded-lg hover:bg-red-700 transition-all duration-200 font-medium'; signOutButton.textContent = 'Sign Out'; signOutButton.onclick = function() { self.signOut(); }; footer.appendChild(signOutButton); // Assemble modal modalBody.appendChild(header); modalBody.appendChild(content); modalBody.appendChild(footer); modalContent.appendChild(modalBody); modal.appendChild(modalContent); // Add to document document.body.appendChild(modal); // Close modal when clicking background modal.onclick = function(e) { if (e.target === modal) { self.closeProfileModal(); } }; }, // Close profile modal closeProfileModal: function() { var modal = document.getElementById('campaign-profile-modal'); if (modal) { modal.remove(); } }, // Sign out function signOut: function() { this.closeProfileModal(); this.clearAuth(); }, // Get user role from current page or data getUserRole: function() { if (!this.currentUserData) return 'Unknown'; // Role ID to name mapping (from Worker Budget data) var roleMap = { 'recWa5VhU5X7lzETo': 'Runner', 'recz1UONQVRyUHTEy': 'PD Captain', 'recfeRvJICDAEFeXa': 'Former PD', 'recuJ6i76g95iUJLg': 'Cluster Supervisor' }; // Try to determine role from various data fields if (this.currentUserData.role) { // If role is an ID, translate it if (roleMap[this.currentUserData.role]) { return roleMap[this.currentUserData.role]; } return this.currentUserData.role; } // Try Worker Type field if (this.currentUserData['Worker Type'] && this.currentUserData['Worker Type'].length > 0) { var roleId = this.currentUserData['Worker Type'][0]; if (roleMap[roleId]) { return roleMap[roleId]; } } // Fallback to page-based detection var currentPage = (typeof phoros !== 'undefined' && phoros.page) ? phoros.page.name() : ''; switch(currentPage) { case 'runner-view': return 'Runner'; case 'agent-view': return 'Agent'; case 'pd-captain-view': return 'PD Captain'; case 'cluster-supervisor-view': return 'Cluster Supervisor'; case 'divisional-manager-view': return 'Divisional Manager'; case 'campaign-manager-view': return 'Campaign Manager'; default: return 'Team Member'; } }, // Initialize auth system init: function() { // Show profile icon if already authenticated if (this.currentUserData) { this.showProfileIcon(); } // Campaign Auth system initialized } }; // Initialize immediately when script loads CampaignAuth.init(); // ===== CAMPAIGN SETTINGS (GLOBAL) ===== // Centralized campaign state shared across divisions window.CampaignSettings = window.CampaignSettings || { currentState: 'Voter Engagement' }; // Update campaign state from authentication data (replaces getCampaignState processor) window.updateCampaignStateFromAuth = function(campaignState) { if (campaignState) { window.CampaignSettings.currentState = campaignState; // Notify listeners that state changed/loaded window.dispatchEvent(new Event('campaignStateChanged')); } }; // --- Global Mock Data for Demo (available on all pages) --- window.mockData = { constituency: "Portland Western", mp: { name: "Daryl Vaz", party: "JLP", photoUrl: "https://via.placeholder.com/150" }, campaignManager: { name: "Jane Doe", }, liveTurnout: { confirmedVotes: 4350, totalVoters: 15200, timestamp: new Date().toISOString() }, predictiveStandings: { jlp: { percentage: 55, trend: 'up' }, pnp: { percentage: 43, trend: 'down' }, other: { percentage: 2, trend: 'stable' }, votesToWin: 3151, projectedOutcome: "JLP Win" }, electoralDivisions: [ { id: "ed-1", name: "Hope Bay", confirmedVotes: 1200, totalVoters: 4500, standings: { jlp: 60, pnp: 38, other: 2 }, runnersCompletion: 75 }, { id: "ed-2", name: "Buff Bay", confirmedVotes: 1500, totalVoters: 5500, standings: { jlp: 52, pnp: 47, other: 1 }, runnersCompletion: 85 }, { id: "ed-3", name: "Balcarres", confirmedVotes: 1650, totalVoters: 5200, standings: { jlp: 58, pnp: 40, other: 2 }, runnersCompletion: 60 } ], pollingDivisions: [ { id: "pd-1", name: "Hope Bay Primary", electoralDivision: "Hope Bay", confirmedVotes: 300, totalVoters: 1100, standings: { jlp: 65, pnp: 35, other: 0 }, runners: [ { id: "runner-1", name: "John Brown", progress: 80, isCompleted: false, alert: 'behind_pace' }, { id: "runner-2", name: "Mary Smith", progress: 95, isCompleted: false, alert: null } ] }, { id: "pd-2", name: "Hope Bay Clinic", electoralDivision: "Hope Bay", confirmedVotes: 400, totalVoters: 1500, standings: { jlp: 55, pnp: 45, other: 0 }, runners: [ { id: "runner-3", name: "Peter Pan", progress: 100, isCompleted: true, alert: null }, { id: "runner-4", name: "Wendy Darling", progress: 70, isCompleted: false, alert: null } ] } ], voters: [ { id: "voter-1", name: "Marcus Johnson", address: "123 Hope Road, St. Andrew", runnerId: "runner-1", status: "voted", lastUpdate: new Date().toISOString(), driverId: 'driver-1', otpVerified: true }, { id: "voter-2", name: "Patricia Williams", address: "456 Bay View Avenue, Kingston", runnerId: "runner-1", status: "picked_up", lastUpdate: new Date().toISOString(), driverId: 'driver-2', otpVerified: true }, { id: "voter-3", name: "Devon Campbell", address: "789 Mountain View Drive", runnerId: "runner-2", status: "in_transit", lastUpdate: new Date().toISOString(), driverId: 'driver-1', otpVerified: false }, { id: "voter-4", name: "Jennifer Brown", address: "321 Sunrise Crescent", runnerId: "runner-1", status: "pending", lastUpdate: new Date().toISOString(), driverId: null, otpVerified: false }, { id: "voter-5", name: "Michael Thompson", address: "654 Ocean Boulevard", runnerId: "runner-2", status: "voted", lastUpdate: new Date().toISOString(), driverId: 'driver-2', otpVerified: true }, { id: "voter-6", name: "Sandra Mitchell", address: "987 Palm Grove Road", runnerId: "runner-1", status: "picked_up", lastUpdate: new Date().toISOString(), driverId: 'driver-1', otpVerified: true }, { id: "voter-7", name: "Robert Clarke", address: "147 Mango Walk", runnerId: "runner-2", status: "pending", lastUpdate: new Date().toISOString(), driverId: null, otpVerified: false }, { id: "voter-8", name: "Lisa Davis", address: "258 Cherry Gardens", runnerId: "runner-1", status: "in_transit", lastUpdate: new Date().toISOString(), driverId: 'driver-2', otpVerified: true }, { id: "voter-9", name: "Christopher Bailey", address: "369 Blue Mountain Peak", runnerId: "runner-2", status: "voted", lastUpdate: new Date().toISOString(), driverId: 'driver-1', otpVerified: true }, { id: "voter-10", name: "Angela Foster", address: "741 Constant Spring Road", runnerId: "runner-1", status: "pending", lastUpdate: new Date().toISOString(), driverId: null, otpVerified: false }, { id: "voter-11", name: "Kevin White", address: "852 Half Way Tree Road", runnerId: "runner-2", status: "picked_up", lastUpdate: new Date().toISOString(), driverId: 'driver-2', otpVerified: false }, { id: "voter-12", name: "Michelle Harris", address: "963 Red Hills Road", runnerId: "runner-1", status: "voted", lastUpdate: new Date().toISOString(), driverId: 'driver-1', otpVerified: true }, { id: "voter-13", name: "Jason Robinson", address: "159 Barbican Road", runnerId: "runner-2", status: "in_transit", lastUpdate: new Date().toISOString(), driverId: 'driver-2', otpVerified: true }, { id: "voter-14", name: "Nicole Green", address: "753 Liguanea Avenue", runnerId: "runner-1", status: "pending", lastUpdate: new Date().toISOString(), driverId: null, otpVerified: false }, { id: "voter-15", name: "Anthony Miller", address: "951 Old Hope Road", runnerId: "runner-2", status: "voted", lastUpdate: new Date().toISOString(), driverId: 'driver-1', otpVerified: true }, { id: "voter-16", name: "Donna Wilson", address: "357 Trafalgar Road", runnerId: "runner-1", status: "picked_up", lastUpdate: new Date().toISOString(), driverId: 'driver-2', otpVerified: true }, { id: "voter-17", name: "Brian Lewis", address: "468 Waterloo Road", runnerId: "runner-2", status: "pending", lastUpdate: new Date().toISOString(), driverId: null, otpVerified: false }, { id: "voter-18", name: "Karen Martinez", address: "579 Washington Boulevard", runnerId: "runner-1", status: "in_transit", lastUpdate: new Date().toISOString(), driverId: 'driver-1', otpVerified: false }, { id: "voter-19", name: "Richard Taylor", address: "680 Spanish Town Road", runnerId: "runner-2", status: "voted", lastUpdate: new Date().toISOString(), driverId: 'driver-2', otpVerified: true }, { id: "voter-20", name: "Sharon Bennett", address: "791 Mandela Highway", runnerId: "runner-1", status: "pending", lastUpdate: new Date().toISOString(), driverId: null, otpVerified: false } ], drivers: [ { id: 'driver-1', name: 'David Jones' }, { id: 'driver-2', name: 'Susan Bell' } ] }; // Enhanced loading screen with progressive messages - runs immediately // Campaign Canvas app initializing // Initialize all enhanced features initializeEnhancedLoadingScreen(); initializeEnhancedNavigation(); initializeToastSystem(); initializeGlobalAnimations(); // Initialize loading flags window.tailwindLoaded = false; window.appInitialized = false; // Mark app as initialized after a short delay (to ensure all initialization is complete) setTimeout(() => { // App initialization complete window.appInitialized = true; checkAndHideLoadingScreen(); }, 1000); // Function to check if we can hide the loading screen function checkAndHideLoadingScreen() { // Checking loading screen conditions if (window.tailwindLoaded && window.appInitialized) { // All conditions met, add small paint delay before hiding loading screen setTimeout(function() { hideLoadingScreen(); }, 150); // ✅ PAINT DELAY: Give browser time to render Tailwind styles } else { // Waiting for conditions } } // Enhanced loading screen with progressive messages function initializeEnhancedLoadingScreen() { var loadingMessages = [ "Initializing election systems...", "Loading voter databases...", "Connecting to real-time feeds...", "Preparing dashboard interfaces...", "Activating predictive analytics...", "Campaign Canvas ready!" ]; var messageIndex = 0; var loadingText = document.getElementById('loading-text'); if (loadingText) { var messageInterval = setInterval(() => { if (messageIndex < loadingMessages.length) { // Fade out loadingText.style.opacity = '0.5'; setTimeout(() => { loadingText.textContent = loadingMessages[messageIndex]; // Fade in loadingText.style.opacity = '1'; messageIndex++; }, 200); } else { clearInterval(messageInterval); } }, 400); } } function hideLoadingScreen() { var loadingScreen = document.getElementById('app-loading'); if (loadingScreen) { // ✅ FIXED: Add transition only for fade-out (instant initial display) loadingScreen.classList.add('transition-opacity', 'duration-700'); // Add completion effect loadingScreen.style.opacity = '0'; loadingScreen.style.transform = 'scale(1.05)'; setTimeout(() => { loadingScreen.style.setProperty('display', 'none', 'important'); // Add app-ready class to show header and other elements document.body.classList.add('app-ready'); // Trigger page entrance animation triggerPageEntranceAnimation(); }, 700); } } function triggerPageEntranceAnimation() { var nav = document.querySelector('nav'); var main = document.querySelector('main'); if (nav) { nav.style.transform = 'translateY(-100%)'; nav.style.opacity = '0'; setTimeout(() => { nav.style.transition = 'all 0.6s cubic-bezier(0.4, 0, 0.2, 1)'; nav.style.transform = 'translateY(0)'; nav.style.opacity = '1'; }, 100); } if (main) { main.style.opacity = '0'; main.style.transform = 'translateY(30px)'; setTimeout(() => { main.style.transition = 'all 0.8s cubic-bezier(0.4, 0, 0.2, 1)'; main.style.opacity = '1'; main.style.transform = 'translateY(0)'; }, 300); } } // Enhanced navigation with advanced interactions function initializeEnhancedNavigation() { var mobileMenuButton = document.getElementById('mobile-menu-btn'); var mobileMenu = document.getElementById('mobile-menu'); // Function to toggle mobile menu open/closed window.toggleMobileMenu = function() { var mobileMenu = document.getElementById('mobile-menu'); var mobileMenuButton = document.getElementById('mobile-menu-btn'); if (mobileMenu.classList.contains('hidden')) { // Open the menu mobileMenu.classList.remove('hidden'); mobileMenu.style.maxHeight = '400px'; mobileMenu.style.opacity = '1'; // Animate hamburger to X if (mobileMenuButton) { var icon = mobileMenuButton.querySelector('svg'); var paths = icon.querySelectorAll('path'); icon.style.transform = 'rotate(90deg)'; if (paths.length >= 3) { paths[0].setAttribute('d', 'M6 18L18 6'); paths[1].setAttribute('d', 'M6 6l12 12'); paths[2].setAttribute('d', 'M6 6l12 12'); } } } else { // Close the menu window.closeMobileMenu(); } }; // Function to close mobile menu window.closeMobileMenu = function() { var mobileMenu = document.getElementById('mobile-menu'); if (mobileMenu && !mobileMenu.classList.contains('hidden')) { // Animate close mobileMenu.style.maxHeight = '0'; mobileMenu.style.opacity = '0'; setTimeout(() => { mobileMenu.classList.add('hidden'); // Reset hamburger icon to original state var mobileMenuButton = document.getElementById('mobile-menu-btn'); if (mobileMenuButton) { var icon = mobileMenuButton.querySelector('svg'); var paths = icon.querySelectorAll('path'); icon.style.transform = 'rotate(0deg)'; if (paths.length >= 3) { paths[0].setAttribute('d', 'M4 6h16'); paths[1].setAttribute('d', 'M4 12h16'); paths[2].setAttribute('d', 'M4 18h16'); } } }, 300); } }; // Function to navigate and close mobile menu window.navigateAndCloseMobile = function(pageName) { // Close the mobile menu first window.closeMobileMenu(); // Navigate to the page after a brief delay to ensure smooth animation setTimeout(() => { phoros.page.change(pageName); }, 100); }; // Navigation button click effects removed for validation compliance updateActiveNav(); } // Enhanced ripple effect function function createRippleEffect(element) { var rect = element.getBoundingClientRect(); var size = Math.max(rect.width, rect.height); var x = rect.width / 2; var y = rect.height / 2; var ripple = document.createElement('span'); ripple.style.cssText = ` position: absolute; width: ${size}px; height: ${size}px; left: ${x - size/2}px; top: ${y - size/2}px; background: rgba(59, 130, 246, 0.4); border-radius: 50%; transform: scale(0); animation: ripple-animation 0.6s ease-out; pointer-events: none; z-index: 1; `; element.style.position = 'relative'; element.style.overflow = 'hidden'; element.appendChild(ripple); setTimeout(() => { if (ripple.parentNode) { ripple.parentNode.removeChild(ripple); } }, 600); } // Global animations and micro-interactions function initializeGlobalAnimations() { // Add CSS animations var style = document.createElement('style'); style.textContent = ` @keyframes ripple-animation { to { transform: scale(4); opacity: 0; } } @keyframes fade-in-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes slide-in-right { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } @keyframes bounce-in { 0% { opacity: 0; transform: scale(0.3); } 50% { transform: scale(1.05); } 70% { transform: scale(0.9); } 100% { opacity: 1; transform: scale(1); } } .nav-button.active { background: linear-gradient(135deg, #3b82f6, #1d4ed8); color: white; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); transform: translateY(-1px); } .nav-button-mobile.active { background: linear-gradient(135deg, #3b82f6, #1d4ed8); color: white; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3); } /* Enhanced hover effects */ .nav-button:hover:not(.active) { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); } /* Page content animations */ .page-content { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Toast notifications */ .toast { position: relative; background: white; border-radius: 8px; padding: 16px; margin-bottom: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); border-left: 4px solid #10B981; opacity: 0; transform: translateX(100%); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .toast.show { opacity: 1; transform: translateX(0); } .toast.warning { border-left-color: #F59E0B; } .toast.error { border-left-color: #EF4444; } `; document.head.appendChild(style); // Initialize intersection observer for scroll animations initializeScrollAnimations(); } // Intersection Observer for scroll-triggered animations function initializeScrollAnimations() { var observerOptions = { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }; var observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { var element = entry.target; // Add different animations based on element type if (element.classList.contains('card')) { // element.classList.add('animate-bounce-in'); // Removed } else if (element.classList.contains('chart-container')) { // element.classList.add('animate-slide-in-right'); // Removed } else { // element.classList.add('animate-fade-in-up'); // Removed } observer.unobserve(element); } }); }, observerOptions); // Observe elements that should animate on scroll setTimeout(() => { document.querySelectorAll('.bg-white, .card, .chart-container, .stats-card').forEach(el => { observer.observe(el); }); }, 100); } // Toast notification system function initializeToastSystem() { // SIMPLE TOAST SYSTEM - NO COMPLEX SYNTAX window.showToast = function(message, type, duration) { // Toast notification // Simple alert fallback for now if (message && message.length > 0) { // Notification message } }; window.removeToast = function(toast) { // Simple removal // Removing toast }; } function getToastIcon(type) { // SIMPLE ICON FALLBACK return ''; } // Enhanced active navigation function with smooth transitions function updateActiveNav() { var currentPage = phoros.page.name() || 'home'; // Remove active class from all nav buttons with transition document.querySelectorAll('.nav-button, .nav-button-mobile').forEach(btn => { btn.classList.remove('active'); btn.style.transition = 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)'; }); // Add active class to current page button with delay for smooth transition setTimeout(() => { document.querySelectorAll(`[onclick*="${currentPage}"]`).forEach(btn => { btn.classList.add('active'); }); }, 50); } // Enhanced page change with sophisticated transitions var originalChangePage = phoros.page.change; phoros.page.change = function(pageName) { // Create page transition overlay var overlay = document.createElement('div'); overlay.style.cssText = ` position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(29, 78, 216, 0.1)); z-index: 30; opacity: 0; transition: opacity 0.2s ease; pointer-events: none; `; document.body.appendChild(overlay); // Fade in overlay setTimeout(() => overlay.style.opacity = '1', 10); // Add page transition effect var pageContent = document.querySelector('.page-content'); if (pageContent) { pageContent.style.transition = 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)'; pageContent.style.opacity = '0.7'; pageContent.style.transform = 'translateY(20px) scale(0.98)'; } // Execute page change originalChangePage.call(this, pageName); // Restore and animate setTimeout(() => { updateActiveNav(); if (pageContent) { pageContent.style.opacity = '1'; pageContent.style.transform = 'translateY(0) scale(1)'; } // Remove overlay overlay.style.opacity = '0'; setTimeout(() => { if (overlay.parentNode) { overlay.parentNode.removeChild(overlay); } }, 200); // Trigger scroll animations for new content setTimeout(() => { initializeScrollAnimations(); }, 300); }, 150); }; // Enhanced global interactions removed for validation compliance // Performance optimized debounce for smooth interactions function debounce(func, wait) { var timeout; return function executedFunction(...args) { var later = () => { clearTimeout(timeout); func(...args); }; clearTimeout(timeout); timeout = setTimeout(later, wait); }; } // Add smooth scroll behavior for better UX document.documentElement.style.scrollBehavior = 'smooth'; // Campaign Canvas: Enhanced animations loaded // Dashboard Dropdown Functions var dashboardDropdownTimeout; function showDashboardDropdown() { clearTimeout(dashboardDropdownTimeout); var dropdown = document.getElementById('dashboard-dropdown'); if (dropdown) { dropdown.classList.remove('opacity-0', 'invisible', 'translate-y-2'); dropdown.classList.add('opacity-100', 'visible', 'translate-y-0'); } } function hideDashboardDropdown() { dashboardDropdownTimeout = setTimeout(function() { var dropdown = document.getElementById('dashboard-dropdown'); if (dropdown) { dropdown.classList.remove('opacity-100', 'visible', 'translate-y-0'); dropdown.classList.add('opacity-0', 'invisible', 'translate-y-2'); } }, 150); // Small delay to allow moving between button and dropdown } // Mobile profile modal function function showMobileProfileModal() { if (window.CampaignAuth) { window.CampaignAuth.showProfileModal(); } } // ===== CENTRALIZED VOTER CARD GENERATION (SHARED ACROSS ALL PAGES) ===== window.CampaignManager = window.CampaignManager || {}; window.CampaignManager.createVoterCard = function(voter, options) { options = options || {}; // 🚀 CENTRALIZED STATUS COMPUTATION: ALWAYS compute status for all views // This ensures consistent colors, labeling, and behavior across all role views // Always recompute to reflect real-time data changes if (voter['Voted?']) { voter.status = 'voted'; } else if (voter['Contacted?']) { voter.status = 'contacted'; } else if (voter['Engaged?']) { voter.status = 'engaged'; } else { voter.status = 'pending'; } var voterCard = document.createElement('div'); voterCard.className = 'voter-card status-' + voter.status; voterCard.setAttribute('data-voter-id', voter._id); // Voter info section var voterInfo = document.createElement('div'); voterInfo.className = 'voter-info'; // Create voter name from Electoral List fields var voterName = document.createElement('div'); voterName.className = 'font-medium text-gray-900'; voterName.textContent = voter['Full Name'] || voter['Voter Name:'] || 'Unknown Name'; // Create address from Electoral List fields var voterAddress = document.createElement('div'); voterAddress.className = 'text-sm text-gray-500'; var address = ''; if (voter['Address 1']) address += voter['Address 1'] + ' '; if (voter['Address 2']) address += voter['Address 2'] + ', '; address += voter['Post Office'] || ''; if (!address.trim()) address = voter['Full Address'] || voter['Address'] || ''; voterAddress.textContent = address; // Phone and RRC var voterPhone = document.createElement('div'); voterPhone.className = 'text-sm text-gray-500'; var displayPhone = voter['Voter Phone'] || voter.phone || 'No phone'; voterPhone.textContent = displayPhone + ' | RRC: ' + (voter['RRC:'] || 'Unknown'); // Assignment and PD line var assignmentLine = document.createElement('div'); assignmentLine.className = 'text-sm text-gray-600 mt-1'; var pdText = document.createElement('span'); // Prefer human-friendly PD number/label when available var pdPretty = voter['Polling Div'] || voter['PD Number'] || null; pdText.textContent = 'PD: ' + (pdPretty || '...'); assignmentLine.appendChild(pdText); // If only record id(s) available, resolve asynchronously if (!pdPretty && (voter['PD #'] || voter['Polling Division'])) { try { var pdIds = voter['PD #'] || voter['Polling Division']; if (!Array.isArray(pdIds)) { pdIds = [pdIds]; } if (typeof phoros !== 'undefined' && phoros.processor && pdIds.length > 0) { phoros.processor('getPollingDivisionNumbers', { pd_numbers_or_ids: pdIds }, function(err, res){ if (!err && res && res.success && res.data && res.data.display) { pdText.textContent = 'PD: ' + res.data.display; } else { pdText.textContent = 'PD: ' + (pdIds[0] || 'N/A'); } }); } } catch (e) { /* keep placeholder */ } } // Add assignment info if available and requested var isEngagementPhaseForCard = (window.CampaignSettings && window.CampaignSettings.currentState) === 'Voter Engagement'; if (options.showAssignment) { // Show current assignment if known if (voter.assigned_runner) { var assignedText = document.createElement('span'); assignedText.textContent = ' | Assigned to ' + voter.assigned_runner.name; assignmentLine.appendChild(assignedText); } // Always show Reassign link for authorized views when callback is provided if (options.onReassign && isEngagementPhaseForCard) { var reassignLink = document.createElement('span'); reassignLink.className = 'text-cyan-600 hover:text-cyan-700 cursor-pointer font-medium ml-2'; reassignLink.textContent = 'Reassign'; reassignLink.onclick = function() { options.onReassign(voter); }; assignmentLine.appendChild(reassignLink); } // Always show Recanvass link for authorized views when callback is provided if (options.onRecanvass && isEngagementPhaseForCard) { var recanvassLink = document.createElement('span'); recanvassLink.className = 'text-blue-600 hover:text-blue-700 cursor-pointer font-medium ml-2'; recanvassLink.textContent = 'Recanvass'; recanvassLink.onclick = function() { options.onRecanvass(voter); }; assignmentLine.appendChild(recanvassLink); } } // Party affiliation badge var partyBadge = null; if (voter['JLP']) { partyBadge = document.createElement('span'); partyBadge.className = 'party-badge jlp'; partyBadge.textContent = 'JLP'; } else if (voter['PNP']) { partyBadge = document.createElement('span'); partyBadge.className = 'party-badge pnp'; partyBadge.textContent = 'PNP'; } else if (voter['NO VIEW']) { partyBadge = document.createElement('span'); partyBadge.className = 'party-badge no-view'; partyBadge.textContent = 'NO VIEW'; } // Special status badges var specialBadge = null; if (voter['OUT OF TOWN']) { specialBadge = document.createElement('span'); specialBadge.className = 'party-badge out-of-town'; specialBadge.textContent = 'Out of Town'; } else if (voter['DEAD']) { specialBadge = document.createElement('span'); specialBadge.className = 'party-badge dead'; specialBadge.textContent = 'Deceased'; } var nameLineDiv = document.createElement('div'); nameLineDiv.className = 'voter-name-line'; nameLineDiv.appendChild(voterName); if (partyBadge) nameLineDiv.appendChild(partyBadge); if (specialBadge) nameLineDiv.appendChild(specialBadge); // Status chip beside name and party var statusText = (voter.status || 'pending').toLowerCase(); var statusChip = document.createElement('span'); statusChip.className = 'status-chip ' + statusText; statusChip.textContent = (statusText === 'picked_up') ? 'PICKED UP' : statusText.replace('_',' ').toUpperCase(); nameLineDiv.appendChild(statusChip); voterInfo.appendChild(nameLineDiv); voterInfo.appendChild(voterAddress); voterInfo.appendChild(voterPhone); voterInfo.appendChild(assignmentLine); // Actions section var voterActions = document.createElement('div'); voterActions.className = 'voter-actions'; // Status badge moved to name line; keep actions minimal // Create checkboxes if enabled if (options.enableCheckboxes !== false) { // Engaged toggle removed - engagement forms are always visible during engagement phase // Contacted checkbox - Mobile-Friendly var contactedControl = document.createElement('label'); contactedControl.className = 'mobile-checkbox-container'; contactedControl.htmlFor = 'contacted-' + voter._id; // Add disabled class if needed if (voter.status === 'deceased' || voter.status === 'unavailable') { contactedControl.classList.add('disabled'); } var contactedCheckbox = document.createElement('input'); contactedCheckbox.type = 'checkbox'; contactedCheckbox.id = 'contacted-' + voter._id; contactedCheckbox.checked = voter['Contacted?'] || false; contactedCheckbox.className = 'mobile-checkbox'; contactedCheckbox.disabled = voter.status === 'deceased' || voter.status === 'unavailable'; contactedCheckbox.onchange = function() { if (options.onContactedChange) { options.onContactedChange(voter, contactedCheckbox.checked, function() { // Success callback }, function() { // Cancel callback - revert checkbox contactedCheckbox.checked = !contactedCheckbox.checked; }); } }; var contactedCustom = document.createElement('div'); contactedCustom.className = 'mobile-checkbox-custom'; var contactedLabel = document.createElement('span'); contactedLabel.className = 'mobile-checkbox-label'; contactedLabel.textContent = 'Contacted'; contactedControl.appendChild(contactedCheckbox); contactedControl.appendChild(contactedCustom); contactedControl.appendChild(contactedLabel); // Voting checkbox - Mobile-Friendly var votingControl = document.createElement('label'); votingControl.className = 'mobile-checkbox-container'; votingControl.htmlFor = 'voted-' + voter._id; // Add disabled class if needed (check voting hours if function exists) var votingDisabled = voter.status === 'deceased' || voter.status === 'unavailable'; if (typeof checkVotingHours === 'function' && !checkVotingHours()) { votingDisabled = true; } if (votingDisabled) { votingControl.classList.add('disabled'); } var votedCheckbox = document.createElement('input'); votedCheckbox.type = 'checkbox'; votedCheckbox.id = 'voted-' + voter._id; votedCheckbox.checked = Boolean(voter['Voted?']); votedCheckbox.className = 'mobile-checkbox voted'; votedCheckbox.disabled = votingDisabled; votedCheckbox.onchange = function() { if (options.onVotedChange) { options.onVotedChange(voter, votedCheckbox.checked, function() { // Success callback }, function() { // Cancel callback - revert checkbox votedCheckbox.checked = !votedCheckbox.checked; }); } }; var votedCustom = document.createElement('div'); votedCustom.className = 'mobile-checkbox-custom'; var votedLabel = document.createElement('span'); votedLabel.className = 'mobile-checkbox-label'; votedLabel.textContent = 'Voted'; votingControl.appendChild(votedCheckbox); votingControl.appendChild(votedCustom); votingControl.appendChild(votedLabel); // Create a container and append controls based on campaign state var checkboxContainer = document.createElement('div'); checkboxContainer.className = 'flex flex-col sm:flex-row items-start sm:items-center gap-2 sm:gap-0'; var campaignState = (window.CampaignSettings && window.CampaignSettings.currentState) || 'Voter Engagement'; var showEngaged = campaignState === 'Voter Engagement'; var showContacted = campaignState === 'Dry Run'; var showVoted = campaignState === 'Election Day'; // Engaged toggle removed - forms are always visible during engagement phase if (showContacted) checkboxContainer.appendChild(contactedControl); if (showVoted) checkboxContainer.appendChild(votingControl); voterActions.appendChild(checkboxContainer); } else { // no extra badges in actions } // Determine campaign phase FIRST (before using the variable) var campaignStateInline = (window.CampaignSettings && window.CampaignSettings.currentState) || 'Voter Engagement'; var isEngagementPhaseInline = campaignStateInline === 'Voter Engagement'; // Inline engagement form (hidden by default; shown when Engaged is checked) // Excludes notes per requirement. Uses safe DOM APIs (no HTML strings). var engagementForm = document.createElement('div'); engagementForm.id = 'engagement-form-' + voter._id; // Always visible in runner view; hidden on other pages var engagementBaseClasses = 'mt-3 p-3 bg-green-50 border border-jlp-green rounded-lg'; // Always visible during engagement phase (same as runner-view behavior) engagementForm.className = engagementBaseClasses; if (isEngagementPhaseInline) { // Interactive layout for engagement - left-aligned with natural mobile stacking var grid = document.createElement('div'); grid.className = 'flex flex-col sm:flex-row sm:flex-wrap gap-3 items-start'; // Phone input - takes more space on larger screens var phoneCol = document.createElement('div'); phoneCol.className = 'flex-1 min-w-48 sm:min-w-56'; var phoneLabel = document.createElement('label'); phoneLabel.className = 'block text-xs font-medium text-gray-700 mb-1'; phoneLabel.textContent = 'Voter Phone Number *'; phoneLabel.setAttribute('for', 'eng_phone_' + voter._id); var phoneInput = document.createElement('input'); phoneInput.type = 'tel'; phoneInput.id = 'eng_phone_' + voter._id; phoneInput.className = 'w-full md:w-auto px-3 h-10 border border-gray-300 rounded-md'; try { phoneInput.style.minWidth = '240px'; } catch (e) {} phoneInput.placeholder = '(876) 123-4567'; var existingPhone = voter['Voter Phone'] || voter.phone || ''; if (existingPhone) { phoneInput.value = existingPhone; } phoneCol.appendChild(phoneLabel); phoneCol.appendChild(phoneInput); // Outreach time - takes remaining space var timeCol = document.createElement('div'); timeCol.className = 'flex-shrink-0'; var timeLabel = document.createElement('label'); timeLabel.className = 'block text-xs font-medium text-gray-700 mb-1'; timeLabel.textContent = 'Outreach Time *'; timeCol.appendChild(timeLabel); var timeWrap = document.createElement('div'); timeWrap.className = 'flex flex-col sm:flex-row gap-2 items-start sm:items-center'; var outreachVal = (voter['Outreach Time'] || '').toString(); function createTimeRadio(value, text) { return createRadio('outreach_' + voter._id, value, text, outreachVal === value); } timeWrap.appendChild(createTimeRadio('7AM-9AM', '7AM - 9AM')); timeWrap.appendChild(createTimeRadio('9AM-12PM', '9AM - 12PM')); timeWrap.appendChild(createTimeRadio('12PM-3PM', '12PM - 3PM')); timeCol.appendChild(timeWrap); // Guide checkbox - compact size var guideCol = document.createElement('div'); guideCol.className = 'flex-shrink-0'; var guideLabel = document.createElement('label'); guideLabel.className = 'block text-xs font-medium text-gray-700 mb-1'; guideLabel.textContent = 'Voter Guide Delivered'; guideCol.appendChild(guideLabel); var guideWrap = document.createElement('div'); guideWrap.className = 'flex gap-2'; function createRadio(name, value, text, isChecked) { var wrap = document.createElement('label'); wrap.className = 'inline-flex items-center gap-2 text-sm px-3 h-10 border border-jlp-green rounded-md bg-white'; var input = document.createElement('input'); input.type = 'radio'; input.name = name; input.value = value; input.id = name + '_' + value + '_' + voter._id; try { input.className = 'h-4 w-4 align-middle'; } catch (e) {} if (isChecked) { input.checked = true; } var span = document.createElement('span'); span.textContent = text; span.className = 'text-jlp-green'; wrap.appendChild(input); wrap.appendChild(span); return wrap; } var guideCheckWrap = document.createElement('label'); guideCheckWrap.className = 'inline-flex items-center gap-2 text-sm px-3 h-10 border border-jlp-green rounded-md bg-white'; var guideCheck = document.createElement('input'); guideCheck.type = 'checkbox'; guideCheck.id = 'guide_' + voter._id; try { guideCheck.className = 'h-4 w-4 align-middle'; guideCheck.style.position = 'relative'; guideCheck.style.top = '1px'; // normalize checkbox vs radio vertical baseline } catch (e) {} var guideDeliveredVal = (typeof voter['Voter Guide Delivered'] !== 'undefined') ? Boolean(voter['Voter Guide Delivered']) : false; guideCheck.checked = guideDeliveredVal; var guideSpan = document.createElement('span'); guideSpan.textContent = 'Delivered'; guideSpan.className = 'text-jlp-green'; guideCheckWrap.appendChild(guideCheck); guideCheckWrap.appendChild(guideSpan); guideCol.appendChild(guideCheckWrap); // Action button - compact size var actionCol = document.createElement('div'); actionCol.className = 'flex-shrink-0'; var actionLabel = document.createElement('label'); actionLabel.className = 'block text-xs font-medium text-gray-700 mb-1'; actionLabel.textContent = 'Action'; actionCol.appendChild(actionLabel); var saveBtn = document.createElement('button'); saveBtn.type = 'button'; saveBtn.className = 'w-full md:w-auto bg-jlp-green text-white px-4 h-10 rounded-md hover:bg-jlp-green-dark'; saveBtn.textContent = 'Confirm'; saveBtn.onclick = function() { if (window.handleInlineEngagementSave) { window.handleInlineEngagementSave(voter._id); } }; actionCol.appendChild(saveBtn); // Assemble layout - left-aligned with natural mobile stacking grid.appendChild(phoneCol); // Phone first (takes most space) grid.appendChild(guideCol); // Guide second (compact) grid.appendChild(timeCol); // Time third (compact) grid.appendChild(actionCol); // Action last (compact) engagementForm.appendChild(grid); } else if (true) { // For any non-engagement stage, render read-only fields across all roles // Read-only display outside engagement phase var roGrid = document.createElement('div'); roGrid.className = 'grid grid-cols-1 md:grid-cols-3 gap-3'; function addRO(labelText, valueText) { var col = document.createElement('div'); var lbl = document.createElement('div'); lbl.className = 'text-xs font-medium text-gray-600'; lbl.textContent = labelText; var val = document.createElement('div'); val.className = 'text-sm text-jlp-green font-semibold'; val.textContent = valueText || '—'; col.appendChild(lbl); col.appendChild(val); return col; } var displayPhone = voter['Voter Phone'] || voter.phone || 'No phone'; var displayGuide = (typeof voter['Voter Guide Delivered'] === 'boolean') ? (voter['Voter Guide Delivered'] ? 'Yes' : 'No') : '—'; var displayTimeRaw = (voter['Outreach Time'] || '').toString(); var displayTime = displayTimeRaw || '—'; roGrid.appendChild(addRO('Voter Phone Number', displayPhone)); roGrid.appendChild(addRO('Voter Guide Delivered', displayGuide)); roGrid.appendChild(addRO('Outreach Time', displayTime)); engagementForm.appendChild(roGrid); } // Attach inline form beneath the normal text section voterInfo.appendChild(engagementForm); voterCard.appendChild(voterInfo); voterCard.appendChild(voterActions); return voterCard; }; // ===== CENTRALIZED UI HELPERS ===== window.CampaignUI = window.CampaignUI || {}; // Render Phase Quadrants based on campaign stage // container can be an element or element id. phaseData expects: // { stage: 'Voter Engagement'|'Dry Run'|'Election Day', stats: {...} } window.CampaignUI.renderPhaseQuadrants = function(container, phaseData) { try { var el = (typeof container === 'string') ? document.getElementById(container) : container; if (!el) return; var stage = phaseData ? phaseData.stage : 'Voter Engagement'; var stats = (phaseData && phaseData.stats) ? phaseData.stats : {}; // Clear container while (el.firstChild) { el.removeChild(el.firstChild); } // Grid wrapper - 2 columns for prominence var grid = document.createElement('div'); grid.className = 'grid grid-cols-1 md:grid-cols-2 gap-6 mb-6'; function createProgressCard(title, value, total, subtitle, color, percentage) { var card = document.createElement('div'); card.className = 'bg-white rounded-lg shadow-md p-6 border-l-4 border-' + color + '-500'; var titleEl = document.createElement('h3'); titleEl.className = 'text-sm font-semibold text-gray-700 uppercase tracking-wide mb-3'; titleEl.textContent = title; var metricRow = document.createElement('div'); metricRow.className = 'flex items-center justify-between mb-3'; var valueEl = document.createElement('div'); valueEl.className = 'text-3xl font-bold text-gray-900'; valueEl.textContent = Number(value || 0).toLocaleString(); var percentEl = document.createElement('div'); percentEl.className = 'text-xl font-bold text-' + color + '-600'; percentEl.textContent = Math.round(percentage || 0) + '%'; metricRow.appendChild(valueEl); metricRow.appendChild(percentEl); // Progress bar var progressBg = document.createElement('div'); progressBg.className = 'w-full bg-gray-200 rounded-full h-3 mb-2'; var progressBar = document.createElement('div'); progressBar.className = 'bg-' + color + '-500 h-3 rounded-full transition-all duration-500'; progressBar.style.width = Math.min(percentage || 0, 100) + '%'; progressBg.appendChild(progressBar); var subEl = document.createElement('div'); subEl.className = 'text-sm text-gray-600 flex items-center justify-between'; var leftSpan = document.createElement('span'); leftSpan.textContent = subtitle || ''; var rightSpan = document.createElement('span'); rightSpan.className = 'font-medium'; rightSpan.textContent = Number(value || 0).toLocaleString() + ' of ' + Number(total || 0).toLocaleString(); subEl.appendChild(leftSpan); subEl.appendChild(rightSpan); card.appendChild(titleEl); card.appendChild(metricRow); card.appendChild(progressBg); card.appendChild(subEl); return card; } function createStatusCard(title, items, color) { var card = document.createElement('div'); card.className = 'bg-white rounded-lg shadow-md p-6 border-l-4 border-' + color + '-500'; var titleEl = document.createElement('h3'); titleEl.className = 'text-sm font-semibold text-gray-700 uppercase tracking-wide mb-4'; titleEl.textContent = title; items.forEach(function(item) { var itemDiv = document.createElement('div'); itemDiv.className = 'flex items-center justify-between py-2 border-b border-gray-100 last:border-b-0'; var labelEl = document.createElement('span'); labelEl.className = 'text-sm text-gray-600'; labelEl.textContent = item.label; var valueEl = document.createElement('span'); valueEl.className = 'text-sm font-semibold text-gray-900'; valueEl.textContent = item.value; itemDiv.appendChild(labelEl); itemDiv.appendChild(valueEl); card.appendChild(itemDiv); }); return card; } // Phase-specific quadrants if (stage === 'Voter Engagement') { // Phone Collection Progress var phonesCollected = Number(stats.phone_collected_count || 0); var phonesTarget = Number(stats.phone_target || stats.total_voters || 0); var phonePercent = phonesTarget > 0 ? (phonesCollected / phonesTarget) * 100 : 0; grid.appendChild(createProgressCard( 'Phone Collection Progress', phonesCollected, phonesTarget, 'Voter contact readiness', 'blue', phonePercent )); // Contact Engagement Progress var contactsEngaged = Number(stats.guides_distributed_count || 0); var contactsTarget = Number(stats.total_voters || 0); var contactPercent = contactsTarget > 0 ? (contactsEngaged / contactsTarget) * 100 : 0; grid.appendChild(createProgressCard( 'Voter Engagement Progress', contactsEngaged, contactsTarget, 'Guides distributed & contacts made', 'green', contactPercent )); // Phone Collection Readiness Status - with Political Breakdown var jlpCount = 0, pnpCount = 0, jlpPercent = 0, pnpPercent = 0; // Extract JLP vs PNP data from engagement quadrants breakdown if available if (stats.engagement_quadrants && stats.engagement_quadrants.voter_contact && stats.engagement_quadrants.voter_contact.breakdown) { var breakdown = stats.engagement_quadrants.voter_contact.breakdown; jlpCount = breakdown.jlp || 0; pnpCount = breakdown.pnp || 0; jlpPercent = breakdown.jlp_percentage || 0; pnpPercent = breakdown.pnp_percentage || 0; } grid.appendChild(createStatusCard('Collection Readiness', [ { label: 'Workers with Phones', value: Number(stats.phone_collected_count || 0).toLocaleString() }, { label: 'Collection Rate', value: Math.round(phonePercent) + '%' }, { label: 'JLP Support', value: jlpCount.toLocaleString() + ' (' + jlpPercent + '%)' }, { label: 'PNP Support', value: pnpCount.toLocaleString() + ' (' + pnpPercent + '%)' } ], 'indigo')); // Engagement Metrics Status grid.appendChild(createStatusCard('Engagement Metrics', [ { label: 'Morning Outreach', value: Number(stats.morning_count || 0).toLocaleString() }, { label: 'Afternoon Outreach', value: Number(stats.afternoon_count || 0).toLocaleString() }, { label: 'Evening Outreach', value: Number(stats.evening_count || 0).toLocaleString() }, { label: 'Active Team', value: Number(stats.team_size || 0).toLocaleString() + ' workers' } ], 'purple')); } else if (stage === 'Dry Run') { // Worker Readiness Progress var workersReady = Number(stats.workers_ready || 0); var workersTotal = Number(stats.total_workers || stats.team_size || 0); var workerPercent = workersTotal > 0 ? (workersReady / workersTotal) * 100 : 0; grid.appendChild(createProgressCard( 'Worker Readiness', workersReady, workersTotal, 'Training & preparation complete', 'orange', workerPercent )); // System Testing Progress var testsComplete = Number(stats.tests_completed || 0); var testsTotal = Number(stats.total_tests || 10); // Default 10 tests var testPercent = testsTotal > 0 ? (testsComplete / testsTotal) * 100 : 0; grid.appendChild(createProgressCard( 'System Testing', testsComplete, testsTotal, 'Processes verified & tested', 'yellow', testPercent )); // Training Status grid.appendChild(createStatusCard('Training Status', [ { label: 'Workers Trained', value: Number(stats.workers_ready || 0).toLocaleString() }, { label: 'Training Sessions', value: Number(stats.training_sessions || 0).toLocaleString() }, { label: 'Certification Rate', value: Math.round(workerPercent) + '%' }, { label: 'Mock Elections', value: Number(stats.mock_elections || 0).toLocaleString() } ], 'amber')); // Operations Readiness grid.appendChild(createStatusCard('Operations Check', [ { label: 'Equipment Ready', value: Math.round(testPercent) + '%' }, { label: 'Communication Test', value: (stats.comms_tested ? 'Passed' : 'Pending') }, { label: 'Backup Systems', value: (stats.backup_ready ? 'Active' : 'Setup needed') }, { label: 'Emergency Protocols', value: (stats.emergency_ready ? 'Verified' : 'Review needed') } ], 'orange')); } else if (stage === 'Election Day') { // Voting Progress var votescast = Number(stats.votes_cast || 0); var votersTurnout = Number(stats.expected_turnout || stats.total_voters || 0); var turnoutPercent = votersTurnout > 0 ? (votescast / votersTurnout) * 100 : 0; grid.appendChild(createProgressCard( 'Voter Turnout', votescast, votersTurnout, 'Real-time voting progress', 'green', turnoutPercent )); // Operations Status var stationsOpen = Number(stats.stations_operational || 0); var stationsTotal = Number(stats.total_stations || 1); var stationPercent = stationsTotal > 0 ? (stationsOpen / stationsTotal) * 100 : 0; grid.appendChild(createProgressCard( 'Station Operations', stationsOpen, stationsTotal, 'Polling stations operational', 'blue', stationPercent )); // Live Turnout Analysis grid.appendChild(createStatusCard('Turnout Analysis', [ { label: 'Current Turnout', value: Math.round(turnoutPercent) + '%' }, { label: 'JLP Voters', value: Number(stats.jlp_turnout || 0).toLocaleString() }, { label: 'Hourly Rate', value: Number(stats.hourly_rate || 0).toLocaleString() + '/hr' }, { label: 'Projected Final', value: Math.round(turnoutPercent * 1.2) + '%' } ], 'emerald')); // Operations Status grid.appendChild(createStatusCard('Live Operations', [ { label: 'Active Stations', value: stationsOpen + ' of ' + stationsTotal }, { label: 'Workers on Duty', value: Number(stats.active_workers || 0).toLocaleString() }, { label: 'Issues Reported', value: Number(stats.issues_reported || 0).toLocaleString() }, { label: 'System Status', value: (stats.system_operational ? 'Online' : 'Issues') } ], 'blue')); } el.appendChild(grid); } catch (e) { console.error('renderPhaseQuadrants error:', e); } }; // Render standard Engagement cards set (Total Voters, Phone Collected, Guides Distributed, Outreach Times, Team Members) // container can be an element or element id. stats expects: // { total_voters, phone_collected_count, guides_distributed_count, morning_count, afternoon_count, evening_count, team_size } // role (optional): 'agent', 'supervisor', 'captain' - affects the "Total Voters" subtitle window.CampaignUI.renderEngagementCards = function(container, stats, role) { try { var el = (typeof container === 'string') ? document.getElementById(container) : container; if (!el) return; // Normalize stats with safe defaults var s = stats || {}; var total = Number(s.total_voters || 0); var phones = Number(s.phone_collected_count || 0); var guides = Number(s.guides_distributed_count || 0); var morning = Number(s.morning_count || 0); var afternoon = Number(s.afternoon_count || 0); var evening = Number(s.evening_count || 0); var team = Number(s.team_size || 0); // Clear container while (el.firstChild) { el.removeChild(el.firstChild); } // Grid wrapper var grid = document.createElement('div'); grid.className = 'grid grid-cols-2 md:grid-cols-5 gap-4'; function createCard(title, value, subtitle, borderColor) { var card = document.createElement('div'); card.className = 'bg-white rounded-lg shadow-sm p-4 border-l-4 ' + (borderColor || 'border-jlp-green'); var titleEl = document.createElement('h3'); titleEl.className = 'text-xs font-medium text-gray-600 uppercase tracking-wide'; titleEl.textContent = title; var valueEl = document.createElement('div'); valueEl.className = 'text-2xl font-bold text-gray-900 my-1'; valueEl.textContent = value; var subEl = document.createElement('div'); subEl.className = 'text-xs text-gray-500'; subEl.textContent = subtitle || ''; card.appendChild(titleEl); card.appendChild(valueEl); card.appendChild(subEl); return card; } // Total voters - role-specific subtitle var votersSubtitle = 'Registered in Division'; // Default if (role === 'agent') { votersSubtitle = 'Registered in Polling Division'; } else if (role === 'supervisor') { votersSubtitle = 'Registered in Supervised PDs'; } else if (role === 'captain') { votersSubtitle = 'Registered in PD'; } grid.appendChild(createCard('Total Voters', total.toLocaleString(), votersSubtitle, 'border-blue-500')); // Phone numbers collected grid.appendChild(createCard('Phone Numbers Collected', phones.toLocaleString(), 'Unique voter phone numbers', 'border-cyan-500')); // Guides distributed grid.appendChild(createCard('Guides Distributed', guides.toLocaleString(), 'Total voter guides delivered', 'border-green-500')); // Outreach time (morning/afternoon/evening) var outreach = document.createElement('div'); outreach.className = 'bg-white rounded-lg shadow-sm p-4 border-l-4 border-purple-500'; var otTitle = document.createElement('h3'); otTitle.className = 'text-xs font-medium text-gray-600 uppercase tracking-wide'; otTitle.textContent = 'Outreach Preference'; var otMorning = document.createElement('div'); otMorning.className = 'text-sm text-gray-700 mt-2'; otMorning.textContent = '7AM-9AM: ' + morning.toLocaleString(); var otAfternoon = document.createElement('div'); otAfternoon.className = 'text-sm text-gray-700'; otAfternoon.textContent = '9AM-12PM: ' + afternoon.toLocaleString(); var otEvening = document.createElement('div'); otEvening.className = 'text-sm text-gray-700'; otEvening.textContent = '12PM-3PM: ' + evening.toLocaleString(); outreach.appendChild(otTitle); outreach.appendChild(otMorning); outreach.appendChild(otAfternoon); outreach.appendChild(otEvening); grid.appendChild(outreach); // Team members - with View All button var teamCard = createCard('Team Members', team.toLocaleString(), 'Active Workers', 'border-green-500'); // Add View All button if team count > 0 if (team > 0) { var viewAllBtn = document.createElement('button'); viewAllBtn.className = 'mt-2 text-green-700 hover:text-green-900 underline text-xs font-medium'; viewAllBtn.textContent = 'View All'; viewAllBtn.onclick = function() { if (window.CampaignUI && window.CampaignUI.openTeamMembersModal) { window.CampaignUI.openTeamMembersModal(); } }; teamCard.appendChild(viewAllBtn); } grid.appendChild(teamCard); el.appendChild(grid); } catch (e) { console.error('renderEngagementCards error:', e); } }; // Render standardized voter table header // Usage: CampaignUI.renderVoterTableHeader(theadOrId, columns) window.CampaignUI.renderVoterTableHeader = function(theadOrId, columns) { try { var thead = (typeof theadOrId === 'string') ? document.getElementById(theadOrId) : theadOrId; if (!thead) return; // Clear while (thead.firstChild) { thead.removeChild(thead.firstChild); } var tr = document.createElement('tr'); var classes = 'px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider'; var labels = { name: 'Name', id: 'ID', address: 'Address', pd: 'PD', status: 'Status', actions: 'Actions' }; var cols = Array.isArray(columns) && columns.length ? columns : ['name','id','address','status']; cols.forEach(function(key) { var th = document.createElement('th'); th.className = classes; th.textContent = labels[key] || key; tr.appendChild(th); }); thead.appendChild(tr); } catch (e) { console.error('renderVoterTableHeader error:', e); } }; // Render standardized voter table rows // Usage: CampaignUI.renderVoterTable(tbodyOrId, voters, { columns: ['name','id','address','pd','status'], statusStyle: 'badges'|'text' }) window.CampaignUI.renderVoterTable = function(tbodyOrId, voters, options) { try { var tbody = (typeof tbodyOrId === 'string') ? document.getElementById(tbodyOrId) : tbodyOrId; if (!tbody) return; var opts = options || {}; var columns = Array.isArray(opts.columns) && opts.columns.length ? opts.columns : ['name','id','address','status']; var statusStyle = opts.statusStyle || 'badges'; // Clear existing content while (tbody.firstChild) { tbody.removeChild(tbody.firstChild); } // Empty state if (!Array.isArray(voters) || voters.length === 0) { var emptyRow = document.createElement('tr'); var emptyCell = document.createElement('td'); emptyCell.setAttribute('colspan', String(columns.length)); emptyCell.className = 'px-6 py-4 text-center text-gray-500'; emptyCell.textContent = 'No voters found'; emptyRow.appendChild(emptyCell); tbody.appendChild(emptyRow); return; } function getName(v) { if (v['Full Name']) return v['Full Name']; if (v['Voter Name:']) return v['Voter Name:']; if (v['First Name'] || v['Last Name']) return (v['First Name'] || '') + (v['Last Name'] ? (' ' + v['Last Name']) : ''); return 'Unknown'; } function getId(v) { return v['National ID'] || v['ID'] || v['RRC:'] || v['RRC'] || ''; } function getAddress(v) { var addr = ''; if (v['Address 1']) addr += v['Address 1'] + ' '; if (v['Address 2']) addr += v['Address 2'] + ', '; addr += v['Post Office'] || ''; if (!addr.trim()) addr = v['Full Address'] || v['Address'] || ''; return addr || 'No address'; } function renderStatusCell(v) { var statusCell = document.createElement('td'); statusCell.className = 'px-6 py-4 whitespace-nowrap text-sm'; if (statusStyle === 'text') { var parts = []; if (v['Voted?']) parts.push('✓ Voted'); if (v['Engaged?']) parts.push('✓ Engaged'); if (v['Contacted?']) parts.push('✓ Contacted'); statusCell.textContent = parts.length ? parts.join(', ') : 'No status'; return statusCell; } var container = document.createElement('div'); container.className = 'space-y-1'; var votedBadge = document.createElement('div'); if (v['Voted?']) { votedBadge.className = 'inline-block px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800'; votedBadge.textContent = 'Voted'; } else { votedBadge.className = 'inline-block px-2 py-1 text-xs font-semibold rounded-full bg-gray-100 text-gray-800'; votedBadge.textContent = 'Not Voted'; } var engagedBadge = document.createElement('div'); if (v['Engaged?']) { engagedBadge.className = 'inline-block px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800'; engagedBadge.textContent = 'Engaged'; } else { engagedBadge.className = 'inline-block px-2 py-1 text-xs font-semibold rounded-full bg-gray-100 text-gray-500'; engagedBadge.textContent = 'Not Engaged'; } container.appendChild(votedBadge); container.appendChild(engagedBadge); statusCell.appendChild(container); return statusCell; } voters.forEach(function(voter) { var row = document.createElement('tr'); row.className = 'hover:bg-gray-50'; columns.forEach(function(col) { if (col === 'name') { var nameCell = document.createElement('td'); nameCell.className = 'px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900'; nameCell.textContent = getName(voter); row.appendChild(nameCell); } else if (col === 'id') { var idCell = document.createElement('td'); idCell.className = 'px-6 py-4 whitespace-nowrap text-sm text-gray-500'; idCell.textContent = getId(voter); row.appendChild(idCell); } else if (col === 'address') { var addressCell = document.createElement('td'); addressCell.className = 'px-6 py-4 whitespace-nowrap text-sm text-gray-500'; addressCell.textContent = getAddress(voter); row.appendChild(addressCell); } else if (col === 'pd') { var pdCell = document.createElement('td'); pdCell.className = 'px-6 py-4 whitespace-nowrap text-sm text-blue-600 font-medium'; pdCell.textContent = (voter['PD #'] ? ('PD ' + voter['PD #']) : 'PD N/A'); row.appendChild(pdCell); } else if (col === 'status') { row.appendChild(renderStatusCell(voter)); } else if (col === 'actions') { var actionsCell = document.createElement('td'); actionsCell.className = 'px-6 py-4 whitespace-nowrap text-sm text-gray-500'; // Intentionally left blank; view can post-process if needed row.appendChild(actionsCell); } }); tbody.appendChild(row); }); } catch (e) { console.error('renderVoterTable error:', e); } }; // ===== CENTRALIZED VOTER LIST MANAGEMENT SYSTEM ===== window.CampaignVoterList = { // Create standardized voter list HTML structure createVoterListHTML: function(containerId, config) { config = config || {}; var showSearch = config.showSearch !== false; // Default true var showPagination = config.showPagination !== false; // Default true var title = config.title || 'All Voters'; var countId = config.countId || (containerId + '-voter-count-display'); var searchId = config.searchId || (containerId + '-voter-search'); var cardsId = config.cardsId || (containerId + '-voters-cards'); var paginationId = config.paginationId || (containerId + '-pagination-controls'); var pageNumbersId = config.pageNumbersId || (containerId + '-page-numbers'); var prevId = config.prevId || (containerId + '-prev-page'); var nextId = config.nextId || (containerId + '-next-page'); var prevMobileId = config.prevMobileId || (containerId + '-prev-page-mobile'); var nextMobileId = config.nextMobileId || (containerId + '-next-page-mobile'); var pageStartId = config.pageStartId || (containerId + '-page-start'); var pageEndId = config.pageEndId || (containerId + '-page-end'); var totalCountId = config.totalCountId || (containerId + '-total-count'); var html = `

${title}

Loading... voters

${showSearch ? `

🔍 Voter Search & Verification

Search for voters across all assigned areas (name, ID, or address)

` : ''}

${showPagination ? `

Showing 1 to 25 of 0 results

` : ''}

`; return { html: html, ids: { countId: countId, searchId: searchId, cardsId: cardsId, paginationId: paginationId, pageNumbersId: pageNumbersId, prevId: prevId, nextId: nextId, prevMobileId: prevMobileId, nextMobileId: nextMobileId, pageStartId: pageStartId, pageEndId: pageEndId, totalCountId: totalCountId } }; }, // Render voter list with cards renderVoterList: function(data, config) { config = config || {}; // Required parameters if (!data.voters || !config.cardsContainerId) { console.error('❌ CampaignVoterList.renderVoterList: missing required parameters'); return false; } var cardsContainer = document.getElementById(config.cardsContainerId); var countDisplay = document.getElementById(config.countDisplayId); // Update count display if (countDisplay && data.totalVoters !== undefined) { countDisplay.textContent = data.totalVoters; } if (!cardsContainer) { console.error('❌ Cards container not found:', config.cardsContainerId); return false; } // Clear existing content while (cardsContainer.firstChild) { cardsContainer.removeChild(cardsContainer.firstChild); } // Handle empty state if (!data.voters || data.voters.length === 0) { var emptyDiv = document.createElement('div'); emptyDiv.className = 'text-center py-8 text-gray-500'; emptyDiv.textContent = config.emptyMessage || 'No voters found'; cardsContainer.appendChild(emptyDiv); return true; } // Create voter cards data.voters.forEach(function(voter) { // 🚀 CENTRALIZED STATUS COMPUTATION: ALWAYS compute status for consistent styling // Always recompute to reflect real-time data changes from voted toggles if (voter['Voted?']) { voter.status = 'voted'; } else if (voter['Contacted?']) { voter.status = 'contacted'; } else if (voter['Engaged?']) { voter.status = 'engaged'; } else { voter.status = 'pending'; } // 🚨 FIX INFINITE LOOP: Use the main createVoterCard but avoid circular calls if (window.CampaignManager && window.CampaignManager.createVoterCard && !voter._rendering) { // Mark voter as being rendered to prevent circular calls voter._rendering = true; var cardOptions = { showPD: config.showPD !== false, showAssignment: config.showAssignment !== false, showContactStatus: config.showContactStatus !== false, showEngagementStatus: config.showEngagementStatus !== false, enableCheckboxes: config.enableCheckboxes !== false, onEngagementChange: config.onEngagementChange, onContactedChange: config.onContactedChange, onVotedChange: config.onVotedChange, onReassign: config.onReassign, onRecanvass: config.onRecanvass, onStatusChange: config.onStatusChange, cardId: (config.cardPrefix || 'voter-') + voter._id }; var voterCard = window.CampaignManager.createVoterCard(voter, cardOptions); // Clear rendering flag delete voter._rendering; if (voterCard) { cardsContainer.appendChild(voterCard); } } else { // 🚨 CRITICAL FIX: Use enhanced card creation even as fallback // Create voter card with proper status styling var voterCard = document.createElement('div'); voterCard.className = 'voter-card status-' + voter.status; voterCard.setAttribute('data-voter-id', voter._id); var cardContent = document.createElement('div'); cardContent.className = 'p-4 border border-gray-200 rounded-lg hover:shadow-md transition-shadow'; var nameDiv = document.createElement('div'); nameDiv.className = 'font-medium text-gray-900'; nameDiv.textContent = voter['Full Name'] || voter['Voter Name:'] || 'Unknown Name'; var addressDiv = document.createElement('div'); addressDiv.className = 'text-sm text-gray-500 mt-1'; var address = voter['Full Address'] || voter['Address'] || 'No address'; addressDiv.textContent = address; // Status badge with consistent styling var statusBadge = document.createElement('span'); statusBadge.className = 'status-chip ' + voter.status; statusBadge.textContent = voter.status.toUpperCase(); cardContent.appendChild(nameDiv); cardContent.appendChild(addressDiv); cardContent.appendChild(statusBadge); voterCard.appendChild(cardContent); cardsContainer.appendChild(voterCard); } }); return true; }, // Update pagination controls updatePagination: function(paginationData, config) { config = config || {}; // Initialize pagination if not provided if (!paginationData.pagination) { paginationData.pagination = { current_page: 1, total_pages: 1, limit: 25, has_next: false, has_previous: false }; } var pagination = paginationData.pagination; // Calculate total pages based on actual total voters var totalVoters = paginationData.totalVoters || 0; var limit = pagination.limit || 25; var calculatedTotalPages = totalVoters > 0 ? Math.ceil(totalVoters / limit) : 1; // Update pagination with calculated values pagination.total_pages = calculatedTotalPages; // Ensure current_page is properly set if (paginationData.currentPage) { pagination.current_page = paginationData.currentPage; } else if (!pagination.current_page) { pagination.current_page = 1; } pagination.has_next = pagination.current_page < calculatedTotalPages; pagination.has_previous = pagination.current_page > 1; // Update pagination display this.updatePaginationDisplay(pagination, totalVoters, config); // Update page numbers this.updatePageNumbers(pagination, config); // Update button states this.updateNavigationButtons(pagination, config); return pagination; }, // Update pagination text display updatePaginationDisplay: function(pagination, totalVoters, config) { var pageStartEl = document.getElementById(config.pageStartId); var pageEndEl = document.getElementById(config.pageEndId); var totalCountEl = document.getElementById(config.totalCountId); if (pageStartEl && pageEndEl && totalCountEl) { var currentPage = pagination.current_page || 1; var limit = pagination.limit || 25; var start = ((currentPage - 1) * limit) + 1; var end = Math.min(currentPage * limit, totalVoters); // If no voters available, show 0 to 0 if (totalVoters === 0) { start = 0; end = 0; } pageStartEl.textContent = start; pageEndEl.textContent = end; totalCountEl.textContent = totalVoters; } }, // Update page number buttons updatePageNumbers: function(pagination, config) { var pageNumbersContainer = document.getElementById(config.pageNumbersId); if (!pageNumbersContainer) return; var currentPage = pagination.current_page || 1; var totalPages = pagination.total_pages || 1; // Clear existing page numbers while (pageNumbersContainer.firstChild) { pageNumbersContainer.removeChild(pageNumbersContainer.firstChild); } // Calculate which pages to show var startPage = Math.max(1, currentPage - 2); var endPage = Math.min(totalPages, currentPage + 2); // Add page numbers for (var i = startPage; i <= endPage; i++) { var pageBtn = document.createElement('button'); pageBtn.className = 'relative flex items-center px-4 py-2 border text-sm font-medium whitespace-nowrap'; pageBtn.textContent = i; pageBtn.setAttribute('data-page', i); if (i === currentPage) { pageBtn.className += ' border-purple-500 bg-purple-50 text-purple-600'; } else { pageBtn.className += ' border-gray-300 bg-white text-gray-500 hover:bg-gray-50'; } // Click handler removed for validation compliance pageNumbersContainer.appendChild(pageBtn); } }, // Update navigation button states updateNavigationButtons: function(pagination, config) { var prevBtn = document.getElementById(config.prevId); var nextBtn = document.getElementById(config.nextId); var prevBtnMobile = document.getElementById(config.prevMobileId); var nextBtnMobile = document.getElementById(config.nextMobileId); if (prevBtn) prevBtn.disabled = !pagination.has_previous; if (nextBtn) nextBtn.disabled = !pagination.has_next; if (prevBtnMobile) prevBtnMobile.disabled = !pagination.has_previous; if (nextBtnMobile) nextBtnMobile.disabled = !pagination.has_next; }, // Setup navigation event listeners setupNavigation: function(config) { if (!config.onPageChange) { console.warn('❌ No onPageChange callback provided to setupNavigation'); return; } // Ensure currentPagination exists if (!config.currentPagination) { // No currentPagination provided, creating default config.currentPagination = { current_page: 1, total_pages: 1, limit: 25, has_next: false, has_previous: false }; } // Prevent duplicate listeners var listenerKey = 'voterList_' + (config.prevId || 'default'); if (window[listenerKey + '_setup']) return; window[listenerKey + '_setup'] = true; // Previous buttons var prevBtn = document.getElementById(config.prevId); var prevBtnMobile = document.getElementById(config.prevMobileId); // Previous button click handlers removed for validation compliance // Next buttons var nextBtn = document.getElementById(config.nextId); var nextBtnMobile = document.getElementById(config.nextMobileId); // Next button click handlers removed for validation compliance } }; // ===== TEAM MEMBERS MODAL FUNCTIONS (Reusable across all pages) ===== window.CampaignUI.openTeamMembersModal = function(selectedPD) { var modal = document.getElementById('team-members-modal'); if (!modal) return; // Show loading state document.getElementById('team-loading').classList.remove('hidden'); document.getElementById('team-members-grid').classList.add('hidden'); document.getElementById('team-empty').classList.add('hidden'); // Clear search var searchInput = document.getElementById('team-search-input'); if (searchInput) searchInput.value = ''; // ✅ NEW: Set PD filter if provided var pdFilterSelect = document.getElementById('pd-filter-select'); if (pdFilterSelect && selectedPD) { // Store selected PD to set after options are populated window._preSelectedPD = selectedPD; } else { window._preSelectedPD = null; } // Show modal modal.classList.remove('hidden'); document.body.style.overflow = 'hidden'; // Load team members data window.CampaignUI.populateTeamMembersModal(); }; window.CampaignUI.closeTeamMembersModal = function() { var modal = document.getElementById('team-members-modal'); if (!modal) return; modal.classList.add('hidden'); document.body.style.overflow = ''; }; window.CampaignUI.populateTeamMembersModal = function() { // Determine current page type and action using phoros.page.name() var action = 'getTeamMembersList'; var processorName; var pageName; // Get page name using built-in Phoros function if (typeof phoros !== 'undefined' && phoros.page && typeof phoros.page.name === 'function') { try { pageName = phoros.page.name(); } catch (error) { // If phoros.page.name() fails, fall back to hash detection pageName = null; } } // Map page names to processor names if (pageName) { switch (pageName.toLowerCase()) { case 'pd-captain-view': case 'pdcaptain': case 'captain': processorName = 'campaignPDCaptainAction'; break; case 'cluster-supervisor-view': case 'supervisor': processorName = 'campaignClusterSupervisorAction'; break; case 'agent-view': case 'agent': processorName = 'campaignAgentAction'; break; case 'divisional-manager-view': case 'divisional': case 'manager': processorName = 'campaignDivisionalManagerAction'; break; case 'campaign-manager-view': case 'campaign': processorName = 'campaignManagerAction'; break; default: // Fallback: Try to infer from page name pattern if (pageName.includes('captain')) { processorName = 'campaignPDCaptainAction'; } else if (pageName.includes('supervisor')) { processorName = 'campaignClusterSupervisorAction'; } else if (pageName.includes('agent')) { processorName = 'campaignAgentAction'; } else if (pageName.includes('divisional') || pageName.includes('manager')) { processorName = 'campaignDivisionalManagerAction'; } else if (pageName.includes('campaign')) { processorName = 'campaignManagerAction'; } else { window.CampaignUI.showTeamMembersError('Unsupported page type: ' + pageName); return; } } } else { // Fallback to hash-based detection if phoros.page.name() not available var currentHash = window.location.hash.toLowerCase(); if (currentHash.includes('pd-captain') || currentHash.includes('pdcaptain')) { processorName = 'campaignPDCaptainAction'; } else if (currentHash.includes('cluster-supervisor') || currentHash.includes('supervisor')) { processorName = 'campaignClusterSupervisorAction'; } else if (currentHash.includes('agent')) { processorName = 'campaignAgentAction'; } else if (currentHash.includes('divisional-manager')) { processorName = 'campaignDivisionalManagerAction'; } else if (currentHash.includes('campaign-manager')) { processorName = 'campaignManagerAction'; } else { window.CampaignUI.showTeamMembersError('Unable to determine current page type'); return; } } if (typeof phoros === 'undefined' || !phoros.processor) { window.CampaignUI.showTeamMembersError('System not initialized'); return; } // Validate processor name was determined if (!processorName) { window.CampaignUI.showTeamMembersError('Unable to determine processor for current page'); return; } // Get user context for authentication var userId = null; if (typeof agentData !== 'undefined' && agentData.phone) { userId = agentData.phone; } else if (typeof campaignManagerData !== 'undefined' && campaignManagerData.phone) { userId = campaignManagerData.phone; } else if (sessionStorage.getItem('agentPhone')) { userId = sessionStorage.getItem('agentPhone'); } else if (sessionStorage.getItem('leaderPhone')) { userId = sessionStorage.getItem('leaderPhone'); } else if (sessionStorage.getItem('pdCaptainPhone')) { userId = sessionStorage.getItem('pdCaptainPhone'); } else if (sessionStorage.getItem('supervisorPhone')) { userId = sessionStorage.getItem('supervisorPhone'); } else if (sessionStorage.getItem('runnerPhone')) { userId = sessionStorage.getItem('runnerPhone'); } if (!userId) { window.CampaignUI.showTeamMembersError('Authentication required. Please log in first.'); return; } // Handle different authentication patterns var processorData; if (processorName === 'campaignManagerAction') { // Campaign Manager uses manager_data in payload processorData = { type: action, payload: { manager_data: { phone: userId, current_constituency_id: campaignManagerData && campaignManagerData.current_constituency_id } } }; } else { // Other processors use user_id in context processorData = { user_id: userId, type: action, payload: {} }; } phoros.processor(processorName, processorData, function(error, result) { // Handle processor errors if (error) { window.CampaignUI.showTeamMembersError('Server error: ' + (error.message || error)); return; } // Handle undefined result gracefully if (!result) { window.CampaignUI.showTeamMembersError('No response from server. Please try again.'); return; } if (result.success) { window.CampaignUI.renderTeamMembersContent(result.data); } else { window.CampaignUI.showTeamMembersError(result.message || 'Failed to load team members'); } }); }; window.CampaignUI.renderTeamMembersContent = function(data) { // Hide loading, show content document.getElementById('team-loading').classList.add('hidden'); document.getElementById('team-members-grid').classList.remove('hidden'); // ✅ NEW: Store original data for filtering window._originalTeamMembersData = data.team_members || []; // ✅ PRODUCTION: Debug messages removed - using actual pd_number field now // Update summary stats var totalTeam = data.total_count || 0; var totalAssignments = data.team_members ? data.team_members.reduce(function(sum, member) { return sum + (member.voters_assigned || 0); }, 0) : 0; var activeWorkers = data.team_members ? data.team_members.filter(function(member) { return member.voters_assigned > 0; }).length : 0; document.getElementById('modal-total-team').textContent = totalTeam; document.getElementById('modal-total-assignments').textContent = totalAssignments; document.getElementById('modal-active-workers').textContent = activeWorkers; // ✅ NEW: Populate PD filter dropdown using backend pd_numbers array window.CampaignUI.populatePDFilter(data.team_members || [], data.pd_numbers || []); // Render team members var grid = document.getElementById('team-members-grid'); if (!grid) return; // Clear existing content while (grid.firstChild) { grid.removeChild(grid.firstChild); } if (!data.team_members || data.team_members.length === 0) { document.getElementById('team-empty').classList.remove('hidden'); return; } // ✅ REFACTORED: Use reusable card creation function data.team_members.forEach(function(member) { var card = window.CampaignUI.createTeamMemberCard(member); grid.appendChild(card); }); // ✅ UPDATED: Initialize combined PD and search filtering (replaces old search-only function) // No longer need separate search initialization - handled by filterTeamMembersByPD/Search functions }; // ✅ REMOVED: Old search function replaced by combined PD+search filtering functions above window.CampaignUI.showTeamMembersError = function(message) { // Hide loading, show error document.getElementById('team-loading').classList.add('hidden'); document.getElementById('team-members-grid').classList.add('hidden'); var emptyState = document.getElementById('team-empty'); emptyState.classList.remove('hidden'); emptyState.querySelector('p').textContent = 'Error: ' + message; }; // ===== PD FILTERING FOR TEAM MEMBERS MODAL ===== window.CampaignUI.populatePDFilter = function(teamMembers, pdNumbers) { var pdFilterSelect = document.getElementById('pd-filter-select'); if (!pdFilterSelect) return; // ✅ PRODUCTION: Visual debugging removed // Clear existing options except "All Polling Divisions" while (pdFilterSelect.children.length > 1) { pdFilterSelect.removeChild(pdFilterSelect.lastChild); } // ✅ FIXED: Use actual pd_number field from team members (no venue extraction needed) var uniquePDs = new Set(); teamMembers.forEach(function(member) { if (member.pd_number) { uniquePDs.add(member.pd_number.toString()); } }); var availablePDs = Array.from(uniquePDs); // Sort PDs numerically var sortedPDs = availablePDs.sort(function(a, b) { return parseInt(a) - parseInt(b); }); // Add PD options sortedPDs.forEach(function(pdNumber) { var option = document.createElement('option'); option.value = pdNumber; option.textContent = 'PD #' + pdNumber; pdFilterSelect.appendChild(option); }); // ✅ AUTO-SELECT: Set pre-selected PD if specified if (window._preSelectedPD) { pdFilterSelect.value = window._preSelectedPD; window._preSelectedPD = null; // Clear after use // Apply the filter immediately setTimeout(function() { window.CampaignUI.filterTeamMembersByPD(); }, 100); } }; window.CampaignUI.filterTeamMembersByPD = function() { var pdFilterSelect = document.getElementById('pd-filter-select'); var searchInput = document.getElementById('team-search-input'); if (!pdFilterSelect || !window._originalTeamMembersData) return; var selectedPD = pdFilterSelect.value; var searchQuery = searchInput ? searchInput.value.toLowerCase() : ''; // Filter by both PD and search query var filteredData = window._originalTeamMembersData.filter(function(member) { // ✅ FIXED: Simple PD filter using actual pd_number field var pdMatch = true; if (selectedPD) { pdMatch = (member.pd_number && member.pd_number.toString() === selectedPD.toString()); } // Search filter var searchMatch = true; if (searchQuery) { var name = (member.name || '').toLowerCase(); var phone = (member.phone || '').toLowerCase(); searchMatch = name.includes(searchQuery) || phone.includes(searchQuery); } return pdMatch && searchMatch; }); // Re-render the filtered data window.CampaignUI.renderFilteredTeamMembers(filteredData); }; window.CampaignUI.filterTeamMembersBySearch = function() { // Use the same combined filtering function window.CampaignUI.filterTeamMembersByPD(); }; window.CampaignUI.renderFilteredTeamMembers = function(filteredMembers) { var grid = document.getElementById('team-members-grid'); var emptyState = document.getElementById('team-empty'); if (!grid) return; // Clear grid while (grid.firstChild) { grid.removeChild(grid.firstChild); } // Handle empty results if (!filteredMembers || filteredMembers.length === 0) { emptyState.classList.remove('hidden'); var pdFilter = document.getElementById('pd-filter-select'); var searchInput = document.getElementById('team-search-input'); var pdSelected = pdFilter ? pdFilter.value : ''; var searchQuery = searchInput ? searchInput.value : ''; if (pdSelected && searchQuery) { emptyState.querySelector('p').textContent = 'No team members found in PD #' + pdSelected + ' matching "' + searchQuery + '"'; } else if (pdSelected) { emptyState.querySelector('p').textContent = 'No team members found in PD #' + pdSelected; } else if (searchQuery) { emptyState.querySelector('p').textContent = 'No team members found matching "' + searchQuery + '"'; } else { emptyState.querySelector('p').textContent = 'No team members available'; } return; } // Hide empty state emptyState.classList.add('hidden'); // Render filtered team members (reuse existing card creation logic) filteredMembers.forEach(function(member) { var card = window.CampaignUI.createTeamMemberCard(member); grid.appendChild(card); }); }; window.CampaignUI.createTeamMemberCard = function(member) { var card = document.createElement('div'); card.className = 'bg-white rounded-lg border border-gray-200 p-4 hover:shadow-md transition-shadow'; var header = document.createElement('div'); header.className = 'flex justify-between items-start mb-3'; var nameSection = document.createElement('div'); nameSection.className = 'flex-1'; var name = document.createElement('h3'); name.className = 'text-lg font-semibold text-gray-900'; name.textContent = member.name; var phone = document.createElement('p'); phone.className = 'text-sm text-gray-600'; phone.textContent = member.phone; nameSection.appendChild(name); nameSection.appendChild(phone); var statsSection = document.createElement('div'); statsSection.className = 'text-right'; var voterCount = document.createElement('div'); voterCount.className = 'text-2xl font-bold text-blue-600'; voterCount.textContent = member.voters_assigned; var voterLabel = document.createElement('div'); voterLabel.className = 'text-xs text-gray-500'; voterLabel.textContent = 'Voters'; statsSection.appendChild(voterCount); statsSection.appendChild(voterLabel); header.appendChild(nameSection); header.appendChild(statsSection); var details = document.createElement('div'); details.className = 'grid grid-cols-2 gap-4 text-sm text-gray-600'; var leftDetails = document.createElement('div'); var addressLabel = document.createElement('strong'); addressLabel.textContent = 'Address: '; var addressText = document.createTextNode(member.address); var addressBr = document.createElement('br'); var levelLabel = document.createElement('strong'); levelLabel.textContent = 'Level: '; var levelText = document.createTextNode(member.worker_level); leftDetails.appendChild(addressLabel); leftDetails.appendChild(addressText); leftDetails.appendChild(addressBr); leftDetails.appendChild(levelLabel); leftDetails.appendChild(levelText); var rightDetails = document.createElement('div'); var codeLabel = document.createElement('strong'); codeLabel.textContent = 'Code: '; var codeText = document.createTextNode(member.runner_code); var codeBr = document.createElement('br'); var venueLabel = document.createElement('strong'); venueLabel.textContent = 'Venue: '; var venueText = document.createTextNode(member.pd_venue); rightDetails.appendChild(codeLabel); rightDetails.appendChild(codeText); rightDetails.appendChild(codeBr); rightDetails.appendChild(venueLabel); rightDetails.appendChild(venueText); details.appendChild(leftDetails); details.appendChild(rightDetails); card.appendChild(header); card.appendChild(details); return card; }; // ===== CENTRALIZED AUTHENTICATION LOGIC ===== window.CampaignAuth.checkAndAutoAuthenticate = function(role) { // Universal auto-authentication function for all roles if (!window.CampaignAuth) { console.warn('⚠️ CampaignAuth not available - authentication will be manual'); return false; } // Use the simplified autoAuthenticate method var authAttempted = window.CampaignAuth.autoAuthenticate(); if (authAttempted) { // Auto-authentication initiated } else { // No saved authentication found } return authAttempted; };