// Project data var currentProject = null; var currentTab = 'pulse'; // Content Type IDs for new data models var CONTENT_TYPE_IDS = { ASSESSMENT_DATA: "cJJ46rxaG6XcAkA3G", PROJECT: "FTnCGXqF785oCkcg5", OBJECTIVE: "wfi94SXrWJp2ujJ3c", KPI: "RJDR7inHYCiF26yxv", TASK: "M7EkkCYafGT9aLunW", AI_MESSAGE_LOG: "7E9cRZNM6Rb74jd3t" }; var ROADMAP_LANES = [ { key: 'platform', title: 'Core Platform Replacement', summary: 'Stabilize and modernize the core stack so everything else moves faster.' }, { key: 'customer', title: 'Customer Experience', summary: 'Design the journeys, channels, and service standards that win loyalty.' }, { key: 'data', title: 'Data & Analytics', summary: 'Lay data rails, reporting, and AI insight loops that steer the program.' }, { key: 'change', title: 'Change Management', summary: 'Guide people, training, and adoption so the roadmap sticks.' } ]; // Cached project collections for pulse/progress views var projectObjectives = []; var objectiveTasks = {}; var objectiveTaskLoading = {}; var projectKpis = []; var pulsePosts = []; var pulsePostDetailsLoading = {}; var pinnedPulseInsights = []; var pulsePostModalRefs = null; var currentPersonCache = null; var userChatContext = { imageUrl: null, initials: 'You', fullName: 'You' }; var EMPTY_PROFILE_IMAGE_SRC = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=='; function getAdvisorSummaryFallbackClient() { return { snapshot: { currentDigitalMaturity: { score: '', previousScore: '', delta: '' }, transformationProgress: { completionPercent: '', commentary: '' }, investment: { totalInvestment: '', realizedValue: '', roiRatio: '', paybackPeriod: '' } }, achievements: [], performance: [], priorities: [], investments: [], risks: [] }; } function getValueImpactFallbackClient() { return { financialValue: { revenueGrowth: [], costReduction: [] }, operationalValue: { efficiency: [], quality: [] }, strategicValue: { marketPosition: '', innovationCapacity: '', futureReadiness: '' }, organizationalCapability: { skillSets: [], technologyInfrastructure: '', partnershipEcosystem: '' }, caribbeanContext: { regionalCollaboration: '', marketAccess: '', resilienceImprovements: '', localEconomicImpact: '' }, roiSummary: { totalInvestment: '', totalValueRealized: '', roiRatio: '', paybackPeriod: '', benchmark: '', projectedValue: '' } }; } function getStakeholderUpdateFallbackClient() { return { audience: { stakeholderGroup: '', date: '', advisor: '' }, story: { startingPoint: '', currentState: '', destination: '' }, wins: [], metrics: { digitalMaturityScore: { current: '', improvement: '' }, kpiPerformance: { met: '', total: '' }, teamEngagement: { percent: '' }, valueDelivered: { amount: '' } }, milestones: { immediate: [], shortTerm: [] }, support: { trainingPrograms: '', technicalSupport: '', changeManagement: '' }, feedback: { ratingPrompt: '', whatsWorking: '', areasForImprovement: '', additionalSupportNeeded: '' } }; } function ensureClientSectionInputs(section) { var base = { currentState: '', futureGoals: '' }; if (!section || typeof section !== 'object') { return base; } if (typeof section.currentState === 'string') { base.currentState = section.currentState; } if (typeof section.futureGoals === 'string') { base.futureGoals = section.futureGoals; } return base; } function ensureReportInputs() { if (!currentProject) { return { advisor: ensureClientSectionInputs(), kpi: ensureClientSectionInputs(), roadmap: ensureClientSectionInputs(), updatedAtISO: new Date().toISOString() }; } if (!currentProject.reportInputs || typeof currentProject.reportInputs !== 'object') { currentProject.reportInputs = { advisor: ensureClientSectionInputs(), kpi: ensureClientSectionInputs(), roadmap: ensureClientSectionInputs(), updatedAtISO: new Date().toISOString() }; } else { currentProject.reportInputs.advisor = ensureClientSectionInputs(currentProject.reportInputs.advisor); currentProject.reportInputs.kpi = ensureClientSectionInputs(currentProject.reportInputs.kpi); currentProject.reportInputs.roadmap = ensureClientSectionInputs(currentProject.reportInputs.roadmap); if (!currentProject.reportInputs.updatedAtISO) { currentProject.reportInputs.updatedAtISO = new Date().toISOString(); } } return currentProject.reportInputs; } function getSectionInputs(sectionKey) { var inputs = ensureReportInputs(); if (!inputs[sectionKey]) { inputs[sectionKey] = ensureClientSectionInputs(); } return inputs[sectionKey]; } function updateSectionInput(sectionKey, field, value) { var inputs = ensureReportInputs(); if (!inputs[sectionKey]) { inputs[sectionKey] = ensureClientSectionInputs(); } if (field === 'currentState') { inputs[sectionKey].currentState = value; } else if (field === 'futureGoals') { inputs[sectionKey].futureGoals = value; } inputs.updatedAtISO = new Date().toISOString(); } function applyAssessmentUpdate(data) { if (!data || typeof data !== 'object' || !currentProject) { return; } if (data.businessReport) { currentProject.businessReport = data.businessReport; } if (data.businessReportSummary) { currentProject.businessReportSummary = data.businessReportSummary; } if (data.advisorSummary) { currentProject.advisorSummary = data.advisorSummary; } if (data.valueImpactReport) { currentProject.valueImpactReport = data.valueImpactReport; } if (data.stakeholderUpdate) { currentProject.stakeholderUpdate = data.stakeholderUpdate; } if (data.executionGuidance) { currentProject.executionGuidance = data.executionGuidance; } if (Array.isArray(data.businessKPIs)) { projectKpis = normalizeAssessmentKPIs(data.businessKPIs); } if (data.reportInputs) { currentProject.reportInputs = { advisor: ensureClientSectionInputs(data.reportInputs.advisor), kpi: ensureClientSectionInputs(data.reportInputs.kpi), roadmap: ensureClientSectionInputs(data.reportInputs.roadmap), updatedAtISO: data.reportInputs.updatedAtISO || new Date().toISOString() }; } } function initializeUserContext() { var person = getCurrentPerson(); if (person) { cacheCurrentPerson(person); } fetchUserProfileImage(); } function getCurrentPerson() { if (typeof phoros !== 'object' || !phoros || typeof phoros.person !== 'function') { return currentPersonCache; } try { var person = phoros.person(); if (person && typeof person === 'object') { return person; } } catch (error) { return currentPersonCache; } return currentPersonCache; } function getCurrentPersonId() { var person = getCurrentPerson(); if (!person) { return null; } if (person._id) { return person._id; } if (person.jmkr_person_id) { return person.jmkr_person_id; } if (person.person_id) { return person.person_id; } return null; } function cacheCurrentPerson(person) { if (!person || typeof person !== 'object') { return; } currentPersonCache = person; var first = (person.firstName || '').trim(); var last = (person.lastName || '').trim(); var fullName = (first + ' ' + last).trim(); if (fullName) { userChatContext.fullName = fullName; } var initials = deriveInitials(first, last); if (initials) { userChatContext.initials = initials; } else if (fullName) { userChatContext.initials = fullName.charAt(0).toUpperCase(); } var candidateImage = person.profileImageUrl || person.avatarUrl; if (candidateImage) { setUserAvatarImage(candidateImage); } } function deriveInitials(first, last) { var letters = ''; if (first) { letters += first.charAt(0); } if (last) { letters += last.charAt(0); } if (!letters && first) { var parts = first.split(/\s+/); if (parts.length > 1) { var firstPart = parts[0]; var secondPart = parts[1]; if (firstPart && secondPart) { letters = firstPart.charAt(0) + secondPart.charAt(0); } } } letters = letters.toUpperCase(); return letters || null; } function setUserAvatarImage(url) { if (!url || typeof url !== 'string') { return; } var trimmedUrl = url.trim(); if (!trimmedUrl || trimmedUrl === EMPTY_PROFILE_IMAGE_SRC) { return; } if (userChatContext.imageUrl === trimmedUrl) { return; } userChatContext.imageUrl = trimmedUrl; updateExistingUserAvatars(); } function getUserAvatarAltText() { if (userChatContext.fullName && userChatContext.fullName !== 'You') { return 'Profile photo for ' + userChatContext.fullName; } return 'Your profile photo'; } function updateExistingUserAvatars() { if (!userChatContext.imageUrl) { return; } var avatarNodes = document.querySelectorAll('.chat-message.user-message .message-avatar'); if (!avatarNodes || !avatarNodes.length) { return; } for (var i = 0; i < avatarNodes.length; i++) { var node = avatarNodes[i]; if (!node) { continue; } if (!node.classList.contains('has-image')) { node.classList.add('has-image'); } while (node.firstChild) { node.removeChild(node.firstChild); } var img = document.createElement('img'); img.src = userChatContext.imageUrl; img.alt = getUserAvatarAltText(); node.appendChild(img); } } function fetchUserProfileImage() { if (!phoros || typeof phoros.processor !== 'function') { return; } var userId = getCurrentPersonId(); if (!userId) { return; } phoros.processor('iWGwhXccDY6Wx2iRM', { type: 'getUserProfile', payload: { user_id: userId } }, function(error, result) { if (error || !result || !result.success || !result.data || !result.data.profile) { return; } var profile = result.data.profile; if (profile.profileImageUrl) { setUserAvatarImage(profile.profileImageUrl); } else if (profile.avatarUrl) { setUserAvatarImage(profile.avatarUrl); } }); } // Initialize project page function initializeProject() { loadProjectData(); // Refresh Lucide icons in sidebar if (typeof DAVA_refreshIcons === 'function') { DAVA_refreshIcons(); } } // Load project data (authoritative fetch from processor; fallback to placeholder) function loadProjectData() { // Get project/assessment ID from phoros.page.contentId() (set by navigation) var projectId = phoros.page.contentId(); if (!projectId) { loadPlaceholderProject('placeholder'); return; } phoros.processor('iWGwhXccDY6Wx2iRM', { type: 'getAssessment', payload: { assessment_id: projectId } }, function(error, result) { if (error || !result || !result.success || !result.data) { loadPlaceholderProject(projectId); return; } var a = result.data; currentProject = { id: a._id, title: a.company_name || a.companyName || 'Business Assessment', subtitle: 'Digital Transformation Assessment' + (a.assessmentType ? (' - ' + a.assessmentType) : ''), transformationScore: ((a.insights && a.insights.gaugeValue) ? a.insights.gaugeValue : calculateProjectScore(a)) + '%', completionDate: (a.date_created ? new Date(a.date_created).toLocaleDateString() : (a.dateCreate ? new Date(a.dateCreate).toLocaleDateString() : 'Recent')), status: a.status || 'Completed', assessmentData: a.assessmentData || {}, insights: a.insights || null, advisorSummary: a.advisorSummary || getAdvisorSummaryFallbackClient(), businessReport: a.businessReport || '', businessReportSummary: a.businessReportSummary || '', businessKPIs: a.businessKPIs || [], industry: a.industry || (a.assessmentData && a.assessmentData.industry) || '', companyRole: a.company_role || a.companyRole || '', companySize: a.company_size || a.companySize || '', employees: a.company_size || a.companySize || '', peerData: (a.insights && Array.isArray(a.insights.peerData)) ? a.insights.peerData : (Array.isArray(a.peerData) ? a.peerData : []), executionGuidance: a.executionGuidance || '', valueImpactReport: a.valueImpactReport || getValueImpactFallbackClient(), stakeholderUpdate: a.stakeholderUpdate || getStakeholderUpdateFallbackClient(), reportInputs: { advisor: ensureClientSectionInputs(a.reportInputs && a.reportInputs.advisor), kpi: ensureClientSectionInputs(a.reportInputs && a.reportInputs.kpi), roadmap: ensureClientSectionInputs(a.reportInputs && a.reportInputs.roadmap), updatedAtISO: (a.reportInputs && a.reportInputs.updatedAtISO) || new Date().toISOString() }, capacityProfile: a.capacityProfile || null, capacitySummary: a.capacitySummary || '', capacityRecommendations: a.capacityRecommendations || [] }; // Initialize CHPH conversation for this project initializeAvaConversation(); updateProjectDisplay(); refreshProjectCollections(); switchTab(currentTab); }); } // Refresh project collections (objectives, tasks, KPIs) then update UI metrics function refreshProjectCollections() { if (!currentProject) { updateHeroMetrics(); renderProjectProgressSummary(); return; } // Placeholder/local mode when no persisted project id is available if (!currentProject.id) { projectObjectives = []; objectiveTasks = {}; objectiveTaskLoading = {}; projectKpis = []; loadObjectives(); updateHeroMetrics(); renderProjectProgressSummary(); return; } var projectId = currentProject.id; phoros.processor('iWGwhXccDY6Wx2iRM', { type: 'getObjectivesByProject', payload: { project_id: projectId } }, function(error, result) { if (!error && result && result.success && result.data && Array.isArray(result.data.objectives)) { projectObjectives = sortObjectivesForDisplay(result.data.objectives.slice()).map(function(obj){ obj = normalizeObjective(obj); obj._tasks = []; obj._tasksLoading = true; return obj; }); } else { projectObjectives = []; } fetchTasksForObjectives(projectObjectives, function() { fetchProjectKpis(projectId, function() { loadObjectives(); updateHeroMetrics(); renderProjectProgressSummary(); }); }); }); } function sortObjectivesForDisplay(list) { if (!Array.isArray(list)) return []; var copy = list.slice(); copy.sort(function(a, b) { var aDate = a && (a.targetDateISO || a.targetDate || a.dateCreatedISO || a.dateCreate); var bDate = b && (b.targetDateISO || b.targetDate || b.dateCreatedISO || b.dateCreate); var aTime = aDate ? new Date(aDate).getTime() : 0; var bTime = bDate ? new Date(bDate).getTime() : 0; if (aTime === bTime) { var aTitle = (a && a.title) ? String(a.title).toLowerCase() : ''; var bTitle = (b && b.title) ? String(b.title).toLowerCase() : ''; if (aTitle < bTitle) return -1; if (aTitle > bTitle) return 1; return 0; } if (aTime === 0) return 1; if (bTime === 0) return -1; return aTime - bTime; }); return copy; } function fetchTasksForObjectives(objectives, callback) { if (!Array.isArray(objectives) || objectives.length === 0) { if (typeof callback === 'function') callback(); return; } var remaining = objectives.length; objectives.forEach(function(obj) { obj = normalizeObjective(obj); var oid = obj && (obj._id || obj.id); if (!oid) { remaining -= 1; if (remaining === 0 && typeof callback === 'function') callback(); return; } obj._tasksLoading = true; phoros.processor('iWGwhXccDY6Wx2iRM', { type: 'getTasksByObjective', payload: { objective_id: oid } }, function(error, result) { var fetchedTasks = []; if (!error && result && result.success && result.data && Array.isArray(result.data.tasks)) { fetchedTasks = result.data.tasks; } obj._tasks = Array.isArray(fetchedTasks) ? fetchedTasks : []; obj._tasksLoading = false; if (document.getElementById('taskList_' + oid)) { renderTaskListForObjective(oid); } remaining -= 1; if (remaining === 0 && typeof callback === 'function') callback(); }); }); } function normalizeAssessmentKPIs(rawList) { if (!Array.isArray(rawList)) return []; return rawList.map(function(item, index) { if (typeof item === 'string') { return { kpiName: item, description: '', target: '', frequency: 'monthly', progressValue: 0, priorityRank: index + 1, priority: index === 0 ? 'High' : (index <= 2 ? 'Medium' : 'Low'), capacityRequirement: '' }; } var rank = item && item.priorityRank !== undefined ? Number(item.priorityRank) : Number(item.priority_rank); if (isNaN(rank)) { rank = index + 1; } return { _id: item._id, kpiName: item.kpiName || item.kpi_name || 'KPI', description: item.description || item.summary || '', target: item.target || item.goal || '', frequency: item.frequency || item.cadence || 'monthly', progressValue: Math.max(0, Math.min(100, Number(item.progressValue || item.progress || item.starting_progress || 0) || 0)), priorityRank: rank, priority: item.priority || item.priority_level || (rank === 1 ? 'High' : (rank <= 3 ? 'Medium' : 'Low')), capacityRequirement: item.capacityRequirement || item.capacity_gap || '', formulaOrMethod: item.formulaOrMethod || item.formula_or_method || '' }; }); } function getActiveKpis() { if (projectKpis && projectKpis.length) { return projectKpis; } return normalizeAssessmentKPIs(currentProject && currentProject.businessKPIs ? currentProject.businessKPIs : []); } function fetchProjectKpis(projectId, callback) { if (!projectId) { projectKpis = normalizeAssessmentKPIs(currentProject && currentProject.businessKPIs ? currentProject.businessKPIs : []); if (typeof callback === 'function') callback(); return; } phoros.processor('iWGwhXccDY6Wx2iRM', { type: 'getKPIsByProject', payload: { project_id: projectId } }, function(_, result) { if (result && result.success && result.data && Array.isArray(result.data.kpis)) { projectKpis = normalizeAssessmentKPIs(result.data.kpis); } else { projectKpis = normalizeAssessmentKPIs(currentProject && currentProject.businessKPIs ? currentProject.businessKPIs : []); } if (typeof callback === 'function') callback(); }); } function formatDateForInput(isoString) { if (!isoString) return ''; try { var date = new Date(isoString); if (isNaN(date.getTime())) return ''; return date.toISOString().split('T')[0]; } catch (e) { return ''; } } function formatFriendlyDate(isoString) { if (!isoString) return ''; try { var date = new Date(isoString); if (isNaN(date.getTime())) return ''; return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' }); } catch (e) { return ''; } } function upsertObjectiveCache(objective) { if (!objective) return; objective = normalizeObjective(Object.assign({}, objective)); var list = Array.isArray(projectObjectives) ? projectObjectives.slice() : []; var id = objective._id || objective.id; var replaced = false; list = list.map(function(item) { var existingId = item && (item._id || item.id); if (existingId === id) { replaced = true; return normalizeObjective(Object.assign({}, item, objective)); } return item; }); if (!replaced) { list.push(normalizeObjective(objective)); } projectObjectives = sortObjectivesForDisplay(list).map(normalizeObjective); if (id) { objectiveTasks[id] = Array.isArray(objectiveTasks[id]) ? objectiveTasks[id] : []; if (typeof objectiveTaskLoading[id] !== 'boolean') objectiveTaskLoading[id] = false; } } function removeObjectiveFromCache(objectiveId) { if (!objectiveId) return; projectObjectives = (projectObjectives || []).filter(function(obj) { var oid = obj && (obj._id || obj.id); return oid !== objectiveId; }).map(normalizeObjective); delete objectiveTasks[objectiveId]; delete objectiveTaskLoading[objectiveId]; } function getObjectiveFromCache(objectiveId) { if (!objectiveId) return null; var match = null; (projectObjectives || []).forEach(function(obj) { var oid = obj && (obj._id || obj.id); if (oid === objectiveId) { match = obj; } }); return normalizeObjective(match); } function getObjectiveStats() { var stats = { total: 0, active: 0, completed: 0, tasksTotal: 0, tasksCompleted: 0, nextDue: null }; var objectives = (projectObjectives && projectObjectives.length) ? projectObjectives : []; stats.total = objectives.length; objectives.forEach(function(obj) { obj = normalizeObjective(obj); if (obj && obj.isCompleted) { stats.completed += 1; } else if (obj) { stats.active += 1; } var oid = obj && (obj._id || obj.id); var taskList = Array.isArray(objectiveTasks[oid]) ? objectiveTasks[oid] : []; taskList.forEach(function(task) { stats.tasksTotal += 1; if (task && task.isComplete) stats.tasksCompleted += 1; }); if (obj && !obj.isCompleted && (obj.targetDateISO || obj.targetDate)) { var candidateDate = new Date(obj.targetDateISO || obj.targetDate); if (!stats.nextDue || candidateDate < new Date(stats.nextDue.targetDateISO || stats.nextDue.targetDate)) { stats.nextDue = obj; } } }); return stats; } function getPriorityFocus() { var focus = { title: 'Define your first objective', description: 'Add an objective or KPI to surface your focus areas.' }; if (currentProject && currentProject.insights) { if (currentProject.insights.lowestPillarName) { focus.title = currentProject.insights.lowestPillarName; focus.description = currentProject.insights.lowestPillarStatus || currentProject.insights.lowestPillarRecommendation || 'Focus here to raise your readiness.'; } else if (currentProject.insights.quickWin) { focus.title = 'Quick Win'; focus.description = currentProject.insights.quickWin; } } return focus; } function getReadinessSnapshot() { var readiness = null; if (currentProject && currentProject.insights && typeof currentProject.insights.gaugeValue !== 'undefined') { readiness = Math.round(Number(currentProject.insights.gaugeValue || 0)); } else if (currentProject && currentProject.transformationScore) { readiness = parseInt(String(currentProject.transformationScore).replace('%',''), 10); } var label = 'Overall transformation score'; if (currentProject && currentProject.insights && currentProject.insights.readinessStatus) { label = currentProject.insights.readinessStatus; } return { readiness: readiness, label: label }; } function getIndustryRoleContext() { var industry = ''; var role = ''; if (currentProject) { if (currentProject.industry) { industry = currentProject.industry; } if (currentProject.companyRole) { role = currentProject.companyRole; } if (!industry && currentProject.assessmentData && currentProject.assessmentData.industry) { industry = currentProject.assessmentData.industry; } if (!role && currentProject.assessmentData && currentProject.assessmentData.company_role) { role = currentProject.assessmentData.company_role; } if (!role && currentProject.companyRole === undefined && currentProject.company_role) { role = currentProject.company_role; } } if (!role && currentPersonCache && currentPersonCache.role) { role = currentPersonCache.role; } var labelParts = []; if (role) { labelParts.push(role); } if (industry) { labelParts.push(industry); } return { industry: industry, role: role, label: labelParts.join(' • ') }; } function getPeerComparison() { var peerData = []; if (currentProject && Array.isArray(currentProject.peerData)) { peerData = currentProject.peerData; } else if (currentProject && currentProject.insights && Array.isArray(currentProject.insights.peerData)) { peerData = currentProject.insights.peerData; } var readiness = getReadinessSnapshot(); var yourScore = readiness.readiness !== null ? readiness.readiness : null; var peerScore = null; var leaderScore = null; peerData.forEach(function(entry) { if (!entry) { return; } var name = (entry.name || '').toString().toLowerCase(); var score = Number(entry.score !== undefined ? entry.score : entry.value); if (isNaN(score)) { return; } if (!leaderScore || score > leaderScore) { leaderScore = score; } if (name.indexOf('peer') !== -1 || name.indexOf('average') !== -1) { peerScore = score; } if (name.indexOf('your') !== -1 || name.indexOf('company') !== -1) { yourScore = score; } }); var summary = ''; if (yourScore !== null && peerScore !== null) { var delta = yourScore - peerScore; var direction = delta >= 0 ? 'ahead of' : 'behind'; summary = 'You are ' + Math.abs(delta) + ' pts ' + direction + ' the peer average (' + peerScore + '%).'; if (leaderScore !== null) { summary += ' Leaders are around ' + leaderScore + '%.'; } } else if (peerScore !== null) { summary = 'Peer average is ' + peerScore + '% and top performers reach ' + (leaderScore !== null ? leaderScore : peerScore) + '%.'; } else if (leaderScore !== null && yourScore !== null) { summary = 'Benchmark is ' + leaderScore + '%; your score is ' + yourScore + '%.'; } return { yourScore: yourScore, peerScore: peerScore, leaderScore: leaderScore, summary: summary }; } function findPulsePostById(postId) { if (!postId || !pulsePosts || !pulsePosts.length) { return null; } var match = null; pulsePosts.forEach(function(item) { var id = item && (item._id || item.id); if (id === postId) { match = item; } }); return match; } function ensurePulsePostModal() { if (pulsePostModalRefs && pulsePostModalRefs.modal) { return pulsePostModalRefs; } var modal = document.getElementById('pulsePostModal'); if (!modal) { modal = document.createElement('div'); modal.id = 'pulsePostModal'; modal.className = 'pulse-modal'; modal.onclick = function(event) { if (event && event.target === modal) { closePulsePostModal(); } }; var dialog = document.createElement('div'); dialog.className = 'pulse-modal-content'; var closeBtn = document.createElement('button'); closeBtn.className = 'pulse-modal-close'; closeBtn.setAttribute('type', 'button'); closeBtn.textContent = 'Close'; closeBtn.onclick = function() { closePulsePostModal(); }; var imageWrapper = document.createElement('div'); imageWrapper.className = 'pulse-modal-image-wrapper'; var image = document.createElement('div'); image.className = 'pulse-modal-image'; var playBtn = document.createElement('button'); playBtn.className = 'pulse-modal-play-btn'; playBtn.setAttribute('type', 'button'); playBtn.setAttribute('aria-label', 'Play audio briefing'); var playSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); playSvg.setAttribute('width', '24'); playSvg.setAttribute('height', '24'); playSvg.setAttribute('viewBox', '0 0 24 24'); playSvg.setAttribute('fill', 'currentColor'); var playPath = document.createElementNS('http://www.w3.org/2000/svg', 'path'); playPath.setAttribute('d', 'M8 5v14l11-7z'); playSvg.appendChild(playPath); playBtn.appendChild(playSvg); playBtn.onclick = function(e) { e.stopPropagation(); var postId = playBtn.getAttribute('data-post-id'); if (postId) { playPulsePostAudio(postId, playBtn); } }; imageWrapper.appendChild(image); imageWrapper.appendChild(playBtn); var body = document.createElement('div'); body.className = 'pulse-modal-body'; var tag = document.createElement('span'); tag.className = 'pulse-tag'; var title = document.createElement('h4'); var summary = document.createElement('p'); summary.className = 'pulse-modal-summary'; var detail = document.createElement('p'); detail.className = 'pulse-modal-detail'; // Alternative views section var altViewsContainer = document.createElement('div'); altViewsContainer.className = 'pulse-alt-views'; var altViewsBtns = document.createElement('div'); altViewsBtns.className = 'pulse-alt-views-btns'; var shortBtn = document.createElement('button'); shortBtn.className = 'pulse-alt-btn'; shortBtn.setAttribute('type', 'button'); shortBtn.setAttribute('data-view-type', 'short'); shortBtn.textContent = 'Short Version'; var bulletBtn = document.createElement('button'); bulletBtn.className = 'pulse-alt-btn'; bulletBtn.setAttribute('type', 'button'); bulletBtn.setAttribute('data-view-type', 'bullet'); bulletBtn.textContent = 'Bullet Points'; var fullBtn = document.createElement('button'); fullBtn.className = 'pulse-alt-btn is-active'; fullBtn.setAttribute('type', 'button'); fullBtn.setAttribute('data-view-type', 'full'); fullBtn.textContent = 'Full'; altViewsBtns.appendChild(fullBtn); altViewsBtns.appendChild(shortBtn); altViewsBtns.appendChild(bulletBtn); var altViewsContent = document.createElement('div'); altViewsContent.className = 'pulse-alt-content'; altViewsContent.style.display = 'none'; altViewsContainer.appendChild(altViewsBtns); altViewsContainer.appendChild(altViewsContent); var audio = document.createElement('div'); audio.className = 'pulse-modal-audio'; body.appendChild(tag); body.appendChild(title); body.appendChild(summary); body.appendChild(altViewsContainer); body.appendChild(detail); body.appendChild(altViewsContent); body.appendChild(audio); dialog.appendChild(closeBtn); dialog.appendChild(imageWrapper); dialog.appendChild(body); modal.appendChild(dialog); document.body.appendChild(modal); body.onscroll = function() { if (body.scrollTop > 30) { image.classList.add('collapsed'); } else { image.classList.remove('collapsed'); } }; pulsePostModalRefs = { modal: modal, image: image, playBtn: playBtn, body: body, tag: tag, title: title, summary: summary, detail: detail, audio: audio, altViewsBtns: altViewsBtns, altViewsContent: altViewsContent }; // Attach click handlers for alt view buttons altViewsBtns.onclick = function(e) { var btn = e.target.closest('.pulse-alt-btn'); if (!btn) return; handlePulseAltViewClick(btn); }; } else { var existingImage = modal.querySelector('.pulse-modal-image'); var existingBody = modal.querySelector('.pulse-modal-body'); var existingPlayBtn = modal.querySelector('.pulse-modal-play-btn'); if (existingBody && !existingBody._scrollHandlerAttached) { existingBody.onscroll = function() { if (existingBody.scrollTop > 30) { existingImage.classList.add('collapsed'); } else { existingImage.classList.remove('collapsed'); } }; existingBody._scrollHandlerAttached = true; } var existingAltBtns = modal.querySelector('.pulse-alt-views-btns'); var existingAltContent = modal.querySelector('.pulse-alt-content'); pulsePostModalRefs = { modal: modal, image: existingImage, playBtn: existingPlayBtn, body: existingBody, tag: modal.querySelector('.pulse-tag'), title: modal.querySelector('h4'), summary: modal.querySelector('.pulse-modal-summary'), detail: modal.querySelector('.pulse-modal-detail'), audio: modal.querySelector('.pulse-modal-audio'), altViewsBtns: existingAltBtns, altViewsContent: existingAltContent }; if (existingAltBtns && !existingAltBtns._clickHandlerAttached) { existingAltBtns.onclick = function(e) { var btn = e.target.closest('.pulse-alt-btn'); if (!btn) return; handlePulseAltViewClick(btn); }; existingAltBtns._clickHandlerAttached = true; } } return pulsePostModalRefs; } function closePulsePostModal() { if (pulsePostModalRefs && pulsePostModalRefs.modal) { pulsePostModalRefs.modal.classList.remove('visible'); } } function renderPulsePostModal(post, isGenerating) { var refs = ensurePulsePostModal(); if (!refs || !refs.modal) { return; } refs.modal.classList.add('visible'); refs.image.classList.remove('collapsed'); if (refs.body) { refs.body.scrollTop = 0; } var postId = post && (post._id || post.id) ? (post._id || post.id) : ''; if (refs.playBtn) { refs.playBtn.setAttribute('data-post-id', postId); refs.playBtn.classList.remove('loading', 'playing'); } var thumb = post && post.thumbnailUrl ? post.thumbnailUrl : ''; if (thumb) { refs.image.style.backgroundImage = 'linear-gradient(180deg, rgba(15,23,42,0.05) 0%, rgba(15,23,42,0.55) 100%), url(' + thumb + ')'; refs.image.classList.remove('pulse-modal-image-loading'); } else { refs.image.style.backgroundImage = ''; refs.image.classList.add('pulse-modal-image-loading'); } refs.tag.textContent = (post && post.tag) ? post.tag : 'Pulse'; refs.title.textContent = (post && post.title) ? post.title : 'Pulse post'; refs.summary.textContent = (post && post.summary) ? post.summary : ''; if (isGenerating) { refs.detail.textContent = 'Generating full post and audio...'; refs.audio.textContent = ''; return; } refs.detail.textContent = (post && post.fullText) ? post.fullText : 'Full post will appear once generated.'; refs.audio.textContent = (post && post.audioSummary) ? post.audioSummary : ''; // Reset alt views state if (refs.altViewsBtns) { var btns = refs.altViewsBtns.querySelectorAll('.pulse-alt-btn'); btns.forEach(function(b) { b.classList.remove('is-active', 'is-loading'); }); var fullBtn = refs.altViewsBtns.querySelector('[data-view-type="full"]'); if (fullBtn) fullBtn.classList.add('is-active'); } if (refs.altViewsContent) { refs.altViewsContent.style.display = 'none'; refs.altViewsContent.textContent = ''; } if (refs.detail) { refs.detail.style.display = ''; } // Store current post id for alt view requests if (refs.modal) { refs.modal.setAttribute('data-current-post-id', post && (post._id || post.id) ? (post._id || post.id) : ''); } } // Track current alt view post data in memory var currentPulseAltViewCache = {}; function handlePulseAltViewClick(btn) { var viewType = btn.getAttribute('data-view-type'); if (!viewType || !pulsePostModalRefs) return; var refs = pulsePostModalRefs; var postId = refs.modal ? refs.modal.getAttribute('data-current-post-id') : ''; if (!postId) return; // Update button states var allBtns = refs.altViewsBtns.querySelectorAll('.pulse-alt-btn'); allBtns.forEach(function(b) { b.classList.remove('is-active'); }); btn.classList.add('is-active'); // Show full view (original detail) if (viewType === 'full') { if (refs.detail) refs.detail.style.display = ''; if (refs.altViewsContent) refs.altViewsContent.style.display = 'none'; return; } // Check in-memory cache first var cacheKey = postId + '_' + viewType; if (currentPulseAltViewCache[cacheKey]) { showAltViewContent(currentPulseAltViewCache[cacheKey]); return; } // Show loading state btn.classList.add('is-loading'); if (refs.detail) refs.detail.style.display = 'none'; if (refs.altViewsContent) { refs.altViewsContent.style.display = 'block'; refs.altViewsContent.textContent = 'Generating ' + (viewType === 'short' ? 'short version' : 'bullet points') + '...'; } // Call processor phoros.processor('iWGwhXccDY6Wx2iRM', { type: 'generatePulseAltView', payload: { post_id: postId, viewType: viewType } }, function(error, result) { btn.classList.remove('is-loading'); if (error || !result || !result.success) { var errMsg = (result && result.error) || 'Failed to generate'; if (refs.altViewsContent) { refs.altViewsContent.textContent = errMsg; } return; } var altContent = result.data && result.data.altContent ? result.data.altContent : ''; currentPulseAltViewCache[cacheKey] = altContent; showAltViewContent(altContent); // Update local pulse post data if we have the updated post if (result.data && result.data.post) { var idx = pulsePosts.findIndex(function(p) { return (p._id || p.id) === postId; }); if (idx >= 0) { pulsePosts[idx] = result.data.post; } } }); } function showAltViewContent(content) { if (!pulsePostModalRefs) return; var refs = pulsePostModalRefs; if (refs.detail) refs.detail.style.display = 'none'; if (refs.altViewsContent) { refs.altViewsContent.style.display = 'block'; refs.altViewsContent.textContent = content || ''; } } function loadPulsePostsFromServer(callback) { if (!currentProject || !currentProject.id) { if (typeof callback === 'function') { callback(); } return; } if (!phoros || typeof phoros.processor !== 'function') { if (typeof callback === 'function') { callback(); } return; } phoros.processor('iWGwhXccDY6Wx2iRM', { type: 'getPulsePosts', payload: { project_id: currentProject.id } }, function(error, result) { if (result && result.success && result.data && Array.isArray(result.data.posts)) { pulsePosts = result.data.posts.map(function(item) { return item; }); } if (typeof callback === 'function') { callback(); } }); } function persistPulsePostSeed(seed, callback) { if (!seed || !currentProject || !currentProject.id) { if (callback) { callback(); } return; } if (!phoros || typeof phoros.processor !== 'function') { if (callback) { callback(); } return; } phoros.processor('iWGwhXccDY6Wx2iRM', { type: 'createPulsePost', payload: { project_id: currentProject.id, title: seed.title, summary: seed.summary, thumbnailUrl: seed.thumbnailUrl, tag: seed.tag || '', generatedStage: 'seed' } }, function(error, result) { if (result && result.success && result.data && result.data.post) { seed._id = result.data.post._id || result.data.post.id; } if (typeof callback === 'function') { callback(seed); } }); } function persistPulsePostDetail(post, detail, callback) { if (!post) { if (callback) { callback(null); } return; } var postId = post._id || post.id; if (!postId) { if (callback) { callback(null); } return; } if (!phoros || typeof phoros.processor !== 'function') { if (callback) { callback(null); } return; } var payload = { post_id: postId, fullText: detail.fullText, audioSummary: detail.audioSummary || '', generatedStage: 'expanded' }; phoros.processor('iWGwhXccDY6Wx2iRM', { type: 'updatePulsePost', payload: payload }, function(error, result) { if (result && result.success && result.data && result.data.post) { if (typeof callback === 'function') { callback(result.data.post); } } else { if (typeof callback === 'function') { callback(null); } } }); } function ensurePulsePostSeeds(callback) { if (pulsePosts && pulsePosts.length >= 3) { if (callback) { callback(); } return; } // Auto-generate 3 posts with animated loading card var grid = document.getElementById('pulsePostGrid'); var status = document.getElementById('pulsePostStatus'); // Insert loading card with animation var loadingCard = createPulseLoadingCard(); if (grid) { grid.insertBefore(loadingCard, grid.firstChild); } var animationComplete = false; var serverComplete = false; var serverSuccess = false; var serverMessage = ''; runPulseLoadingAnimation(function() { animationComplete = true; if (serverComplete) { finishAutoGeneration(); } }); triggerServerSidePulseGeneration(function(success, message) { serverComplete = true; serverSuccess = success; serverMessage = message; if (animationComplete) { finishAutoGeneration(); } }); function finishAutoGeneration() { var loadingCardEl = document.getElementById('pulseLoadingCard'); if (loadingCardEl) { loadingCardEl.remove(); } if (!serverSuccess && status) { status.textContent = 'Generation failed: ' + (serverMessage || 'Unknown error'); status.style.color = '#ef4444'; } if (callback) { callback(); } } } function triggerServerSidePulseGeneration(callback) { if (!currentProject || !currentProject.id) { if (callback) { callback(false, 'No project loaded'); } return; } if (!phoros || typeof phoros.processor !== 'function') { if (callback) { callback(false, 'Processor not available'); } return; } var objectives = Array.isArray(projectObjectives) ? projectObjectives : []; var kpis = Array.isArray(projectKpis) ? projectKpis : []; var recentTitles = (pulsePosts || []).map(function(p) { return p.title || ''; }).filter(function(t) { return t; }); var assessmentPayload = {}; if (currentProject) { assessmentPayload = { company_name: currentProject.title || '', industry: currentProject.industry || '', company_role: currentProject.companyRole || '', company_size: currentProject.companySize || '', insights: currentProject.insights || {}, capacityProfile: currentProject.capacityProfile || {}, businessKPIs: currentProject.businessKPIs || [], peerData: currentProject.peerData || [] }; } var kpiPayload = kpis.map(function(k) { return { name: k.name || k.kpiName || k.metric || '', targetValue: k.targetValue, currentValue: k.currentValue, progressValue: k.progressValue }; }); phoros.processor('GGcwL5csno6LE3qHi', { type: 'generateAndPersistPulsePosts', payload: { project_id: currentProject.id, project: { id: currentProject.id, title: currentProject.title || '', companyName: currentProject.title || '', industry: currentProject.industry || '', role: currentProject.companyRole || '', insights: currentProject.insights || {} }, assessment: assessmentPayload, objectives: objectives.slice(0, 10).map(function(obj) { return { title: obj.title || '', summary: obj.summary || '', isCompleted: !!obj.isCompleted, targetDateISO: obj.targetDateISO || obj.targetDate || '' }; }), kpis: kpiPayload, recentTitles: recentTitles } }, function(error, result) { if (error || !result || !result.success) { var errorMsg = 'Server error'; if (error) { errorMsg = typeof error === 'string' ? error : (error.message || 'Unknown error'); } else if (result && result.error) { errorMsg = result.error; } if (callback) { callback(false, errorMsg); } return; } var data = result.data || {}; var postsCreated = data.postsCreated || 0; var imagesQueued = data.imagesQueued || 0; // Reload posts from server loadPulsePostsFromServer(function() { renderPulsePosts(); var status = document.getElementById('pulsePostStatus'); if (status) { status.textContent = postsCreated + ' briefings generated. Creating artwork...'; status.style.color = '#22c55e'; } if (callback) { callback(true, null); } // Generate images directly per-post (parallel, client-triggered) if (data.posts && data.posts.length > 0) { generatePulseImagesForPosts(data.posts); } }); }); } function generatePulseImagesForPosts(posts) { if (!posts || !posts.length) return; if (!phoros || typeof phoros.processor !== 'function') return; var completed = 0; var total = posts.length; posts.forEach(function(post) { phoros.processor('GGcwL5csno6LE3qHi', { type: 'generatePulseImage', payload: { post: { _id: post._id, tag: post.tag || '', title: post.title || '', summary: post.summary || '' } } }, function(error, result) { completed++; if (!error && result && result.success && result.data && result.data.thumbnailUrl) { // Update local data var thumbUrl = result.data.thumbnailUrl; for (var i = 0; i < pulsePosts.length; i++) { if (pulsePosts[i]._id === post._id || pulsePosts[i].id === post._id) { pulsePosts[i].thumbnailUrl = thumbUrl; break; } } // Update card in DOM immediately var cards = document.querySelectorAll('.pulse-v2-card'); cards.forEach(function(card) { var imageEl = card.querySelector('.pulse-v2-card-image'); var titleEl = card.querySelector('.pulse-v2-card-title'); if (titleEl && titleEl.textContent === post.title && imageEl) { imageEl.style.backgroundImage = 'url(' + thumbUrl + ')'; imageEl.classList.remove('pulse-v2-card-image-loading'); } }); } // Update status when all complete if (completed >= total) { var status = document.getElementById('pulsePostStatus'); if (status) { var withImages = pulsePosts.filter(function(p) { return p.thumbnailUrl; }).length; if (withImages >= total) { status.textContent = pulsePosts.length + ' briefings with AI artwork ready.'; } else { status.textContent = pulsePosts.length + ' briefings ready. Some artwork could not be generated.'; } status.style.color = '#22c55e'; } } }); }); } function requestPulseSeedsFromServer(callback) { if (!phoros || typeof phoros.processor !== 'function') { if (typeof callback === 'function') { callback(null); } return; } var focus = getPriorityFocus(); var stats = getObjectiveStats(); var readiness = getReadinessSnapshot(); var context = getIndustryRoleContext(); var peer = getPeerComparison(); // Build rich project context var projectPayload = { title: currentProject && currentProject.title ? currentProject.title : '', companyName: currentProject && currentProject.title ? currentProject.title : '', readiness: readiness.readiness, readinessLabel: readiness.label, focusTitle: focus.title, focusDescription: focus.description, industry: context.industry, role: context.role, peerSummary: peer.summary, stats: stats, insights: currentProject && currentProject.insights ? currentProject.insights : null }; // Build assessment payload with all available fields var assessmentPayload = {}; if (currentProject) { assessmentPayload = { company_name: currentProject.title || '', industry: currentProject.industry || '', company_role: currentProject.companyRole || '', company_size: currentProject.companySize || '', company_duration: currentProject.companyDuration || '', insights: currentProject.insights || {}, capacityProfile: currentProject.capacityProfile || {}, capacityRecommendations: currentProject.capacityRecommendations || [], capacitySummary: currentProject.capacitySummary || '', businessKPIs: currentProject.businessKPIs || [], peerData: currentProject.peerData || [], customer_goals_summary: currentProject.customerGoals || '', goal_process_explanation: currentProject.goalExplanation || '', promoted_strategies: currentProject.promotedStrategies || [], innovation_technologies: currentProject.innovationTechnologies || [] }; } // Include full KPI data with targets var kpiPayload = (projectKpis || []).slice(0, 6).map(function(k) { return { kpiName: k.kpiName || k.name || k.kpi_name || '', name: k.name || k.kpiName || k.kpi_name || '', progressValue: k.progressValue, target: k.target || '', priority: k.priority || '', description: k.description || '' }; }); // Include business KPIs from assessment if available if (currentProject && currentProject.businessKPIs && currentProject.businessKPIs.length) { var existingNames = {}; kpiPayload.forEach(function(k) { existingNames[k.kpiName] = true; }); currentProject.businessKPIs.forEach(function(bk) { if (!existingNames[bk.kpiName]) { kpiPayload.push({ kpiName: bk.kpiName || '', name: bk.kpiName || '', progressValue: bk.progressValue, target: bk.target || '', priority: bk.priority || '', description: bk.description || '' }); } }); } // Collect recent titles to avoid repetition var recentTitles = (pulsePosts || []).slice(0, 35).map(function(p) { return p.title || ''; }).filter(function(t) { return t.length > 0; }); phoros.processor('GGcwL5csno6LE3qHi', { type: 'generatePulseSeeds', payload: { project: projectPayload, assessment: assessmentPayload, objectives: (projectObjectives || []).slice(0, 8).map(function(obj) { return { title: obj.title || '', description: obj.description || '', isCompleted: obj.isCompleted || false, targetDateISO: obj.targetDateISO || obj.targetDate || '' }; }), kpis: kpiPayload, recentTitles: recentTitles } }, function(error, result) { if (error || !result || !result.success) { var errorMsg = 'Server error'; if (error) { errorMsg = typeof error === 'string' ? error : (error.message || error.reason || 'Unknown error'); } else if (result && result.error) { errorMsg = result.error; } else if (result && result.message) { errorMsg = result.message; } console.error('Server pulse seed generation failed:', errorMsg); if (typeof callback === 'function') { callback(null, errorMsg); } return; } if (typeof callback === 'function') { callback(result.data && result.data.seeds ? result.data.seeds : null, null); } }); } function clearAllPulsePosts() { var clearBtn = document.getElementById('clearPulseBtn'); var status = document.getElementById('pulsePostStatus'); if (clearBtn) { clearBtn.disabled = true; clearBtn.textContent = 'Clearing...'; } if (status) { status.textContent = 'Removing all pulse posts...'; } if (!currentProject || !currentProject.id) { if (status) { status.textContent = 'No project loaded.'; } if (clearBtn) { clearBtn.disabled = false; clearBtn.textContent = 'Clear All Posts'; } return; } phoros.processor('iWGwhXccDY6Wx2iRM', { type: 'clearAllPulsePosts', payload: { project_id: currentProject.id } }, function(error, result) { if (error || !result || !result.success) { if (status) { status.textContent = 'Failed to clear posts: ' + (result && result.error ? result.error : 'Unknown error'); } } else { pulsePosts = []; renderPulsePosts(); if (status) { status.textContent = 'All posts cleared. ' + (result.data && result.data.count ? result.data.count + ' posts removed.' : ''); } } if (clearBtn) { clearBtn.disabled = false; clearBtn.textContent = 'Clear All Posts'; } }); } // Loading animation stages for pulse generation (17s total) var pulseLoadingStages = [ { label: 'Researching', icon: 'search', duration: 3200 }, { label: 'Analyzing', icon: 'chart', duration: 3000 }, { label: 'Drafting', icon: 'edit', duration: 2600 }, { label: 'Refining', icon: 'sparkle', duration: 2400 }, { label: 'Illustrating', icon: 'image', duration: 3000 }, { label: 'Pressing', icon: 'print', duration: 2800 } ]; function createPulseLoadingCard() { var card = document.createElement('div'); card.className = 'pulse-v2-card pulse-loading-card'; card.id = 'pulseLoadingCard'; // Animated background area var imageArea = document.createElement('div'); imageArea.className = 'pulse-loading-image-area'; // Animated icon container var iconContainer = document.createElement('div'); iconContainer.className = 'pulse-loading-icon-container'; iconContainer.id = 'pulseLoadingIcon'; // Stage label var stageLabel = document.createElement('div'); stageLabel.className = 'pulse-loading-stage'; stageLabel.id = 'pulseLoadingStage'; stageLabel.textContent = 'Preparing...'; // Progress dots var progressDots = document.createElement('div'); progressDots.className = 'pulse-loading-dots'; progressDots.id = 'pulseLoadingDots'; for (var i = 0; i < 6; i++) { var dot = document.createElement('span'); dot.className = 'pulse-loading-dot'; dot.setAttribute('data-index', i); progressDots.appendChild(dot); } imageArea.appendChild(iconContainer); imageArea.appendChild(stageLabel); imageArea.appendChild(progressDots); // Body placeholder var body = document.createElement('div'); body.className = 'pulse-loading-body'; var shimmer1 = document.createElement('div'); shimmer1.className = 'pulse-loading-shimmer pulse-loading-shimmer-tag'; var shimmer2 = document.createElement('div'); shimmer2.className = 'pulse-loading-shimmer pulse-loading-shimmer-title'; var shimmer3 = document.createElement('div'); shimmer3.className = 'pulse-loading-shimmer pulse-loading-shimmer-text'; var shimmer4 = document.createElement('div'); shimmer4.className = 'pulse-loading-shimmer pulse-loading-shimmer-text short'; body.appendChild(shimmer1); body.appendChild(shimmer2); body.appendChild(shimmer3); body.appendChild(shimmer4); card.appendChild(imageArea); card.appendChild(body); return card; } function getLoadingIconSvg(iconType) { var paths = { search: 'M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z', chart: 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z', edit: 'M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z', sparkle: 'M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z', image: 'M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z', print: 'M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z' }; return paths[iconType] || paths.search; } function updateLoadingIcon(iconType) { var container = document.getElementById('pulseLoadingIcon'); if (!container) return; container.textContent = ''; var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); svg.setAttribute('viewBox', '0 0 24 24'); svg.setAttribute('fill', 'none'); svg.setAttribute('stroke', 'currentColor'); svg.setAttribute('stroke-width', '1.5'); svg.setAttribute('class', 'pulse-loading-svg'); var path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); path.setAttribute('stroke-linecap', 'round'); path.setAttribute('stroke-linejoin', 'round'); path.setAttribute('d', getLoadingIconSvg(iconType)); svg.appendChild(path); container.appendChild(svg); } function runPulseLoadingAnimation(onComplete) { var stageIndex = 0; var stageLabel = document.getElementById('pulseLoadingStage'); var dotsContainer = document.getElementById('pulseLoadingDots'); function showStage(index) { if (index >= pulseLoadingStages.length) { if (typeof onComplete === 'function') onComplete(); return; } var stage = pulseLoadingStages[index]; if (stageLabel) stageLabel.textContent = stage.label + '...'; updateLoadingIcon(stage.icon); // Update progress dots if (dotsContainer) { var dots = dotsContainer.querySelectorAll('.pulse-loading-dot'); for (var i = 0; i < dots.length; i++) { if (i <= index) { dots[i].classList.add('active'); } else { dots[i].classList.remove('active'); } } } setTimeout(function() { showStage(index + 1); }, stage.duration); } // Start animation updateLoadingIcon('search'); showStage(0); } function refreshPulsePosts() { var btn = document.getElementById('refreshPulseBtn'); var status = document.getElementById('pulsePostStatus'); var grid = document.getElementById('pulsePostGrid'); if (btn) { btn.disabled = true; btn.textContent = 'Generating...'; } if (status) { status.textContent = ''; status.style.color = ''; } if (!currentProject || !currentProject.id) { if (status) { status.textContent = 'No project loaded.'; status.style.color = '#ef4444'; } if (btn) { btn.disabled = false; btn.textContent = 'Generate Posts'; } return; } // Insert loading card at the beginning of the grid var loadingCard = createPulseLoadingCard(); if (grid) { grid.insertBefore(loadingCard, grid.firstChild); } // Start the loading animation var animationComplete = false; var serverComplete = false; var serverResult = null; var serverError = null; runPulseLoadingAnimation(function() { animationComplete = true; if (serverComplete) { finishGeneration(); } }); // Build context payload for server var objectives = Array.isArray(projectObjectives) ? projectObjectives : []; var kpis = Array.isArray(projectKpis) ? projectKpis : []; var recentTitles = pulsePosts.map(function(p) { return p.title || ''; }).filter(function(t) { return t; }); // Build assessment payload from currentProject (same as requestPulseSeedsFromServer) var assessmentPayload = {}; if (currentProject) { assessmentPayload = { company_name: currentProject.title || '', industry: currentProject.industry || '', company_role: currentProject.companyRole || '', company_size: currentProject.companySize || '', company_duration: currentProject.companyDuration || '', insights: currentProject.insights || {}, capacityProfile: currentProject.capacityProfile || {}, capacityRecommendations: currentProject.capacityRecommendations || [], capacitySummary: currentProject.capacitySummary || '', businessKPIs: currentProject.businessKPIs || [], peerData: currentProject.peerData || [], customer_goals_summary: currentProject.customerGoals || '', goal_process_explanation: currentProject.goalExplanation || '', promoted_strategies: currentProject.promotedStrategies || [], innovation_technologies: currentProject.innovationTechnologies || [] }; } var kpiPayload = kpis.map(function(k) { return { name: k.name || k.kpiName || k.metric || '', targetValue: k.targetValue, currentValue: k.currentValue, progressValue: k.progressValue }; }); // Use server-side action that generates seeds, persists, and creates images phoros.processor('GGcwL5csno6LE3qHi', { type: 'generateAndPersistPulsePosts', payload: { project_id: currentProject.id, project: { id: currentProject.id, title: currentProject.title || '', companyName: currentProject.title || '', industry: currentProject.industry || '', role: currentProject.companyRole || '', insights: currentProject.insights || {} }, assessment: assessmentPayload, objectives: objectives.slice(0, 10).map(function(obj) { return { title: obj.title || '', summary: obj.summary || '', isCompleted: !!obj.isCompleted, targetDateISO: obj.targetDateISO || obj.targetDate || '' }; }), kpis: kpiPayload, recentTitles: recentTitles } }, function(error, result) { serverComplete = true; serverError = error; serverResult = result; if (animationComplete) { finishGeneration(); } }); function finishGeneration() { // Remove loading card var loadingCardEl = document.getElementById('pulseLoadingCard'); if (loadingCardEl) { loadingCardEl.remove(); } if (serverError || !serverResult || !serverResult.success) { var errorMsg = 'Server error'; if (serverError) { errorMsg = typeof serverError === 'string' ? serverError : (serverError.message || serverError.reason || 'Unknown error'); } else if (serverResult && serverResult.error) { errorMsg = serverResult.error; } else if (serverResult && serverResult.message) { errorMsg = serverResult.message; } console.error('Server pulse generation failed:', errorMsg); if (btn) { btn.disabled = false; btn.textContent = 'Generate Posts'; } if (status) { status.textContent = 'Generation failed: ' + errorMsg; status.style.color = '#ef4444'; } return; } var data = serverResult.data || {}; var postsCreated = data.postsCreated || 0; var imagesGenerated = data.imagesGenerated || 0; // Reload all posts from server to get complete list with images loadPulsePostsFromServer(function() { renderPulsePosts(); if (btn) { btn.disabled = false; btn.textContent = 'Generate Posts'; } if (status) { status.textContent = 'New briefing ready' + (imagesGenerated > 0 ? ' with AI artwork' : '') + '. Total: ' + pulsePosts.length + ' posts.'; status.style.color = ''; } }); } } function generatePulsePostSeeds() { var seeds = []; var focus = getPriorityFocus(); var stats = getObjectiveStats(); var readiness = getReadinessSnapshot(); var context = getIndustryRoleContext(); var peer = getPeerComparison(); var projectTitle = currentProject && currentProject.title ? currentProject.title : ''; var industry = context.industry || ''; var role = context.role || ''; var topics = []; // Insight post - only if we have readiness data var insightSummary = ''; if (readiness.readiness !== null) { insightSummary = 'Readiness at ' + readiness.readiness + '% (' + readiness.label + ')'; if (focus.title && focus.title !== 'Define your first objective') { insightSummary += ' with priority focus on ' + focus.title + '.'; } else { insightSummary += '. Complete the assessment to identify focus areas.'; } } else { insightSummary = 'Complete your assessment to unlock readiness insights and priority recommendations.'; } topics.push({ tag: 'Insight', title: readiness.readiness !== null ? ('Readiness at ' + readiness.readiness + '%: What it means') : 'Unlock your readiness score', summary: insightSummary, imageTopic: 'analysis' }); // Roadmap post - based on actual objectives var roadmapTitle = 'Your transformation roadmap'; var roadmapSummary = ''; if (stats.total && stats.total > 0) { roadmapTitle = stats.active + ' active objective' + (stats.active !== 1 ? 's' : '') + ' in motion'; var nextDueInfo = ''; if (stats.nextDue && stats.nextDue.title) { nextDueInfo = ' Next up: ' + stats.nextDue.title + '.'; } roadmapSummary = stats.completed + ' of ' + stats.total + ' objectives complete. ' + stats.tasksCompleted + ' of ' + stats.tasksTotal + ' tasks done.' + nextDueInfo; } else { roadmapSummary = 'Define objectives from your assessment insights to build an execution roadmap with milestones and tasks.'; } topics.push({ tag: 'Roadmap', title: roadmapTitle, summary: roadmapSummary, imageTopic: 'roadmap' }); // Market post - only include specific context if available var marketTitle = ''; var marketSummary = ''; if (industry && role) { marketTitle = industry + ' outlook for ' + role + 's'; marketSummary = peer.summary ? peer.summary : ('Competitive benchmarks for ' + role + 's in ' + industry + ' will be generated as you complete the assessment.'); } else if (industry) { marketTitle = industry + ' market outlook'; marketSummary = peer.summary ? peer.summary : ('Industry benchmarks for ' + industry + ' will be generated as you complete the assessment.'); } else if (role) { marketTitle = 'Market outlook for ' + role + 's'; marketSummary = peer.summary ? peer.summary : ('Role-specific benchmarks will be generated as you complete the assessment.'); } else { marketTitle = 'Competitive positioning'; marketSummary = 'Complete your assessment to unlock peer comparisons and industry benchmarks tailored to your context.'; } topics.push({ tag: 'Market', title: marketTitle, summary: marketSummary, imageTopic: 'market' }); topics.forEach(function(topic, index) { seeds.push({ title: topic.title, summary: topic.summary, thumbnailUrl: getPulseImageForTopic(topic.imageTopic, index), tag: topic.tag, generatedStage: 'seed', createdAtISO: new Date().toISOString() }); }); return seeds; } function getPulseImageForTopic(topic, index) { // Return empty string - will use CSS gradient placeholder instead return ''; } function buildPulsePostDetail(post) { var title = post && post.title ? post.title : 'Pulse post'; var tag = post && post.tag ? post.tag : ''; var focus = getPriorityFocus(); var stats = getObjectiveStats(); var readiness = getReadinessSnapshot(); var context = getIndustryRoleContext(); var peer = getPeerComparison(); var projectTitle = currentProject && currentProject.title ? currentProject.title : ''; var detail = []; // Opening based on post type if (tag === 'Insight' && readiness.readiness !== null) { detail.push('Your transformation readiness stands at ' + readiness.readiness + '%, placing you in the ' + readiness.label + ' tier.'); if (focus.title && focus.title !== 'Define your first objective') { detail.push('The assessment identified ' + focus.title + ' as your priority area for improvement.'); if (focus.description) { detail.push(focus.description); } } } else if (tag === 'Roadmap' && stats.total) { detail.push('Your roadmap currently tracks ' + stats.total + ' objective' + (stats.total !== 1 ? 's' : '') + ', with ' + stats.active + ' actively in progress.'); if (stats.tasksTotal > 0) { var taskPercent = Math.round((stats.tasksCompleted / stats.tasksTotal) * 100); detail.push('Task completion is at ' + taskPercent + '% (' + stats.tasksCompleted + ' of ' + stats.tasksTotal + ' tasks done).'); } if (stats.nextDue && stats.nextDue.title) { detail.push('The next milestone is ' + stats.nextDue.title + '.'); } } else if (tag === 'Market' && peer.summary) { detail.push(peer.summary); if (context.industry) { detail.push('These benchmarks are calibrated for ' + context.industry + '.'); } } else { detail.push('This briefing captures the current state of ' + (projectTitle || 'your transformation project') + '.'); if (readiness.readiness !== null) { detail.push('Readiness is at ' + readiness.readiness + '% (' + readiness.label + ').'); } } // Add context if available if (context.label && detail.length < 4) { detail.push('Tailored for ' + context.label + '.'); } // Closing recommendation if (focus.title && focus.title !== 'Define your first objective' && tag !== 'Insight') { detail.push('Current priority focus: ' + focus.title + '.'); } // Build audio summary based on actual content var audioSummary = ''; if (readiness.readiness !== null) { audioSummary = 'Readiness at ' + readiness.readiness + '%.'; if (stats.total) { audioSummary += ' ' + stats.active + ' active objectives.'; } if (peer.summary) { audioSummary += ' ' + peer.summary; } } else { audioSummary = 'Complete your assessment to unlock personalized audio briefings.'; } return { fullText: detail.join(' '), audioSummary: audioSummary, generatedAtISO: new Date().toISOString() }; } function requestPulsePostDetail(post, callback) { var fallbackDetail = buildPulsePostDetail(post); if (!phoros || typeof phoros.processor !== 'function') { if (typeof callback === 'function') { callback(null, fallbackDetail); } return; } var focus = getPriorityFocus(); var stats = getObjectiveStats(); var readiness = getReadinessSnapshot(); var context = getIndustryRoleContext(); var peer = getPeerComparison(); // Build rich objectives payload var objectives = (projectObjectives || []).slice(0, 5).map(function(obj) { return { title: obj && obj.title ? obj.title : '', description: obj && obj.description ? obj.description : '', isCompleted: !!(obj && obj.isCompleted), targetDateISO: obj && obj.targetDateISO ? obj.targetDateISO : (obj && obj.targetDate ? obj.targetDate : null) }; }); // Build rich KPI payload with targets var kpis = (projectKpis || []).slice(0, 5).map(function(k) { return { kpiName: k && (k.kpiName || k.kpi_name || k.name) ? (k.kpiName || k.kpi_name || k.name) : '', name: k && (k.name || k.kpiName || k.kpi_name) ? (k.name || k.kpiName || k.kpi_name) : '', progressValue: k && k.progressValue !== undefined ? k.progressValue : null, target: k && k.target ? k.target : '', priority: k && k.priority ? k.priority : '', description: k && k.description ? k.description : '' }; }); // Add business KPIs from assessment if (currentProject && currentProject.businessKPIs && currentProject.businessKPIs.length) { var existingNames = {}; kpis.forEach(function(k) { existingNames[k.kpiName] = true; }); currentProject.businessKPIs.slice(0, 4).forEach(function(bk) { if (!existingNames[bk.kpiName]) { kpis.push({ kpiName: bk.kpiName || '', name: bk.kpiName || '', progressValue: bk.progressValue, target: bk.target || '', priority: bk.priority || '', description: bk.description || '' }); } }); } // Build assessment payload with all available fields var assessmentPayload = {}; if (currentProject) { assessmentPayload = { company_name: currentProject.title || '', industry: currentProject.industry || '', company_role: currentProject.companyRole || '', company_size: currentProject.companySize || '', insights: currentProject.insights || {}, capacityProfile: currentProject.capacityProfile || {}, capacityRecommendations: currentProject.capacityRecommendations || [], businessKPIs: currentProject.businessKPIs || [] }; } var payload = { post: { id: post && (post._id || post.id) ? (post._id || post.id) : '', title: post && post.title ? post.title : '', summary: post && post.summary ? post.summary : '', tag: post && post.tag ? post.tag : '' }, project: { id: currentProject ? currentProject.id : '', title: currentProject ? currentProject.title : '', companyName: currentProject ? currentProject.title : '', readiness: readiness.readiness, readinessLabel: readiness.label, focusTitle: focus.title, focusDescription: focus.description, stats: stats, industry: context.industry || '', role: context.role || '', peerSummary: peer.summary || '', insights: currentProject ? currentProject.insights : null }, assessment: assessmentPayload, objectives: objectives, kpis: kpis }; phoros.processor('GGcwL5csno6LE3qHi', { type: 'generatePulseDetail', payload: payload }, function(error, result) { if (error || !result || !result.success || !result.data || !result.data.detail) { if (typeof callback === 'function') { callback(null, fallbackDetail); } return; } if (typeof callback === 'function') { callback(null, result.data.detail); } }); } function handlePulsePostClick(postId) { var target = findPulsePostById(postId); if (!target) { return; } if (target.generating) { return; } renderPulsePostModal(target, !(target.fullText || target.audioSummary)); if (target.fullText || target.audioSummary) { target.expanded = true; renderPulsePosts(); return; } target.generating = true; renderPulsePosts(); requestPulsePostDetail(target, function(_, detail) { var finalDetail = detail || buildPulsePostDetail(target); target.generating = false; target.fullText = finalDetail.fullText || target.fullText; target.audioSummary = finalDetail.audioSummary || target.audioSummary; target.expanded = true; persistPulsePostDetail(target, finalDetail, function(updated) { if (updated && updated._id) { target._id = updated._id; target.id = updated._id; } renderPulsePostModal(target, false); renderPulsePosts(); }); }); } function formatPulseDate(dateValue) { if (!dateValue) { return ''; } try { var d = new Date(dateValue); if (isNaN(d.getTime())) { return ''; } var now = new Date(); var diffMs = now - d; var diffMins = Math.floor(diffMs / 60000); var diffHours = Math.floor(diffMs / 3600000); var diffDays = Math.floor(diffMs / 86400000); if (diffMins < 1) { return 'Just now'; } if (diffMins < 60) { return diffMins + ' min ago'; } if (diffHours < 24) { return diffHours + 'h ago'; } if (diffDays < 7) { return diffDays + 'd ago'; } return d.toLocaleDateString(); } catch (e) { return ''; } } function renderPulsePosts() { var grid = document.getElementById('pulsePostGrid'); var status = document.getElementById('pulsePostStatus'); var countBadge = document.getElementById('pulsePostCount'); if (!grid) { return; } grid.textContent = ''; if (status) { status.textContent = ''; } if (!pulsePosts || !pulsePosts.length) { // Empty state with new V2 design var empty = document.createElement('div'); empty.className = 'pulse-v2-empty'; var emptyIcon = document.createElement('div'); emptyIcon.className = 'pulse-v2-empty-icon'; var emptyIconSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); emptyIconSvg.setAttribute('viewBox', '0 0 24 24'); emptyIconSvg.setAttribute('fill', 'none'); emptyIconSvg.setAttribute('stroke', 'currentColor'); emptyIconSvg.setAttribute('stroke-width', '1.5'); var emptyIconPath = document.createElementNS('http://www.w3.org/2000/svg', 'path'); emptyIconPath.setAttribute('d', 'M12 3a7 7 0 0 0-4 12.74V20a1 1 0 0 0 1.45.89L12 19l2.55 1.9A1 1 0 0 0 16 20v-4.26A7 7 0 0 0 12 3z'); var emptyIconCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); emptyIconCircle.setAttribute('cx', '12'); emptyIconCircle.setAttribute('cy', '11'); emptyIconCircle.setAttribute('r', '1'); emptyIconSvg.appendChild(emptyIconPath); emptyIconSvg.appendChild(emptyIconCircle); emptyIcon.appendChild(emptyIconSvg); var emptyTitle = document.createElement('h4'); emptyTitle.textContent = 'No Insights Yet'; var emptyText = document.createElement('p'); emptyText.textContent = 'AI-powered strategic briefings will appear here based on your assessment, objectives, and industry context.'; empty.appendChild(emptyIcon); empty.appendChild(emptyTitle); empty.appendChild(emptyText); grid.appendChild(empty); if (countBadge) { countBadge.textContent = '0 posts'; } return; } // Sort by date descending (newest first) var sorted = pulsePosts.slice().sort(function(a, b) { var dateA = new Date(a.dateCreatedISO || a.createdAtISO || a.dateCreate || 0); var dateB = new Date(b.dateCreatedISO || b.createdAtISO || b.dateCreate || 0); return dateB - dateA; }); if (countBadge) { countBadge.textContent = sorted.length + ' post' + (sorted.length !== 1 ? 's' : ''); } sorted.forEach(function(post, index) { var card = document.createElement('div'); card.className = 'pulse-v2-card'; card.setAttribute('role', 'button'); card.setAttribute('tabindex', '0'); card.onclick = function() { var pid = post._id || post.id; handlePulsePostClick(pid); }; // Image container (for positioning play button) var imageContainer = document.createElement('div'); imageContainer.className = 'pulse-v2-card-image-container'; var image = document.createElement('div'); var hasImage = post.thumbnailUrl && post.thumbnailUrl.length > 0; image.className = 'pulse-v2-card-image' + (hasImage ? '' : ' pulse-v2-card-image-loading'); if (hasImage) { image.style.backgroundImage = 'url(' + post.thumbnailUrl + ')'; } // Play button (bottom-right of image) var playBtn = document.createElement('button'); playBtn.className = 'pulse-v2-play-btn'; playBtn.setAttribute('type', 'button'); playBtn.setAttribute('aria-label', 'Play audio briefing'); playBtn.setAttribute('data-post-id', post._id || post.id || ''); var playSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); playSvg.setAttribute('width', '20'); playSvg.setAttribute('height', '20'); playSvg.setAttribute('viewBox', '0 0 24 24'); playSvg.setAttribute('fill', 'currentColor'); var playPath = document.createElementNS('http://www.w3.org/2000/svg', 'path'); playPath.setAttribute('d', 'M8 5v14l11-7z'); playSvg.appendChild(playPath); playBtn.appendChild(playSvg); playBtn.onclick = function(e) { e.stopPropagation(); var pid = post._id || post.id; playPulsePostAudio(pid, playBtn); }; imageContainer.appendChild(image); imageContainer.appendChild(playBtn); // Body var body = document.createElement('div'); body.className = 'pulse-v2-card-body'; // Header row (tag + date) var header = document.createElement('div'); header.className = 'pulse-v2-card-header'; var tagClass = (post.tag || 'pulse').toLowerCase().replace(/[^a-z]/g, ''); var tag = document.createElement('span'); tag.className = 'pulse-v2-tag ' + tagClass; tag.textContent = post.tag || 'Pulse'; var dateLabel = document.createElement('span'); dateLabel.className = 'pulse-v2-card-date'; var postDate = post.dateCreatedISO || post.createdAtISO || post.dateCreate; dateLabel.textContent = formatPulseDate(postDate); header.appendChild(tag); header.appendChild(dateLabel); // Title var title = document.createElement('h5'); title.className = 'pulse-v2-card-title'; title.textContent = post.title || 'Pulse post'; // Summary var summary = document.createElement('p'); summary.className = 'pulse-v2-card-summary'; summary.textContent = post.summary || ''; // Footer var footer = document.createElement('div'); footer.className = 'pulse-v2-card-footer'; var cta = document.createElement('span'); cta.className = 'pulse-v2-card-cta'; cta.appendChild(document.createTextNode('Read more ')); var ctaSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); ctaSvg.setAttribute('width', '14'); ctaSvg.setAttribute('height', '14'); ctaSvg.setAttribute('viewBox', '0 0 24 24'); ctaSvg.setAttribute('fill', 'none'); ctaSvg.setAttribute('stroke', 'currentColor'); ctaSvg.setAttribute('stroke-width', '2'); var ctaPath = document.createElementNS('http://www.w3.org/2000/svg', 'path'); ctaPath.setAttribute('d', 'M5 12h14M12 5l7 7-7 7'); ctaSvg.appendChild(ctaPath); cta.appendChild(ctaSvg); var statusEl = document.createElement('div'); statusEl.className = 'pulse-v2-card-status'; var dot = document.createElement('span'); var statusText = document.createElement('span'); statusText.className = 'pulse-v2-status-text'; if (post.generating) { dot.className = 'pulse-v2-status-dot generating'; statusText.textContent = 'Generating...'; } else if (post.fullText) { dot.className = 'pulse-v2-status-dot ready'; statusText.textContent = 'Ready'; } else { dot.className = 'pulse-v2-status-dot pending'; statusText.textContent = 'Tap to expand'; } statusEl.appendChild(dot); statusEl.appendChild(statusText); footer.appendChild(cta); footer.appendChild(statusEl); body.appendChild(header); body.appendChild(title); body.appendChild(summary); body.appendChild(footer); card.appendChild(imageContainer); card.appendChild(body); grid.appendChild(card); }); // Auto-generate images for posts missing thumbnails var postsNeedingImages = sorted.filter(function(p) { return !p.thumbnailUrl && !p._imageRequested; }); if (postsNeedingImages.length > 0) { postsNeedingImages.forEach(function(p) { p._imageRequested = true; }); generatePulseImagesForPosts(postsNeedingImages); } } // Play audio briefing for a pulse post function playPulsePostAudio(postId, buttonEl) { var post = null; for (var i = 0; i < pulsePosts.length; i++) { var p = pulsePosts[i]; if ((p._id || p.id) === postId) { post = p; break; } } if (!post) { console.warn('Post not found for audio playback:', postId); return; } // Check if we need to generate/expand the post first if (!post.fullText) { // Show loading state on button if (buttonEl) { buttonEl.classList.add('loading'); } // First expand the post to get full text handlePulsePostClick(postId, function() { // After expansion, try playing again playPulsePostAudio(postId, buttonEl); }); return; } // Get text to read var textToRead = post.title + '. ' + (post.fullText || post.summary || ''); // Show audio player modal/overlay showPulseAudioPlayer(post, textToRead, buttonEl); } // Show audio player UI and start TTS function showPulseAudioPlayer(post, textToRead, buttonEl) { // Create or get audio player container var existingPlayer = document.getElementById('pulseAudioPlayerOverlay'); if (existingPlayer) { existingPlayer.remove(); } var overlay = document.createElement('div'); overlay.id = 'pulseAudioPlayerOverlay'; overlay.className = 'pulse-audio-player-overlay'; var player = document.createElement('div'); player.className = 'pulse-audio-player'; // Player header var playerHeader = document.createElement('div'); playerHeader.className = 'pulse-audio-player-header'; var playerTitle = document.createElement('span'); playerTitle.className = 'pulse-audio-player-title'; playerTitle.textContent = post.title || 'Audio Briefing'; var closeBtn = document.createElement('button'); closeBtn.className = 'pulse-audio-player-close'; closeBtn.setAttribute('type', 'button'); closeBtn.textContent = 'Close'; closeBtn.onclick = function() { stopPulseAudio(); overlay.remove(); if (buttonEl) { buttonEl.classList.remove('playing', 'loading'); } }; playerHeader.appendChild(playerTitle); playerHeader.appendChild(closeBtn); // Player status var playerStatus = document.createElement('div'); playerStatus.className = 'pulse-audio-player-status'; playerStatus.id = 'pulseAudioStatus'; playerStatus.textContent = 'Loading audio...'; // Progress bar var progressContainer = document.createElement('div'); progressContainer.className = 'pulse-audio-progress-container'; var progressBar = document.createElement('div'); progressBar.className = 'pulse-audio-progress-bar'; progressBar.id = 'pulseAudioProgressBar'; progressContainer.appendChild(progressBar); // Controls var controls = document.createElement('div'); controls.className = 'pulse-audio-controls'; var playPauseBtn = document.createElement('button'); playPauseBtn.className = 'pulse-audio-control-btn primary'; playPauseBtn.id = 'pulseAudioPlayPauseBtn'; playPauseBtn.setAttribute('type', 'button'); var pauseSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); pauseSvg.setAttribute('width', '24'); pauseSvg.setAttribute('height', '24'); pauseSvg.setAttribute('viewBox', '0 0 24 24'); pauseSvg.setAttribute('fill', 'currentColor'); var pausePath = document.createElementNS('http://www.w3.org/2000/svg', 'path'); pausePath.setAttribute('d', 'M6 4h4v16H6V4zm8 0h4v16h-4V4z'); pauseSvg.appendChild(pausePath); playPauseBtn.appendChild(pauseSvg); playPauseBtn.appendChild(document.createTextNode(' Pause')); playPauseBtn.onclick = function() { togglePulseAudioPause(); }; var stopBtn = document.createElement('button'); stopBtn.className = 'pulse-audio-control-btn'; stopBtn.setAttribute('type', 'button'); stopBtn.textContent = 'Stop'; stopBtn.onclick = function() { stopPulseAudio(); overlay.remove(); if (buttonEl) { buttonEl.classList.remove('playing', 'loading'); } }; controls.appendChild(playPauseBtn); controls.appendChild(stopBtn); player.appendChild(playerHeader); player.appendChild(playerStatus); player.appendChild(progressContainer); player.appendChild(controls); overlay.appendChild(player); document.body.appendChild(overlay); // Update button state if (buttonEl) { buttonEl.classList.remove('loading'); buttonEl.classList.add('playing'); } // Start TTS using browser Speech Synthesis startPulseTTS(textToRead, playerStatus, progressBar, playPauseBtn, buttonEl, overlay); } // TTS state var pulseAudioUtterance = null; var pulseAudioPaused = false; function startPulseTTS(text, statusEl, progressBar, playPauseBtn, buttonEl, overlay) { if (!window.speechSynthesis) { if (statusEl) statusEl.textContent = 'Audio not supported in this browser.'; return; } // Cancel any existing speech window.speechSynthesis.cancel(); pulseAudioUtterance = new SpeechSynthesisUtterance(text); pulseAudioUtterance.rate = 1.0; pulseAudioUtterance.pitch = 1.0; // Try to find a good voice var voices = window.speechSynthesis.getVoices(); var preferredVoice = voices.find(function(v) { return v.lang.startsWith('en') && (v.name.includes('Google') || v.name.includes('Samantha') || v.name.includes('Daniel')); }) || voices.find(function(v) { return v.lang.startsWith('en'); }); if (preferredVoice) { pulseAudioUtterance.voice = preferredVoice; } pulseAudioUtterance.onstart = function() { if (statusEl) statusEl.textContent = 'Playing audio briefing...'; pulseAudioPaused = false; }; pulseAudioUtterance.onend = function() { if (statusEl) statusEl.textContent = 'Playback complete.'; if (progressBar) progressBar.style.width = '100%'; if (buttonEl) { buttonEl.classList.remove('playing', 'loading'); } }; pulseAudioUtterance.onerror = function(e) { if (statusEl) statusEl.textContent = 'Audio error: ' + (e.error || 'unknown'); if (buttonEl) { buttonEl.classList.remove('playing', 'loading'); } }; // Approximate progress (speech synthesis doesn't give precise progress) var totalLength = text.length; var progressInterval = setInterval(function() { if (!window.speechSynthesis.speaking || pulseAudioPaused) { return; } // Estimate progress based on typical reading speed (~150 wpm) var elapsed = Date.now() - startTime; var estimatedDuration = (totalLength / 5) * (60000 / 150); // rough estimate var progress = Math.min((elapsed / estimatedDuration) * 100, 95); if (progressBar) progressBar.style.width = progress + '%'; }, 500); var startTime = Date.now(); pulseAudioUtterance.onend = function() { clearInterval(progressInterval); if (statusEl) statusEl.textContent = 'Playback complete.'; if (progressBar) progressBar.style.width = '100%'; if (buttonEl) { buttonEl.classList.remove('playing', 'loading'); } }; window.speechSynthesis.speak(pulseAudioUtterance); } function togglePulseAudioPause() { var btn = document.getElementById('pulseAudioPlayPauseBtn'); var status = document.getElementById('pulseAudioStatus'); if (!window.speechSynthesis) return; if (window.speechSynthesis.paused) { window.speechSynthesis.resume(); pulseAudioPaused = false; if (status) status.textContent = 'Playing audio briefing...'; if (btn) btn.textContent = ' Pause'; } else if (window.speechSynthesis.speaking) { window.speechSynthesis.pause(); pulseAudioPaused = true; if (status) status.textContent = 'Paused'; if (btn) btn.textContent = ' Resume'; } } function stopPulseAudio() { if (window.speechSynthesis) { window.speechSynthesis.cancel(); } pulseAudioPaused = false; } function renderProjectProgressSummary() { var container = document.getElementById('projectProgressSummary'); if (!container) return; container.textContent = ''; var objectives = (projectObjectives && projectObjectives.length) ? projectObjectives : []; var objectivesTotal = objectives.length; var objectivesCompleted = 0; var upcomingObjective = null; objectives.forEach(function(obj) { if (obj && obj.isCompleted) objectivesCompleted += 1; if (obj && !obj.isCompleted && (obj.targetDateISO || obj.targetDate)) { var candidateDate = new Date(obj.targetDateISO || obj.targetDate); if (!upcomingObjective || candidateDate < new Date(upcomingObjective.targetDateISO || upcomingObjective.targetDate)) { upcomingObjective = obj; } } }); var tasksTotal = 0; var tasksCompleted = 0; objectives.forEach(function(obj) { var oid = obj && (obj._id || obj.id); var taskList = Array.isArray(objectiveTasks[oid]) ? objectiveTasks[oid] : []; taskList.forEach(function(task) { tasksTotal += 1; if (task && task.isComplete) tasksCompleted += 1; }); }); var kpis = (projectKpis && projectKpis.length) ? projectKpis : normalizeAssessmentKPIs(currentProject && currentProject.businessKPIs ? currentProject.businessKPIs : []); var kpiAverage = 0; if (kpis.length) { var sum = 0; var count = 0; kpis.forEach(function(k) { var val = Number(k.progressValue || 0); if (!isNaN(val)) { sum += val; count += 1; } }); kpiAverage = count ? Math.round(sum / count) : 0; } var header = document.createElement('div'); header.className = 'progress-header'; var headerText = document.createElement('div'); var headerTitle = document.createElement('h2'); headerTitle.textContent = 'Project Progress'; var headerSubtitle = document.createElement('p'); headerSubtitle.textContent = 'Monitor how objectives, tasks, and KPIs are advancing for this transformation project.'; headerText.appendChild(headerTitle); headerText.appendChild(headerSubtitle); header.appendChild(headerText); container.appendChild(header); var grid = document.createElement('div'); grid.className = 'progress-grid'; var objectivesCard = document.createElement('div'); objectivesCard.className = 'progress-card'; var objectivesMetric = document.createElement('div'); objectivesMetric.className = 'progress-metric'; var objectivesPercent = objectivesTotal ? Math.round((objectivesCompleted / objectivesTotal) * 100) : 0; objectivesMetric.textContent = objectivesPercent + '%'; var objectivesLabel = document.createElement('div'); objectivesLabel.className = 'progress-label'; objectivesLabel.textContent = 'Objectives complete'; var objectivesDetail = document.createElement('div'); objectivesDetail.className = 'progress-detail'; objectivesDetail.textContent = objectivesTotal ? (objectivesCompleted + ' of ' + objectivesTotal + ' objectives complete') : 'Create objectives to start tracking progress'; objectivesCard.appendChild(objectivesMetric); objectivesCard.appendChild(objectivesLabel); objectivesCard.appendChild(objectivesDetail); grid.appendChild(objectivesCard); var tasksCard = document.createElement('div'); tasksCard.className = 'progress-card'; var tasksMetric = document.createElement('div'); tasksMetric.className = 'progress-metric'; tasksMetric.textContent = tasksTotal ? (tasksCompleted + '/' + tasksTotal) : '0'; var tasksLabel = document.createElement('div'); tasksLabel.className = 'progress-label'; tasksLabel.textContent = 'Tasks completed'; var tasksDetail = document.createElement('div'); tasksDetail.className = 'progress-detail'; tasksDetail.textContent = tasksTotal ? (Math.round((tasksCompleted / tasksTotal) * 100) + '% of tasks done') : 'Add tasks inside each objective'; tasksCard.appendChild(tasksMetric); tasksCard.appendChild(tasksLabel); tasksCard.appendChild(tasksDetail); grid.appendChild(tasksCard); var kpiCard = document.createElement('div'); kpiCard.className = 'progress-card'; var kpiMetric = document.createElement('div'); kpiMetric.className = 'progress-metric'; kpiMetric.textContent = kpis.length ? (kpiAverage + '%') : '--'; var kpiLabel = document.createElement('div'); kpiLabel.className = 'progress-label'; kpiLabel.textContent = 'Average KPI progress'; var kpiDetail = document.createElement('div'); kpiDetail.className = 'progress-detail'; kpiDetail.textContent = kpis.length ? (kpis.length + ' active KPI' + (kpis.length === 1 ? '' : 's')) : 'No KPIs saved yet'; kpiCard.appendChild(kpiMetric); kpiCard.appendChild(kpiLabel); kpiCard.appendChild(kpiDetail); grid.appendChild(kpiCard); container.appendChild(grid); if (currentProject && (currentProject.capacitySummary || (currentProject.capacityRecommendations && currentProject.capacityRecommendations.length))) { var capacitySection = document.createElement('div'); capacitySection.className = 'progress-capacity'; capacitySection.style.cssText = 'margin-top:18px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:12px; padding:16px;'; var capacityTitle = document.createElement('h3'); capacityTitle.style.cssText = 'margin:0 0 8px 0; color:#1f2937; font-size:16px; font-weight:600;'; capacityTitle.textContent = 'Capacity Summary'; var capacitySummary = document.createElement('p'); capacitySummary.style.cssText = 'margin:0; color:#475569; white-space:pre-wrap;'; capacitySummary.textContent = currentProject.capacitySummary || 'Capacity profile not yet generated.'; capacitySection.appendChild(capacityTitle); capacitySection.appendChild(capacitySummary); if (currentProject.capacityRecommendations && currentProject.capacityRecommendations.length) { var recommendationsTitle = document.createElement('div'); recommendationsTitle.style.cssText = 'margin-top:12px; font-weight:600; color:#0f172a; font-size:14px;'; recommendationsTitle.textContent = 'Enablers to unlock KPIs:'; var recommendationList = document.createElement('ul'); recommendationList.style.cssText = 'margin:8px 0 0 16px; color:#334155; font-size:14px;'; currentProject.capacityRecommendations.forEach(function(rec){ var li = document.createElement('li'); li.textContent = rec; recommendationList.appendChild(li); }); capacitySection.appendChild(recommendationsTitle); capacitySection.appendChild(recommendationList); } container.appendChild(capacitySection); } var highlight = document.createElement('div'); highlight.className = 'progress-highlight'; var highlightTitle = document.createElement('h3'); highlightTitle.textContent = upcomingObjective ? 'Next milestone' : 'Suggested focus'; var highlightBody = document.createElement('p'); var quickWinText = currentProject && currentProject.insights && currentProject.insights.quickWin ? currentProject.insights.quickWin : ''; if (upcomingObjective) { highlightBody.textContent = (upcomingObjective.title || 'Objective') + ' - due ' + formatFriendlyDate(upcomingObjective.targetDateISO || upcomingObjective.targetDate); } else if (quickWinText) { highlightBody.textContent = quickWinText; } else { highlightBody.textContent = 'Use the advisor to capture KPIs or objectives and build your execution roadmap.'; } highlight.appendChild(highlightTitle); highlight.appendChild(highlightBody); if (upcomingObjective && quickWinText) { var quickWinDetail = document.createElement('p'); quickWinDetail.style.marginTop = '6px'; quickWinDetail.textContent = 'Quick Win: ' + quickWinText; highlight.appendChild(quickWinDetail); } container.appendChild(highlight); } // Helper to create Pulse V2 stat rings function createPulseV2Ring(percent, colorClass, label, sublabel) { var card = document.createElement('div'); card.className = 'pulse-v2-ring-card'; var ring = document.createElement('div'); ring.className = 'pulse-v2-ring'; var circumference = 2 * Math.PI * 32; var offset = circumference - (percent / 100) * circumference; var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); svg.setAttribute('viewBox', '0 0 80 80'); var track = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); track.setAttribute('class', 'pulse-v2-ring-track'); track.setAttribute('cx', '40'); track.setAttribute('cy', '40'); track.setAttribute('r', '32'); var fill = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); fill.setAttribute('class', 'pulse-v2-ring-fill ' + colorClass); fill.setAttribute('cx', '40'); fill.setAttribute('cy', '40'); fill.setAttribute('r', '32'); fill.setAttribute('stroke-dasharray', circumference); fill.setAttribute('stroke-dashoffset', offset); svg.appendChild(track); svg.appendChild(fill); ring.appendChild(svg); var value = document.createElement('div'); value.className = 'pulse-v2-ring-value'; value.textContent = percent + '%'; ring.appendChild(value); var labelEl = document.createElement('div'); labelEl.className = 'pulse-v2-ring-label'; labelEl.textContent = label; var sublabelEl = document.createElement('div'); sublabelEl.className = 'pulse-v2-ring-sublabel'; sublabelEl.textContent = sublabel; card.appendChild(ring); card.appendChild(labelEl); card.appendChild(sublabelEl); return card; } function loadPulseContent(container) { var wrapper = document.createElement('div'); wrapper.className = 'pulse-v2'; // Get stats for the dashboard var readiness = getReadinessSnapshot(); var objectiveStats = getObjectiveStats(); var kpis = getActiveKpis(); var kpiStats = getKpiBoardStats(kpis); var postCount = (pulsePosts || []).length; // ===== DASHBOARD HERO ===== var dashboard = document.createElement('div'); dashboard.className = 'pulse-v2-dashboard'; // Dashboard Header var dashHeader = document.createElement('div'); dashHeader.className = 'pulse-v2-dashboard-header'; var dashHeaderLeft = document.createElement('div'); var dashTitle = document.createElement('h4'); dashTitle.className = 'pulse-v2-dashboard-title'; dashTitle.textContent = 'Pulse Command Center'; var dashSubtitle = document.createElement('p'); dashSubtitle.className = 'pulse-v2-dashboard-subtitle'; dashSubtitle.textContent = 'AI-powered insights, strategic briefings, and market intelligence'; dashHeaderLeft.appendChild(dashTitle); dashHeaderLeft.appendChild(dashSubtitle); // Dashboard Actions var dashActions = document.createElement('div'); dashActions.className = 'pulse-v2-dashboard-actions'; var isAdmin = typeof window.DAVA_personIsAdmin === 'function' && window.DAVA_personIsAdmin(getCurrentPerson()); if (isAdmin) { var clearBtn = document.createElement('button'); clearBtn.id = 'clearPulseBtn'; clearBtn.className = 'pulse-v2-action-btn danger'; clearBtn.textContent = 'Clear All'; clearBtn.onclick = function() { clearAllPulsePosts(); }; dashActions.appendChild(clearBtn); } // Generate Posts button removed per testing feedback - feature not ready for users dashHeader.appendChild(dashHeaderLeft); dashHeader.appendChild(dashActions); dashboard.appendChild(dashHeader); // Stats Rings Grid var ringsGrid = document.createElement('div'); ringsGrid.className = 'pulse-v2-rings'; // Ring 1: Readiness Score ringsGrid.appendChild(createPulseV2Ring( readiness.readiness || 0, readiness.readiness >= 70 ? 'success' : (readiness.readiness >= 40 ? 'warning' : 'primary'), 'Readiness', readiness.label || 'Assessment pending' )); // Ring 2: Roadmap Progress var objPercent = objectiveStats.total ? Math.round((objectiveStats.completed / objectiveStats.total) * 100) : 0; ringsGrid.appendChild(createPulseV2Ring( objPercent, objPercent >= 70 ? 'success' : (objPercent >= 30 ? 'warning' : 'primary'), 'Roadmap', objectiveStats.completed + '/' + objectiveStats.total + ' complete' )); // Ring 3: KPI Progress ringsGrid.appendChild(createPulseV2Ring( kpiStats.avgProgress || 0, kpiStats.avgProgress >= 70 ? 'success' : (kpiStats.avgProgress >= 40 ? 'warning' : 'primary'), 'KPI Health', kpiStats.onTrack + ' on track' )); dashboard.appendChild(ringsGrid); // Momentum Story if (postCount > 0 || readiness.readiness > 0) { var momentum = document.createElement('div'); momentum.className = 'pulse-v2-momentum'; var momTitle = document.createElement('h5'); momTitle.className = 'pulse-v2-momentum-title'; momTitle.textContent = 'Latest Intelligence'; var momText = document.createElement('p'); momText.className = 'pulse-v2-momentum-text'; var storyParts = []; if (readiness.readiness) storyParts.push('Transformation readiness at ' + readiness.readiness + '%.'); if (postCount > 0) storyParts.push(postCount + ' strategic briefing' + (postCount !== 1 ? 's' : '') + ' available.'); if (objectiveStats.active > 0) storyParts.push(objectiveStats.active + ' objective' + (objectiveStats.active !== 1 ? 's' : '') + ' in progress.'); storyParts.push('Click any post to expand full analysis and audio summary.'); momText.textContent = storyParts.join(' '); momentum.appendChild(momTitle); momentum.appendChild(momText); dashboard.appendChild(momentum); } wrapper.appendChild(dashboard); // ===== POSTS SECTION ===== var postsSection = document.createElement('div'); postsSection.className = 'pulse-v2-section'; var postsHeader = document.createElement('div'); postsHeader.className = 'pulse-v2-section-header'; var postsHeaderLeft = document.createElement('div'); var postsTitle = document.createElement('h4'); postsTitle.className = 'pulse-v2-section-title'; postsTitle.textContent = 'Strategic Briefings'; var postsMeta = document.createElement('p'); postsMeta.className = 'pulse-v2-section-subtitle'; postsMeta.textContent = 'AI-generated insights tailored to your transformation journey'; postsHeaderLeft.appendChild(postsTitle); postsHeaderLeft.appendChild(postsMeta); var postsHeaderRight = document.createElement('div'); postsHeaderRight.className = 'pulse-v2-section-meta'; var postCountBadge = document.createElement('span'); postCountBadge.id = 'pulsePostCount'; postCountBadge.className = 'pulse-v2-section-count'; postCountBadge.textContent = postCount + ' posts'; postsHeaderRight.appendChild(postCountBadge); postsHeader.appendChild(postsHeaderLeft); postsHeader.appendChild(postsHeaderRight); postsSection.appendChild(postsHeader); var postGrid = document.createElement('div'); postGrid.id = 'pulsePostGrid'; postGrid.className = 'pulse-v2-grid'; postsSection.appendChild(postGrid); var postStatus = document.createElement('div'); postStatus.id = 'pulsePostStatus'; postStatus.className = 'pulse-status'; postStatus.style.cssText = 'text-align:center; padding:12px; color:#64748b; font-size:13px;'; postsSection.appendChild(postStatus); wrapper.appendChild(postsSection); container.appendChild(wrapper); renderPulsePosts(); loadPulsePostsFromServer(function() { ensurePulsePostSeeds(function() { renderPulsePosts(); }); }); } function buildPulseBriefs() { var briefs = []; var readiness = getReadinessSnapshot(); var focus = getPriorityFocus(); var stats = getObjectiveStats(); var context = getIndustryRoleContext(); var peer = getPeerComparison(); if (readiness.readiness !== null) { briefs.push({ tag: 'Assessment', title: 'Readiness pulse', body: 'Readiness at ' + readiness.readiness + '% - ' + readiness.label + (context.label ? (' for ' + context.label) : '') + '. Focus on ' + focus.title + ' to move up.', cta: 'Pin focus', pin: { title: focus.title, summary: focus.description } }); } if (stats.total) { var nextMilestoneText = stats.nextDue && (stats.nextDue.title || stats.nextDue.name) ? (stats.nextDue.title || stats.nextDue.name) : 'Next milestone'; var nextMilestoneDate = stats.nextDue && (stats.nextDue.targetDateISO || stats.nextDue.targetDate) ? formatFriendlyDate(stats.nextDue.targetDateISO || stats.nextDue.targetDate) : 'set a target date'; briefs.push({ tag: 'Roadmap', title: 'Execution momentum', body: stats.active + ' active of ' + stats.total + ' objectives • ' + stats.tasksCompleted + '/' + stats.tasksTotal + ' tasks done. Next: ' + nextMilestoneText + ' by ' + nextMilestoneDate + '.', cta: 'Pin milestone', pin: { title: nextMilestoneText, summary: 'Target date: ' + nextMilestoneDate } }); } var kpis = (projectKpis && projectKpis.length) ? projectKpis : normalizeAssessmentKPIs(currentProject && currentProject.businessKPIs ? currentProject.businessKPIs : []); if (kpis.length) { var sum = 0; var count = 0; kpis.forEach(function(k) { var val = Number(k.progressValue || 0); if (!isNaN(val)) { sum += val; count += 1; } }); var avg = count ? Math.round(sum / count) : 0; briefs.push({ tag: 'KPI', title: 'Value dashboard', body: 'Tracking ' + kpis.length + ' KPIs • Average progress ' + avg + '%. Use this to brief your board on momentum.', cta: 'Pin KPI focus', pin: { title: 'Board snapshot', summary: 'Highlight KPI average at ' + avg + '% across ' + kpis.length + ' measures.' } }); } var industry = context.industry || ''; var role = context.role || ''; // Market brief - only show if we have peer data or real context if (peer.summary) { var marketBody = peer.summary; if (focus.title && focus.title !== 'Define your first objective') { marketBody += ' Keep ' + focus.title + ' visible as you brief stakeholders.'; } briefs.push({ tag: 'Market', title: 'Competitive pulse', body: marketBody, cta: 'Pin market move', pin: { title: 'Competitive gap', summary: peer.summary } }); } else if (industry || role) { var pendingContext = []; if (industry) { pendingContext.push(industry); } if (role) { pendingContext.push(role + 's'); } briefs.push({ tag: 'Market', title: 'Competitive positioning', body: 'Peer benchmarks for ' + pendingContext.join(' / ') + ' will be generated after the assessment is complete.', cta: 'Pin market focus', pin: { title: 'Competitive watch', summary: 'Track ' + pendingContext.join(' and ') + ' benchmarks.' } }); } // Context brief - only show if we have real industry/role data if (industry && role) { briefs.push({ tag: 'Context', title: industry + ' priorities for ' + role + 's', body: 'Guidance is tuned for ' + role + 's in ' + industry + '. Pin priorities that must show up on the roadmap.', cta: 'Pin context', pin: { title: 'Context: ' + industry, summary: 'Roadmap aligned to ' + industry + ' priorities for ' + role + 's.' } }); } else if (industry) { briefs.push({ tag: 'Context', title: industry + ' market context', body: 'Guidance is tuned for ' + industry + '. Add your role in the assessment for more specific recommendations.', cta: 'Pin context', pin: { title: 'Context: ' + industry, summary: 'Roadmap aligned to ' + industry + ' priorities.' } }); } return briefs; } function buildPulseMiniPods() { var pods = []; var focus = getPriorityFocus(); var stats = getObjectiveStats(); var context = getIndustryRoleContext(); var peer = getPeerComparison(); var readiness = getReadinessSnapshot(); var industry = context.industry || ''; var role = context.role || ''; // Strategy pod - only show meaningful content if (focus.title && focus.title !== 'Define your first objective') { var strategyBody = 'Priority focus: ' + focus.title + '.'; if (focus.description) { strategyBody += ' ' + focus.description; } if (context.label) { strategyBody += ' Tailored for ' + context.label + '.'; } pods.push({ tag: 'Strategy', title: 'Priority focus: ' + focus.title, body: strategyBody, duration: '02:30' }); } else if (readiness.readiness !== null) { pods.push({ tag: 'Strategy', title: 'Getting started', body: 'Readiness at ' + readiness.readiness + '%. Define objectives to establish your priority focus areas.', duration: '01:30' }); } // Roadmap pod - with real data if (stats.total && stats.total > 0) { var roadmapBody = stats.active + ' active of ' + stats.total + ' objectives.'; if (stats.tasksTotal > 0) { roadmapBody += ' ' + stats.tasksCompleted + ' of ' + stats.tasksTotal + ' tasks complete.'; } if (stats.nextDue && stats.nextDue.title) { roadmapBody += ' Next milestone: ' + stats.nextDue.title + '.'; } pods.push({ tag: 'Roadmap', title: 'Momentum: ' + stats.active + ' objectives active', body: roadmapBody, duration: '01:45' }); } // KPI pod - only if KPIs exist var kpis = (projectKpis && projectKpis.length) ? projectKpis : normalizeAssessmentKPIs(currentProject && currentProject.businessKPIs ? currentProject.businessKPIs : []); if (kpis.length) { var sum = 0; var count = 0; kpis.forEach(function(k) { var val = Number(k.progressValue || 0); if (!isNaN(val)) { sum += val; count += 1; } }); var avg = count ? Math.round(sum / count) : 0; pods.push({ tag: 'KPI', title: kpis.length + ' KPIs at ' + avg + '% average', body: 'Tracking ' + kpis.length + ' key performance indicators with average progress at ' + avg + '%. Use this for board updates.', duration: '01:20' }); } // Competitive pod - only if we have peer data if (peer.summary) { pods.push({ tag: 'Competitive', title: 'Competitive positioning', body: peer.summary, duration: '01:30' }); } else if (industry) { pods.push({ tag: 'Competitive', title: industry + ' benchmarks', body: 'Competitive benchmarks for ' + industry + ' will be available after the assessment is complete.', duration: '01:00' }); } return pods; } function playPulseMiniPod(pod) { var status = document.getElementById('pulseAudioStatus'); if (!status) { return; } var label = (pod && pod.title) ? pod.title : 'Mini-pod'; var duration = (pod && pod.duration) ? pod.duration : '2 min'; var context = getIndustryRoleContext(); var readiness = getReadinessSnapshot(); var statusParts = ['Playing "' + label + '" (' + duration + ')']; if (context.label) { statusParts.push('Tailored for ' + context.label + '.'); } if (readiness.readiness !== null) { statusParts.push('Readiness: ' + readiness.readiness + '%.'); } statusParts.push('Audio briefing simulated for this session.'); status.textContent = statusParts.join(' — '); } function getPulsePinnedObjectives() { var pinned = []; (projectObjectives || []).forEach(function(obj) { if (!obj) { return; } var flagged = obj.isPulsePinned || obj.source === 'pulse-pin' || obj.origin === 'pulse'; if (!flagged) { return; } pinned.push({ objectiveId: obj._id || obj.id, title: obj.title || 'Pinned insight', summary: obj.description || obj.summary || '', context: obj.contextSummary || '', pending: false }); }); return pinned; } function syncPinnedPulseFromObjectives() { var fromObjectives = getPulsePinnedObjectives(); var pending = (pinnedPulseInsights || []).filter(function(item) { if (!item || !item.pending || !item.title) { return false; } var normalized = item.title.toString().trim().toLowerCase(); var exists = false; fromObjectives.forEach(function(obj) { var objTitle = obj && obj.title ? obj.title.toString().trim().toLowerCase() : ''; if (objTitle && objTitle === normalized) { exists = true; } }); return !exists; }); pinnedPulseInsights = fromObjectives.concat(pending); } function findObjectiveByTitle(title) { if (!title) { return null; } var normalized = title.toString().trim().toLowerCase(); if (!normalized) { return null; } var match = null; (projectObjectives || []).forEach(function(obj) { if (match || !obj || !obj.title) { return; } if (obj.title.toString().trim().toLowerCase() === normalized) { match = obj; } }); return match; } function renderPinnedPulseList() { var list = document.getElementById('pinnedPulseList'); if (!list) { return; } syncPinnedPulseFromObjectives(); list.textContent = ''; if (!pinnedPulseInsights.length) { var empty = document.createElement('div'); empty.className = 'pulse-empty'; empty.textContent = 'Pin insights from the briefs to carry them into the roadmap.'; list.appendChild(empty); return; } pinnedPulseInsights.forEach(function(item) { var card = document.createElement('div'); card.className = 'pulse-card'; var tag = document.createElement('span'); tag.className = 'pulse-tag'; tag.textContent = 'Pinned'; var title = document.createElement('h5'); title.textContent = item.title || 'Pinned insight'; var body = document.createElement('p'); if (item.pending) { body.textContent = 'Saving to roadmap...'; } else { body.textContent = item.summary || ''; } card.appendChild(tag); card.appendChild(title); card.appendChild(body); if (item.context) { var context = document.createElement('p'); context.className = 'pulse-status'; context.textContent = item.context; card.appendChild(context); } list.appendChild(card); }); } function pinPulseInsight(insight) { if (!insight || !insight.title) { return; } var title = insight.title.toString().trim(); var summary = insight.summary || ''; var existingObjective = findObjectiveByTitle(title); if (existingObjective) { existingObjective.isPulsePinned = existingObjective.isPulsePinned || existingObjective.source === 'pulse-pin' || existingObjective.origin === 'pulse'; if (summary && !existingObjective.contextSummary) { existingObjective.contextSummary = summary; } upsertObjectiveCache(existingObjective); syncPinnedPulseFromObjectives(); renderPinnedPulseList(); renderObjectivesList(projectObjectives); updateHeroMetrics(); renderProjectProgressSummary(); return; } pinnedPulseInsights.push({ title: title, summary: summary, pending: true }); renderPinnedPulseList(); if (!currentProject || !currentProject.id || !phoros || typeof phoros.processor !== 'function') { var fallbackObjective = { id: 'obj_' + Date.now(), project_id: currentProject ? currentProject.id : null, title: title, description: summary, targetDateISO: null, isCompleted: false, source: 'pulse-pin', origin: 'pulse', originTag: insight.tag || '', contextSummary: insight.context || summary, isPulsePinned: true, dateCreatedISO: new Date().toISOString() }; upsertObjectiveCache(fallbackObjective); syncPinnedPulseFromObjectives(); renderPinnedPulseList(); renderObjectivesList(projectObjectives); updateHeroMetrics(); renderProjectProgressSummary(); return; } var payload = { project_id: currentProject.id, title: title, description: summary, targetDateISO: null, isCompleted: false, source: 'pulse-pin', origin: 'pulse', originTag: insight.tag || '', contextSummary: insight.context || summary, isPulsePinned: true }; phoros.processor('iWGwhXccDY6Wx2iRM', { type: 'createObjective', payload: payload }, function(error, result) { var created = (result && result.success && result.data && result.data.objective) ? result.data.objective : null; if (!created) { created = { id: 'obj_' + Date.now(), project_id: payload.project_id, title: payload.title, description: payload.description, targetDateISO: payload.targetDateISO, isCompleted: false, source: payload.source, origin: payload.origin, originTag: payload.originTag, contextSummary: payload.contextSummary, isPulsePinned: true, dateCreatedISO: new Date().toISOString() }; } created = normalizeObjective(created); upsertObjectiveCache(created); syncPinnedPulseFromObjectives(); renderPinnedPulseList(); renderObjectivesList(projectObjectives); updateHeroMetrics(); renderProjectProgressSummary(); }); } function showEmptyObjectives() { var container = document.getElementById('objectivesContainer'); if (!container) return; container.textContent = ''; // Clear existing content var emptyDiv = document.createElement('div'); emptyDiv.className = 'empty-objectives'; var title = document.createElement('h3'); title.textContent = 'Ready to Plan Your Transformation'; emptyDiv.appendChild(title); var description = document.createElement('p'); description.textContent = 'Transform your assessment insights into actionable objectives with measurable KPIs and tasks. Choose a starting path below.'; emptyDiv.appendChild(description); var buttonsWrap = document.createElement('div'); buttonsWrap.style.cssText = 'display:flex; gap:12px; justify-content:center; margin-top:8px; flex-wrap:wrap;'; var btnCreate = document.createElement('button'); btnCreate.className = 'btn btn-primary btn-large'; btnCreate.textContent = 'Create First Objective'; btnCreate.onclick = createFirstObjective; var btnAdvisor = document.createElement('button'); btnAdvisor.className = 'btn btn-primary btn-large'; btnAdvisor.textContent = 'Generate KPIs with Advisor'; btnAdvisor.onclick = function(){ scrollToAssistant(); }; buttonsWrap.appendChild(btnCreate); buttonsWrap.appendChild(btnAdvisor); emptyDiv.appendChild(buttonsWrap); container.appendChild(emptyDiv); } function createFirstObjective() { openCreateObjectiveModal(); } function loadPlaceholderProject(projectId) { // Fallback placeholder data currentProject = { id: projectId, title: 'Business Assessment Project', subtitle: 'Digital Transformation Assessment', transformationScore: '65%', completionDate: 'Recent', status: 'Completed', assessmentData: {}, insights: null, advisorSummary: getAdvisorSummaryFallbackClient(), businessReport: '', businessReportSummary: '', businessKPIs: [], industry: '', companyRole: '', companySize: '', employees: '', peerData: [], executionGuidance: '', valueImpactReport: getValueImpactFallbackClient(), stakeholderUpdate: getStakeholderUpdateFallbackClient(), reportInputs: { advisor: ensureClientSectionInputs(), kpi: ensureClientSectionInputs(), roadmap: ensureClientSectionInputs(), updatedAtISO: new Date().toISOString() }, capacityProfile: null, capacitySummary: '', capacityRecommendations: [] }; updateProjectDisplay(); refreshProjectCollections(); // Ensure initial tab content loads on initial page load setTimeout(function() { switchTab(currentTab); }, 100); } function calculateProjectScore(assessment) { if (assessment.insights && assessment.insights.gaugeValue) { return Math.round(assessment.insights.gaugeValue); } // Fallback scoring based on data completeness if (assessment.assessmentData) { var totalFields = Object.keys(assessment.assessmentData).length; var filledFields = 0; Object.values(assessment.assessmentData).forEach(function(value) { if (value && value !== '' && (!Array.isArray(value) || value.length > 0)) { filledFields++; } }); return Math.min(95, Math.max(10, Math.round((filledFields / totalFields) * 100))); } return 65; } // Update project display function updateProjectDisplay() { if (!currentProject) return; // Safe element updates with null checks var titleEl = document.getElementById('projectTitle'); if (titleEl) titleEl.textContent = currentProject.title; var subtitleEl = document.getElementById('projectSubtitle'); if (subtitleEl) subtitleEl.textContent = currentProject.subtitle || 'Digital Transformation Assessment'; var scoreEl = document.getElementById('transformationScore'); if (scoreEl) scoreEl.textContent = currentProject.transformationScore; var dateEl = document.getElementById('completionDate'); if (dateEl) dateEl.textContent = currentProject.completionDate; var statusEl = document.getElementById('projectStatus'); if (statusEl) statusEl.textContent = currentProject.status; // Add additional context information if (subtitleEl && (currentProject.industry || currentProject.companySize || currentProject.employees)) { var subtitleParts = [currentProject.subtitle]; if (currentProject.industry) { subtitleParts.push(currentProject.industry); } if (currentProject.companySize) { subtitleParts.push(currentProject.companySize); } else if (currentProject.employees) { subtitleParts.push(currentProject.employees); } subtitleEl.textContent = subtitleParts.join(' - '); } // Update sidebar project title var sidebarTitleEl = document.getElementById('sidebarProjectTitle'); if (sidebarTitleEl) { sidebarTitleEl.textContent = currentProject.title || 'Project'; } } function scrollToAssistant() { var el = document.getElementById('assistantSidebar'); if (el) { window.scrollTo({ top: Math.max(0, (el.offsetTop || 0) - 16), behavior: 'smooth' }); setTimeout(function(){ var input = document.getElementById('chatInput'); if (input) { input.focus(); } }, 400); } } // Update hero metrics (readiness, active objectives, key priority) function updateHeroMetrics() { var readinessEl = document.getElementById('heroReadinessValue'); var readinessLabelEl = document.getElementById('heroReadinessLabel'); var activeValueEl = document.getElementById('heroActiveValue'); var activeLabelEl = document.getElementById('heroActiveLabel'); var priorityTitleEl = document.getElementById('heroPriorityTitle'); var priorityDescEl = document.getElementById('heroPriorityDescription'); var readinessPercentEl = document.getElementById('heroReadinessPercent'); var readinessCircleEl = document.getElementById('heroReadinessCircle'); // Sidebar elements var sidebarReadinessPercentEl = document.getElementById('sidebarReadinessPercent'); var sidebarReadinessCircleEl = document.getElementById('sidebarReadinessCircle'); var sidebarFocusAreaEl = document.getElementById('sidebarFocusArea'); var sidebarObjectiveCountEl = document.getElementById('sidebarObjectiveCount'); var sidebarInsightCountEl = document.getElementById('sidebarInsightCount'); var readiness = null; if (currentProject && currentProject.insights && typeof currentProject.insights.gaugeValue !== 'undefined') { readiness = Math.round(Number(currentProject.insights.gaugeValue || 0)); } else if (currentProject && currentProject.transformationScore) { readiness = parseInt(String(currentProject.transformationScore).replace('%',''), 10); } if (readinessEl) { readinessEl.textContent = (readiness !== null && !isNaN(readiness)) ? (readiness + '%') : '--'; } if (readinessPercentEl) { readinessPercentEl.textContent = (readiness !== null && !isNaN(readiness)) ? (readiness + '%') : '--'; } if (readinessCircleEl && readiness !== null && !isNaN(readiness)) { var circumference = 2 * Math.PI * 52; var offset = circumference - (readiness / 100) * circumference; setTimeout(function() { readinessCircleEl.style.strokeDashoffset = offset; }, 100); } // Update sidebar readiness ring if (sidebarReadinessPercentEl) { sidebarReadinessPercentEl.textContent = (readiness !== null && !isNaN(readiness)) ? (readiness + '%') : '--'; } if (sidebarReadinessCircleEl && readiness !== null && !isNaN(readiness)) { var sidebarCircumference = 2 * Math.PI * 42; var sidebarOffset = sidebarCircumference - (readiness / 100) * sidebarCircumference; setTimeout(function() { sidebarReadinessCircleEl.style.strokeDasharray = sidebarCircumference; sidebarReadinessCircleEl.style.strokeDashoffset = sidebarOffset; }, 100); } if (readinessLabelEl) { if (currentProject && currentProject.insights && currentProject.insights.readinessStatus) { readinessLabelEl.textContent = currentProject.insights.readinessStatus; } else { readinessLabelEl.textContent = 'Readiness Score'; } } var objectives = (projectObjectives && projectObjectives.length) ? projectObjectives : []; var activeCount = 0; var tasksTotal = 0; var tasksCompleted = 0; objectives.forEach(function(obj){ obj = normalizeObjective(obj); if (!obj.isCompleted) activeCount += 1; var oid = obj && (obj._id || obj.id); var taskItems = Array.isArray(objectiveTasks[oid]) ? objectiveTasks[oid] : []; taskItems.forEach(function(task) { tasksTotal += 1; if (task && task.isComplete) tasksCompleted += 1; }); }); if (activeValueEl) activeValueEl.textContent = String(activeCount); if (activeLabelEl) { if (objectives.length === 0) { activeLabelEl.textContent = 'No objectives yet'; } else if (activeCount === 0) { activeLabelEl.textContent = 'All objectives completed'; } else { var taskText = tasksTotal ? (tasksCompleted + '/' + tasksTotal + ' tasks') : 'No tasks yet'; activeLabelEl.textContent = activeCount + ' active of ' + objectives.length + ' - ' + taskText; } } // Update sidebar objective count if (sidebarObjectiveCountEl) { sidebarObjectiveCountEl.textContent = String(objectives.length); } var priorityTitle = 'Define your first objective'; var priorityDescription = 'Add an objective or KPI to surface your focus areas.'; if (currentProject && currentProject.insights) { if (currentProject.insights.lowestPillarName) { priorityTitle = currentProject.insights.lowestPillarName; priorityDescription = currentProject.insights.lowestPillarStatus || currentProject.insights.lowestPillarRecommendation || 'Focus here to raise your readiness.'; } else if (currentProject.insights.quickWin) { priorityTitle = 'Quick Win'; priorityDescription = currentProject.insights.quickWin; } } if (priorityTitleEl) priorityTitleEl.textContent = priorityTitle; if (priorityDescEl) priorityDescEl.textContent = priorityDescription; // Update sidebar focus area if (sidebarFocusAreaEl) { sidebarFocusAreaEl.textContent = priorityTitle; } // Update sidebar insight count (use KPIs count as proxy for insights) if (sidebarInsightCountEl) { var insightCount = (projectKpis && projectKpis.length) ? projectKpis.length : 0; if (currentProject && currentProject.insights && currentProject.insights.pillars) { insightCount = Math.max(insightCount, Object.keys(currentProject.insights.pillars).length); } sidebarInsightCountEl.textContent = String(insightCount); } } // Tab switching function switchTab(tabName) { closeMobileChat(); var targetPanel = document.getElementById(tabName); if (!targetPanel) { tabName = 'roadmap'; // Default to roadmap targetPanel = document.getElementById('roadmap'); } // Show "Coming Soon" notification for features under development if (tabName === 'roadmap' || tabName === 'kpis') { var featureName = tabName === 'roadmap' ? 'Roadmap' : 'KPIs'; if (typeof Swal !== 'undefined') { Swal.fire({ icon: 'info', title: featureName + ' Coming Soon', text: 'This feature is under active development. Stay tuned!', timer: 3000, showConfirmButton: false }); } } // Update sidebar nav active state var sidebarLinks = document.querySelectorAll('.sidebar-link[data-tab]'); sidebarLinks.forEach(function(link) { var linkTab = link.getAttribute('data-tab'); if (linkTab === tabName) { link.classList.add('is-active'); } else { link.classList.remove('is-active'); } }); // Update tab panels var tabPanels = document.querySelectorAll('.tab-panel'); tabPanels.forEach(function(panel) { panel.classList.remove('active'); }); if (targetPanel) { targetPanel.classList.add('active'); } currentTab = tabName; updateMobileNavActive(tabName); loadTabContent(tabName); } function updateMobileNavActive(tabName) { var buttons = document.querySelectorAll('.mobile-tab-button'); if (!buttons || !buttons.length) { return; } buttons.forEach(function(button) { var target = button.getAttribute('data-tab-target'); if (target === 'chat') { return; } if (target === tabName) { button.classList.add('active'); } else { button.classList.remove('active'); } }); } function setMobileChatButtonState(isActive) { var chatButton = document.querySelector('.mobile-chat-button'); if (!chatButton) { return; } if (isActive) { chatButton.classList.add('active'); } else { chatButton.classList.remove('active'); } } function toggleMobileChat() { var aside = document.getElementById('assistantSidebar'); if (!aside) { return; } if (aside.classList.contains('mobile-visible')) { closeMobileChat(); } else { openMobileChat(); } } function openMobileChat() { var aside = document.getElementById('assistantSidebar'); if (!aside) { return; } // Use fullscreen mode for chat (UX enhancement from Jan 2026 meeting) aside.classList.add('fullscreen-chat'); aside.classList.add('mobile-visible'); document.body.classList.add('fullscreen-chat-open'); document.body.classList.add('mobile-chat-open'); setMobileChatButtonState(true); setTimeout(function() { var input = document.getElementById('chatInput'); if (input) { input.focus(); } }, 250); } function closeMobileChat() { var aside = document.getElementById('assistantSidebar'); if (!aside) { return; } aside.classList.remove('fullscreen-chat'); aside.classList.remove('mobile-visible'); document.body.classList.remove('fullscreen-chat-open'); document.body.classList.remove('mobile-chat-open'); setMobileChatButtonState(false); } // Load tab content function loadTabContent(tabName) { var tabPanel = document.getElementById(tabName); if (!tabPanel) return; // Clear existing content while (tabPanel.firstChild) { tabPanel.removeChild(tabPanel.firstChild); } // Load rich placeholder content based on tab if (tabName === 'pulse') { loadPulseContent(tabPanel); } else if (tabName === 'roadmap') { loadRoadmapContent(tabPanel); } else if (tabName === 'kpis') { loadKPIsContent(tabPanel); } else if (tabName === 'learning') { loadLearningContent(tabPanel); } else if (tabName === 'files') { loadFilesContent(tabPanel); } } // Navigation function goBackToDashboard() { phoros.page.change('dashboard'); } // Content loading functions // ---- Planner Objective Functions (Local persistence V1) ---- function normalizeObjective(obj) { if (!obj || typeof obj !== 'object') return obj; if (!Array.isArray(obj._tasks)) { if (Array.isArray(obj.tasks)) { obj._tasks = obj.tasks.slice(); } else { obj._tasks = []; } } if (typeof obj._tasksLoading !== 'boolean') obj._tasksLoading = false; return obj; } function loadObjectives() { var container = document.getElementById('objectivesContainer'); if (!container) return; var source = (projectObjectives && projectObjectives.length) ? projectObjectives : []; source = (source || []).map(normalizeObjective); if (!source || source.length === 0) { showEmptyObjectives(); } else { renderObjectivesList(source); } syncPinnedPulseFromObjectives(); renderPinnedPulseList(); } function renderObjectivesList(objectives) { var container = document.getElementById('objectivesContainer'); if (!container) return; container.textContent = ''; var sorted = sortObjectivesForDisplay((objectives || []).map(normalizeObjective)); projectObjectives = sorted; // Sync task caches with current objectives var nextTasks = {}; var nextLoading = {}; projectObjectives.forEach(function(obj) { var oid = obj && (obj._id || obj.id); if (!oid) return; nextTasks[oid] = Array.isArray(objectiveTasks[oid]) ? objectiveTasks[oid] : []; nextLoading[oid] = objectiveTaskLoading[oid] === true; }); objectiveTasks = nextTasks; objectiveTaskLoading = nextLoading; sorted.forEach(function(obj) { obj = normalizeObjective(obj); var oid = obj && (obj._id || obj.id); if (oid) { if (!Array.isArray(objectiveTasks[oid])) objectiveTasks[oid] = []; if (typeof objectiveTaskLoading[oid] !== 'boolean') objectiveTaskLoading[oid] = false; } var card = document.createElement('div'); card.className = 'objective-card'; var title = document.createElement('div'); title.className = 'objective-title'; title.textContent = obj.title || 'Objective'; if (obj.isCompleted) { var badge = document.createElement('span'); badge.style.cssText = 'margin-left:8px; color:#059669; font-weight:600; font-size:13px;'; badge.textContent = 'Completed'; title.appendChild(badge); } var meta = document.createElement('div'); meta.className = 'objective-meta'; var dueDate = obj.targetDateISO || obj.targetDate; var dueText = dueDate ? ('Due: ' + new Date(dueDate).toLocaleDateString()) : 'No due date'; var statusText = obj.isCompleted ? 'Status: Completed' : 'Status: In progress'; meta.appendChild(document.createTextNode(dueText)); var sep = document.createElement('span'); sep.textContent = ' - '; meta.appendChild(sep); meta.appendChild(document.createTextNode(statusText)); var desc = document.createElement('div'); desc.style.cssText = 'color:#4b5563; font-size:14px; margin-top:6px; white-space:pre-wrap;'; desc.textContent = obj.description || ''; var actions = document.createElement('div'); actions.className = 'objective-actions'; var toggleBtn = document.createElement('button'); toggleBtn.className = 'btn ' + (obj.isCompleted ? 'btn-secondary' : 'btn-primary'); toggleBtn.textContent = obj.isCompleted ? 'Mark Incomplete' : 'Mark Complete'; toggleBtn.onclick = function() { toggleObjectiveCompletion(obj._id || obj.id); }; var addTaskBtn = document.createElement('button'); addTaskBtn.className = 'btn btn-primary'; addTaskBtn.textContent = 'Add Task'; addTaskBtn.onclick = function(){ openCreateTaskModal(obj._id || obj.id); }; var editBtn = document.createElement('button'); editBtn.className = 'btn btn-secondary'; editBtn.textContent = 'Edit'; editBtn.onclick = function(){ openCreateObjectiveModal(obj, { mode: 'edit' }); }; var deleteBtn = document.createElement('button'); deleteBtn.className = 'btn btn-secondary'; deleteBtn.textContent = 'Delete'; deleteBtn.onclick = function(){ confirmDeleteObjective(obj._id || obj.id); }; actions.appendChild(toggleBtn); actions.appendChild(addTaskBtn); actions.appendChild(editBtn); actions.appendChild(deleteBtn); card.appendChild(title); card.appendChild(meta); card.appendChild(desc); card.appendChild(actions); var taskList = document.createElement('div'); taskList.className = 'task-list'; taskList.id = 'taskList_' + (oid || ('local_' + Math.random())); card.appendChild(taskList); renderTaskListForObjective(oid); container.appendChild(card); }); syncPinnedPulseFromObjectives(); renderPinnedPulseList(); } function renderTaskListForObjective(objectiveId) { var list = document.getElementById('taskList_' + objectiveId); if (!list) return; list.textContent = ''; var tasks = Array.isArray(objectiveTasks[objectiveId]) ? objectiveTasks[objectiveId] : []; var isLoading = objectiveTaskLoading[objectiveId] === true; if (!tasks || tasks.length === 0) { var placeholder = document.createElement('div'); placeholder.style.cssText = 'color:#6b7280; font-size:13px;'; placeholder.textContent = isLoading ? 'Loading tasks...' : 'No tasks yet.'; list.appendChild(placeholder); return; } tasks.forEach(function(task){ var taskId = task && (task._id || task.id); var row = document.createElement('div'); row.className = 'task-item'; var main = document.createElement('div'); main.className = 'task-main'; var cb = document.createElement('input'); cb.type = 'checkbox'; cb.className = 'task-checkbox-input'; cb.checked = !!(task && task.isComplete); cb.onchange = function(){ toggleTaskCompletion(taskId, objectiveId, cb.checked); }; var details = document.createElement('div'); details.className = 'task-details'; var titleEl = document.createElement('div'); titleEl.className = 'task-title'; titleEl.textContent = (task && task.title) ? task.title : 'Task'; details.appendChild(titleEl); if (task && task.description) { var descEl = document.createElement('div'); descEl.className = 'task-desc'; descEl.textContent = task.description; details.appendChild(descEl); } if (task && task.dueDateISO) { var meta = document.createElement('div'); meta.className = 'task-meta'; meta.textContent = 'Due ' + formatFriendlyDate(task.dueDateISO); details.appendChild(meta); } main.appendChild(cb); main.appendChild(details); row.appendChild(main); var actions = document.createElement('div'); actions.className = 'task-actions'; var editBtn = document.createElement('button'); editBtn.className = 'btn btn-secondary btn-compact'; editBtn.textContent = 'Edit'; editBtn.onclick = function(){ openEditTaskModal(task, objectiveId); }; actions.appendChild(editBtn); var deleteBtn = document.createElement('button'); deleteBtn.className = 'btn btn-secondary btn-compact'; deleteBtn.textContent = 'Delete'; deleteBtn.onclick = function(){ confirmDeleteTask(taskId, objectiveId); }; actions.appendChild(deleteBtn); row.appendChild(actions); list.appendChild(row); }); } function openCreateTaskModal(objectiveId) { var overlay = document.createElement('div'); overlay.className = 'modal-overlay'; var card = document.createElement('div'); card.className = 'modal-card'; var title = document.createElement('div'); title.className = 'modal-title'; title.textContent = 'Add Task'; var f1 = document.createElement('div'); f1.className = 'modal-field'; var l1 = document.createElement('label'); l1.textContent = 'Title'; var i1 = document.createElement('input'); i1.className = 'modal-input'; i1.placeholder = 'e.g., Draft vision statement'; f1.appendChild(l1); f1.appendChild(i1); var f2 = document.createElement('div'); f2.className = 'modal-field'; var l2 = document.createElement('label'); l2.textContent = 'Description'; var i2 = document.createElement('textarea'); i2.className = 'modal-textarea'; f2.appendChild(l2); f2.appendChild(i2); var actions = document.createElement('div'); actions.className = 'modal-actions'; var cancel = document.createElement('button'); cancel.className = 'btn btn-secondary'; cancel.textContent = 'Cancel'; cancel.onclick = function(){ document.body.removeChild(overlay); }; var save = document.createElement('button'); save.className = 'btn btn-primary'; save.textContent = 'Save Task'; save.onclick = function(){ if (!i1.value.trim()) { i1.focus(); return; } objectiveTaskLoading[objectiveId] = true; if (!Array.isArray(objectiveTasks[objectiveId])) objectiveTasks[objectiveId] = []; phoros.processor('iWGwhXccDY6Wx2iRM', { type:'createTask', payload:{ project_id: currentProject ? currentProject.id : null, objective_id: objectiveId, title: i1.value.trim(), description: i2.value.trim() } }, function(error, result){ document.body.removeChild(overlay); if (!error && result && result.success) { if (typeof Swal !== 'undefined') { Swal.fire({ icon: 'success', title: 'Task created', timer: 1300, showConfirmButton: false }); } } phoros.processor('iWGwhXccDY6Wx2iRM', { type:'getTasksByObjective', payload:{ objective_id: objectiveId } }, function(_, r){ var items = (r && r.success && r.data && r.data.tasks) ? r.data.tasks : []; objectiveTasks[objectiveId] = Array.isArray(items) ? items : []; objectiveTaskLoading[objectiveId] = false; renderTaskListForObjective(objectiveId); updateHeroMetrics(); renderProjectProgressSummary(); }); }); }; actions.appendChild(cancel); actions.appendChild(save); card.appendChild(title); card.appendChild(f1); card.appendChild(f2); card.appendChild(actions); overlay.appendChild(card); document.body.appendChild(overlay); } function openEditTaskModal(task, objectiveId) { if (!task) return; var taskId = task._id || task.id; if (!taskId) return; var overlay = document.createElement('div'); overlay.className = 'modal-overlay'; var card = document.createElement('div'); card.className = 'modal-card'; var title = document.createElement('div'); title.className = 'modal-title'; title.textContent = 'Edit Task'; var f1 = document.createElement('div'); f1.className = 'modal-field'; var l1 = document.createElement('label'); l1.textContent = 'Title'; var i1 = document.createElement('input'); i1.className = 'modal-input'; i1.value = task.title || ''; f1.appendChild(l1); f1.appendChild(i1); var f2 = document.createElement('div'); f2.className = 'modal-field'; var l2 = document.createElement('label'); l2.textContent = 'Description'; var i2 = document.createElement('textarea'); i2.className = 'modal-textarea'; i2.value = task.description || ''; f2.appendChild(l2); f2.appendChild(i2); var actions = document.createElement('div'); actions.className = 'modal-actions'; var cancel = document.createElement('button'); cancel.className = 'btn btn-secondary'; cancel.textContent = 'Cancel'; cancel.onclick = function(){ document.body.removeChild(overlay); }; var save = document.createElement('button'); save.className = 'btn btn-primary'; save.textContent = 'Update Task'; save.onclick = function(){ if (!i1.value.trim()) { i1.focus(); return; } var payload = { task_id: taskId, title: i1.value.trim(), description: i2.value.trim() }; objectiveTaskLoading[objectiveId] = true; phoros.processor('iWGwhXccDY6Wx2iRM', { type:'updateTask', payload: payload }, function(error, result){ document.body.removeChild(overlay); if (!error && result && result.success) { if (typeof Swal !== 'undefined') { Swal.fire({ icon: 'success', title: 'Task updated', timer: 1300, showConfirmButton: false }); } } phoros.processor('iWGwhXccDY6Wx2iRM', { type:'getTasksByObjective', payload:{ objective_id: objectiveId } }, function(_, r){ var items = (r && r.success && r.data && r.data.tasks) ? r.data.tasks : []; objectiveTasks[objectiveId] = Array.isArray(items) ? items : []; objectiveTaskLoading[objectiveId] = false; renderTaskListForObjective(objectiveId); updateHeroMetrics(); renderProjectProgressSummary(); }); }); }; actions.appendChild(cancel); actions.appendChild(save); card.appendChild(title); card.appendChild(f1); card.appendChild(f2); card.appendChild(actions); overlay.appendChild(card); document.body.appendChild(overlay); } function confirmDeleteTask(taskId, objectiveId) { if (!taskId) return; var executeDelete = function() { objectiveTaskLoading[objectiveId] = true; phoros.processor('iWGwhXccDY6Wx2iRM', { type:'deleteTask', payload:{ task_id: taskId } }, function(){ phoros.processor('iWGwhXccDY6Wx2iRM', { type:'getTasksByObjective', payload:{ objective_id: objectiveId } }, function(_, r){ var items = (r && r.success && r.data && r.data.tasks) ? r.data.tasks : []; objectiveTasks[objectiveId] = Array.isArray(items) ? items : []; objectiveTaskLoading[objectiveId] = false; renderTaskListForObjective(objectiveId); updateHeroMetrics(); renderProjectProgressSummary(); }); }); }; if (typeof Swal !== 'undefined') { Swal.fire({ title: 'Delete task?', text: 'This task will be removed from the objective.', icon: 'warning', showCancelButton: true, confirmButtonColor: '#ef4444', confirmButtonText: 'Delete', cancelButtonText: 'Cancel' }).then(function(result) { if (result && result.isConfirmed) { executeDelete(); } }); } else { if (window.confirm('Delete this task?')) { executeDelete(); } } } function toggleTaskCompletion(taskId, objectiveId, isChecked) { if (!taskId) return; objectiveTaskLoading[objectiveId] = true; phoros.processor('iWGwhXccDY6Wx2iRM', { type:'updateTaskStatus', payload:{ task_id: taskId, isComplete: !!isChecked } }, function(){ phoros.processor('iWGwhXccDY6Wx2iRM', { type:'getTasksByObjective', payload:{ objective_id: objectiveId } }, function(_, r){ var items = (r && r.success && r.data && r.data.tasks) ? r.data.tasks : []; objectiveTasks[objectiveId] = Array.isArray(items) ? items : []; objectiveTaskLoading[objectiveId] = false; renderTaskListForObjective(objectiveId); updateHeroMetrics(); renderProjectProgressSummary(); }); }); } function toggleObjectiveCompletion(objectiveId) { var target = getObjectiveFromCache(objectiveId); var newVal = !(target && target.isCompleted === true); phoros.processor('iWGwhXccDY6Wx2iRM', { type: 'updateObjectiveStatus', payload: { objective_id: (target && target._id) || objectiveId, isCompleted: newVal } }, function(){ var updated = Object.assign({}, target || {}, { _id: (target && target._id) || objectiveId, id: (target && target.id) || objectiveId, isCompleted: newVal }); if (newVal) { updated.dateCompletedISO = new Date().toISOString(); } else if (updated.dateCompletedISO) { delete updated.dateCompletedISO; } upsertObjectiveCache(updated); renderObjectivesList(projectObjectives); updateHeroMetrics(); renderProjectProgressSummary(); }); } function openCreateObjectiveModal(prefill, options) { var overlay = document.createElement('div'); overlay.className = 'modal-overlay'; overlay.onclick = function(e) { if (e.target === overlay) document.body.removeChild(overlay); }; var card = document.createElement('div'); card.className = 'modal-card objective-modal'; var isEdit = options && options.mode === 'edit'; var objectiveId = prefill && (prefill._id || prefill.id); var currentStage = getRoadmapStageMeta(prefill && (prefill.targetDateISO || prefill.targetDate)); var currentLaneKey = prefill && prefill.laneKey ? prefill.laneKey : (prefill ? getRoadmapLaneKey((prefill.title || '') + ' ' + (prefill.description || '')) : 'platform'); var currentLaneDef = ROADMAP_LANES.find(function(l) { return l.key === currentLaneKey; }) || ROADMAP_LANES[0]; // Close button var closeBtn = document.createElement('button'); closeBtn.className = 'objective-modal-close'; closeBtn.onclick = function() { document.body.removeChild(overlay); }; var closeIcon = document.createElement('i'); closeIcon.setAttribute('data-lucide', 'x'); closeBtn.appendChild(closeIcon); card.appendChild(closeBtn); // Header with icon and lane indicator var header = document.createElement('div'); header.className = 'objective-modal-header'; var headerIcon = document.createElement('div'); headerIcon.className = 'objective-modal-icon'; headerIcon.setAttribute('data-lane', currentLaneKey); var iconInner = document.createElement('i'); iconInner.setAttribute('data-lucide', 'target'); headerIcon.appendChild(iconInner); var headerInfo = document.createElement('div'); headerInfo.className = 'objective-modal-header-info'; var headerTitle = document.createElement('h2'); headerTitle.textContent = isEdit ? 'Manage Objective' : 'New Objective'; var headerMeta = document.createElement('div'); headerMeta.className = 'objective-modal-meta'; if (isEdit) { var laneBadge = document.createElement('span'); laneBadge.className = 'objective-modal-lane-badge'; laneBadge.setAttribute('data-lane', currentLaneKey); laneBadge.textContent = currentLaneDef.title; headerMeta.appendChild(laneBadge); var stageBadge = document.createElement('span'); stageBadge.className = 'objective-modal-stage-badge'; stageBadge.setAttribute('data-stage', currentStage.key); stageBadge.textContent = currentStage.label; headerMeta.appendChild(stageBadge); } headerInfo.appendChild(headerTitle); headerInfo.appendChild(headerMeta); header.appendChild(headerIcon); header.appendChild(headerInfo); card.appendChild(header); // Pre-declare dateInput so stage selector can reference it var dateInput = document.createElement('input'); dateInput.className = 'objective-modal-input'; dateInput.type = 'date'; if (prefill && (prefill.targetDateISO || prefill.targetDate)) { dateInput.value = formatDateForInput(prefill.targetDateISO || prefill.targetDate); } // Stage selector (visual tabs) - show for both new and edit var stageSelector = document.createElement('div'); stageSelector.className = 'objective-modal-stages'; var stages = [ { key: 'now', label: 'Now', days: 30 }, { key: 'next', label: 'Next', days: 90 }, { key: 'later', label: 'Later', days: 180 }, { key: 'plan', label: 'Plan', days: null } ]; var selectedStageKey = currentStage.key; stages.forEach(function(stage) { var stageTab = document.createElement('button'); stageTab.className = 'objective-modal-stage-tab'; if (stage.key === selectedStageKey) stageTab.classList.add('active'); stageTab.setAttribute('data-stage', stage.key); stageTab.textContent = stage.label; stageTab.onclick = function() { stageSelector.querySelectorAll('.objective-modal-stage-tab').forEach(function(t) { t.classList.remove('active'); }); stageTab.classList.add('active'); selectedStageKey = stage.key; // Update date input based on stage if (stage.days !== null) { var newDate = new Date(); newDate.setDate(newDate.getDate() + stage.days); dateInput.value = newDate.toISOString().split('T')[0]; } else { dateInput.value = ''; } }; stageSelector.appendChild(stageTab); }); card.appendChild(stageSelector); // Form fields var form = document.createElement('div'); form.className = 'objective-modal-form'; // Title field var titleField = document.createElement('div'); titleField.className = 'objective-modal-field'; var titleLabel = document.createElement('label'); titleLabel.textContent = 'Title'; var titleInput = document.createElement('input'); titleInput.className = 'objective-modal-input'; titleInput.placeholder = 'What do you want to achieve?'; if (prefill && prefill.title) titleInput.value = prefill.title; titleField.appendChild(titleLabel); titleField.appendChild(titleInput); form.appendChild(titleField); // Description field var descField = document.createElement('div'); descField.className = 'objective-modal-field'; var descLabel = document.createElement('label'); descLabel.textContent = 'Description'; var descInput = document.createElement('textarea'); descInput.className = 'objective-modal-textarea'; descInput.placeholder = 'Describe the outcome and how you\'ll measure success...'; descInput.rows = 3; if (prefill && prefill.description) descInput.value = prefill.description; descField.appendChild(descLabel); descField.appendChild(descInput); form.appendChild(descField); // Date and Lane row var rowFields = document.createElement('div'); rowFields.className = 'objective-modal-row'; // Date field (dateInput already created above for stage selector) var dateField = document.createElement('div'); dateField.className = 'objective-modal-field'; var dateLabel = document.createElement('label'); dateLabel.textContent = 'Target Date'; dateField.appendChild(dateLabel); dateField.appendChild(dateInput); rowFields.appendChild(dateField); // Lane selector var laneField = document.createElement('div'); laneField.className = 'objective-modal-field'; var laneLabel = document.createElement('label'); laneLabel.textContent = 'Pillar'; var laneSelect = document.createElement('select'); laneSelect.className = 'objective-modal-select'; ROADMAP_LANES.forEach(function(lane) { var opt = document.createElement('option'); opt.value = lane.key; opt.textContent = lane.title; if (lane.key === currentLaneKey) opt.selected = true; laneSelect.appendChild(opt); }); laneField.appendChild(laneLabel); laneField.appendChild(laneSelect); rowFields.appendChild(laneField); form.appendChild(rowFields); card.appendChild(form); // Quick Actions (only in edit mode) if (isEdit && objectiveId) { var quickActions = document.createElement('div'); quickActions.className = 'objective-modal-quick-actions'; var quickLabel = document.createElement('div'); quickLabel.className = 'objective-modal-quick-label'; quickLabel.textContent = 'Quick Actions'; quickActions.appendChild(quickLabel); var actionButtons = document.createElement('div'); actionButtons.className = 'objective-modal-action-buttons'; // Mark Complete var isCompleted = prefill && prefill.isCompleted === true; var completeBtn = document.createElement('button'); completeBtn.className = 'objective-modal-action-btn' + (isCompleted ? ' completed' : ''); var completeIcon = document.createElement('i'); completeIcon.setAttribute('data-lucide', isCompleted ? 'check-circle' : 'circle'); completeBtn.appendChild(completeIcon); completeBtn.appendChild(document.createTextNode(isCompleted ? ' Completed' : ' Mark Done')); completeBtn.onclick = function() { var newStatus = !isCompleted; phoros.processor('iWGwhXccDY6Wx2iRM', { type: 'updateObjective', payload: { objective_id: objectiveId, isCompleted: newStatus } }, function(){}); var updated = Object.assign({}, prefill, { isCompleted: newStatus }); upsertObjectiveCache(updated); document.body.removeChild(overlay); refreshAllViews(); }; actionButtons.appendChild(completeBtn); // Duplicate var dupeBtn = document.createElement('button'); dupeBtn.className = 'objective-modal-action-btn'; var dupeIcon = document.createElement('i'); dupeIcon.setAttribute('data-lucide', 'copy'); dupeBtn.appendChild(dupeIcon); dupeBtn.appendChild(document.createTextNode(' Duplicate')); dupeBtn.onclick = function() { document.body.removeChild(overlay); openCreateObjectiveModal({ title: (prefill.title || '') + ' (copy)', description: prefill.description || '' }); }; actionButtons.appendChild(dupeBtn); // Delete var deleteBtn = document.createElement('button'); deleteBtn.className = 'objective-modal-action-btn danger'; var deleteIcon = document.createElement('i'); deleteIcon.setAttribute('data-lucide', 'trash-2'); deleteBtn.appendChild(deleteIcon); deleteBtn.appendChild(document.createTextNode(' Delete')); deleteBtn.onclick = function() { document.body.removeChild(overlay); confirmDeleteObjective(objectiveId); }; actionButtons.appendChild(deleteBtn); quickActions.appendChild(actionButtons); card.appendChild(quickActions); } // Footer actions var actions = document.createElement('div'); actions.className = 'objective-modal-actions'; var cancelBtn = document.createElement('button'); cancelBtn.className = 'btn btn-secondary'; cancelBtn.textContent = 'Cancel'; cancelBtn.onclick = function() { document.body.removeChild(overlay); }; var saveBtn = document.createElement('button'); saveBtn.className = 'btn btn-primary'; var saveIcon = document.createElement('i'); saveIcon.setAttribute('data-lucide', isEdit ? 'check' : 'plus'); saveBtn.appendChild(saveIcon); saveBtn.appendChild(document.createTextNode(isEdit ? ' Save Changes' : ' Create Objective')); saveBtn.onclick = function() { var titleVal = titleInput.value.trim(); if (!titleVal) { titleInput.focus(); return; } var dateIso = dateInput.value ? new Date(dateInput.value + 'T00:00:00Z').toISOString() : null; // Check if this is a local/auto-generated ID (starts with 'obj_') var isLocalId = objectiveId && typeof objectiveId === 'string' && objectiveId.indexOf('obj_') === 0; var shouldUpdate = isEdit && !isLocalId; if (shouldUpdate) { var updatePayload = { objective_id: objectiveId, title: titleVal, description: descInput.value.trim(), targetDateISO: dateIso, laneKey: laneSelect.value }; phoros.processor('iWGwhXccDY6Wx2iRM', { type: 'updateObjective', payload: updatePayload }, function(error, result) { var updated = (result && result.success && result.data && result.data.objective) ? result.data.objective : null; if (!updated) { updated = Object.assign({}, prefill || {}, { _id: objectiveId, title: updatePayload.title, description: updatePayload.description, targetDateISO: updatePayload.targetDateISO, laneKey: updatePayload.laneKey }); } if (prefill && typeof prefill.isCompleted !== 'undefined' && typeof updated.isCompleted === 'undefined') { updated.isCompleted = prefill.isCompleted; } upsertObjectiveCache(updated); document.body.removeChild(overlay); refreshAllViews(); }); } else { // Remove old local entry if converting from auto-generated var oldLocalId = isLocalId ? objectiveId : null; var payload = { project_id: currentProject ? currentProject.id : null, title: titleVal, description: descInput.value.trim(), targetDateISO: dateIso, laneKey: laneSelect.value, isCompleted: false }; phoros.processor('iWGwhXccDY6Wx2iRM', { type: 'createObjective', payload: payload }, function(error, result) { var created = (result && result.success && result.data && result.data.objective) ? result.data.objective : null; if (!created) { created = { id: 'obj_' + Date.now(), projectId: payload.project_id, title: payload.title, description: payload.description, targetDateISO: payload.targetDateISO, laneKey: payload.laneKey, isCompleted: false, dateCreatedISO: new Date().toISOString() }; } // Remove old local/auto-generated entry if we were converting it if (oldLocalId) { projectObjectives = projectObjectives.filter(function(o) { var oid = o._id || o.id; return oid !== oldLocalId; }); delete objectiveTasks[oldLocalId]; delete objectiveTaskLoading[oldLocalId]; } created = normalizeObjective(created); upsertObjectiveCache(created); var newId = created._id || created.id; objectiveTasks[newId] = objectiveTasks[newId] || []; objectiveTaskLoading[newId] = false; document.body.removeChild(overlay); refreshAllViews(); }); } }; actions.appendChild(cancelBtn); actions.appendChild(saveBtn); card.appendChild(actions); overlay.appendChild(card); document.body.appendChild(overlay); // Refresh Lucide icons if (typeof DAVA_refreshIcons === 'function') { setTimeout(DAVA_refreshIcons, 0); } // Focus title input setTimeout(function() { titleInput.focus(); }, 100); } function refreshAllViews() { renderObjectivesList(projectObjectives); updateHeroMetrics(); renderProjectProgressSummary(); if (currentTab === 'roadmap') { loadTabContent('roadmap'); } } function confirmDeleteObjective(objectiveId) { if (!objectiveId) return; var executeDelete = function() { phoros.processor('iWGwhXccDY6Wx2iRM', { type: 'deleteObjective', payload: { objective_id: objectiveId } }, function(){ // Server result not critical for local responsiveness }); removeObjectiveFromCache(objectiveId); renderObjectivesList(projectObjectives); updateHeroMetrics(); renderProjectProgressSummary(); }; if (typeof Swal !== 'undefined') { Swal.fire({ title: 'Delete objective?', text: 'This will remove the objective and its tasks from your project workspace.', icon: 'warning', showCancelButton: true, confirmButtonColor: '#ef4444', confirmButtonText: 'Delete', cancelButtonText: 'Cancel' }).then(function(result) { if (result && result.isConfirmed) { executeDelete(); } }); } else { if (window.confirm('Delete this objective and its tasks?')) { executeDelete(); } } } function getRoadmapLaneKey(text) { var value = (text || '').toLowerCase(); if (value.indexOf('data') !== -1 || value.indexOf('analytics') !== -1 || value.indexOf('insight') !== -1 || value.indexOf('kpi') !== -1) { return 'data'; } if (value.indexOf('platform') !== -1 || value.indexOf('system') !== -1 || value.indexOf('core') !== -1 || value.indexOf('tech') !== -1 || value.indexOf('architecture') !== -1) { return 'platform'; } if (value.indexOf('change') !== -1 || value.indexOf('training') !== -1 || value.indexOf('adoption') !== -1 || value.indexOf('culture') !== -1) { return 'change'; } if (value.indexOf('customer') !== -1 || value.indexOf('experience') !== -1 || value.indexOf('journey') !== -1 || value.indexOf('cx') !== -1 || value.indexOf('service') !== -1) { return 'customer'; } return 'customer'; } function getRoadmapStageMeta(targetDateIso, isCompleted) { var meta = { key: 'plan', label: 'Plan', note: 'Set a target date', friendlyDate: '' }; // If completed, show in "past" regardless of date if (isCompleted) { meta.key = 'past'; meta.label = 'Done'; meta.note = 'Completed'; if (targetDateIso) { meta.friendlyDate = formatFriendlyDate(targetDateIso); } return meta; } if (!targetDateIso) { return meta; } var parsed = new Date(targetDateIso); if (isNaN(parsed.getTime())) { return meta; } var now = new Date(); var diffDays = Math.round((parsed.getTime() - now.getTime()) / (1000 * 60 * 60 * 24)); // Past dates (negative days) go to "past" column if (diffDays < 0) { meta.key = 'past'; meta.label = 'Past'; meta.note = 'Overdue'; } else if (diffDays <= 45) { meta.key = 'now'; meta.label = 'Now'; meta.note = 'Active window'; } else if (diffDays <= 120) { meta.key = 'next'; meta.label = 'Next'; meta.note = 'Schedule coming up'; } else { meta.key = 'later'; meta.label = 'Later'; meta.note = 'Long-range'; } meta.friendlyDate = formatFriendlyDate(targetDateIso); return meta; } function loadRoadmapContent(container) { var wrapper = document.createElement('div'); wrapper.className = 'tab-panel-content roadmap-v2'; // Collect all items with stage info var allItems = collectRoadmapItems(); var stageGroups = { past: [], now: [], next: [], later: [], plan: [] }; allItems.forEach(function(item) { var stage = getRoadmapStageMeta(item.targetDateISO, item.isCompleted); item._stage = stage; if (stageGroups[stage.key]) { stageGroups[stage.key].push(item); } }); // Header var header = document.createElement('div'); header.className = 'roadmap-v2-header'; var headerLeft = document.createElement('div'); var h3 = document.createElement('h3'); h3.textContent = 'Transformation Roadmap'; var sub = document.createElement('p'); sub.textContent = 'Your strategic journey at a glance'; headerLeft.appendChild(h3); headerLeft.appendChild(sub); var addBtn = document.createElement('button'); addBtn.className = 'btn btn-primary'; var addBtnIcon = document.createElement('i'); addBtnIcon.setAttribute('data-lucide', 'plus'); addBtnIcon.className = 'btn-icon'; addBtn.appendChild(addBtnIcon); addBtn.appendChild(document.createTextNode(' Add objective')); addBtn.onclick = function() { openCreateObjectiveModal({ title: 'New roadmap objective', description: 'Describe the initiative and set a target date.' }); }; header.appendChild(headerLeft); header.appendChild(addBtn); wrapper.appendChild(header); // Timeline visualization var timeline = renderRoadmapTimeline(allItems); wrapper.appendChild(timeline); // Stage-based list var stageList = document.createElement('div'); stageList.className = 'roadmap-v2-stages'; var stages = [ { key: 'past', label: 'Past', description: 'Completed milestones', accent: 'past', icon: 'check-circle' }, { key: 'now', label: 'Now', description: 'Active focus (next 45 days)', accent: 'now', icon: 'zap' }, { key: 'next', label: 'Next', description: 'Coming up (45-120 days)', accent: 'next', icon: 'clock' }, { key: 'later', label: 'Later', description: 'On the horizon (120+ days)', accent: 'later', icon: 'calendar' }, { key: 'plan', label: 'Plan', description: 'Unscheduled initiatives', accent: 'plan', icon: 'lightbulb' } ]; stages.forEach(function(stage) { var items = stageGroups[stage.key]; var section = document.createElement('div'); section.className = 'roadmap-v2-stage'; section.setAttribute('data-stage', stage.key); var stageHeader = document.createElement('div'); stageHeader.className = 'roadmap-v2-stage-header'; var stageIndicator = document.createElement('div'); stageIndicator.className = 'roadmap-v2-stage-indicator ' + stage.accent; var stageIcon = document.createElement('i'); stageIcon.setAttribute('data-lucide', stage.icon); stageIndicator.appendChild(stageIcon); var stageInfo = document.createElement('div'); stageInfo.className = 'roadmap-v2-stage-info'; var stageTitle = document.createElement('h4'); stageTitle.textContent = stage.label; var stageCount = document.createElement('span'); stageCount.className = 'roadmap-v2-stage-count'; stageCount.textContent = items.length; stageTitle.appendChild(stageCount); var stageDesc = document.createElement('p'); stageDesc.textContent = stage.description; stageInfo.appendChild(stageTitle); stageInfo.appendChild(stageDesc); stageHeader.appendChild(stageIndicator); stageHeader.appendChild(stageInfo); section.appendChild(stageHeader); var itemsList = document.createElement('div'); itemsList.className = 'roadmap-v2-items'; if (items.length === 0) { var emptyState = document.createElement('div'); emptyState.className = 'roadmap-v2-empty'; emptyState.textContent = stage.key === 'plan' ? 'Add objectives to build your roadmap' : 'No objectives in this phase yet'; itemsList.appendChild(emptyState); } else { var showCount = stage.key === 'plan' && items.length > 5 ? 5 : items.length; for (var i = 0; i < showCount; i++) { itemsList.appendChild(renderRoadmapV2Item(items[i])); } if (stage.key === 'plan' && items.length > 5) { var showMore = document.createElement('button'); showMore.className = 'roadmap-v2-show-more'; showMore.textContent = 'Show ' + (items.length - 5) + ' more'; showMore.onclick = function() { var remaining = items.slice(5); remaining.forEach(function(item) { itemsList.insertBefore(renderRoadmapV2Item(item), showMore); }); showMore.remove(); }; itemsList.appendChild(showMore); } } section.appendChild(itemsList); stageList.appendChild(section); }); wrapper.appendChild(stageList); container.appendChild(wrapper); // Refresh Lucide icons after DOM is built if (typeof DAVA_refreshIcons === 'function') { setTimeout(DAVA_refreshIcons, 0); } } function collectRoadmapItems() { var items = []; var seen = {}; // From objectives (projectObjectives || []).forEach(function(obj) { obj = normalizeObjective(obj); var id = obj._id || obj.id; if (id && seen[id]) { return; } if (id) { seen[id] = true; } var laneKey = obj.laneKey || getRoadmapLaneKey((obj.title || '') + ' ' + (obj.description || '')); var laneDef = ROADMAP_LANES.find(function(l) { return l.key === laneKey; }) || ROADMAP_LANES[0]; items.push({ id: id, title: obj.title || 'Objective', summary: obj.description || '', targetDateISO: obj.targetDateISO || obj.targetDate || null, source: 'Objective', laneKey: laneKey, laneTitle: laneDef.title, objectiveId: id, isCompleted: obj.isCompleted === true }); }); // From assessment focus var focus = getPriorityFocus(); if (focus && focus.title && !seen['focus_' + focus.title]) { seen['focus_' + focus.title] = true; var focusLaneKey = getRoadmapLaneKey(focus.title + ' ' + (focus.description || '')); var focusLaneDef = ROADMAP_LANES.find(function(l) { return l.key === focusLaneKey; }) || ROADMAP_LANES[0]; items.push({ id: 'focus_' + focus.title, title: focus.title, summary: focus.description || 'Focus here to raise your readiness.', targetDateISO: null, source: 'Assessment', laneKey: focusLaneKey, laneTitle: focusLaneDef.title, objectiveId: null }); } // From quick win if (currentProject && currentProject.insights && currentProject.insights.quickWin) { var qw = currentProject.insights.quickWin; if (!seen['quickwin']) { seen['quickwin'] = true; var qwLaneKey = getRoadmapLaneKey(qw); var qwLaneDef = ROADMAP_LANES.find(function(l) { return l.key === qwLaneKey; }) || ROADMAP_LANES[0]; items.push({ id: 'quickwin', title: 'Quick Win', summary: qw, targetDateISO: null, source: 'Assessment', laneKey: qwLaneKey, laneTitle: qwLaneDef.title, objectiveId: null }); } } return items; } function renderRoadmapTimeline(items) { var timeline = document.createElement('div'); timeline.className = 'roadmap-v2-timeline'; // Group items by lane for the visual var laneData = {}; ROADMAP_LANES.forEach(function(lane) { laneData[lane.key] = { def: lane, items: [] }; }); items.forEach(function(item) { if (laneData[item.laneKey]) { laneData[item.laneKey].items.push(item); } }); // Timeline header with stages (Past, Now, Next, Later, Plan) var timelineHeader = document.createElement('div'); timelineHeader.className = 'roadmap-v2-timeline-header'; var stageLabels = [ { key: 'past', label: 'Past' }, { key: 'next', label: 'Next' }, { key: 'later', label: 'Later' }, { key: 'plan', label: 'Plan' } ]; stageLabels.forEach(function(stage) { var stageLabel = document.createElement('div'); stageLabel.className = 'roadmap-v2-timeline-stage'; stageLabel.setAttribute('data-stage', stage.key); stageLabel.textContent = stage.label; timelineHeader.appendChild(stageLabel); }); timeline.appendChild(timelineHeader); // Lane rows var lanesContainer = document.createElement('div'); lanesContainer.className = 'roadmap-v2-timeline-lanes'; ROADMAP_LANES.forEach(function(laneDef) { var laneRow = document.createElement('div'); laneRow.className = 'roadmap-v2-timeline-lane'; var laneLabel = document.createElement('div'); laneLabel.className = 'roadmap-v2-timeline-lane-label'; laneLabel.textContent = laneDef.title; laneRow.appendChild(laneLabel); var laneTrack = document.createElement('div'); laneTrack.className = 'roadmap-v2-timeline-track'; laneTrack.setAttribute('data-lane', laneDef.key); var laneItems = laneData[laneDef.key].items; if (laneItems.length > 0) { // Stage position mapping - spread across track with clear separation // Past (completed): 8%, Now (current): 25%, Next: 50%, Later: 72%, Plan: 92% var stagePositions = { past: 8, now: 25, next: 50, later: 72, plan: 92 }; // Calculate positions for each item var itemPositions = laneItems.map(function(item) { var isCompleted = item.isCompleted === true; var stage = getRoadmapStageMeta(item.targetDateISO, isCompleted); var basePos = stagePositions[stage.key] || 90; return { item: item, stage: stage, basePos: basePos, isCompleted: isCompleted }; }); // Sort by position itemPositions.sort(function(a, b) { return a.basePos - b.basePos; }); // Find min and max for the connecting line var minPos = Math.min.apply(null, itemPositions.map(function(p) { return p.basePos; })); var maxPos = Math.max.apply(null, itemPositions.map(function(p) { return p.basePos; })); // Draw connecting line from first to last if (itemPositions.length > 1) { var line = document.createElement('div'); line.className = 'roadmap-v2-timeline-line'; line.style.left = minPos + '%'; line.style.width = (maxPos - minPos) + '%'; laneTrack.appendChild(line); } // Spread dots within each stage to avoid overlap var stageGroups = { past: [], now: [], next: [], later: [], plan: [] }; itemPositions.forEach(function(p) { if (stageGroups[p.stage.key]) { stageGroups[p.stage.key].push(p); } }); Object.keys(stageGroups).forEach(function(stageKey) { var group = stageGroups[stageKey]; if (group.length === 0) return; var basePos = stagePositions[stageKey] || 90; // Spread dots within the stage zone (±6% for 5 columns) var spread = Math.min(6, 12 / group.length); group.forEach(function(p, idx) { var offset = group.length === 1 ? 0 : (idx - (group.length - 1) / 2) * spread; p.finalPos = basePos + offset; }); }); // Create dots for each item itemPositions.forEach(function(p) { var dot = document.createElement('div'); dot.className = 'roadmap-v2-timeline-dot'; if (p.isCompleted) dot.classList.add('completed'); dot.style.left = p.finalPos + '%'; dot.setAttribute('data-stage', p.stage.key); // Add checkmark for completed items if (p.isCompleted) { var checkIcon = document.createElement('i'); checkIcon.setAttribute('data-lucide', 'check'); checkIcon.className = 'dot-check-icon'; dot.appendChild(checkIcon); } // Tooltip var tooltip = document.createElement('div'); tooltip.className = 'roadmap-v2-timeline-tooltip'; var tooltipTitle = document.createElement('div'); tooltipTitle.className = 'tooltip-title'; tooltipTitle.textContent = p.item.title; tooltip.appendChild(tooltipTitle); if (p.stage.friendlyDate) { var tooltipDate = document.createElement('div'); tooltipDate.className = 'tooltip-date'; tooltipDate.textContent = p.stage.friendlyDate; tooltip.appendChild(tooltipDate); } var tooltipStage = document.createElement('div'); tooltipStage.className = 'tooltip-stage'; if (p.isCompleted) { tooltipStage.textContent = 'Completed'; tooltipStage.classList.add('completed'); } else { tooltipStage.textContent = p.stage.label; } tooltip.appendChild(tooltipStage); dot.appendChild(tooltip); // Click handler (function(item, isCompleted) { dot.onclick = function() { if (item.objectiveId) { openCreateObjectiveModal({ _id: item.objectiveId, id: item.objectiveId, title: item.title, description: item.summary, targetDateISO: item.targetDateISO, targetDate: item.targetDateISO, isCompleted: isCompleted }, { mode: 'edit' }); } else { openCreateObjectiveModal({ title: item.title, description: item.summary }); } }; })(p.item, p.isCompleted); laneTrack.appendChild(dot); }); } else { // Empty lane indicator var emptyText = document.createElement('div'); emptyText.className = 'roadmap-v2-timeline-empty'; emptyText.textContent = 'No objectives'; laneTrack.appendChild(emptyText); } laneRow.appendChild(laneTrack); lanesContainer.appendChild(laneRow); }); timeline.appendChild(lanesContainer); // Add vertical "now" line (positioned at the boundary between Past and Now) var nowLine = document.createElement('div'); nowLine.className = 'roadmap-v2-timeline-now-line'; timeline.appendChild(nowLine); // Mark the first incomplete item as "next-up" with pulsing animation // Priority: now > next > later > plan var firstNextDot = timeline.querySelector('.roadmap-v2-timeline-dot[data-stage="now"]:not(.completed)'); if (!firstNextDot) { firstNextDot = timeline.querySelector('.roadmap-v2-timeline-dot[data-stage="next"]:not(.completed)'); } if (!firstNextDot) { firstNextDot = timeline.querySelector('.roadmap-v2-timeline-dot[data-stage="later"]:not(.completed)'); } if (!firstNextDot) { firstNextDot = timeline.querySelector('.roadmap-v2-timeline-dot[data-stage="plan"]:not(.completed)'); } if (firstNextDot) { firstNextDot.classList.add('next-up'); } // Refresh Lucide icons for completed checkmarks setTimeout(function() { if (typeof DAVA_refreshIcons === 'function') DAVA_refreshIcons(); }, 0); return timeline; } function renderRoadmapV2Item(item) { var card = document.createElement('div'); card.className = 'roadmap-v2-item'; if (item.isCompleted) { card.classList.add('completed'); } var cardMain = document.createElement('div'); cardMain.className = 'roadmap-v2-item-main'; // Title row with title and meta inline var titleRow = document.createElement('div'); titleRow.className = 'roadmap-v2-item-title-row'; var title = document.createElement('h5'); title.textContent = item.title; titleRow.appendChild(title); var meta = document.createElement('div'); meta.className = 'roadmap-v2-item-meta'; var laneBadge = document.createElement('span'); laneBadge.className = 'roadmap-v2-lane-badge'; laneBadge.setAttribute('data-lane', item.laneKey || 'platform'); laneBadge.textContent = item.laneTitle || 'Roadmap'; meta.appendChild(laneBadge); if (item._stage && item._stage.friendlyDate) { var dateBadge = document.createElement('span'); dateBadge.className = 'roadmap-v2-date-badge'; dateBadge.textContent = item._stage.friendlyDate; meta.appendChild(dateBadge); } titleRow.appendChild(meta); cardMain.appendChild(titleRow); // Description (if available) if (item.summary && item.summary.trim()) { var desc = document.createElement('p'); desc.className = 'roadmap-v2-item-desc'; // Truncate long descriptions var descText = item.summary.trim(); if (descText.length > 120) { descText = descText.substring(0, 117) + '...'; } desc.textContent = descText; cardMain.appendChild(desc); } var cardActions = document.createElement('div'); cardActions.className = 'roadmap-v2-item-actions'; if (item.objectiveId) { var editBtn = document.createElement('button'); editBtn.className = 'roadmap-v2-item-btn'; var editIcon = document.createElement('i'); editIcon.setAttribute('data-lucide', 'pencil'); editBtn.appendChild(editIcon); editBtn.appendChild(document.createTextNode(' Edit')); editBtn.onclick = function(e) { e.stopPropagation(); openCreateObjectiveModal({ _id: item.objectiveId, id: item.objectiveId, title: item.title, description: item.summary, targetDateISO: item.targetDateISO, targetDate: item.targetDateISO }, { mode: 'edit' }); }; cardActions.appendChild(editBtn); } else { var scheduleBtn = document.createElement('button'); scheduleBtn.className = 'roadmap-v2-item-btn primary'; var scheduleIcon = document.createElement('i'); scheduleIcon.setAttribute('data-lucide', 'calendar-plus'); scheduleBtn.appendChild(scheduleIcon); scheduleBtn.appendChild(document.createTextNode(' Schedule')); scheduleBtn.onclick = function(e) { e.stopPropagation(); openCreateObjectiveModal({ title: item.title, description: item.summary }); }; cardActions.appendChild(scheduleBtn); } card.appendChild(cardMain); card.appendChild(cardActions); return card; } function renderTemplateInputCard(sectionKey, parent, title, description) { var card = document.createElement('div'); card.style.cssText = 'background:#f9fafb; border:1px solid #e5e7eb; border-radius:12px; padding:16px; margin-bottom:24px;'; var header = document.createElement('div'); header.style.cssText = 'display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;'; var heading = document.createElement('h3'); heading.style.cssText = 'margin:0; font-size:18px; font-weight:600; color:#1f2937;'; heading.textContent = title; header.appendChild(heading); card.appendChild(header); if (description) { var desc = document.createElement('p'); desc.style.cssText = 'margin:0 0 12px 0; color:#4b5563;'; desc.textContent = description; card.appendChild(desc); } var inputs = getSectionInputs(sectionKey); var currentField = document.createElement('div'); currentField.className = 'modal-field'; var currentLabel = document.createElement('label'); currentLabel.textContent = 'Current State'; var currentTextarea = document.createElement('textarea'); currentTextarea.className = 'modal-textarea'; currentTextarea.placeholder = 'Summarize what is true today.'; currentTextarea.value = inputs.currentState || ''; currentTextarea.oninput = function(){ updateSectionInput(sectionKey, 'currentState', currentTextarea.value); }; currentField.appendChild(currentLabel); currentField.appendChild(currentTextarea); card.appendChild(currentField); var futureField = document.createElement('div'); futureField.className = 'modal-field'; var futureLabel = document.createElement('label'); futureLabel.textContent = 'Future Goals'; var futureTextarea = document.createElement('textarea'); futureTextarea.className = 'modal-textarea'; futureTextarea.placeholder = 'Describe the desired future state or measurable goals.'; futureTextarea.value = inputs.futureGoals || ''; futureTextarea.oninput = function(){ updateSectionInput(sectionKey, 'futureGoals', futureTextarea.value); }; futureField.appendChild(futureLabel); futureField.appendChild(futureTextarea); card.appendChild(futureField); var actions = document.createElement('div'); actions.className = 'modal-actions'; var regenerateBtn = document.createElement('button'); regenerateBtn.className = 'btn btn-primary'; regenerateBtn.setAttribute('type', 'button'); regenerateBtn.setAttribute('data-regenerate', sectionKey); regenerateBtn.textContent = 'Save & Regenerate'; regenerateBtn.onclick = function(){ regenerateTemplates(sectionKey); }; actions.appendChild(regenerateBtn); card.appendChild(actions); parent.appendChild(card); } function createSectionHeader(title) { var header = document.createElement('h3'); header.style.cssText = 'margin:0 0 12px 0; font-size:18px; font-weight:600; color:#1f2937;'; header.textContent = title; return header; } function renderListSection(parent, title, list, emptyText) { var section = document.createElement('div'); section.style.cssText = 'background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:20px; margin-bottom:20px;'; section.appendChild(createSectionHeader(title)); if (Array.isArray(list) && list.length) { var ul = document.createElement('ul'); ul.style.cssText = 'margin:0; padding-left:20px; color:#374151;'; list.forEach(function(item){ var li = document.createElement('li'); var display = ''; if (item && typeof item === 'object') { var detail = item.detail ? ': ' + item.detail : ''; display = (item.title || '') + detail; } else if (typeof item === 'string') { display = item; } li.textContent = display || '—'; ul.appendChild(li); }); section.appendChild(ul); } else { var placeholder = document.createElement('p'); placeholder.style.cssText = 'margin:0; color:#6b7280;'; placeholder.textContent = emptyText || 'No entries yet.'; section.appendChild(placeholder); } parent.appendChild(section); } function createMetricParagraph(label, value) { var paragraph = document.createElement('p'); paragraph.style.cssText = 'margin:0; color:#374151; font-size:14px;'; var strongLabel = document.createElement('strong'); strongLabel.textContent = label + ':'; paragraph.appendChild(strongLabel); paragraph.appendChild(document.createTextNode(' ' + (value && value.length ? value : '--'))); return paragraph; } function renderStakeholderUpdateView(wrapper) { var update = (currentProject && currentProject.stakeholderUpdate) ? currentProject.stakeholderUpdate : getStakeholderUpdateFallbackClient(); var storyCard = document.createElement('div'); storyCard.style.cssText = 'background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:20px; margin-bottom:20px;'; storyCard.appendChild(createSectionHeader('Your Transformation Story')); storyCard.appendChild(createMetricParagraph('Starting Point', update.story.startingPoint)); storyCard.appendChild(createMetricParagraph('Current State', update.story.currentState)); storyCard.appendChild(createMetricParagraph('Destination', update.story.destination)); wrapper.appendChild(storyCard); renderListSection(wrapper, 'Recent Wins & Achievements', update.wins, 'Wins will appear once transformation milestones deliver measurable outcomes.'); var metricsCard = document.createElement('div'); metricsCard.style.cssText = 'background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:20px; margin-bottom:20px;'; metricsCard.appendChild(createSectionHeader('Transformation by the Numbers')); metricsCard.appendChild(createMetricParagraph('Digital Maturity Score', (update.metrics.digitalMaturityScore.current || '—') + (update.metrics.digitalMaturityScore.improvement ? ' (+' + update.metrics.digitalMaturityScore.improvement + ')' : ''))); metricsCard.appendChild(createMetricParagraph('KPI Performance', (update.metrics.kpiPerformance.met || '—') + (update.metrics.kpiPerformance.total ? ' of ' + update.metrics.kpiPerformance.total + ' KPIs on track' : ''))); metricsCard.appendChild(createMetricParagraph('Team Engagement Level', update.metrics.teamEngagement.percent)); metricsCard.appendChild(createMetricParagraph('Quantified Value Delivered', update.metrics.valueDelivered.amount)); wrapper.appendChild(metricsCard); var milestonesCard = document.createElement('div'); milestonesCard.style.cssText = 'background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:20px; margin-bottom:20px;'; milestonesCard.appendChild(createSectionHeader('Upcoming Milestones & Next Steps')); renderMilestoneList(milestonesCard, 'Immediate Focus (Next 30 days)', update.milestones.immediate); renderMilestoneList(milestonesCard, 'Short-term Goals (Next 90 days)', update.milestones.shortTerm); wrapper.appendChild(milestonesCard); var supportCard = document.createElement('div'); supportCard.style.cssText = 'background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:20px; margin-bottom:20px;'; supportCard.appendChild(createSectionHeader('Support & Resources Available')); supportCard.appendChild(createMetricParagraph('Training Programs', update.support.trainingPrograms)); supportCard.appendChild(createMetricParagraph('Technical Support', update.support.technicalSupport)); supportCard.appendChild(createMetricParagraph('Change Management', update.support.changeManagement)); wrapper.appendChild(supportCard); var feedbackCard = document.createElement('div'); feedbackCard.style.cssText = 'background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:20px;'; feedbackCard.appendChild(createSectionHeader('Your Voice Matters — Feedback Request')); feedbackCard.appendChild(createMetricParagraph('Progress Rating Prompt', update.feedback.ratingPrompt)); feedbackCard.appendChild(createMetricParagraph('What\'s Working Well', update.feedback.whatsWorking)); feedbackCard.appendChild(createMetricParagraph('Areas for Improvement', update.feedback.areasForImprovement)); feedbackCard.appendChild(createMetricParagraph('Additional Support Needed', update.feedback.additionalSupportNeeded)); wrapper.appendChild(feedbackCard); } function renderMilestoneList(parent, title, items) { var container = document.createElement('div'); container.style.cssText = 'border:1px solid #e5e7eb; border-radius:10px; padding:16px; margin-bottom:16px;'; var heading = document.createElement('h4'); heading.style.cssText = 'margin:0 0 10px 0; font-size:16px; font-weight:600; color:#1f2937;'; heading.textContent = title; container.appendChild(heading); if (Array.isArray(items) && items.length) { var list = document.createElement('ul'); list.style.cssText = 'margin:0; padding-left:18px; color:#374151;'; items.forEach(function(item){ var li = document.createElement('li'); if (item && typeof item === 'object') { var timeline = item.timeline ? ' (' + item.timeline + ')' : ''; var outcome = item.expectedOutcome ? ' — ' + item.expectedOutcome : ''; li.textContent = (item.action || 'Action') + timeline + outcome; } else if (typeof item === 'string') { li.textContent = item; } else { li.textContent = ''; } list.appendChild(li); }); container.appendChild(list); } else { var placeholder = document.createElement('p'); placeholder.style.cssText = 'margin:0; color:#6b7280;'; placeholder.textContent = 'Define milestones to keep teams aligned on execution cadence.'; container.appendChild(placeholder); } parent.appendChild(container); } function regenerateTemplates(sectionKey) { if (!currentProject || !currentProject.id) { return; } var button = document.querySelector('[data-regenerate="' + sectionKey + '"]'); var originalText = button ? button.textContent : ''; if (button) { button.disabled = true; button.textContent = 'Regenerating...'; } var inputs = ensureReportInputs(); var payload = { assessmentId: currentProject.id, templateInputs: { advisor: inputs.advisor, kpi: inputs.kpi, roadmap: inputs.roadmap } }; phoros.processor('iWGwhXccDY6Wx2iRM', { type: 'submitAssessment', payload: payload }, function(error, result){ if (button) { button.disabled = false; button.textContent = originalText || 'Save & Regenerate'; } if (error) { if (typeof Swal !== 'undefined') { Swal.fire({ title: 'Regeneration Failed', text: error.message || String(error), icon: 'error' }); } else { window.alert('Regeneration failed: ' + (error.message || error)); } return; } if (!result || !result.success || !result.data) { if (typeof Swal !== 'undefined') { Swal.fire({ title: 'Regeneration Failed', text: 'No data returned from advisor templates.', icon: 'error' }); } else { window.alert('Regeneration failed.'); } return; } applyAssessmentUpdate(result.data); refreshProjectCollections(); updateHeroMetrics(); renderProjectProgressSummary(); var targetTab = sectionKey === 'kpi' ? 'kpis' : 'roadmap'; switchTab(targetTab); if (typeof Swal !== 'undefined') { Swal.fire({ title: 'Templates Updated', text: 'Latest ' + sectionKey.toUpperCase() + ' content is ready.', icon: 'success', timer: 2000, showConfirmButton: false }); } }); } function getKpiBoardStats(kpis) { var stats = { total: 0, avgProgress: 0, onTrack: 0, watch: 0, atRisk: 0, topPerformer: null, needsAttention: null }; if (!Array.isArray(kpis) || !kpis.length) { return stats; } stats.total = kpis.length; var sum = 0; kpis.forEach(function(kpi){ var progress = Math.max(0, Math.min(100, Number(kpi.progressValue || 0))); sum += progress; if (progress >= 70) { stats.onTrack += 1; } else if (progress >= 40) { stats.watch += 1; } else { stats.atRisk += 1; } if (!stats.topPerformer || progress > stats.topPerformer.progress) { stats.topPerformer = { name: kpi.kpiName || 'KPI', progress: progress }; } if (!stats.needsAttention || progress < stats.needsAttention.progress) { stats.needsAttention = { name: kpi.kpiName || 'KPI', progress: progress }; } }); stats.avgProgress = Math.round(sum / kpis.length); return stats; } function refreshKpiBoardSnapshot() { var board = document.getElementById('kpiBoardSection'); if (board) { renderKpiBoardSnapshot(board); } } function renderKpiBoardSnapshot(container) { if (!container) return; container.textContent = ''; var kpis = getActiveKpis(); var objectiveStats = getObjectiveStats(); var stats = getKpiBoardStats(kpis); var valueImpact = (currentProject && currentProject.valueImpactReport) ? currentProject.valueImpactReport : getValueImpactFallbackClient(); // Build the KPI V2 layout var wrapper = document.createElement('div'); wrapper.className = 'kpi-v2'; // Dashboard Hero Section var dashboard = document.createElement('div'); dashboard.className = 'kpi-v2-dashboard'; var dashHeader = document.createElement('div'); dashHeader.className = 'kpi-v2-dashboard-header'; var dashHeaderLeft = document.createElement('div'); var dashTitle = document.createElement('h4'); dashTitle.className = 'kpi-v2-dashboard-title'; dashTitle.textContent = 'Performance Dashboard'; var dashSubtitle = document.createElement('p'); dashSubtitle.className = 'kpi-v2-dashboard-subtitle'; dashSubtitle.textContent = 'Board-ready metrics at a glance'; dashHeaderLeft.appendChild(dashTitle); dashHeaderLeft.appendChild(dashSubtitle); var dashMeta = document.createElement('div'); dashMeta.className = 'kpi-v2-dashboard-meta'; var updatedAt = currentProject && currentProject.reportInputs && currentProject.reportInputs.updatedAtISO; dashMeta.textContent = updatedAt ? formatFriendlyDate(updatedAt) : 'Updated recently'; dashHeader.appendChild(dashHeaderLeft); dashHeader.appendChild(dashMeta); dashboard.appendChild(dashHeader); // Progress Rings Grid var ringsGrid = document.createElement('div'); ringsGrid.className = 'kpi-v2-rings'; // Ring 1: Average Progress ringsGrid.appendChild(createKpiV2Ring( stats.avgProgress, stats.total ? 'success' : 'primary', 'Average Progress', stats.total ? (stats.total + ' KPIs') : 'No KPIs yet' )); // Ring 2: On Track var onTrackPercent = stats.total ? Math.round((stats.onTrack / stats.total) * 100) : 0; ringsGrid.appendChild(createKpiV2Ring( onTrackPercent, onTrackPercent >= 70 ? 'success' : (onTrackPercent >= 40 ? 'warning' : 'danger'), 'On Track', stats.onTrack + ' of ' + stats.total )); // Ring 3: Objectives var objPercent = objectiveStats.total ? Math.round((objectiveStats.completed / objectiveStats.total) * 100) : 0; ringsGrid.appendChild(createKpiV2Ring( objPercent, 'primary', 'Roadmap Progress', objectiveStats.completed + '/' + objectiveStats.total + ' complete' )); // Ring 4: Value/ROI var roi = valueImpact && valueImpact.roiSummary ? valueImpact.roiSummary : {}; var roiValue = roi.roiRatio ? roi.roiRatio : '--'; ringsGrid.appendChild(createKpiV2Ring( roi.roiRatio ? parseInt(roi.roiRatio) || 0 : 0, 'success', 'Value Impact', roi.totalValueRealized || 'Building story' )); dashboard.appendChild(ringsGrid); // Momentum Story if (stats.total > 0) { var momentum = document.createElement('div'); momentum.className = 'kpi-v2-momentum'; var momTitle = document.createElement('h5'); momTitle.className = 'kpi-v2-momentum-title'; momTitle.textContent = 'Momentum Story'; var momText = document.createElement('p'); momText.className = 'kpi-v2-momentum-text'; var storyParts = []; if (stats.topPerformer) { storyParts.push(stats.topPerformer.name + ' leads at ' + stats.topPerformer.progress + '%.'); } if (stats.needsAttention) { storyParts.push(stats.needsAttention.name + ' needs focus at ' + stats.needsAttention.progress + '%.'); } storyParts.push('Pair KPIs with roadmap milestones to demonstrate six-month value ramp.'); momText.textContent = storyParts.join(' '); momentum.appendChild(momTitle); momentum.appendChild(momText); dashboard.appendChild(momentum); } wrapper.appendChild(dashboard); // Status Groups renderKpiV2StatusGroups(wrapper, kpis, stats); container.appendChild(wrapper); // Refresh icons if available if (typeof DAVA_refreshIcons === 'function') { setTimeout(DAVA_refreshIcons, 0); } } function createKpiV2Ring(percent, colorClass, label, sublabel) { var card = document.createElement('div'); card.className = 'kpi-v2-ring-card'; var ring = document.createElement('div'); ring.className = 'kpi-v2-ring'; // SVG ring var circumference = 2 * Math.PI * 32; // radius 32 var offset = circumference - (percent / 100) * circumference; var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); svg.setAttribute('viewBox', '0 0 80 80'); var track = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); track.setAttribute('class', 'kpi-v2-ring-track'); track.setAttribute('cx', '40'); track.setAttribute('cy', '40'); track.setAttribute('r', '32'); var fill = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); fill.setAttribute('class', 'kpi-v2-ring-fill ' + colorClass); fill.setAttribute('cx', '40'); fill.setAttribute('cy', '40'); fill.setAttribute('r', '32'); fill.setAttribute('stroke-dasharray', circumference); fill.setAttribute('stroke-dashoffset', offset); svg.appendChild(track); svg.appendChild(fill); ring.appendChild(svg); var value = document.createElement('div'); value.className = 'kpi-v2-ring-value'; value.textContent = percent + '%'; ring.appendChild(value); var labelEl = document.createElement('div'); labelEl.className = 'kpi-v2-ring-label'; labelEl.textContent = label; var sublabelEl = document.createElement('div'); sublabelEl.className = 'kpi-v2-ring-sublabel'; sublabelEl.textContent = sublabel; card.appendChild(ring); card.appendChild(labelEl); card.appendChild(sublabelEl); return card; } function renderKpiV2StatusGroups(parent, kpis, stats) { var groups = document.createElement('div'); groups.className = 'kpi-v2-groups'; var statusDefs = [ { key: 'on-track', label: 'On Track', description: 'Performing at 70% or above', icon: 'trending-up', filter: function(k) { return (k.progressValue || 0) >= 70; } }, { key: 'watch', label: 'Watch', description: 'Between 40-69%, needs monitoring', icon: 'eye', filter: function(k) { var p = k.progressValue || 0; return p >= 40 && p < 70; } }, { key: 'at-risk', label: 'At Risk', description: 'Below 40%, requires intervention', icon: 'alert-triangle', filter: function(k) { return (k.progressValue || 0) < 40; } } ]; var prioritized = Array.isArray(kpis) ? kpis.slice().sort(function(a, b) { var aRank = (a && a.priorityRank !== undefined) ? Number(a.priorityRank) : 999; var bRank = (b && b.priorityRank !== undefined) ? Number(b.priorityRank) : 999; return aRank - bRank; }) : []; statusDefs.forEach(function(statusDef) { var filtered = prioritized.filter(statusDef.filter); var group = document.createElement('div'); group.className = 'kpi-v2-group'; group.setAttribute('data-status', statusDef.key); var groupHeader = document.createElement('div'); groupHeader.className = 'kpi-v2-group-header'; var indicator = document.createElement('div'); indicator.className = 'kpi-v2-group-indicator ' + statusDef.key; var iconEl = document.createElement('i'); iconEl.setAttribute('data-lucide', statusDef.icon); indicator.appendChild(iconEl); var info = document.createElement('div'); info.className = 'kpi-v2-group-info'; var title = document.createElement('h4'); title.textContent = statusDef.label; var count = document.createElement('span'); count.className = 'kpi-v2-group-count'; count.textContent = filtered.length; title.appendChild(count); var desc = document.createElement('p'); desc.textContent = statusDef.description; info.appendChild(title); info.appendChild(desc); groupHeader.appendChild(indicator); groupHeader.appendChild(info); group.appendChild(groupHeader); var itemsList = document.createElement('div'); itemsList.className = 'kpi-v2-items'; if (filtered.length === 0) { var empty = document.createElement('div'); empty.className = 'kpi-v2-empty'; empty.textContent = 'No KPIs in this status'; itemsList.appendChild(empty); } else { filtered.forEach(function(kpi) { itemsList.appendChild(renderKpiV2Item(kpi, statusDef.key)); }); } group.appendChild(itemsList); groups.appendChild(group); }); parent.appendChild(groups); } function renderKpiV2Item(kpi, statusKey) { var item = document.createElement('div'); item.className = 'kpi-v2-item'; var main = document.createElement('div'); main.className = 'kpi-v2-item-main'; var titleRow = document.createElement('div'); titleRow.className = 'kpi-v2-item-title-row'; var name = document.createElement('h5'); name.textContent = kpi.kpiName || 'KPI'; var statusBadge = document.createElement('span'); statusBadge.className = 'kpi-v2-status-badge ' + statusKey; var progress = Math.max(0, Math.min(100, Number(kpi.progressValue || 0))); statusBadge.textContent = progress + '%'; titleRow.appendChild(name); titleRow.appendChild(statusBadge); var desc = document.createElement('p'); desc.className = 'kpi-v2-item-desc'; desc.textContent = kpi.description || 'Link this KPI to roadmap objectives for clearer ownership.'; var meta = document.createElement('div'); meta.className = 'kpi-v2-item-meta'; if (kpi.priorityRank !== undefined) { var priority = document.createElement('span'); priority.className = 'kpi-v2-priority-badge'; priority.textContent = 'Priority ' + kpi.priorityRank; meta.appendChild(priority); } if (kpi.frequency) { var freq = document.createElement('span'); freq.className = 'kpi-v2-meta-badge'; freq.textContent = kpi.frequency; meta.appendChild(freq); } if (kpi.target) { var target = document.createElement('span'); target.className = 'kpi-v2-meta-badge'; target.textContent = 'Target: ' + kpi.target; meta.appendChild(target); } // Progress bar var progressWrap = document.createElement('div'); progressWrap.className = 'kpi-v2-progress'; var progressBar = document.createElement('div'); progressBar.className = 'kpi-v2-progress-bar'; var progressFill = document.createElement('div'); progressFill.className = 'kpi-v2-progress-fill ' + (progress >= 70 ? 'success' : (progress >= 40 ? 'warning' : 'danger')); progressFill.style.width = progress + '%'; progressBar.appendChild(progressFill); progressWrap.appendChild(progressBar); main.appendChild(titleRow); main.appendChild(desc); main.appendChild(meta); main.appendChild(progressWrap); // Capacity warning if applicable if (kpi.capacityRequirement) { var warning = document.createElement('div'); warning.className = 'kpi-v2-capacity-warning'; var warnIcon = document.createElement('i'); warnIcon.setAttribute('data-lucide', 'alert-circle'); warning.appendChild(warnIcon); var warnText = document.createElement('span'); warnText.textContent = 'Missing enabler: ' + kpi.capacityRequirement; warning.appendChild(warnText); main.appendChild(warning); } // Actions var actions = document.createElement('div'); actions.className = 'kpi-v2-item-actions'; var editBtn = document.createElement('button'); editBtn.className = 'kpi-v2-item-btn'; var editIcon = document.createElement('i'); editIcon.setAttribute('data-lucide', 'sliders'); editBtn.appendChild(editIcon); editBtn.appendChild(document.createTextNode(' Update')); editBtn.onclick = function() { openUpdateKPIProgressModal(kpi); }; actions.appendChild(editBtn); item.appendChild(main); item.appendChild(actions); return item; } function openUpdateKPIProgressModal(kpi) { var overlay = document.createElement('div'); overlay.className = 'modal-overlay'; var card = document.createElement('div'); card.className = 'modal-card'; var title = document.createElement('div'); title.className = 'modal-title'; title.textContent = 'Update Progress: ' + (kpi.kpiName || 'KPI'); var f1 = document.createElement('div'); f1.className = 'modal-field'; var l1 = document.createElement('label'); l1.textContent = 'Progress (0-100%)'; var i1 = document.createElement('input'); i1.className = 'modal-input'; i1.type = 'number'; i1.min = '0'; i1.max = '100'; i1.value = kpi.progressValue || 0; f1.appendChild(l1); f1.appendChild(i1); var actions = document.createElement('div'); actions.className = 'modal-actions'; var cancel = document.createElement('button'); cancel.className = 'btn btn-secondary'; cancel.textContent = 'Cancel'; cancel.onclick = function() { document.body.removeChild(overlay); }; var save = document.createElement('button'); save.className = 'btn btn-primary'; save.textContent = 'Save'; save.onclick = function() { var newValue = Math.max(0, Math.min(100, parseInt(i1.value) || 0)); phoros.processor('iWGwhXccDY6Wx2iRM', { type: 'updateKPIProgress', payload: { kpi_id: kpi._id, progressValue: newValue } }, function(error, result) { document.body.removeChild(overlay); if (!error && result && result.success) { if (typeof Swal !== 'undefined') { Swal.fire({ icon: 'success', title: 'Progress updated', timer: 1500, showConfirmButton: false }); } // Refresh KPI data if (currentProject && currentProject.id) { phoros.processor('iWGwhXccDY6Wx2iRM', { type: 'getKPIsByProject', payload: { project_id: currentProject.id } }, function(_, r) { var list = (r && r.success && r.data && r.data.kpis) ? r.data.kpis : []; updateKpiDataAndRender(list); }); } } }); }; actions.appendChild(cancel); actions.appendChild(save); card.appendChild(title); card.appendChild(f1); card.appendChild(actions); overlay.appendChild(card); document.body.appendChild(overlay); i1.focus(); } function updateKpiDataAndRender(list) { var normalized = Array.isArray(list) ? normalizeAssessmentKPIs(list) : []; projectKpis = normalized; renderProjectProgressSummary(); refreshKpiBoardSnapshot(); } function loadKPIsContent(container) { var wrapper = document.createElement('div'); wrapper.className = 'tab-panel-content kpi-v2'; container.appendChild(wrapper); // Header with actions var header = document.createElement('div'); header.className = 'kpi-v2-header'; var headerLeft = document.createElement('div'); var h3 = document.createElement('h3'); h3.textContent = 'KPI Dashboard'; var sub = document.createElement('p'); sub.textContent = 'Track performance metrics and value delivery'; headerLeft.appendChild(h3); headerLeft.appendChild(sub); var headerActions = document.createElement('div'); headerActions.className = 'kpi-v2-header-actions'; var addBtn = document.createElement('button'); addBtn.className = 'btn btn-primary'; var addIcon = document.createElement('i'); addIcon.setAttribute('data-lucide', 'plus'); addIcon.className = 'btn-icon'; addBtn.appendChild(addIcon); addBtn.appendChild(document.createTextNode(' Add KPI')); addBtn.onclick = openCreateKPIModal; var refreshBtn = document.createElement('button'); refreshBtn.className = 'btn btn-secondary'; var refreshIcon = document.createElement('i'); refreshIcon.setAttribute('data-lucide', 'refresh-cw'); refreshIcon.className = 'btn-icon'; refreshBtn.appendChild(refreshIcon); refreshBtn.appendChild(document.createTextNode(' Refresh')); refreshBtn.onclick = function() { if (currentProject && currentProject.id) { phoros.processor('iWGwhXccDY6Wx2iRM', { type: 'getKPIsByProject', payload: { project_id: currentProject.id } }, function(error, result) { if (!error && result && result.success && result.data && Array.isArray(result.data.kpis)) { updateKpiDataAndRender(result.data.kpis); } }); } }; headerActions.appendChild(addBtn); headerActions.appendChild(refreshBtn); header.appendChild(headerLeft); header.appendChild(headerActions); wrapper.appendChild(header); // Board section var boardSection = document.createElement('div'); boardSection.id = 'kpiBoardSection'; wrapper.appendChild(boardSection); renderKpiBoardSnapshot(boardSection); // Fetch persisted KPIs (server-first) if (currentProject && currentProject.id) { phoros.processor('iWGwhXccDY6Wx2iRM', { type: 'getKPIsByProject', payload: { project_id: currentProject.id } }, function(error, result) { if (!error && result && result.success && result.data && Array.isArray(result.data.kpis)) { updateKpiDataAndRender(result.data.kpis); } else { projectKpis = getActiveKpis(); refreshKpiBoardSnapshot(); } }); } else { projectKpis = getActiveKpis(); refreshKpiBoardSnapshot(); } // Refresh icons after DOM is built if (typeof DAVA_refreshIcons === 'function') { setTimeout(DAVA_refreshIcons, 0); } } function openCreateKPIModal() { var overlay = document.createElement('div'); overlay.className = 'modal-overlay'; var card = document.createElement('div'); card.className = 'modal-card'; var title = document.createElement('div'); title.className = 'modal-title'; title.textContent = 'Create KPI'; var f1 = document.createElement('div'); f1.className = 'modal-field'; var l1 = document.createElement('label'); l1.textContent = 'KPI Name'; var i1 = document.createElement('input'); i1.className = 'modal-input'; i1.placeholder = 'e.g., % roadmap milestones met'; f1.appendChild(l1); f1.appendChild(i1); var f2 = document.createElement('div'); f2.className = 'modal-field'; var l2 = document.createElement('label'); l2.textContent = 'Description'; var i2 = document.createElement('textarea'); i2.className = 'modal-textarea'; f2.appendChild(l2); f2.appendChild(i2); var f3 = document.createElement('div'); f3.className = 'modal-field'; var l3 = document.createElement('label'); l3.textContent = 'Target (optional)'; var i3 = document.createElement('input'); i3.className = 'modal-input'; i3.placeholder = 'e.g., 90% per quarter'; f3.appendChild(l3); f3.appendChild(i3); var f4 = document.createElement('div'); f4.className = 'modal-field'; var l4 = document.createElement('label'); l4.textContent = 'Frequency'; var i4 = document.createElement('input'); i4.className = 'modal-input'; i4.placeholder = 'monthly/quarterly'; i4.value = 'monthly'; f4.appendChild(l4); f4.appendChild(i4); var actions = document.createElement('div'); actions.className = 'modal-actions'; var cancel = document.createElement('button'); cancel.className = 'btn btn-secondary'; cancel.textContent = 'Cancel'; cancel.onclick = function(){ document.body.removeChild(overlay); }; var save = document.createElement('button'); save.className = 'btn btn-primary'; save.textContent = 'Save KPI'; save.onclick = function(){ if (!i1.value.trim()) { i1.focus(); return; } var payload = { project_id: currentProject ? currentProject.id : null, kpiName: i1.value.trim(), description: i2.value.trim(), target: i3.value.trim(), frequency: i4.value.trim() }; phoros.processor('iWGwhXccDY6Wx2iRM', { type:'createKPI', payload: payload }, function(error, result){ document.body.removeChild(overlay); if (!error && result && result.success && result.data && result.data.kpi) { if (typeof Swal !== 'undefined') { Swal.fire({ icon: 'success', title: 'KPI created', timer: 1500, showConfirmButton: false }); } phoros.processor('iWGwhXccDY6Wx2iRM', { type: 'getKPIsByProject', payload: { project_id: currentProject.id } }, function(_, r){ var list = (r && r.success && r.data && r.data.kpis) ? r.data.kpis : []; updateKpiDataAndRender(list); updateHeroMetrics(); }); } }); }; actions.appendChild(cancel); actions.appendChild(save); card.appendChild(title); card.appendChild(f1); card.appendChild(f2); card.appendChild(f3); card.appendChild(f4); card.appendChild(actions); overlay.appendChild(card); document.body.appendChild(overlay); } // Chat functionality var chatHistory = []; // CHPH-based chat state (Spec 915) var avaObjectiveId = null; var avaObjectiveLoading = false; var avaHistoryLoaded = false; var AVA_CONVERSATION_PROCESSOR_ID = 'E8BrEkzpMa7TdNxD4'; // Initialize CHPH objective for current project (called on page load) function initializeAvaConversation() { if (!currentProject || !currentProject.id) { console.log('CHPH: No project loaded, skipping Ava init'); return; } if (avaObjectiveLoading) { console.log('CHPH: Already loading Ava objective'); return; } avaObjectiveLoading = true; // First check if we already have an objective for this project phoros.processor(AVA_CONVERSATION_PROCESSOR_ID, { type: 'getObjectiveForProject', payload: { project_id: currentProject.id } }, function(error, result) { if (error || !result || !result.success) { console.warn('CHPH: Failed to get objective for project:', error || (result && result.error)); avaObjectiveLoading = false; return; } if (result.data && result.data.found && result.data.objective_id) { // Existing objective found avaObjectiveId = result.data.objective_id; console.log('CHPH: Found existing objective:', avaObjectiveId); loadAvaHistory(); } else { // No objective yet - will create on first message console.log('CHPH: No objective yet, will create on first message'); avaObjectiveLoading = false; } }); } // Load chat history from CHPH function loadAvaHistory() { if (!avaObjectiveId) { avaObjectiveLoading = false; return; } phoros.processor(AVA_CONVERSATION_PROCESSOR_ID, { type: 'getHistory', payload: { objective_id: avaObjectiveId, limit: 100 } }, function(error, result) { avaObjectiveLoading = false; if (error || !result || !result.success) { console.warn('CHPH: Failed to load history:', error || (result && result.error)); return; } var messages = result.data && result.data.messages ? result.data.messages : []; if (messages.length > 0) { console.log('CHPH: Loaded', messages.length, 'messages from history'); // Clear existing welcome message if we have history var chatMessages = document.getElementById('chatMessages'); if (chatMessages && chatMessages.children.length <= 1) { chatMessages.innerHTML = ''; } // Add history messages to UI messages.forEach(function(msg) { if (msg.text) { addChatMessageFromHistory(msg.text, msg.role, msg.timestamp); } }); avaHistoryLoaded = true; } }); } // Add message from history (no push to chatHistory to avoid duplicates) function addChatMessageFromHistory(text, type, timestamp) { var chatMessages = document.getElementById('chatMessages'); if (!chatMessages) return; var messageDiv = document.createElement('div'); messageDiv.className = 'chat-message ' + (type === 'user' ? 'user-message' : 'ai-message'); var avatar = document.createElement('div'); var isUserMessage = type === 'user'; avatar.className = 'message-avatar ' + (isUserMessage ? 'user-avatar' : 'ai-avatar'); if (isUserMessage && userChatContext.imageUrl) { avatar.classList.add('has-image'); var avatarImg = document.createElement('img'); avatarImg.src = userChatContext.imageUrl; avatarImg.alt = getUserAvatarAltText(); avatar.appendChild(avatarImg); } else { avatar.textContent = isUserMessage ? userChatContext.initials : 'AI'; } var contentWrapper = document.createElement('div'); contentWrapper.className = 'message-content'; var messageText = document.createElement('div'); messageText.className = 'message-text'; // Parse markdown for AI messages, plain text for user messages if (type === 'user') { messageText.textContent = text; } else { messageText.innerHTML = phoros.parseMarkdown(text); } var messageTime = document.createElement('div'); messageTime.className = 'message-time'; if (timestamp) { var ts = new Date(timestamp); messageTime.textContent = ts.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'}); } else { messageTime.textContent = ''; } contentWrapper.appendChild(messageText); contentWrapper.appendChild(messageTime); messageDiv.appendChild(avatar); messageDiv.appendChild(contentWrapper); chatMessages.appendChild(messageDiv); } function loadChatContent(container) { // Create chat interface var chatContainer = document.createElement('div'); chatContainer.className = 'chat-container'; // Chat header var chatHeader = document.createElement('div'); chatHeader.className = 'chat-header'; var headerTitle = document.createElement('h3'); headerTitle.textContent = 'AI Business Advisor'; var headerDesc = document.createElement('p'); headerDesc.textContent = 'Ask questions about your assessment results and get personalized recommendations'; chatHeader.appendChild(headerTitle); chatHeader.appendChild(headerDesc); var closeBtn = document.createElement('button'); closeBtn.className = 'mobile-chat-close'; closeBtn.setAttribute('type', 'button'); closeBtn.setAttribute('onclick', 'closeMobileChat()'); closeBtn.setAttribute('aria-label', 'Close chat'); var closeIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); closeIcon.setAttribute('width', '20'); closeIcon.setAttribute('height', '20'); closeIcon.setAttribute('viewBox', '0 0 24 24'); closeIcon.setAttribute('fill', 'none'); closeIcon.setAttribute('stroke', 'currentColor'); closeIcon.setAttribute('stroke-width', '2'); var closeLineOne = document.createElementNS('http://www.w3.org/2000/svg', 'line'); closeLineOne.setAttribute('x1', '6'); closeLineOne.setAttribute('y1', '6'); closeLineOne.setAttribute('x2', '18'); closeLineOne.setAttribute('y2', '18'); closeLineOne.setAttribute('stroke-linecap', 'round'); var closeLineTwo = document.createElementNS('http://www.w3.org/2000/svg', 'line'); closeLineTwo.setAttribute('x1', '6'); closeLineTwo.setAttribute('y1', '18'); closeLineTwo.setAttribute('x2', '18'); closeLineTwo.setAttribute('y2', '6'); closeLineTwo.setAttribute('stroke-linecap', 'round'); closeIcon.appendChild(closeLineOne); closeIcon.appendChild(closeLineTwo); closeBtn.appendChild(closeIcon); chatHeader.appendChild(closeBtn); // Fullscreen close button (for expanded chat view) var fullscreenCloseBtn = document.createElement('button'); fullscreenCloseBtn.className = 'fullscreen-chat-close'; fullscreenCloseBtn.setAttribute('type', 'button'); fullscreenCloseBtn.setAttribute('onclick', 'closeMobileChat()'); fullscreenCloseBtn.setAttribute('aria-label', 'Close fullscreen chat'); var fullscreenCloseIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); fullscreenCloseIcon.setAttribute('width', '20'); fullscreenCloseIcon.setAttribute('height', '20'); fullscreenCloseIcon.setAttribute('viewBox', '0 0 24 24'); fullscreenCloseIcon.setAttribute('fill', 'none'); fullscreenCloseIcon.setAttribute('stroke', 'currentColor'); fullscreenCloseIcon.setAttribute('stroke-width', '2'); var fsCloseLineOne = document.createElementNS('http://www.w3.org/2000/svg', 'line'); fsCloseLineOne.setAttribute('x1', '6'); fsCloseLineOne.setAttribute('y1', '6'); fsCloseLineOne.setAttribute('x2', '18'); fsCloseLineOne.setAttribute('y2', '18'); fsCloseLineOne.setAttribute('stroke-linecap', 'round'); var fsCloseLineTwo = document.createElementNS('http://www.w3.org/2000/svg', 'line'); fsCloseLineTwo.setAttribute('x1', '6'); fsCloseLineTwo.setAttribute('y1', '18'); fsCloseLineTwo.setAttribute('x2', '18'); fsCloseLineTwo.setAttribute('y2', '6'); fsCloseLineTwo.setAttribute('stroke-linecap', 'round'); fullscreenCloseIcon.appendChild(fsCloseLineOne); fullscreenCloseIcon.appendChild(fsCloseLineTwo); fullscreenCloseBtn.appendChild(fullscreenCloseIcon); // Note: Will be appended to chatContainer below for proper positioning // Chat messages area var chatMessages = document.createElement('div'); chatMessages.className = 'chat-messages'; chatMessages.id = 'chatMessages'; // Add initial AI welcome message addInitialWelcomeMessage(chatMessages); // Chat input area var inputContainer = document.createElement('div'); inputContainer.className = 'chat-input-container'; var inputWrapper = document.createElement('div'); inputWrapper.className = 'chat-input-wrapper'; var chatInput = document.createElement('textarea'); chatInput.className = 'chat-input'; chatInput.id = 'chatInput'; chatInput.placeholder = 'Ask about your assessment results, KPIs, or transformation strategy...'; chatInput.rows = 2; chatInput.setAttribute('onkeydown', 'handleChatKeydown(event)'); var sendBtn = document.createElement('button'); sendBtn.className = 'chat-send-btn'; sendBtn.id = 'chatSendBtn'; sendBtn.setAttribute('onclick', 'sendChatMessage()'); var sendIcon = document.createElement('i'); sendIcon.setAttribute('data-lucide', 'send'); sendBtn.appendChild(sendIcon); inputWrapper.appendChild(chatInput); inputWrapper.appendChild(sendBtn); inputContainer.appendChild(inputWrapper); // Assemble chat container chatContainer.appendChild(fullscreenCloseBtn); chatContainer.appendChild(chatHeader); chatContainer.appendChild(chatMessages); chatContainer.appendChild(inputContainer); container.appendChild(chatContainer); // Initialize chat functionality initializeChatInput(); // Refresh Lucide icons if (typeof DAVA_refreshIcons === 'function') { setTimeout(DAVA_refreshIcons, 0); } } function addInitialWelcomeMessage(chatMessages) { var messageDiv = document.createElement('div'); messageDiv.className = 'chat-message ai-message'; var avatar = document.createElement('div'); avatar.className = 'message-avatar ai-avatar'; avatar.textContent = 'AI'; var contentWrapper = document.createElement('div'); contentWrapper.className = 'message-content'; var messageText = document.createElement('div'); messageText.className = 'message-text'; var welcomeText = "Hi! I'm your AI business advisor. I've analyzed your assessment results and I'm ready to help with strategic questions about your digital transformation journey."; if (currentProject && currentProject.insights) { welcomeText += "\n\nI can see you have a " + (currentProject.insights.gaugeValue || 59) + "% transformation readiness score. " + (currentProject.insights.quickWin || "Let's discuss how to optimize your transformation strategy!"); } // Parse markdown for welcome message messageText.innerHTML = phoros.parseMarkdown(welcomeText); var messageTime = document.createElement('div'); messageTime.className = 'message-time'; messageTime.textContent = 'Just now'; contentWrapper.appendChild(messageText); contentWrapper.appendChild(messageTime); messageDiv.appendChild(avatar); messageDiv.appendChild(contentWrapper); chatMessages.appendChild(messageDiv); } function initializeChatInput() { // Chat input now uses inline onkeydown handler } function handleChatKeydown(event) { if (event.key === 'Enter' && !event.shiftKey) { event.preventDefault(); sendChatMessage(); } } function sendChatMessage() { var chatInput = document.getElementById('chatInput'); var message = chatInput.value.trim(); if (!message) return; // Clear input and disable send button chatInput.value = ''; var sendBtn = document.getElementById('chatSendBtn'); sendBtn.disabled = true; // Add user message to chat addChatMessage(message, 'user'); // Show typing indicator showTypingIndicator(); // CHPH-only path if (avaObjectiveId) { sendMessageToChph(message, sendBtn); } else { createAvaObjectiveAndSend(message, sendBtn); } } function createAvaObjectiveAndSend(message, sendBtn) { if (!currentProject || !currentProject.id) { hideTypingIndicator(); sendBtn.disabled = false; addChatMessage('Please select a project first.', 'ai'); return; } var context = { companyName: currentProject.companyName || currentProject.company_name || null, industry: currentProject.industry || null, readinessScore: currentProject.insights ? currentProject.insights.gaugeValue : null }; phoros.processor(AVA_CONVERSATION_PROCESSOR_ID, { type: 'startOrGetObjective', payload: { project_id: currentProject.id, context: context } }, function(error, result) { if (error || !result || !result.success) { hideTypingIndicator(); sendBtn.disabled = false; console.error('CHPH: Failed to create objective'); addChatMessage('I had trouble starting our conversation.', 'ai'); return; } avaObjectiveId = result.data.objective_id; sendMessageToChph(message, sendBtn); }); } function sendMessageToChph(message, sendBtn) { phoros.processor(AVA_CONVERSATION_PROCESSOR_ID, { type: 'sendMessage', payload: { objective_id: avaObjectiveId, message: message } }, function(error, result) { hideTypingIndicator(); sendBtn.disabled = false; if (error || !result || !result.success) { if (result && result.errorCode === 'BUSY') { addChatMessage('Ava is still thinking...', 'ai'); return; } addChatMessage('I had trouble processing your message.', 'ai'); return; } var responseText = result.data.response || ''; var parsed = result.data.parsed; if (parsed) { var aiResponse = parsed.response || responseText; if (currentProject && parsed.capacity_summary) { currentProject.capacitySummary = parsed.capacity_summary; } addChatMessage(aiResponse, 'ai'); if (parsed.kpis && parsed.kpis.length > 0) { addKpiSaveActions(parsed.kpis); } } else { addChatMessage(responseText || 'I received your message.', 'ai'); } }); } function addChatMessage(text, type) { var chatMessages = document.getElementById('chatMessages'); if (!chatMessages) { // Try to find chat messages in current tab panel var chatTab = document.getElementById('chat'); if (chatTab) { chatMessages = chatTab.querySelector('.chat-messages'); } if (!chatMessages) return; } // Add to history chatHistory.push({ text: text, type: type, timestamp: new Date() }); // Create message element var messageDiv = document.createElement('div'); messageDiv.className = 'chat-message ' + (type === 'user' ? 'user-message' : 'ai-message'); // Avatar var avatar = document.createElement('div'); var isUserMessage = type === 'user'; avatar.className = 'message-avatar ' + (isUserMessage ? 'user-avatar' : 'ai-avatar'); if (isUserMessage && userChatContext.imageUrl) { avatar.classList.add('has-image'); var avatarImg = document.createElement('img'); avatarImg.src = userChatContext.imageUrl; avatarImg.alt = getUserAvatarAltText(); avatar.appendChild(avatarImg); } else { avatar.textContent = isUserMessage ? userChatContext.initials : 'AI'; } // Content wrapper var contentWrapper = document.createElement('div'); contentWrapper.className = 'message-content'; // Message text - parse markdown for AI messages, plain text for user messages var messageText = document.createElement('div'); messageText.className = 'message-text'; if (type === 'user') { messageText.textContent = text; } else { messageText.innerHTML = phoros.parseMarkdown(text); } // Timestamp var messageTime = document.createElement('div'); messageTime.className = 'message-time'; messageTime.textContent = new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'}); // Assemble message contentWrapper.appendChild(messageText); contentWrapper.appendChild(messageTime); messageDiv.appendChild(avatar); messageDiv.appendChild(contentWrapper); // Add to chat and scroll to bottom chatMessages.appendChild(messageDiv); chatMessages.scrollTop = chatMessages.scrollHeight; } function addKpiSaveActions(kpis) { var chatMessages = document.getElementById('chatMessages'); if (!chatMessages) return; var actionDiv = document.createElement('div'); actionDiv.className = 'chat-message ai-message'; var avatar = document.createElement('div'); avatar.className = 'message-avatar ai-avatar'; avatar.textContent = 'AI'; var content = document.createElement('div'); content.className = 'message-content'; var text = document.createElement('div'); text.className = 'message-text'; text.textContent = 'Here are the suggested objectives. Save individually or all at once:'; // Individual KPI items with save buttons - compact scrollable list var kpiList = document.createElement('div'); kpiList.style.cssText = 'margin-top:8px; max-height:140px; overflow-y:auto; display:flex; flex-direction:column; gap:4px; padding-right:4px;'; function saveOneObjective(kpiRecord, btn) { btn.disabled = true; btn.textContent = '...'; var payload = { project_id: currentProject ? currentProject.id : null, title: (kpiRecord && (kpiRecord.kpi_name || kpiRecord.kpiName)) ? (kpiRecord.kpi_name || kpiRecord.kpiName) : 'Objective', description: (kpiRecord && kpiRecord.description) ? kpiRecord.description : '', targetDateISO: null, isCompleted: false }; phoros.processor('iWGwhXccDY6Wx2iRM', { type: 'createObjective', payload: payload }, function(error, result) { if (!error && result && result.success && result.data && result.data.objective) { upsertObjectiveCache(result.data.objective); updateHeroMetrics(); renderProjectProgressSummary(); btn.textContent = '\u2713'; btn.style.background = '#10b981'; btn.style.cursor = 'default'; } else { btn.disabled = false; btn.textContent = '+'; addChatMessage('Could not save that objective. Please try again.', 'ai'); } }); } kpis.forEach(function(k, idx) { var row = document.createElement('div'); row.style.cssText = 'display:flex; align-items:center; gap:6px; padding:5px 8px; background:#f8fafc; border-radius:6px; border:1px solid #e2e8f0;'; var label = document.createElement('span'); label.style.cssText = 'flex:1; font-size:12px; color:#334155; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;'; label.textContent = (k.kpi_name || k.kpiName || 'Objective ' + (idx + 1)); label.title = label.textContent; var saveBtn = document.createElement('button'); saveBtn.style.cssText = 'padding:2px 8px; font-size:11px; background:#6366f1; color:white; border:none; border-radius:4px; cursor:pointer; flex-shrink:0;'; saveBtn.textContent = '+'; saveBtn.title = 'Save as objective'; saveBtn.onclick = function() { saveOneObjective(k, saveBtn); }; row.appendChild(label); row.appendChild(saveBtn); kpiList.appendChild(row); }); // Bulk actions var actions = document.createElement('div'); actions.style.cssText = 'margin-top:12px; display:flex; gap:8px; flex-wrap:wrap;'; function buildLocalObjectiveFromKpi(kpiRecord) { return { id: 'obj_' + Date.now() + '_' + Math.floor(Math.random() * 1000), projectId: currentProject ? currentProject.id : null, title: (kpiRecord && (kpiRecord.kpi_name || kpiRecord.kpiName)) ? (kpiRecord.kpi_name || kpiRecord.kpiName) : 'Objective', description: (kpiRecord && kpiRecord.description) ? kpiRecord.description : '', targetDateISO: null, isCompleted: false, dateCreatedISO: new Date().toISOString() }; } var saveAll = document.createElement('button'); saveAll.className = 'btn btn-secondary'; saveAll.style.cssText = 'font-size:12px;'; saveAll.textContent = 'Save All as Objectives'; saveAll.onclick = function(){ if (!Array.isArray(kpis) || kpis.length === 0) { addChatMessage('No KPIs to save yet.', 'ai'); return; } if (!currentProject || !currentProject.id) { projectObjectives = sortObjectivesForDisplay(projectObjectives.concat(kpis.map(function(k){ return normalizeObjective({ id: 'obj_' + Date.now() + '_' + Math.floor(Math.random()*1000), title: (k.kpi_name || k.kpiName || 'Objective'), description: (k.description || ''), isCompleted: false }); }))); updateHeroMetrics(); renderProjectProgressSummary(); addChatMessage('Saved to project (done)', 'ai'); return; } saveAll.disabled = true; saveAll.textContent = 'Saving...'; var pending = kpis.length; var successCount = 0; var failureCount = 0; kpis.forEach(function(k){ var payload = { project_id: currentProject.id, title: (k && (k.kpi_name || k.kpiName)) ? (k.kpi_name || k.kpiName) : 'Objective', description: (k && k.description) ? k.description : '', targetDateISO: null, isCompleted: false }; phoros.processor('iWGwhXccDY6Wx2iRM', { type: 'createObjective', payload: payload }, function(error, result) { if (!error && result && result.success && result.data && result.data.objective) { successCount += 1; upsertObjectiveCache(result.data.objective); } else { failureCount += 1; } pending -= 1; if (pending === 0) { if (successCount > 0) { refreshProjectCollections(); // Mark all individual buttons as saved var btns = kpiList.querySelectorAll('button'); btns.forEach(function(b) { b.textContent = 'Saved'; b.disabled = true; b.style.background = '#10b981'; }); saveAll.textContent = 'All Saved'; saveAll.style.background = '#10b981'; saveAll.style.color = 'white'; } if (failureCount > 0) { saveAll.disabled = false; saveAll.textContent = 'Save All as Objectives'; addChatMessage('I could not save some objectives to your project. Please try again shortly.', 'ai'); } } }); }); }; actions.appendChild(saveAll); content.appendChild(text); content.appendChild(kpiList); content.appendChild(actions); actionDiv.appendChild(avatar); actionDiv.appendChild(content); chatMessages.appendChild(actionDiv); chatMessages.scrollTop = chatMessages.scrollHeight; } function showTypingIndicator() { var chatMessages = document.getElementById('chatMessages'); if (!chatMessages) return; var typingDiv = document.createElement('div'); typingDiv.className = 'typing-indicator'; typingDiv.id = 'typingIndicator'; var typingText = document.createElement('span'); typingText.textContent = 'AI is thinking'; var dotsContainer = document.createElement('div'); dotsContainer.className = 'typing-dots'; for (var i = 0; i < 3; i++) { var dot = document.createElement('div'); dot.className = 'typing-dot'; dotsContainer.appendChild(dot); } typingDiv.appendChild(typingText); typingDiv.appendChild(dotsContainer); chatMessages.appendChild(typingDiv); chatMessages.scrollTop = chatMessages.scrollHeight; } function hideTypingIndicator() { var typingIndicator = document.getElementById('typingIndicator'); if (typingIndicator) { typingIndicator.remove(); } } if (typeof window.DavaTutorials === 'undefined') { window.DavaTutorials = (function() { var cookieOptions = { expires: 'Infinity', maxAge: 31536e3 }; function getCookie(key) { if (typeof localStorage !== 'undefined') { try { var localValue = localStorage.getItem(key); if (localValue !== null && localValue !== undefined) { return localValue; } } catch (storageError) { /* ignore */ } } try { if (typeof phoros !== 'undefined' && phoros.cookies && typeof phoros.cookies.get === 'function' && typeof cookies !== 'undefined') { return phoros.cookies.get.call(cookies, key); } if (typeof cookies !== 'undefined' && typeof cookies.get === 'function') { return cookies.get.call(cookies, key); } } catch (error) { /* ignore */ } if (typeof document !== 'undefined' && document.cookie) { var cookiePairs = document.cookie.split(';'); for (var i = 0; i < cookiePairs.length; i++) { var pair = cookiePairs[i].trim(); if (!pair) { continue; } var parts = pair.split('='); if (parts[0] === key) { return parts.slice(1).join('='); } } } return null; } function setCookie(key, value) { var stored = false; if (!stored && typeof localStorage !== 'undefined') { try { localStorage.setItem(key, String(value || '')); stored = true; } catch (storageError) { stored = false; } } if (!stored && typeof phoros !== 'undefined' && phoros.cookies && typeof phoros.cookies.set === 'function' && typeof cookies !== 'undefined') { try { phoros.cookies.set.call(cookies, key, value, cookieOptions); stored = true; } catch (phorosError) { stored = false; } } if (!stored && typeof cookies !== 'undefined' && typeof cookies.set === 'function') { try { cookies.set.call(cookies, key, value, cookieOptions); stored = true; } catch (cookieError) { stored = false; } } if (stored) { return true; } if (typeof document !== 'undefined') { try { var encoded = encodeURIComponent(String(value || '')); var maxAge = cookieOptions && cookieOptions.maxAge ? '; max-age=' + cookieOptions.maxAge : ''; document.cookie = key + '=' + encoded + '; path=/' + maxAge; return true; } catch (docError) { /* ignore */ } } return false; } function hasSeen(key) { return getCookie(key) === 'true'; } function markSeen(key) { setCookie(key, 'true'); } function getIntroInstance() { if (typeof window.introJs === 'function') { return window.introJs(); } return null; } function runTutorial(key, steps, extraOptions) { if (!steps || !steps.length) { return false; } var intro = getIntroInstance(); if (!intro) { console.warn('Intro.js is unavailable; skipping tutorial for', key); return false; } var options = { hidePrev: true, exitOnEsc: false, exitOnOverlayClick: false, showBullets: false, disableInteraction: true, nextLabel: 'Next >', prevLabel: '< Prev', doneLabel: 'Done', steps: steps }; if (extraOptions) { for (var optionKey in extraOptions) { if (Object.prototype.hasOwnProperty.call(extraOptions, optionKey)) { options[optionKey] = extraOptions[optionKey]; } } } intro.setOptions(options); intro.oncomplete(function() { markSeen(key); }); intro.onexit(function() { markSeen(key); }); intro.start(); return true; } return { runTutorial: runTutorial, markSeen: markSeen, hasSeen: hasSeen, getCookie: getCookie, setCookie: setCookie }; })(); } (function(tutorials) { if (!tutorials) { return; } var PROJECT_TUTORIAL_COOKIE = 'davaProjectTutorialSeen'; var retryCounts = {}; function ensureIntroLoaded(retryKey, retryFn) { if (typeof window.introJs === 'function') { retryCounts[retryKey] = 0; return true; } var attempts = retryCounts[retryKey] || 0; if (attempts >= 5) { console.warn('Intro.js unavailable after retries for', retryKey); return false; } retryCounts[retryKey] = attempts + 1; setTimeout(retryFn, 600 * (attempts + 1)); return false; } function getProjectSteps() { var steps = []; var isMobileLayout = false; if (typeof window.matchMedia === 'function') { isMobileLayout = window.matchMedia('(max-width: 768px)').matches; } else { var viewportWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; isMobileLayout = viewportWidth <= 768; } var hero = document.getElementById('projectHero'); if (hero) { steps.push({ element: hero, title: 'Project Overview', intro: 'Each project begins with a snapshot of readiness, active work, and the next priority.' }); } var stats = document.getElementById('projectHeroStats'); if (stats) { steps.push({ element: stats, title: 'Live Metrics', intro: 'Track readiness, active work, and priority focus without leaving the page.' }); } var tabNav = document.getElementById('projectTabNav'); if (tabNav) { steps.push({ element: tabNav, title: 'Navigate Workstreams', intro: 'Switch between Pulse, Roadmap, and KPI views with these tabs.' }); } var pulsePanel = document.getElementById('pulse'); if (pulsePanel) { steps.push({ element: pulsePanel, title: 'Pulse Briefing', intro: 'AI briefs and mini-pods blend assessment insights, objectives, and KPIs in one view.' }); } var assistant = document.getElementById('assistantSidebar'); if (assistant) { steps.push({ element: assistant, title: 'DAVA Assistant', intro: 'Collaborate with AI for playbooks, insights, and next actions while you build momentum.' }); } var mobileTabs = document.getElementById('projectMobileTabBar'); if (isMobileLayout && mobileTabs) { steps.push({ element: mobileTabs, title: 'Mobile Navigation', intro: 'Use the bottom bar on mobile to jump between pulse, roadmap, KPI, and chat.' }); } return steps; } function launchProjectTutorial(force) { if (!document.querySelector('.project-shell')) { return false; } if (!force && tutorials.hasSeen(PROJECT_TUTORIAL_COOKIE)) { return false; } if (!ensureIntroLoaded('project', function() { tutorials.launchProjectTutorial(force); })) { return false; } var steps = getProjectSteps(); if (!steps.length) { return false; } return tutorials.runTutorial(PROJECT_TUTORIAL_COOKIE, steps, { doneLabel: ' Let\'s build' }); } tutorials.launchProjectTutorial = launchProjectTutorial; })(window.DavaTutorials); // Initialize when page loads (function() { if (document.querySelector('.project-shell')) { initializeUserContext(); initializeProject(); var aside = document.getElementById('assistantSidebar'); if (aside && !aside.querySelector('.chat-container')) { loadChatContent(aside); } setTimeout(function() { if (window.DavaTutorials && typeof window.DavaTutorials.launchProjectTutorial === 'function') { window.DavaTutorials.launchProjectTutorial(false); } }, 1500); } })(); // Make chat functions globally available window.sendChatMessage = sendChatMessage; window.handleChatKeydown = handleChatKeydown; window.toggleMobileChat = toggleMobileChat; window.closeMobileChat = closeMobileChat; // ═══════════════════════════════════════════════════════════════ // LEARNING TAB - Micro-learning Content // ═══════════════════════════════════════════════════════════════ var learningResourcesCache = null; function loadLearningContent(tabPanel) { // Create container structure using DOM methods (avoid innerHTML for Blaze compatibility) var container = document.createElement('div'); container.className = 'learning-container'; var header = document.createElement('div'); header.className = 'learning-header'; var h2 = document.createElement('h2'); h2.textContent = 'Learning Resources'; header.appendChild(h2); var headerP = document.createElement('p'); headerP.textContent = 'Micro-learning content to accelerate your digital transformation journey (2-5 min each)'; header.appendChild(headerP); container.appendChild(header); var categoriesContainer = document.createElement('div'); categoriesContainer.className = 'learning-categories'; categoriesContainer.id = 'learningCategoriesContainer'; // Show loading state using DOM methods var loadingDiv = document.createElement('div'); loadingDiv.className = 'learning-loading'; var spinner = document.createElement('div'); spinner.className = 'loading-spinner'; loadingDiv.appendChild(spinner); var loadingP = document.createElement('p'); loadingP.textContent = 'Loading learning resources...'; loadingDiv.appendChild(loadingP); categoriesContainer.appendChild(loadingDiv); container.appendChild(categoriesContainer); tabPanel.appendChild(container); // Fetch learning resources loadLearningResources(); } var learningProgressCache = null; function loadLearningResources() { var container = document.getElementById('learningCategoriesContainer'); if (!container) return; if (!currentProject || !currentProject.id) { showLearningEmptyState(container, 'No project selected'); return; } // Load both resources and progress in parallel var resourcesLoaded = false; var progressLoaded = false; var resourcesData = null; var progressData = null; function tryRender() { if (!resourcesLoaded || !progressLoaded) return; if (!resourcesData || !resourcesData.resources || resourcesData.resources.length === 0) { showLearningEmptyState(container, null); return; } // Merge progress into resources var progressMap = (progressData && progressData.byResourceId) || {}; resourcesData.resources.forEach(function(resource) { var prog = progressMap[resource._id]; if (prog) { resource.userProgress = prog; resource.isCompleted = prog.status === 'completed'; resource.progressPercent = prog.progressPercent || 0; } else { resource.userProgress = null; resource.isCompleted = false; resource.progressPercent = 0; } }); // Re-group by category with progress var byCategory = {}; resourcesData.resources.forEach(function(resource) { var cat = resource.category || 'General'; if (!byCategory[cat]) { byCategory[cat] = []; } byCategory[cat].push(resource); }); learningResourcesCache = resourcesData; learningProgressCache = progressData; renderLearningCategories(container, byCategory); } phoros.processor('iWGwhXccDY6Wx2iRM', { type: 'getLearningResources', payload: { project_id: currentProject.id } }, function(error, result) { resourcesLoaded = true; if (!error && result && result.success) { resourcesData = result.data; } tryRender(); }); phoros.processor('iWGwhXccDY6Wx2iRM', { type: 'getLearningProgress', payload: { project_id: currentProject.id } }, function(error, result) { progressLoaded = true; if (!error && result && result.success) { progressData = result.data; } tryRender(); }); } function showLearningEmptyState(container, errorMessage) { // Clear using DOM methods while (container.firstChild) { container.removeChild(container.firstChild); } var emptyState = document.createElement('div'); emptyState.className = 'learning-empty-state'; var h3 = document.createElement('h3'); var p = document.createElement('p'); if (errorMessage) { h3.textContent = 'Error Loading Resources'; p.textContent = errorMessage; } else { h3.textContent = 'Learning Resources Coming Soon'; p.textContent = 'We are curating micro-learning content to help accelerate your digital transformation. Check back soon!'; } emptyState.appendChild(h3); emptyState.appendChild(p); container.appendChild(emptyState); } function renderLearningCategories(container, byCategory) { // Clear using DOM methods while (container.firstChild) { container.removeChild(container.firstChild); } Object.keys(byCategory).forEach(function(categoryName) { var resources = byCategory[categoryName]; if (!resources || resources.length === 0) return; var categorySection = document.createElement('div'); categorySection.className = 'learning-category'; var title = document.createElement('h3'); title.className = 'learning-category-title'; title.textContent = categoryName; categorySection.appendChild(title); var grid = document.createElement('div'); grid.className = 'learning-grid'; resources.forEach(function(resource) { var card = createLearningCard(resource); grid.appendChild(card); }); categorySection.appendChild(grid); container.appendChild(categorySection); }); } function createLearningCard(resource) { var card = document.createElement('div'); card.className = 'learning-card' + (resource.isCompleted ? ' is-completed' : ''); card.onclick = function() { openLearningResource(resource); }; // Thumbnail var thumbnail = document.createElement('div'); thumbnail.className = 'learning-card-thumbnail'; if (resource.thumbnailUrl) { var img = document.createElement('img'); img.src = resource.thumbnailUrl; img.alt = resource.title; thumbnail.appendChild(img); } // Show completion checkmark or play icon if (resource.isCompleted) { var checkIcon = document.createElement('div'); checkIcon.className = 'completion-icon'; var checkSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); checkSvg.setAttribute('viewBox', '0 0 24 24'); checkSvg.setAttribute('fill', 'none'); checkSvg.setAttribute('stroke', 'currentColor'); checkSvg.setAttribute('stroke-width', '3'); var checkPath = document.createElementNS('http://www.w3.org/2000/svg', 'polyline'); checkPath.setAttribute('points', '20 6 9 17 4 12'); checkSvg.appendChild(checkPath); checkIcon.appendChild(checkSvg); thumbnail.appendChild(checkIcon); } else { var playIcon = document.createElement('div'); playIcon.className = 'play-icon'; // Create SVG using createElementNS for Blaze compatibility var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); svg.setAttribute('viewBox', '0 0 24 24'); svg.setAttribute('fill', 'currentColor'); var polygon = document.createElementNS('http://www.w3.org/2000/svg', 'polygon'); polygon.setAttribute('points', '5 3 19 12 5 21 5 3'); svg.appendChild(polygon); playIcon.appendChild(svg); thumbnail.appendChild(playIcon); } var duration = document.createElement('span'); duration.className = 'learning-card-duration'; duration.textContent = resource.duration || '2-5 min'; thumbnail.appendChild(duration); card.appendChild(thumbnail); // Content var content = document.createElement('div'); content.className = 'learning-card-content'; var title = document.createElement('h4'); title.className = 'learning-card-title'; title.textContent = resource.title || 'Learning Resource'; content.appendChild(title); if (resource.description) { var description = document.createElement('p'); description.className = 'learning-card-description'; description.textContent = resource.description; content.appendChild(description); } var meta = document.createElement('div'); meta.className = 'learning-card-meta'; // Show completion status or difficulty if (resource.isCompleted) { var completedBadge = document.createElement('span'); completedBadge.className = 'learning-card-completed'; completedBadge.textContent = 'Completed'; meta.appendChild(completedBadge); } else { var difficulty = document.createElement('span'); difficulty.className = 'learning-card-difficulty ' + (resource.difficulty || 'beginner'); difficulty.textContent = resource.difficulty || 'Beginner'; meta.appendChild(difficulty); } if (resource.tags && resource.tags.length > 0) { var tagsContainer = document.createElement('div'); tagsContainer.className = 'learning-card-tags'; resource.tags.slice(0, 2).forEach(function(tag) { var tagEl = document.createElement('span'); tagEl.className = 'learning-tag'; tagEl.textContent = tag; tagsContainer.appendChild(tagEl); }); meta.appendChild(tagsContainer); } content.appendChild(meta); card.appendChild(content); return card; } function openLearningResource(resource) { if (!resource || !resource.contentUrl) { console.warn('No content URL for learning resource'); return; } // Check if it's a video URL (YouTube, Vimeo, etc.) var url = resource.contentUrl; var isVideo = /youtube|youtu\.be|vimeo|wistia/i.test(url); if (isVideo) { openLearningModal(resource); } else { // Open external link in new tab window.open(url, '_blank'); } } function openLearningModal(resource) { var existingModal = document.getElementById('learningVideoModal'); if (existingModal) { existingModal.remove(); } var modal = document.createElement('div'); modal.id = 'learningVideoModal'; modal.className = 'learning-modal is-visible'; var backdrop = document.createElement('div'); backdrop.className = 'learning-modal-backdrop'; backdrop.onclick = closeLearningModal; modal.appendChild(backdrop); var content = document.createElement('div'); content.className = 'learning-modal-content'; var header = document.createElement('div'); header.className = 'learning-modal-header'; var title = document.createElement('h3'); title.className = 'learning-modal-title'; title.textContent = resource.title || 'Learning Resource'; header.appendChild(title); var closeBtn = document.createElement('button'); closeBtn.className = 'learning-modal-close'; closeBtn.textContent = '\u00D7'; // Unicode multiplication sign (×) closeBtn.onclick = closeLearningModal; header.appendChild(closeBtn); content.appendChild(header); var videoContainer = document.createElement('div'); videoContainer.className = 'learning-modal-video'; // Convert video URL to embed URL var embedUrl = convertToEmbedUrl(resource.contentUrl); var iframe = document.createElement('iframe'); iframe.src = embedUrl; iframe.setAttribute('allowfullscreen', 'true'); iframe.setAttribute('allow', 'autoplay; fullscreen'); videoContainer.appendChild(iframe); content.appendChild(videoContainer); modal.appendChild(content); document.body.appendChild(modal); } function closeLearningModal() { var modal = document.getElementById('learningVideoModal'); if (modal) { modal.remove(); } } function convertToEmbedUrl(url) { if (!url) return ''; // YouTube var youtubeMatch = url.match(/(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)([^&?\/]+)/); if (youtubeMatch) { return 'https://www.youtube.com/embed/' + youtubeMatch[1] + '?autoplay=1'; } // Vimeo var vimeoMatch = url.match(/vimeo\.com\/(?:video\/)?(\d+)/); if (vimeoMatch) { return 'https://player.vimeo.com/video/' + vimeoMatch[1] + '?autoplay=1'; } // Wistia var wistiaMatch = url.match(/wistia\.com\/(?:medias|embed)\/([a-zA-Z0-9]+)/); if (wistiaMatch) { return 'https://fast.wistia.net/embed/iframe/' + wistiaMatch[1] + '?autoplay=1'; } // Return original if no match return url; } // Export learning functions window.loadLearningResources = loadLearningResources; window.openLearningResource = openLearningResource; window.closeLearningModal = closeLearningModal; // Track learning progress function trackLearningProgress(resourceId, status, progressPercent) { if (!currentProject || !currentProject.id) return; var payload = { resource_id: resourceId, project_id: currentProject.id, status: status }; if (typeof progressPercent === 'number') { payload.progressPercent = progressPercent; } phoros.processor('iWGwhXccDY6Wx2iRM', { type: 'updateLearningProgress', payload: payload }, function(error, result) { if (error) { console.warn('Failed to track learning progress:', error); } }); } function markLearningComplete(resourceId) { trackLearningProgress(resourceId, 'completed', 100); setTimeout(function() { loadLearningResources(); }, 500); } window.trackLearningProgress = trackLearningProgress; window.markLearningComplete = markLearningComplete; // ═══════════════════════════════════════════════════════════════ // Files Tab Functions - Project Documents // ═══════════════════════════════════════════════════════════════ function loadFilesContent(tabPanel) { if (!tabPanel) { tabPanel = document.getElementById('files'); } if (!tabPanel) { return; } // Build the container structure using DOM methods (no innerHTML for Blaze compatibility) tabPanel.textContent = ''; var container = document.createElement('div'); container.className = 'files-container'; // Header var header = document.createElement('div'); header.className = 'files-header'; var headerText = document.createElement('div'); headerText.className = 'files-header-text'; var h2 = document.createElement('h2'); h2.textContent = 'Project Files'; headerText.appendChild(h2); var p = document.createElement('p'); p.textContent = 'Upload and manage documents, reports, and resources for this project'; headerText.appendChild(p); header.appendChild(headerText); var uploadBtn = document.createElement('button'); uploadBtn.type = 'button'; uploadBtn.className = 'files-upload-btn'; uploadBtn.onclick = uploadProjectFile; var uploadIcon = document.createElement('i'); uploadIcon.setAttribute('data-lucide', 'upload'); uploadBtn.appendChild(uploadIcon); var uploadSpan = document.createElement('span'); uploadSpan.textContent = 'Upload File'; uploadBtn.appendChild(uploadSpan); header.appendChild(uploadBtn); container.appendChild(header); // Files list container var filesList = document.createElement('div'); filesList.className = 'files-list'; filesList.id = 'filesListContainer'; var loading = document.createElement('div'); loading.className = 'files-loading'; var spinner = document.createElement('div'); spinner.className = 'loading-spinner'; loading.appendChild(spinner); var loadingP = document.createElement('p'); loadingP.textContent = 'Loading files...'; loading.appendChild(loadingP); filesList.appendChild(loading); container.appendChild(filesList); tabPanel.appendChild(container); // Refresh Lucide icons if (window.DAVA_refreshIcons) { window.DAVA_refreshIcons(); } // Load files from server loadProjectFiles(); } function loadProjectFiles() { var container = document.getElementById('filesListContainer'); if (!container) { return; } if (!currentProject || !currentProject.id) { showFilesEmptyState(container, 'No project selected'); return; } phoros.processor('iWGwhXccDY6Wx2iRM', { type: 'getProjectFiles', payload: { project_id: currentProject.id } }, function(error, result) { if (error || !result || !result.success) { console.error('Failed to load project files:', error || result); showFilesEmptyState(container, 'Unable to load files'); return; } var files = result.data && result.data.files ? result.data.files : []; if (!files.length) { showFilesEmptyState(container, null); return; } renderFilesList(container, files); }); } function showFilesEmptyState(container, errorMessage) { if (!container) { return; } container.textContent = ''; var empty = document.createElement('div'); empty.className = 'files-empty'; // Icon using Lucide var iconWrapper = document.createElement('div'); iconWrapper.className = 'files-empty-icon'; var icon = document.createElement('i'); icon.setAttribute('data-lucide', 'folder-open'); iconWrapper.appendChild(icon); empty.appendChild(iconWrapper); var h3 = document.createElement('h3'); h3.textContent = errorMessage ? 'Unable to Load Files' : 'No Files Yet'; empty.appendChild(h3); var p = document.createElement('p'); p.textContent = errorMessage || 'Upload documents, reports, and resources for this project'; empty.appendChild(p); if (!errorMessage) { var uploadBtn = document.createElement('button'); uploadBtn.type = 'button'; uploadBtn.className = 'files-empty-upload'; uploadBtn.onclick = uploadProjectFile; var uploadIcon = document.createElement('i'); uploadIcon.setAttribute('data-lucide', 'upload'); uploadBtn.appendChild(uploadIcon); var uploadSpan = document.createElement('span'); uploadSpan.textContent = 'Upload First File'; uploadBtn.appendChild(uploadSpan); empty.appendChild(uploadBtn); } container.appendChild(empty); if (window.DAVA_refreshIcons) { window.DAVA_refreshIcons(); } } function renderFilesList(container, files) { if (!container) { return; } container.textContent = ''; var grid = document.createElement('div'); grid.className = 'files-grid'; files.forEach(function(file) { var card = createFileCard(file); grid.appendChild(card); }); container.appendChild(grid); if (window.DAVA_refreshIcons) { window.DAVA_refreshIcons(); } } function createFileCard(file) { var card = document.createElement('div'); card.className = 'file-card'; card.setAttribute('data-file-id', file._id); // Use file_name for extension detection (file_type may be empty string) var iconClass = getFileIconClass(file.file_name || file.file_type); var isImage = iconClass === 'image'; // Image thumbnail for image files if (isImage && file.file_url) { var thumbnail = document.createElement('div'); thumbnail.className = 'file-card-thumbnail'; var img = document.createElement('img'); img.src = file.file_url; img.alt = file.file_name || 'Image'; img.loading = 'lazy'; img.onerror = function() { // Fallback to icon if image fails to load thumbnail.style.display = 'none'; header.style.display = 'flex'; }; thumbnail.appendChild(img); card.appendChild(thumbnail); } // Header with icon and name var header = document.createElement('div'); header.className = 'file-card-header'; var showThumbnail = isImage && file.file_url; if (showThumbnail) { header.className += ' file-card-header-compact'; // Compact header for thumbnail cards } // Only show icon if not an image with thumbnail if (showThumbnail === false) { var iconWrapper = document.createElement('div'); iconWrapper.className = 'file-card-icon ' + iconClass; var icon = document.createElement('i'); icon.setAttribute('data-lucide', getFileIcon(file.file_name || file.file_type)); iconWrapper.appendChild(icon); header.appendChild(iconWrapper); } var info = document.createElement('div'); info.className = 'file-card-info'; var name = document.createElement('div'); name.className = 'file-card-name'; name.textContent = file.file_name || 'Unnamed File'; name.title = file.file_name || 'Unnamed File'; info.appendChild(name); var meta = document.createElement('div'); meta.className = 'file-card-meta'; meta.textContent = formatFileSize(file.file_size) + ' • ' + formatFileDate(file.dateCreate); info.appendChild(meta); header.appendChild(info); card.appendChild(header); // Body with description and tags (only if content exists) var hasDescription = file.description && file.description.trim(); var hasTags = file.tags && file.tags.length > 0; if (hasDescription || hasTags) { var body = document.createElement('div'); body.className = 'file-card-body'; if (hasDescription) { var desc = document.createElement('p'); desc.className = 'file-card-description'; desc.textContent = file.description; body.appendChild(desc); } if (hasTags) { var tagsContainer = document.createElement('div'); tagsContainer.className = 'file-card-tags'; file.tags.forEach(function(tag) { var tagEl = document.createElement('span'); tagEl.className = 'file-tag'; tagEl.textContent = tag; tagsContainer.appendChild(tagEl); }); body.appendChild(tagsContainer); } card.appendChild(body); } // Footer with uploader and actions var footer = document.createElement('div'); footer.className = 'file-card-footer'; var uploader = document.createElement('span'); uploader.className = 'file-card-uploader'; uploader.textContent = 'Uploaded by ' + (file.uploaded_by_name || 'Unknown'); footer.appendChild(uploader); var actions = document.createElement('div'); actions.className = 'file-card-actions'; // Download button var downloadBtn = document.createElement('button'); downloadBtn.type = 'button'; downloadBtn.className = 'file-action-btn download'; downloadBtn.title = 'Download file'; downloadBtn.onclick = function(e) { e.stopPropagation(); downloadFile(file); }; var downloadIcon = document.createElement('i'); downloadIcon.setAttribute('data-lucide', 'download'); downloadBtn.appendChild(downloadIcon); actions.appendChild(downloadBtn); // Edit button var editBtn = document.createElement('button'); editBtn.type = 'button'; editBtn.className = 'file-action-btn edit'; editBtn.title = 'Edit file details'; editBtn.onclick = function(e) { e.stopPropagation(); editFileDetails(file); }; var editIcon = document.createElement('i'); editIcon.setAttribute('data-lucide', 'pencil'); editBtn.appendChild(editIcon); actions.appendChild(editBtn); // Delete button var deleteBtn = document.createElement('button'); deleteBtn.type = 'button'; deleteBtn.className = 'file-action-btn delete'; deleteBtn.title = 'Delete file'; deleteBtn.onclick = function(e) { e.stopPropagation(); deleteFile(file); }; var deleteIcon = document.createElement('i'); deleteIcon.setAttribute('data-lucide', 'trash-2'); deleteBtn.appendChild(deleteIcon); actions.appendChild(deleteBtn); footer.appendChild(actions); card.appendChild(footer); // Click on card to download card.onclick = function() { downloadFile(file); }; card.style.cursor = 'pointer'; return card; } function getFileIcon(fileNameOrType) { var ext = ''; if (fileNameOrType) { ext = fileNameOrType.split('.').pop().toLowerCase(); } if (ext === 'pdf') { return 'file-text'; } if (ext === 'xls' || ext === 'xlsx' || ext === 'csv') { return 'table'; } if (ext === 'doc' || ext === 'docx') { return 'file-text'; } if (ext === 'ppt' || ext === 'pptx') { return 'presentation'; } if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'].indexOf(ext) !== -1) { return 'image'; } return 'file'; } function getFileIconClass(fileNameOrType) { var ext = ''; if (fileNameOrType) { ext = fileNameOrType.split('.').pop().toLowerCase(); } if (ext === 'pdf') { return 'pdf'; } if (ext === 'xls' || ext === 'xlsx' || ext === 'csv') { return 'excel'; } if (ext === 'doc' || ext === 'docx') { return 'word'; } if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'].indexOf(ext) !== -1) { return 'image'; } return 'default'; } function formatFileSize(bytes) { if (!bytes || bytes === 0) { return '0 B'; } var units = ['B', 'KB', 'MB', 'GB']; var i = 0; while (bytes >= 1024 && i < units.length - 1) { bytes /= 1024; i++; } return bytes.toFixed(i === 0 ? 0 : 1) + ' ' + units[i]; } function formatFileDate(dateMs) { if (!dateMs) { return 'Unknown date'; } var d = new Date(dateMs); return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }); } function buildFileUploadForm() { var container = document.createElement('div'); container.style.textAlign = 'left'; // Description field var descGroup = document.createElement('div'); descGroup.style.marginBottom = '16px'; var descLabel = document.createElement('label'); descLabel.textContent = 'Description (optional)'; descLabel.style.display = 'block'; descLabel.style.fontWeight = '500'; descLabel.style.marginBottom = '4px'; descLabel.style.color = '#374151'; descGroup.appendChild(descLabel); var descInput = document.createElement('input'); descInput.type = 'text'; descInput.id = 'swal-file-desc'; descInput.placeholder = 'Brief description of this file...'; descInput.style.width = '100%'; descInput.style.padding = '8px 12px'; descInput.style.border = '1px solid #d1d5db'; descInput.style.borderRadius = '6px'; descInput.style.fontSize = '14px'; descInput.style.boxSizing = 'border-box'; descGroup.appendChild(descInput); container.appendChild(descGroup); // Tags field var tagsGroup = document.createElement('div'); var tagsLabel = document.createElement('label'); tagsLabel.textContent = 'Tags (optional)'; tagsLabel.style.display = 'block'; tagsLabel.style.fontWeight = '500'; tagsLabel.style.marginBottom = '4px'; tagsLabel.style.color = '#374151'; tagsGroup.appendChild(tagsLabel); var tagsInput = document.createElement('input'); tagsInput.type = 'text'; tagsInput.id = 'swal-file-tags'; tagsInput.placeholder = 'Comma-separated (e.g., report, q1, financial)'; tagsInput.style.width = '100%'; tagsInput.style.padding = '8px 12px'; tagsInput.style.border = '1px solid #d1d5db'; tagsInput.style.borderRadius = '6px'; tagsInput.style.fontSize = '14px'; tagsInput.style.boxSizing = 'border-box'; tagsGroup.appendChild(tagsInput); container.appendChild(tagsGroup); return container; } function uploadProjectFile() { if (!currentProject || !currentProject.id) { Swal.fire({ icon: 'warning', title: 'No Project Selected', text: 'Please select a project first' }); return; } if (!window.phoros || typeof phoros.upload !== 'function') { Swal.fire({ icon: 'error', title: 'Upload Unavailable', text: 'File upload functionality is not available' }); return; } // First ask for file metadata Swal.fire({ title: 'Upload File', html: buildFileUploadForm(), showCancelButton: true, confirmButtonText: 'Select File', cancelButtonText: 'Cancel', confirmButtonColor: '#667eea', preConfirm: function() { var descEl = document.getElementById('swal-file-desc'); var tagsEl = document.getElementById('swal-file-tags'); return { description: descEl ? descEl.value.trim() : '', tagsStr: tagsEl ? tagsEl.value.trim() : '' }; } }).then(function(result) { if (!result.isConfirmed || !result.value) { return; } var description = result.value.description || ''; var tagsStr = result.value.tagsStr || ''; var tags = tagsStr ? tagsStr.split(',').map(function(t) { return t.trim(); }).filter(Boolean) : []; // Use phoros.upload to select and upload file // Following pattern from Spool v3/project.js:1215-1240 phoros.upload({ storageFolder: 'dava/project-files/' + currentProject.id, accept: '.pdf,.doc,.docx,.xls,.xlsx,.csv,.ppt,.pptx,.txt,.jpg,.jpeg,.png,.gif,.webp', maxSize: 25 * 1024 * 1024 // 25MB max }, function(file, url) { if (!url) { return; } // User cancelled Swal.fire({ title: 'Uploading...', text: 'Saving file to project', allowOutsideClick: false, allowEscapeKey: false, didOpen: function() { Swal.showLoading(); } }); phoros.processor('iWGwhXccDY6Wx2iRM', { type: 'uploadProjectFile', payload: { project_id: currentProject.id, file_name: file ? file.name : 'uploaded-file', file_url: url, file_size: file ? file.size : 0, file_type: file ? file.type : '', description: description, tags: tags } }, function(err, res) { Swal.close(); if (res && res.success) { Swal.fire({ icon: 'success', title: 'File Uploaded', text: 'Your file has been saved to this project', timer: 2000, showConfirmButton: false }); loadProjectFiles(); // Refresh the list } else { Swal.fire({ icon: 'error', title: 'Upload Failed', text: (res && res.error) || 'Failed to save file' }); } }); }); }); } function downloadFile(file) { if (!file || !file.file_url) { Swal.fire({ icon: 'error', title: 'Download Failed', text: 'File URL not available' }); return; } // Open file in new tab (or trigger download) window.open(file.file_url, '_blank', 'noopener,noreferrer'); } function editFileDetails(file) { if (!file || !file._id) { return; } Swal.fire({ title: 'Edit File Details', html: '

' + 'Description' + '' + 'Tags (comma-separated)' + '' + '

', showCancelButton: true, confirmButtonText: 'Save', confirmButtonColor: '#22c55e', focusConfirm: false, preConfirm: function() { var desc = document.getElementById('swal-description').value.trim(); var tagsStr = document.getElementById('swal-tags').value.trim(); var tags = tagsStr ? tagsStr.split(',').map(function(t) { return t.trim(); }).filter(function(t) { return t; }) : []; return { description: desc, tags: tags }; } }).then(function(result) { if (!result.isConfirmed) { return; } Swal.fire({ title: 'Saving...', allowOutsideClick: false, allowEscapeKey: false, didOpen: function() { Swal.showLoading(); } }); phoros.processor('iWGwhXccDY6Wx2iRM', { type: 'updateProjectFile', payload: { file_id: file._id, description: result.value.description, tags: result.value.tags } }, function(err, res) { Swal.close(); if (res && res.success) { Swal.fire({ icon: 'success', title: 'File Updated', timer: 1500, showConfirmButton: false }); // Refresh files list var container = document.getElementById('filesContent'); if (container) { loadProjectFilesIntoContainer(container); } } else { Swal.fire({ icon: 'error', title: 'Update Failed', text: (res && res.error) || 'Could not update file' }); } }); }); } function deleteFile(file) { if (!file || !file._id) { return; } Swal.fire({ title: 'Delete File?', text: 'Are you sure you want to delete "' + (file.file_name || 'this file') + '"?', icon: 'warning', showCancelButton: true, confirmButtonColor: '#ef4444', confirmButtonText: 'Delete', cancelButtonText: 'Cancel' }).then(function(result) { if (!result.isConfirmed) { return; } Swal.fire({ title: 'Deleting...', allowOutsideClick: false, allowEscapeKey: false, didOpen: function() { Swal.showLoading(); } }); phoros.processor('iWGwhXccDY6Wx2iRM', { type: 'deleteProjectFile', payload: { file_id: file._id, project_id: currentProject ? currentProject.id : null } }, function(err, res) { Swal.close(); if (res && res.success) { Swal.fire({ icon: 'success', title: 'File Deleted', timer: 1500, showConfirmButton: false }); loadProjectFiles(); // Refresh the list } else { Swal.fire({ icon: 'error', title: 'Delete Failed', text: (res && res.error) || 'Failed to delete file' }); } }); }); } // Export files functions window.uploadProjectFile = uploadProjectFile; window.loadProjectFiles = loadProjectFiles; window.downloadFile = downloadFile; window.deleteFile = deleteFile;