Update templates/index.html

templates/index.html

@@ -196,7 +196,6 @@
             font-size: 20px;
             color: #ed8936;
         }
-        /* Daily Checklist Section */
         .checklist-header {
             display: flex;
             justify-content: space-between;
@@ -256,7 +255,6 @@
             text-decoration: line-through;
             color: #a0aec0;
         }
-        /* Focus Tips Section */
         .tip-card {
             background: linear-gradient(145deg, #e6f0fa, #d1e3ff);
             padding: 20px;
@@ -284,7 +282,6 @@
             font-size: 15px;
             color: #4a5568;
         }
-        /* Supervisor Data Section */
         pre {
             background-color: #f7fafc;
             padding: 15px;
@@ -296,7 +293,6 @@
             overflow-y: auto;
             color: #4a5568;
         }
-        /* Reflection Journal Section */
         .reflection-journal {
             display: flex;
             flex-direction: column;
@@ -347,7 +343,6 @@
             font-weight: 600;
             color: #2d3748;
         }
-        /* KPI Summary Dashboard Section */
         .kpi-dashboard {
             display: grid;
             grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
@@ -413,7 +408,6 @@
             background-color: #f56565;
             color: #fff;
         }
-        /* Buttons */
         button {
             padding: 12px 25px;
             background: linear-gradient(to right, #f6ad55, #ed8936);
@@ -435,7 +429,6 @@
         .download-btn:hover {
             background: linear-gradient(to right, #2f855a, #38a169);
         }
-        /* Toast Notifications */
         .toast {
             position: fixed;
             top: 20px;
@@ -459,7 +452,6 @@
         .toast.visible {
             display: block;
         }
-        /* Responsive Design */
         @media (max-width: 900px) {
             .content-grid {
                 grid-template-columns: 1fr;
@@ -572,7 +564,6 @@
 
     <div class="container">
         <div class="content-grid">
-            <!-- Daily Checklist Section -->
             <div class="section checklist-section">
                 <div class="checklist-header">
                     <h3><i>📋</i> Daily Checklist</h3>
@@ -581,19 +572,16 @@
                 <div id="checklist-items"></div>
             </div>
 
-            <!-- Focus Tips Section -->
             <div class="section tips-section">
                 <h3><i>💡</i> Today's Top 3 Focus Areas</h3>
                 <div id="focus-tips"></div>
             </div>
 
-            <!-- Supervisor Data Section -->
             <div class="section full-width">
                 <h3><i>📊</i> Supervisor Data</h3>
                 <pre id="supervisor-data">Loading supervisor data...</pre>
             </div>
 
-            <!-- Reflection Journal Section -->
             <div class="section full-width reflection-journal">
                 <h3><i>📝</i> Reflection Journal</h3>
                 <div class="reflection-input-area">
@@ -605,17 +593,13 @@
                 </div>
             </div>
 
-            <!-- KPI Summary Dashboard Section -->
             <div class="section full-width kpi-section">
                 <h3><i>📈</i> KPI Summary Dashboard</h3>
-                <div class="kpi-dashboard" id="kpi-dashboard">
-                    <!-- KPIs will be populated dynamically -->
-                </div>
+                <div class="kpi-dashboard" id="kpi-dashboard"></div>
             </div>
         </div>
     </div>
 
-    <!-- Toast Notifications -->
     <div id="error" class="toast error"></div>
     <div id="success" class="toast success"></div>
 
@@ -626,7 +610,6 @@
         let checklistProgress = 0;
         let totalChecklistItems = 0;
 
-        // Toast Notification Function
         function showToast(id, message) {
             const toast = document.getElementById(id);
             toast.textContent = message;
@@ -636,15 +619,13 @@
             }, 3000);
         }
 
-        // Set Avatar Initial
         async function setAvatar() {
             const avatar = document.getElementById('avatar');
             try {
                 const response = await fetch('/get_supervisor_data');
                 const result = await response.json();
-                if (result.status === 'success' && result.data.supervisor_id !== 'GUEST') {
-                    const username = result.data.supervisor_id.split('_')[1] || 'User';
-                    avatar.textContent = username.charAt(0).toUpperCase();
+                if (result.status === 'success' && result.data.supervisor_name !== 'GUEST') {
+                    avatar.textContent = result.data.supervisor_name.charAt(0).toUpperCase();
                 } else {
                     avatar.textContent = 'G';
                 }
@@ -653,7 +634,6 @@
             }
         }
 
-        // Dropdown Toggle
         function toggleDropdown() {
             const dropdown = document.getElementById('dropdown');
             dropdown.classList.toggle('active');
@@ -670,7 +650,6 @@
                     headers: { 'Content-Type': 'application/json' }
                 });
                 const result = await response.json();
-
                 if (result.status === 'success') {
                     window.location.href = '/login';
                 } else {
@@ -681,7 +660,6 @@
             }
         }
 
-        // Search Functionality
         function searchData() {
             const query = document.getElementById('search-bar').value.toLowerCase().trim();
             const resultsDiv = document.getElementById('search-results');
@@ -729,7 +707,6 @@
             showToast('error', 'Voice search not implemented yet.');
         }
 
-        // Update Checklist Progress
         function updateChecklistProgress() {
             const completedItems = document.querySelectorAll('.checklist-item.completed').length;
             checklistProgress = totalChecklistItems > 0 ? (completedItems / totalChecklistItems) * 100 : 0;
@@ -738,6 +715,16 @@
             progressCircle.querySelector('span').textContent = `${Math.round(checklistProgress)}%`;
         }
 
+        function markComplete(index, checkbox) {
+            const itemDiv = checkbox.parentElement;
+            if (checkbox.checked) {
+                itemDiv.classList.add('completed');
+            } else {
+                itemDiv.classList.remove('completed');
+            }
+            updateChecklistProgress();
+        }
+
         async function fetchSupervisorData() {
             try {
                 const response = await fetch('/get_supervisor_data');
@@ -747,7 +734,6 @@
                     supervisorData = result.data;
                     document.getElementById('supervisor-data').textContent = JSON.stringify(supervisorData, null, 2);
 
-                    // Populate Daily Checklist from Salesforce
                     const checklistDiv = document.getElementById('checklist-items');
                     if (supervisorData.daily_checklist) {
                         const checklistItems = supervisorData.daily_checklist.split('\n').filter(item => item.trim());
@@ -761,267 +747,199 @@
                                 <label for="checklist-${index}">${item}</label>
                             `;
                             checklistDiv.appendChild(itemDiv);
-                        });
-                        updateChecklistProgress();
-                    } else {
-                        checklistDiv.innerHTML = '<p>No checklist items available.</p>';
-                    }
-
-                    // Populate Focus Tips from Salesforce
-                    const tipsDiv = document.getElementById('focus-tips');
-                    if (supervisorData.suggested_tips) {
-                        const tips = supervisorData.suggested_tips.split('\n').filter(tip => tip.trim());
-                        tipsDiv.innerHTML = '';
-                        const tipCard = document.createElement('div');
-                        tipCard.className = 'tip-card';
-                        tipCard.innerHTML = `
-                            <h4>Today's Top 3 Focus Areas</h4>
-                            <ul>
-                                ${tips.map(tip => `<li>${tip}</li>`).join('')}
-                            </ul>
-                        `;
-                        tipsDiv.appendChild(tipCard);
-                    } else {
-                        tipsDiv.innerHTML = '<p>No focus tips available.</p>';
-                    }
-
-                    // Populate Reflection History
-                    if (supervisorData.reflection_log) {
-                        reflectionHistory.push({
-                            date: new Date().toLocaleString(),
-                            text: supervisorData.reflection_log
-                        });
-                        updateReflectionHistory();
-                    }
-
-                    // Update Download Link
-                    const downloadBtn = document.getElementById('download-btn');
-                    if (supervisorData.download_link) {
-                        downloadBtn.onclick = () => window.open(supervisorData.download_link, '_blank');
-                        downloadBtn.textContent = 'Download Report';
-                    } else {
-                        downloadBtn.onclick = downloadPDF;
-                        downloadBtn.textContent = 'Download PDF Summary';
-                    }
-
-                    updateKPIDashboard();
-                } else {
-                    showToast('error', result.message);
-                    document.getElementById('supervisor-data').textContent = 'Failed to load supervisor data.';
-                }
-            } catch (error) {
-                showToast('error', 'Error fetching supervisor data: ' + error.message);
-                document.getElementById('supervisor-data').textContent = 'Failed to load supervisor data.';
-            }
-        }
-
-        async function generateCoaching() {
-            if (!supervisorData) {
-                showToast('error', 'Supervisor data not loaded. Please refresh the page.');
-                return;
-            }
-
-            try {
-                const response = await fetch('/generate', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify(supervisorData)
+                       actic: read
+                    checklistDiv.appendChild(itemDiv);
                 });
-                const result = await response.json();
-
-                if (result.status === 'success') {
-                    coachingOutput = result.output;
-                    showToast('success', 'Coaching output generated successfully!');
-
-                    // Populate Daily Checklist
-                    const checklistDiv = document.getElementById('checklist-items');
-                    checklistDiv.innerHTML = '';
-                    if (coachingOutput.checklist && coachingOutput.checklist.length > 0) {
-                        totalChecklistItems = coachingOutput.checklist.length;
-                        coachingOutput.checklist.forEach((item, index) => {
-                            const itemDiv = document.createElement('div');
-                            itemDiv.className = 'checklist-item';
-                            itemDiv.innerHTML = `
-                                <input type="checkbox" id="checklist-${index}" onchange="markComplete(${index}, this)">
-                                <label for="checklist-${index}">${item}</label>
-                            `;
-                            checklistDiv.appendChild(itemDiv);
-                        });
-                        updateChecklistProgress();
-                    } else {
-                        checklistDiv.innerHTML = '<p>No checklist items available.</p>';
-                    }
-
-                    // Populate Focus Tips
-                    const tipsDiv = document.getElementById('focus-tips');
-                    tipsDiv.innerHTML = '';
-                    if (coachingOutput.tips && coachingOutput.tips.length > 0) {
-                        const tipCard = document.createElement('div');
-                        tipCard.className = 'tip-card';
-                        tipCard.innerHTML = `
-                            <h4>Today's Top 3 Focus Areas</h4>
-                            <ul>
-                                ${coachingOutput.tips.map(tip => `<li>${tip}</li>`).join('')}
-                            </ul>
-                        `;
-                        tipsDiv.appendChild(tipCard);
-                    } else {
-                        tipsDiv.innerHTML = '<p>No focus tips available.</p>';
-                    }
-
-                    updateKPIDashboard();
-                } else {
-                    showToast('error', result.message);
-                    document.getElementById('checklist-items').innerHTML = '<p>Failed to generate checklist.</p>';
-                    document.getElementById('focus-tips').innerHTML = '<p>Failed to generate focus tips.</p>';
-                }
-            } catch (error) {
-                showToast('error', 'Error generating coaching output: ' + error.message);
-                document.getElementById('checklist-items').innerHTML = '<p>Failed to generate checklist.</p>';
-                document.getElementById('focus-tips').innerHTML = '<p>Failed to generate focus tips.</p>';
-            }
-        }
-
-        function markComplete(index, checkbox) {
-            const itemDiv = checkbox.parentElement;
-            if (checkbox.checked) {
-                itemDiv.classList.add('completed');
+                updateChecklistProgress();
             } else {
-                itemDiv.classList.remove('completed');
-            }
-            updateChecklistProgress();
-            showToast('success', `Checklist item ${index + 1} marked as ${checkbox.checked ? 'complete' : 'incomplete'} (simulated).`);
-        }
-
-        function updateReflectionHistory() {
-            const historyDiv = document.getElementById('reflection-history');
-            historyDiv.innerHTML = '';
-            if (reflectionHistory.length > 0) {
-                reflectionHistory.forEach(ref => {
-                    const entryDiv = document.createElement('div');
-                    entryDiv.className = 'reflection-entry';
-                    entryDiv.innerHTML = `<span>${ref.date}:</span> ${ref.text}`;
-                    historyDiv.appendChild(entryDiv);
-                });
+                checklistDiv.innerHTML = '<p>No checklist items available.</p>';
+            }
+
+            const tipsDiv = document.getElementById('focus-tips');
+            if (supervisorData.suggested_tips) {
+                const tips = supervisorData.suggested_tips.split('\n').filter(tip => tip.trim());
+                tipsDiv.innerHTML = '';
+                const tipCard = document.createElement('div');
+                tipCard.className = 'tip-card';
+                tipCard.innerHTML = `
+                    <h4>Today's Top 3 Focus Areas</h4>
+                    <ul>
+                        ${tips.map(tip => `<li>${tip}</li>`).join('')}
+                    </ul>
+                `;
+                tipsDiv.appendChild(tipCard);
             } else {
-                historyDiv.innerHTML = '<p>No reflections yet. Start logging your thoughts!</p>';
-            }
-        }
-
-        async function submitReflection() {
-            const reflectionInput = document.getElementById('reflection-input').value.trim();
-
-            if (!reflectionInput) {
-                showToast('error', 'Please enter a reflection before submitting.');
-                return;
-            }
-
-            if (!supervisorData) {
-                showToast('error', 'Supervisor data not loaded. Please refresh the page.');
-                return;
+                tipsDiv.innerHTML = '<p>No focus tips available.</p>';
             }
 
-            try {
-                const response = await fetch('/submit_reflection', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ reflection: reflectionInput })
+            if (supervisorData.reflection_log) {
+                reflectionHistory.push({
+                    date: new Date().toLocaleString(),
+                    text: supervisorData.reflection_log
                 });
-                const result = await response.json();
-
-                if (result.status === 'success') {
-                    supervisorData.reflection_log = reflectionInput;
-                    document.getElementById('supervisor-data').textContent = JSON.stringify(supervisorData, null, 2);
-                    reflectionHistory.push({
-                        date: new Date().toLocaleString(),
-                        text: reflectionInput
-                    });
-                    updateReflectionHistory();
-                    document.getElementById('reflection-input').value = '';
-                    showToast('success', result.message);
-                    generateCoaching();
-                } else {
-                    showToast('error', result.message);
-                }
-            } catch (error) {
-                showToast('error', 'Error submitting reflection: ' + error.message);
+                updateReflectionHistory();
             }
-        }
-
-        function updateKPIDashboard() {
-            const kpiDashboard = document.getElementById('kpi-dashboard');
-            kpiDashboard.innerHTML = '';
-
-            // KPI 1: Engagement Score
-            const engagementScore = supervisorData && supervisorData.engagement_score ? supervisorData.engagement_score : 85;
-            const engagementCard = document.createElement('div');
-            engagementCard.className = 'kpi-card';
-            engagementCard.innerHTML = `
-                <h4>Engagement Score</h4>
-                <div class="kpi-value">${engagementScore}%</div>
-                <div class="progress-bar">
-                    <div class="progress-fill" style="width: ${engagementScore}%"></div>
-                </div>
-                <p class="kpi-trend">Target: 90%</p>
-            `;
-            kpiDashboard.appendChild(engagementCard);
-
-            // KPI 2: Task Completion Rate
-            const taskCompletionRate = checklistProgress;
-            const taskCard = document.createElement('div');
-            taskCard.className = 'kpi-card';
-            taskCard.innerHTML = `
-                <h4>Task Completion Rate</h4>
-                <div class="kpi-value">${Math.round(taskCompletionRate)}%</div>
-                <div class="progress-bar">
-                    <div class="progress-fill" style="width: ${taskCompletionRate}%"></div>
-                </div>
-                <p class="kpi-trend">Based on Daily Checklist</p>
-            `;
-            kpiDashboard.appendChild(taskCard);
 
-            // KPI 3: Reflection Frequency
-            const reflectionFrequency = reflectionHistory.length;
-            const reflectionCard = document.createElement('div');
-            reflectionCard.className = 'kpi-card';
-            reflectionCard.innerHTML = `
-                <h4>Reflection Frequency</h4>
-                <div class="kpi-value">${reflectionFrequency}</div>
-                <div class="progress-bar">
-                    <div class="progress-fill" style="width: ${(reflectionFrequency / 5) * 100}%"></div>
-                </div>
-                <p class="kpi-trend">Goal: 5 per week</p>
-            `;
-            kpiDashboard.appendChild(reflectionCard);
-
-            // KPI 4: KPI Flag
-            const kpiFlag = supervisorData && supervisorData.kpi_flag !== undefined ? supervisorData.kpi_flag : false;
-            const flagCard = document.createElement('div');
-            flagCard.className = 'kpi-card';
-            flagCard.innerHTML = `
-                <h4>KPI Flag Status</h4>
-                <div class="kpi-value">
-                    <span class="kpi-flag ${kpiFlag ? 'active' : 'inactive'}">${kpiFlag ? 'Active' : 'Inactive'}</span>
-                </div>
-                <p class="kpi-trend">Performance Indicator</p>
+            const downloadBtn = document.getElementById('download-btn');
+            if (supervisorData.download_link) {
+                downloadBtn.onclick = () => window.open(supervisorData.download_link, '_blank');
+                downloadBtn.textContent = 'Download Report';
+            } else {
+                downloadBtn.onclick = downloadPDF;
+                downloadBtn.textContent = 'Download PDF Summary';
+            }
+
+            updateKPIDashboard();
+        } else {
+            showToast('error', result.message);
+            document.getElementById('supervisor-data').textContent = 'Failed to load supervisor data.';
+        }
+    } catch (error) {
+        showToast('error', 'Error fetching supervisor data: ' + error.message);
+        document.getElementById('supervisor-data').textContent = 'Failed to load supervisor data.';
+    }
+}
+
+async function generateCoaching() {
+    if (!supervisorData) {
+        showToast('error', 'Supervisor data not loaded. Please refresh the page.');
+        return;
+    }
+
+    try {
+        const response = await fetch('/generate', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(supervisorData)
+        });
+        const result = await response.json();
+
+        if (result.status === 'success') {
+            coachingOutput = result.output;
+            showToast('success', 'Coaching output generated successfully!');
+            await fetchSupervisorData();
+        } else {
+            showToast('error', result.message);
+        }
+    } catch (error) {
+        showToast('error', 'Error generating coaching output: ' + error.message);
+    }
+}
+
+async function submitReflection() {
+    const reflectionInput = document.getElementById('reflection-input');
+    const reflection = reflectionInput.value.trim();
+
+    if (!reflection) {
+        showToast('error', 'Reflection cannot be empty.');
+        return;
+    }
+
+    try {
+        const response = await fetch('/submit_reflection', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ reflection })
+        });
+        const result = await response.json();
+
+        if (result.status === 'success') {
+            showToast('success', result.message);
+            reflectionHistory.push({
+                date: new Date().toLocaleString(),
+                text: reflection
+            });
+            reflectionInput.value = '';
+            updateReflectionHistory();
+            await fetchSupervisorData();
+        } else {
+            showToast('error', result.message);
+        }
+    } catch (error) {
+        showToast('error', 'Error submitting reflection: ' + error.message);
+    }
+}
+
+function updateReflectionHistory() {
+    const historyDiv = document.getElementById('reflection-history');
+    if (reflectionHistory.length > 0) {
+        historyDiv.innerHTML = reflectionHistory.map(ref => `
+            <div class="reflection-entry">
+                <span>${ref.date}</span>: ${ref.text}
+            </div>
+        `).join('');
+    } else {
+        historyDiv.innerHTML = '<p>No reflections yet. Start logging your thoughts!</p>';
+    }
+}
+
+function updateKPIDashboard() {
+    const kpiDashboard = document.getElementById('kpi-dashboard');
+    kpiDashboard.innerHTML = '';
+
+    if (supervisorData) {
+        const kpiData = [
+            {
+                title: 'Engagement Score',
+                value: `${supervisorData.engagement_score}%`,
+                progress: supervisorData.engagement_score,
+                trend: supervisorData.engagement_score > 80 ? 'Upward' : 'Stable'
+            },
+            {
+                title: 'KPI Flag',
+                value: supervisorData.kpi_flag ? 'Active' : 'Inactive',
+                class: supervisorData.kpi_flag ? 'active' : 'inactive'
+            }
+        ];
+
+        kpiData.forEach(kpi => {
+            const kpiCard = document.createElement('div');
+            kpiCard.className = 'kpi-card';
+            kpiCard.innerHTML = `
+                <h4>${kpi.title}</h4>
+                <div class="kpi-value ${kpi.class || ''}">${kpi.value}</div>
+                ${kpi.progress !== undefined ? `
+                    <div class="progress-bar">
+                        <div class="progress-fill" style="width: ${kpi.progress}%"></div>
+                    </div>
+                    <div class="kpi-trend">Trend: ${kpi.trend}</div>
+                ` : ''}
             `;
-            kpiDashboard.appendChild(flagCard);
-        }
-
-        function downloadPDF() {
-            if (!supervisorData || !supervisorData.download_link) {
-                showToast('error', 'No download link available.');
-                return;
-            }
-            window.open(supervisorData.download_link, '_blank');
-        }
-
-        // Event Listeners
-        document.getElementById('search-bar').addEventListener('input', searchData);
-        window.onload = () => {
-            fetchSupervisorData();
-            setAvatar();
-        };
+            kpiDashboard.appendChild(kpiCard);
+        });
+    } else {
+        kpiDashboard.innerHTML = '<p>No KPI data available.</p>';
+    }
+}
+
+async function downloadPDF() {
+    try {
+        const response = await fetch('/download_pdf');
+        if (response.ok && response.headers.get('content-type').includes('application/pdf')) {
+            const blob = await response.blob();
+            const url = window.URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = `supervisor_report_${supervisorData?.supervisor_name || 'report'}.pdf`;
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+            window.URL.revokeObjectURL(url);
+            showToast('success', 'PDF downloaded successfully!');
+        } else {
+            const result = await response.json();
+            showToast('error', result.message);
+        }
+    } catch (error) {
+        showToast('error', 'Error downloading PDF: ' + error.message);
+    }
+}
+
+document.getElementById('search-bar').addEventListener('input', searchData);
+document.addEventListener('DOMContentLoaded', () => {
+    setAvatar();
+    fetchSupervisorData();
+});
     </script>
 </body>
 </html>