Thryvoo Marketing Dashboard<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n <style>\n :root {\n --primary: #4361ee;\n --success: #06d6a0;\n --warning: #ffd166;\n --danger: #ef476f;\n --dark: #1a1a2e;\n --light: #f8f9fa;\n --gray: #6c757d;\n }\n \n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: 'Poppins', sans-serif;\n }\n \n body {\n background-color: #f5f7fb;\n color: #333;\n line-height: 1.6;\n }\n \n .container {\n width: 100%;\n max-width: 1200px;\n margin: 0 auto;\n padding: 20px;\n }\n \n header {\n background: linear-gradient(120deg, #4361ee, #3a0ca3);\n color: white;\n padding: 20px;\n border-radius: 10px;\n margin-bottom: 20px;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n }\n \n h1, h2, h3 {\n margin-bottom: 15px;\n }\n \n .card {\n background: white;\n border-radius: 10px;\n padding: 20px;\n margin-bottom: 20px;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);\n }\n \n .form-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 20px;\n }\n \n .form-group {\n margin-bottom: 15px;\n }\n \n label {\n display: block;\n margin-bottom: 5px;\n font-weight: 500;\n }\n \n input, select, textarea {\n width: 100%;\n padding: 10px 15px;\n border: 1px solid #ddd;\n border-radius: 5px;\n font-size: 14px;\n }\n \n select[multiple] {\n height: 120px;\n }\n \n button {\n background-color: var(--primary);\n color: white;\n border: none;\n padding: 12px 20px;\n border-radius: 5px;\n cursor: pointer;\n font-weight: 500;\n transition: background-color 0.3s;\n }\n \n button:hover {\n background-color: #3a0ca3;\n }\n \n .conditional-section {\n background-color: #f8f9fa;\n padding: 15px;\n border-radius: 5px;\n margin-top: 15px;\n border-left: 4px solid var(--primary);\n }\n \n .stats-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 15px;\n margin-bottom: 20px;\n }\n \n .stat-card {\n background: white;\n padding: 15px;\n border-radius: 8px;\n text-align: center;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);\n }\n \n .stat-number {\n font-size: 2rem;\n font-weight: 700;\n margin: 10px 0;\n }\n \n .onboarded {\n border-bottom: 4px solid var(--success);\n }\n \n .not-onboarded {\n border-bottom: 4px solid var(--danger);\n }\n \n .chart-container {\n height: 300px;\n margin-bottom: 30px;\n }\n \n .filter-bar {\n display: flex;\n gap: 15px;\n margin-bottom: 20px;\n flex-wrap: wrap;\n }\n \n .team-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n gap: 15px;\n }\n \n .team-member {\n background: white;\n padding: 15px;\n border-radius: 8px;\n text-align: center;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);\n }\n \n .clickable-stat {\n cursor: pointer;\n transition: all 0.3s;\n }\n \n .clickable-stat:hover {\n transform: translateY(-3px);\n box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);\n }\n \n .overdue {\n color: var(--danger);\n font-weight: 600;\n }\n \n @media (max-width: 768px) {\n .form-grid {\n grid-template-columns: 1fr;\n }\n \n .stats-grid {\n grid-template-columns: 1fr;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <header>\n <h1>Thryvoo Restaurant Outreach Dashboard<\/h1>\n <p>Track and analyze marketing efforts in Puri<\/p>\n <\/header>\n \n <div class=\"card\">\n <h2>New Restaurant Entry<\/h2>\n <form id=\"restaurant-form\">\n <div class=\"form-grid\">\n <div class=\"form-group\">\n <label for=\"restaurant-name\">Restaurant Name *<\/label>\n <input type=\"text\" id=\"restaurant-name\" required>\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"visited-by\">Visited By *<\/label>\n <select id=\"visited-by\" multiple required>\n <option value=\"Amit Gour\">Amit Gour<\/option>\n <option value=\"Etina Pradhan\">Etina Pradhan<\/option>\n <option value=\"Chetna Mohapatra\">Chetna Mohapatra<\/option>\n <option value=\"Kamakshya Prasad Nayak\">Kamakshya Prasad Nayak<\/option>\n <option value=\"Soumyajit Das\">Soumyajit Das<\/option>\n <option value=\"Chandrakanta Sahoo\">Chandrakanta Sahoo<\/option>\n <option value=\"Madhusmita Rath\">Madhusmita Rath<\/option>\n <option value=\"SZ Raheman\">SZ Raheman<\/option>\n <option value=\"Raja Biswal\">Raja Biswal<\/option>\n <\/select>\n <small>Hold Ctrl\/Cmd to select multiple team members<\/small>\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"first-visit-date\">First Visit Date *<\/label>\n <input type=\"date\" id=\"first-visit-date\" required>\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"first-visit-status\">First Visit Status *<\/label>\n <select id=\"first-visit-status\" required>\n <option value=\"\">Select Status<\/option>\n <option value=\"Onboarded\">Onboarded<\/option>\n <option value=\"Not-Onboarded\">Not-Onboarded<\/option>\n <\/select>\n <\/div>\n <\/div>\n \n \n <div id=\"onboarded-section\" class=\"conditional-section\" style=\"display: none;\">\n <h3>Onboarding Details<\/h3>\n <div class=\"form-grid\">\n <div class=\"form-group\">\n <label for=\"welcome-call\">Welcome Call?<\/label>\n <select id=\"welcome-call\">\n <option value=\"Yes\">Yes<\/option>\n <option value=\"No\" selected>No<\/option>\n <\/select>\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"welcome-message\">Welcome Message?<\/label>\n <select id=\"welcome-message\">\n <option value=\"Yes\">Yes<\/option>\n <option value=\"No\" selected>No<\/option>\n <\/select>\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"profile-setup\">Profile Setup?<\/label>\n <select id=\"profile-setup\">\n <option value=\"Yes\">Yes<\/option>\n <option value=\"No\" selected>No<\/option>\n <\/select>\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"qr-designed\">QR Designed?<\/label>\n <select id=\"qr-designed\">\n <option value=\"Yes\">Yes<\/option>\n <option value=\"No\" selected>No<\/option>\n <\/select>\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"qr-delivered\">QR Delivered?<\/label>\n <select id=\"qr-delivered\">\n <option value=\"Yes\">Yes<\/option>\n <option value=\"No\" selected>No<\/option>\n <\/select>\n <\/div>\n <\/div>\n \n <div class=\"form-grid\">\n <div class=\"form-group\">\n <label for=\"trial-start-date\">Trial Start Date<\/label>\n <input type=\"date\" id=\"trial-start-date\">\n <\/div>\n <\/div>\n \n <h3>Follow-up Schedule<\/h3>\n <div class=\"form-grid\">\n <div class=\"form-group\">\n <label for=\"followup1-date\">1st Follow-up Date<\/label>\n <input type=\"date\" id=\"followup1-date\" class=\"followup-date\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"followup1-remarks\">1st Follow-up Remarks<\/label>\n <textarea id=\"followup1-remarks\" rows=\"2\"><\/textarea>\n <\/div>\n <\/div>\n \n <div class=\"form-grid\">\n <div class=\"form-group\">\n <label for=\"followup2-date\">2nd Follow-up Date<\/label>\n <input type=\"date\" id=\"followup2-date\" class=\"followup-date\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"followup2-remarks\">2nd Follow-up Remarks<\/label>\n <textarea id=\"followup2-remarks\" rows=\"2\"><\/textarea>\n <\/div>\n <\/div>\n \n <div class=\"form-grid\">\n <div class=\"form-group\">\n <label for=\"followup3-date\">3rd Follow-up Date<\/label>\n <input type=\"date\" id=\"followup3-date\" class=\"followup-date\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"followup3-remarks\">3rd Follow-up Remarks<\/label>\n <textarea id=\"followup3-remarks\" rows=\"2\"><\/textarea>\n <\/div>\n <\/div>\n \n <div class=\"form-grid\">\n <div class=\"form-group\">\n <label for=\"followup4-date\">4th Follow-up Date<\/label>\n <input type=\"date\" id=\"followup4-date\" class=\"followup-date\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"followup4-remarks\">4th Follow-up Remarks<\/label>\n <textarea id=\"followup4-remarks\" rows=\"2\"><\/textarea>\n <\/div>\n <\/div>\n \n <div class=\"form-grid\">\n <div class=\"form-group\">\n <label for=\"followup5-date\">5th Follow-up Date<\/label>\n <input type=\"date\" id=\"followup5-date\" class=\"followup-date\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"followup5-remarks\">5th Follow-up Remarks<\/label>\n <textarea id=\"followup5-remarks\" rows=\"2\"><\/textarea>\n <\/div>\n <\/div>\n \n <div class=\"form-grid\">\n <div class=\"form-group\">\n <label for=\"followup6-date\">6th Follow-up Date<\/label>\n <input type=\"date\" id=\"followup6-date\" class=\"followup-date\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"followup6-remarks\">6th Follow-up Remarks<\/label>\n <textarea id=\"followup6-remarks\" rows=\"2\"><\/textarea>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div id=\"not-onboarded-section\" class=\"conditional-section\" style=\"display: none;\">\n <div class=\"form-group\">\n <label for=\"first-visit-remarks\">1st Visit Remarks<\/label>\n <textarea id=\"first-visit-remarks\" rows=\"3\"><\/textarea>\n <\/div>\n \n <h3>Follow-up Visits<\/h3>\n <div class=\"form-grid\">\n <div class=\"form-group\">\n <label for=\"visit2-date\">2nd Visit Date<\/label>\n <input type=\"date\" id=\"visit2-date\" class=\"visit-date\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"visit2-remarks\">2nd Visit Remarks<\/label>\n <textarea id=\"visit2-remarks\" rows=\"2\"><\/textarea>\n <\/div>\n <\/div>\n \n <div class=\"form-grid\">\n <div class=\"form-group\">\n <label for=\"visit3-date\">3rd Visit Date<\/label>\n <input type=\"date\" id=\"visit3-date\" class=\"visit-date\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"visit3-remarks\">3rd Visit Remarks<\/label>\n <textarea id=\"visit3-remarks\" rows=\"2\"><\/textarea>\n <\/div>\n <\/div>\n \n <div class=\"form-grid\">\n <div class=\"form-group\">\n <label for=\"visit4-date\">4th Visit Date<\/label>\n <input type=\"date\" id=\"visit4-date\" class=\"visit-date\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"visit4-remarks\">4th Visit Remarks<\/label>\n <textarea id=\"visit4-remarks\" rows=\"2\"><\/textarea>\n <\/div>\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"later-onboard-status\">Onboard Status After Visit<\/label>\n <select id=\"later-onboard-status\">\n <option value=\"\">Not Yet Onboarded<\/option>\n <option value=\"Onboarded\">Onboarded<\/option>\n <\/select>\n <\/div>\n <\/div>\n \n <button type=\"submit\" id=\"submit-btn\">Save Restaurant Data<\/button>\n <\/form>\n <\/div>\n \n <div class=\"card\">\n <h2>Analytics Dashboard<\/h2>\n \n <div class=\"filter-bar\">\n <div class=\"form-group\">\n <label for=\"date-from\">From<\/label>\n <input type=\"date\" id=\"date-from\">\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"date-to\">To<\/label>\n <input type=\"date\" id=\"date-to\">\n <\/div>\n \n <div class=\"form-group\">\n <label style=\"visibility: hidden;\">Filter<\/label>\n <button id=\"apply-filter\">Apply Filter<\/button>\n <\/div>\n \n <div class=\"form-group\">\n <label style=\"visibility: hidden;\">Download<\/label>\n <button id=\"download-data\">Download Excel<\/button>\n <\/div>\n <\/div>\n \n <div class=\"stats-grid\">\n <div class=\"stat-card clickable-stat\" id=\"total-visits-card\">\n <h3>Total Visits<\/h3>\n <div class=\"stat-number\" id=\"total-visits\">0<\/div>\n <p>Restaurants visited<\/p>\n <\/div>\n \n <div class=\"stat-card clickable-stat onboarded\" id=\"onboarded-card\">\n <h3>Onboarded<\/h3>\n <div class=\"stat-number\" id=\"onboarded-count\">0<\/div>\n <p>Successful onboardings<\/p>\n <\/div>\n \n <div class=\"stat-card clickable-stat not-onboarded\" id=\"not-onboarded-card\">\n <h3>Not Onboarded<\/h3>\n <div class=\"stat-number\" id=\"not-onboarded-count\">0<\/div>\n <p>Unsuccessful visits<\/p>\n <\/div>\n \n <div class=\"stat-card\">\n <h3>Conversion Rate<\/h3>\n <div class=\"stat-number\" id=\"conversion-rate\">0%<\/div>\n <p>Visits to onboardings<\/p>\n <\/div>\n <\/div>\n \n <h3>Onboarding Completion Status<\/h3>\n <div class=\"stats-grid\">\n <div class=\"stat-card clickable-stat\" id=\"welcome-call-card\">\n <h3>Welcome Call<\/h3>\n <div class=\"stat-number\" id=\"welcome-call-count\">0<\/div>\n <p>Pending: <span id=\"welcome-call-pending\">0<\/span><\/p>\n <\/div>\n \n <div class=\"stat-card clickable-stat\" id=\"welcome-message-card\">\n <h3>Welcome Message<\/h3>\n <div class=\"stat-number\" id=\"welcome-message-count\">0<\/div>\n <p>Pending: <span id=\"welcome-message-pending\">0<\/span><\/p>\n <\/div>\n \n <div class=\"stat-card clickable-stat\" id=\"profile-setup-card\">\n <h3>Profile Setup<\/h3>\n <div class=\"stat-number\" id=\"profile-setup-count\">0<\/div>\n <p>Pending: <span id=\"profile-setup-pending\">0<\/span><\/p>\n <\/div>\n \n <div class=\"stat-card clickable-stat\" id=\"qr-designed-card\">\n <h3>QR Designed<\/h3>\n <div class=\"stat-number\" id=\"qr-designed-count\">0<\/div>\n <p>Pending: <span id=\"qr-designed-pending\">0<\/span><\/p>\n <\/div>\n \n <div class=\"stat-card clickable-stat\" id=\"qr-delivered-card\">\n <h3>QR Delivered<\/h3>\n <div class=\"stat-number\" id=\"qr-delivered-count\">0<\/div>\n <p>Pending: <span id=\"qr-delivered-pending\">0<\/span><\/p>\n <\/div>\n <\/div>\n \n <div class=\"chart-container\">\n <canvas id=\"onboarding-chart\"><\/canvas>\n <\/div>\n \n <div class=\"chart-container\">\n <canvas id=\"team-performance-chart\"><\/canvas>\n <\/div>\n \n <h3>Team Performance<\/h3>\n <div class=\"team-grid\" id=\"team-performance\">\n \n <\/div>\n \n <div id=\"details-modal\" style=\"display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 1000; justify-content: center; align-items: center;\">\n <div style=\"background: white; padding: 20px; border-radius: 10px; max-width: 500px; width: 90%; max-height: 80vh; overflow-y: auto;\">\n <h3 id=\"modal-title\">Details<\/h3>\n <div id=\"modal-content\"><\/div>\n <button id=\"close-modal\" style=\"margin-top: 20px;\">Close<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ Team members array\n const teamMembers = [\n \"Amit Gour\",\n \"Etina Pradhan\",\n \"Chetna Mohapatra\",\n \"Kamakshya Prasad Nayak\",\n \"Soumyajit Das\",\n \"Chandrakanta Sahoo\",\n \"Madhusmita Rath\",\n \"SZ Raheman\",\n \"Raja Biswal\"\n ];\n \n \/\/ Google Sheets setup - REPLACE THIS WITH YOUR ACTUAL SCRIPT URL\n const scriptURL = 'https:\/\/script.google.com\/macros\/s\/AKfycbwWQ10azSq7anvR42dPn1TzZjMql-8p7kos7kGGkO37KoLfYgxVJgT-Cn8H0YhAOG86\/exec';\n \n \/\/ Show\/hide sections based on onboarding status\n document.getElementById('first-visit-status').addEventListener('change', function() {\n const onboardedSection = document.getElementById('onboarded-section');\n const notOnboardedSection = document.getElementById('not-onboarded-section');\n \n if (this.value === 'Onboarded') {\n onboardedSection.style.display = 'block';\n notOnboardedSection.style.display = 'none';\n } else if (this.value === 'Not-Onboarded') {\n onboardedSection.style.display = 'none';\n notOnboardedSection.style.display = 'block';\n } else {\n onboardedSection.style.display = 'none';\n notOnboardedSection.style.display = 'none';\n }\n });\n \n \/\/ Form submission\n document.getElementById('restaurant-form').addEventListener('submit', async function(e) {\n e.preventDefault();\n \n const submitBtn = document.getElementById('submit-btn');\n submitBtn.disabled = true;\n submitBtn.textContent = 'Saving...';\n \n \/\/ Collect form data\n const formData = {\n restaurantName: document.getElementById('restaurant-name').value,\n visitedBy: Array.from(document.getElementById('visited-by').selectedOptions).map(opt => opt.value),\n firstVisitDate: document.getElementById('first-visit-date').value,\n firstVisitStatus: document.getElementById('first-visit-status').value,\n timestamp: new Date().toISOString()\n };\n \n if (formData.firstVisitStatus === 'Onboarded') {\n formData.welcomeCall = document.getElementById('welcome-call').value;\n formData.welcomeMessage = document.getElementById('welcome-message').value;\n formData.profileSetup = document.getElementById('profile-setup').value;\n formData.qrDesigned = document.getElementById('qr-designed').value;\n formData.qrDelivered = document.getElementById('qr-delivered').value;\n formData.trialStartDate = document.getElementById('trial-start-date').value;\n \n \/\/ Follow-up dates and remarks\n for (let i = 1; i <= 6; i++) {\n formData[`followup${i}Date`] = document.getElementById(`followup${i}-date`).value;\n formData[`followup${i}Remarks`] = document.getElementById(`followup${i}-remarks`).value;\n }\n } else {\n formData.firstVisitRemarks = document.getElementById('first-visit-remarks').value;\n \n \/\/ Visit dates and remarks\n for (let i = 2; i <= 4; i++) {\n formData[`visit${i}Date`] = document.getElementById(`visit${i}-date`).value;\n formData[`visit${i}Remarks`] = document.getElementById(`visit${i}-remarks`).value;\n }\n \n formData.laterOnboardStatus = document.getElementById('later-onboard-status').value;\n }\n \n try {\n \/\/ Send data to Google Sheets\n const response = await fetch(scriptURL, {\n method: 'POST',\n body: JSON.stringify(formData),\n headers: {\n 'Content-Type': 'application\/json'\n }\n });\n \n if (response.ok) {\n alert('Data saved successfully!');\n document.getElementById('restaurant-form').reset();\n document.getElementById('onboarded-section').style.display = 'none';\n document.getElementById('not-onboarded-section').style.display = 'none';\n \n \/\/ Refresh analytics\n loadAnalyticsData();\n } else {\n throw new Error('Failed to save data');\n }\n } catch (error) {\n console.error('Error:', error);\n alert('Error saving data. Please try again.');\n } finally {\n submitBtn.disabled = false;\n submitBtn.textContent = 'Save Restaurant Data';\n }\n });\n \n \/\/ Load analytics data\n async function loadAnalyticsData() {\n try {\n const response = await fetch(`${scriptURL}?action=getData`);\n const data = await response.json();\n \n \/\/ Update summary statistics\n document.getElementById('total-visits').textContent = data.totalVisits;\n document.getElementById('onboarded-count').textContent = data.onboardedCount;\n document.getElementById('not-onboarded-count').textContent = data.notOnboardedCount;\n \n const conversionRate = data.totalVisits > 0 ? \n Math.round((data.onboardedCount \/ data.totalVisits) * 100) : 0;\n document.getElementById('conversion-rate').textContent = `${conversionRate}%`;\n \n \/\/ Update onboarding completion stats\n document.getElementById('welcome-call-count').textContent = data.welcomeCallYes;\n document.getElementById('welcome-call-pending').textContent = data.welcomeCallNo;\n \n document.getElementById('welcome-message-count').textContent = data.welcomeMessageYes;\n document.getElementById('welcome-message-pending').textContent = data.welcomeMessageNo;\n \n document.getElementById('profile-setup-count').textContent = data.profileSetupYes;\n document.getElementById('profile-setup-pending').textContent = data.profileSetupNo;\n \n document.getElementById('qr-designed-count').textContent = data.qrDesignedYes;\n document.getElementById('qr-designed-pending').textContent = data.qrDesignedNo;\n \n document.getElementById('qr-delivered-count').textContent = data.qrDeliveredYes;\n document.getElementById('qr-delivered-pending').textContent = data.qrDeliveredNo;\n \n \/\/ Update team performance\n updateTeamPerformance(data.teamStats);\n \n \/\/ Update charts\n updateCharts(data);\n \n } catch (error) {\n console.error('Error loading analytics:', error);\n }\n }\n \n \/\/ Update team performance stats\n function updateTeamPerformance(teamStats) {\n const teamContainer = document.getElementById('team-performance');\n teamContainer.innerHTML = '';\n \n teamMembers.forEach(member => {\n const stats = teamStats[member] || { visits: 0, onboarded: 0 };\n \n const memberElement = document.createElement('div');\n memberElement.className = 'team-member';\n memberElement.innerHTML = `\n <h4>${member}<\/h4>\n <div class=\"stat-number\">${stats.visits}<\/div>\n <p>Visits<\/p>\n <div class=\"stat-number\">${stats.onboarded}<\/div>\n <p>Onboarded<\/p>\n `;\n \n teamContainer.appendChild(memberElement);\n });\n }\n \n \/\/ Update charts\n function updateCharts(data) {\n \/\/ Onboarding status chart\n const onboardingCtx = document.getElementById('onboarding-chart').getContext('2d');\n if (window.onboardingChart) {\n window.onboardingChart.destroy();\n }\n window.onboardingChart = new Chart(onboardingCtx, {\n type: 'doughnut',\n data: {\n labels: ['Onboarded', 'Not Onboarded'],\n datasets: [{\n data: [data.onboardedCount, data.notOnboardedCount],\n backgroundColor: ['#06d6a0', '#ef476f']\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n legend: {\n position: 'bottom'\n }\n }\n }\n });\n \n \/\/ Team performance chart\n const teamCtx = document.getElementById('team-performance-chart').getContext('2d');\n if (window.teamChart) {\n window.teamChart.destroy();\n }\n window.teamChart = new Chart(teamCtx, {\n type: 'bar',\n data: {\n labels: teamMembers,\n datasets: [\n {\n label: 'Visits',\n data: teamMembers.map(member => data.teamStats[member]?.visits || 0),\n backgroundColor: '#4361ee'\n },\n {\n label: 'Onboarded',\n data: teamMembers.map(member => data.teamStats[member]?.onboarded || 0),\n backgroundColor: '#06d6a0'\n }\n ]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n x: {\n ticks: {\n maxRotation: 45,\n minRotation: 45\n }\n }\n }\n }\n });\n }\n \n \/\/ Set up click events for stat cards\n function setupStatCardEvents() {\n \/\/ These would show detailed modals when implemented with real data\n const statCards = document.querySelectorAll('.clickable-stat');\n statCards.forEach(card => {\n card.addEventListener('click', function() {\n \/\/ This would show a modal with detailed information\n alert('Detailed view would show here with real data integration');\n });\n });\n }\n \n \/\/ Initialize the dashboard\n document.addEventListener('DOMContentLoaded', function() {\n \/\/ Set default date range (last 30 days)\n const today = new Date();\n const thirtyDaysAgo = new Date();\n thirtyDaysAgo.setDate(today.getDate() - 30);\n \n document.getElementById('date-from').valueAsDate = thirtyDaysAgo;\n document.getElementById('date-to').valueAsDate = today;\n \n \/\/ Load initial data\n loadAnalyticsData();\n \n \/\/ Set up event listeners\n setupStatCardEvents();\n \n document.getElementById('apply-filter').addEventListener('click', loadAnalyticsData);\n document.getElementById('download-data').addEventListener('click', function() {\n alert('This would download the data in Excel format with real implementation');\n });\n \n document.getElementById('close-modal').addEventListener('click', function() {\n document.getElementById('details-modal').style.display = 'none';\n });\n });\n <\/script>\n<script>\n \/\/ Team members array\n const teamMembers = [\n \"Amit Gour\",\n \"Etina Pradhan\",\n \"Chetna Mohapatra\",\n \"Kamakshya Prasad Nayak\",\n \"Soumyajit Das\",\n \"Chandrakanta Sahoo\",\n \"Madhusmita Rath\",\n \"SZ Raheman\",\n \"Raja Biswal\"\n ];\n \n \/\/ Google Sheets setup - REPLACE THIS WITH YOUR ACTUAL SCRIPT URL\n const scriptURL = 'https:\/\/script.google.com\/macros\/s\/YOUR_SCRIPT_ID\/exec';\n \n \/\/ Show\/hide sections based on onboarding status\n document.getElementById('first-visit-status').addEventListener('change', function() {\n const onboardedSection = document.getElementById('onboarded-section');\n const notOnboardedSection = document.getElementById('not-onboarded-section');\n \n if (this.value === 'Onboarded') {\n onboardedSection.style.display = 'block';\n notOnboardedSection.style.display = 'none';\n } else if (this.value === 'Not-Onboarded') {\n onboardedSection.style.display = 'none';\n notOnboardedSection.style.display = 'block';\n } else {\n onboardedSection.style.display = 'none';\n notOnboardedSection.style.display = 'none';\n }\n });\n \n \/\/ Form submission\n document.getElementById('restaurant-form').addEventListener('submit', async function(e) {\n e.preventDefault();\n \n const submitBtn = document.getElementById('submit-btn');\n submitBtn.disabled = true;\n submitBtn.textContent = 'Saving...';\n \n \/\/ Collect form data\n const formData = {\n restaurantName: document.getElementById('restaurant-name').value,\n visitedBy: Array.from(document.getElementById('visited-by').selectedOptions).map(opt => opt.value),\n firstVisitDate: document.getElementById('first-visit-date').value,\n firstVisitStatus: document.getElementById('first-visit-status').value,\n timestamp: new Date().toISOString()\n };\n \n if (formData.firstVisitStatus === 'Onboarded') {\n formData.welcomeCall = document.getElementById('welcome-call').value;\n formData.welcomeMessage = document.getElementById('welcome-message').value;\n formData.profileSetup = document.getElementById('profile-setup').value;\n formData.qrDesigned = document.getElementById('qr-designed').value;\n formData.qrDelivered = document.getElementById('qr-delivered').value;\n formData.trialStartDate = document.getElementById('trial-start-date').value;\n \n \/\/ Follow-up dates and remarks\n for (let i = 1; i <= 6; i++) {\n formData[`followup${i}Date`] = document.getElementById(`followup${i}-date`).value;\n formData[`followup${i}Remarks`] = document.getElementById(`followup${i}-remarks`).value;\n }\n } else {\n formData.firstVisitRemarks = document.getElementById('first-visit-remarks').value;\n \n \/\/ Visit dates and remarks\n for (let i = 2; i <= 4; i++) {\n formData[`visit${i}Date`] = document.getElementById(`visit${i}-date`).value;\n formData[`visit${i}Remarks`] = document.getElementById(`visit${i}-remarks`).value;\n }\n \n formData.laterOnboardStatus = document.getElementById('later-onboard-status').value;\n }\n \n try {\n \/\/ Send data to Google Sheets\n const response = await fetch(scriptURL, {\n method: 'POST',\n body: JSON.stringify(formData),\n headers: {\n 'Content-Type': 'application\/json'\n }\n });\n \n if (response.ok) {\n alert('Data saved successfully!');\n document.getElementById('restaurant-form').reset();\n document.getElementById('onboarded-section').style.display = 'none';\n document.getElementById('not-onboarded-section').style.display = 'none';\n \n \/\/ Refresh analytics\n loadAnalyticsData();\n } else {\n throw new Error('Failed to save data');\n }\n } catch (error) {\n console.error('Error:', error);\n alert('Error saving data. Please try again.');\n } finally {\n submitBtn.disabled = false;\n submitBtn.textContent = 'Save Restaurant Data';\n }\n });\n \n \/\/ Load analytics data\n async function loadAnalyticsData() {\n try {\n const response = await fetch(`${scriptURL}?action=getData`);\n const data = await response.json();\n \n \/\/ Update summary statistics\n document.getElementById('total-visits').textContent = data.totalVisits;\n document.getElementById('onboarded-count').textContent = data.onboardedCount;\n document.getElementById('not-onboarded-count').textContent = data.notOnboardedCount;\n \n const conversionRate = data.totalVisits > 0 ? \n Math.round((data.onboardedCount \/ data.totalVisits) * 100) : 0;\n document.getElementById('conversion-rate').textContent = `${conversionRate}%`;\n \n \/\/ Update onboarding completion stats\n document.getElementById('welcome-call-count').textContent = data.welcomeCallYes;\n document.getElementById('welcome-call-pending').textContent = data.welcomeCallNo;\n \n document.getElementById('welcome-message-count').textContent = data.welcomeMessageYes;\n document.getElementById('welcome-message-pending').textContent = data.welcomeMessageNo;\n \n document.getElementById('profile-setup-count').textContent = data.profileSetupYes;\n document.getElementById('profile-setup-pending').textContent = data.profileSetupNo;\n \n document.getElementById('qr-designed-count').textContent = data.qrDesignedYes;\n document.getElementById('qr-designed-pending').textContent = data.qrDesignedNo;\n \n document.getElementById('qr-delivered-count').textContent = data.qrDeliveredYes;\n document.getElementById('qr-delivered-pending').textContent = data.qrDeliveredNo;\n \n \/\/ Update team performance\n updateTeamPerformance(data.teamStats);\n \n \/\/ Update charts\n updateCharts(data);\n \n } catch (error) {\n console.error('Error loading analytics:', error);\n }\n }\n \n \/\/ UPDATE: Add the showDetails function here\n function showDetails(type, value) {\n \/\/ This would fetch detailed data from your Google Sheet\n \/\/ and display it in the modal\n \n const modal = document.getElementById('details-modal');\n const modalTitle = document.getElementById('modal-title');\n const modalContent = document.getElementById('modal-content');\n \n modalTitle.textContent = `${type}: ${value}`;\n modalContent.innerHTML = '<p>Loading details...<\/p>';\n \n \/\/ Show modal\n modal.style.display = 'flex';\n \n \/\/ In a real implementation, you would fetch this data from your Google Sheet\n \/\/ For now, we'll use sample data\n setTimeout(() => {\n modalContent.innerHTML = `\n <ul>\n <li>Restaurant A<\/li>\n <li>Restaurant B<\/li>\n <li>Restaurant C<\/li>\n <li>Restaurant D<\/li>\n <li>Restaurant E<\/li>\n <\/ul>\n <p><em>Note: With real implementation, this would show actual restaurant names from your data<\/em><\/p>\n `;\n }, 500);\n }\n \n \/\/ UPDATE: Replace the existing setupStatCardEvents function with this one\n function setupStatCardEvents() {\n const statCards = document.querySelectorAll('.clickable-stat');\n statCards.forEach(card => {\n card.addEventListener('click', function() {\n const title = this.querySelector('h3').textContent;\n const value = this.querySelector('.stat-number').textContent;\n showDetails(title, value);\n });\n });\n }\n \n \/\/ Update team performance stats\n function updateTeamPerformance(teamStats) {\n const teamContainer = document.getElementById('team-performance');\n teamContainer.innerHTML = '';\n \n teamMembers.forEach(member => {\n const stats = teamStats[member] || { visits: 0, onboarded: 0 };\n \n const memberElement = document.createElement('div');\n memberElement.className = 'team-member';\n memberElement.innerHTML = `\n <h4>${member}<\/h4>\n <div class=\"stat-number\">${stats.visits}<\/div>\n <p>Visits<\/p>\n <div class=\"stat-number\">${stats.onboarded}<\/div>\n <p>Onboarded<\/p>\n `;\n \n teamContainer.appendChild(memberElement);\n });\n }\n \n \/\/ Update charts\n function updateCharts(data) {\n \/\/ Onboarding status chart\n const onboardingCtx = document.getElementById('onboarding-chart').getContext('2d');\n if (window.onboardingChart) {\n window.onboardingChart.destroy();\n }\n window.onboardingChart = new Chart(onboardingCtx, {\n type: 'doughnut',\n data: {\n labels: ['Onboarded', 'Not Onboarded'],\n datasets: [{\n data: [data.onboardedCount, data.notOnboardedCount],\n backgroundColor: ['#06d6a0', '#ef476f']\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n legend: {\n position: 'bottom'\n }\n }\n }\n });\n \n \/\/ Team performance chart\n const teamCtx = document.getElementById('team-performance-chart').getContext('2d');\n if (window.teamChart) {\n window.teamChart.destroy();\n }\n window.teamChart = new Chart(teamCtx, {\n type: 'bar',\n data: {\n labels: teamMembers,\n datasets: [\n {\n label: 'Visits',\n data: teamMembers.map(member => data.teamStats[member]?.visits || 0),\n backgroundColor: '#4361ee'\n },\n {\n label: 'Onboarded',\n data: teamMembers.map(member => data.teamStats[member]?.onboarded || 0),\n backgroundColor: '#06d6a0'\n }\n ]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n x: {\n ticks: {\n maxRotation: 45,\n minRotation: 45\n }\n }\n }\n }\n });\n }\n \n \/\/ Initialize the dashboard\n document.addEventListener('DOMContentLoaded', function() {\n \/\/ Set default date range (last 30 days)\n const today = new Date();\n const thirtyDaysAgo = new Date();\n thirtyDaysAgo.setDate(today.getDate() - 30);\n \n document.getElementById('date-from').valueAsDate = thirtyDaysAgo;\n document.getElementById('date-to').valueAsDate = today;\n \n \/\/ Load initial data\n loadAnalyticsData();\n \n \/\/ Set up event listeners\n setupStatCardEvents();\n \n document.getElementById('apply-filter').addEventListener('click', loadAnalyticsData);\n document.getElementById('download-data').addEventListener('click', function() {\n alert('This would download the data in Excel format with real implementation');\n });\n \n document.getElementById('close-modal').addEventListener('click', function() {\n document.getElementById('details-modal').style.display = 'none';\n });\n });\n<\/script>\n\/\/ Update the download button event listener\ndocument.getElementById('download-data').addEventListener('click', function() {\n const dateFrom = document.getElementById('date-from').value;\n const dateTo = document.getElementById('date-to').value;\n \n \/\/ Open download link in new tab\n window.open(`${scriptURL}?action=download&from=${dateFrom}&to=${dateTo}`, '_blank');\n});\n\n<\/body>\n<\/html>\n\n\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Thryvoo Marketing Dashboard Thryvoo Restaurant Outreach Dashboard Track and analyze marketing efforts in Puri New Restaurant Entry Restaurant Name * Visited By * Amit GourEtina PradhanChetna MohapatraKamakshya Prasad NayakSoumyajit DasChandrakanta SahooMadhusmita RathSZ RahemanRaja Biswal Hold Ctrl\/Cmd to select multiple team members First Visit Date * First Visit Status * Select StatusOnboardedNot-Onboarded Onboarding Details Welcome Call? YesNo Welcome Message? YesNo Profile Setup? YesNo QR Designed? YesNo QR Delivered? YesNo Trial Start Date Follow-up Schedule 1st Follow-up Date 1st Follow-up Remarks 2nd Follow-up Date 2nd Follow-up Remarks 3rd Follow-up Date 3rd Follow-up Remarks 4th Follow-up Date 4th Follow-up Remarks 5th Follow-up Date 5th Follow-up Remarks 6th Follow-up Date 6th Follow-up Remarks 1st Visit Remarks Follow-up Visits 2nd Visit Date 2nd Visit Remarks 3rd Visit Date 3rd Visit Remarks 4th Visit Date 4th Visit Remarks Onboard Status After Visit Not Yet OnboardedOnboarded Save Restaurant Data Analytics Dashboard From To Filter Apply Filter Download Download Excel Total Visits 0 Restaurants visited Onboarded 0 Successful onboardings Not Onboarded 0 Unsuccessful visits Conversion Rate 0% Visits to onboardings Onboarding Completion Status Welcome Call 0 Pending: 0 Welcome Message 0 Pending: 0 Profile Setup 0 Pending: 0 QR Designed 0 Pending: 0 QR Delivered 0 Pending: 0 Team Performance Details Close \/\/ Update the download button event listener document.getElementById(‘download-data’).addEventListener(‘click’, function() { const dateFrom = document.getElementById(‘date-from’).value; const dateTo = document.getElementById(‘date-to’).value; \/\/ Open download link in new tab window.open(`${scriptURL}?action=download&from=${dateFrom}&to=${dateTo}`, ‘_blank’); });<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-5583","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/vedas.veraztech.com\/index.php\/wp-json\/wp\/v2\/pages\/5583","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vedas.veraztech.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vedas.veraztech.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vedas.veraztech.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vedas.veraztech.com\/index.php\/wp-json\/wp\/v2\/comments?post=5583"}],"version-history":[{"count":22,"href":"https:\/\/vedas.veraztech.com\/index.php\/wp-json\/wp\/v2\/pages\/5583\/revisions"}],"predecessor-version":[{"id":5607,"href":"https:\/\/vedas.veraztech.com\/index.php\/wp-json\/wp\/v2\/pages\/5583\/revisions\/5607"}],"wp:attachment":[{"href":"https:\/\/vedas.veraztech.com\/index.php\/wp-json\/wp\/v2\/media?parent=5583"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n \n \n Thryvoo Marketing Dashboard<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n <style>\n :root {\n --primary: #4361ee;\n --success: #06d6a0;\n --warning: #ffd166;\n --danger: #ef476f;\n --dark: #1a1a2e;\n --light: #f8f9fa;\n --gray: #6c757d;\n }\n \n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: 'Poppins', sans-serif;\n }\n \n body {\n background-color: #f5f7fb;\n color: #333;\n line-height: 1.6;\n }\n \n .container {\n width: 100%;\n max-width: 1200px;\n margin: 0 auto;\n padding: 20px;\n }\n \n header {\n background: linear-gradient(120deg, #4361ee, #3a0ca3);\n color: white;\n padding: 20px;\n border-radius: 10px;\n margin-bottom: 20px;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n }\n \n h1, h2, h3 {\n margin-bottom: 15px;\n }\n \n .card {\n background: white;\n border-radius: 10px;\n padding: 20px;\n margin-bottom: 20px;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);\n }\n \n .form-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 20px;\n }\n \n .form-group {\n margin-bottom: 15px;\n }\n \n label {\n display: block;\n margin-bottom: 5px;\n font-weight: 500;\n }\n \n input, select, textarea {\n width: 100%;\n padding: 10px 15px;\n border: 1px solid #ddd;\n border-radius: 5px;\n font-size: 14px;\n }\n \n select[multiple] {\n height: 120px;\n }\n \n button {\n background-color: var(--primary);\n color: white;\n border: none;\n padding: 12px 20px;\n border-radius: 5px;\n cursor: pointer;\n font-weight: 500;\n transition: background-color 0.3s;\n }\n \n button:hover {\n background-color: #3a0ca3;\n }\n \n .conditional-section {\n background-color: #f8f9fa;\n padding: 15px;\n border-radius: 5px;\n margin-top: 15px;\n border-left: 4px solid var(--primary);\n }\n \n .stats-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 15px;\n margin-bottom: 20px;\n }\n \n .stat-card {\n background: white;\n padding: 15px;\n border-radius: 8px;\n text-align: center;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);\n }\n \n .stat-number {\n font-size: 2rem;\n font-weight: 700;\n margin: 10px 0;\n }\n \n .onboarded {\n border-bottom: 4px solid var(--success);\n }\n \n .not-onboarded {\n border-bottom: 4px solid var(--danger);\n }\n \n .chart-container {\n height: 300px;\n margin-bottom: 30px;\n }\n \n .filter-bar {\n display: flex;\n gap: 15px;\n margin-bottom: 20px;\n flex-wrap: wrap;\n }\n \n .team-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n gap: 15px;\n }\n \n .team-member {\n background: white;\n padding: 15px;\n border-radius: 8px;\n text-align: center;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);\n }\n \n .clickable-stat {\n cursor: pointer;\n transition: all 0.3s;\n }\n \n .clickable-stat:hover {\n transform: translateY(-3px);\n box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);\n }\n \n .overdue {\n color: var(--danger);\n font-weight: 600;\n }\n \n @media (max-width: 768px) {\n .form-grid {\n grid-template-columns: 1fr;\n }\n \n .stats-grid {\n grid-template-columns: 1fr;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <header>\n <h1>Thryvoo Restaurant Outreach Dashboard<\/h1>\n <p>Track and analyze marketing efforts in Puri<\/p>\n <\/header>\n \n <div class=\"card\">\n <h2>New Restaurant Entry<\/h2>\n <form id=\"restaurant-form\">\n <div class=\"form-grid\">\n <div class=\"form-group\">\n <label for=\"restaurant-name\">Restaurant Name *<\/label>\n <input type=\"text\" id=\"restaurant-name\" required>\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"visited-by\">Visited By *<\/label>\n <select id=\"visited-by\" multiple required>\n <option value=\"Amit Gour\">Amit Gour<\/option>\n <option value=\"Etina Pradhan\">Etina Pradhan<\/option>\n <option value=\"Chetna Mohapatra\">Chetna Mohapatra<\/option>\n <option value=\"Kamakshya Prasad Nayak\">Kamakshya Prasad Nayak<\/option>\n <option value=\"Soumyajit Das\">Soumyajit Das<\/option>\n <option value=\"Chandrakanta Sahoo\">Chandrakanta Sahoo<\/option>\n <option value=\"Madhusmita Rath\">Madhusmita Rath<\/option>\n <option value=\"SZ Raheman\">SZ Raheman<\/option>\n <option value=\"Raja Biswal\">Raja Biswal<\/option>\n <\/select>\n <small>Hold Ctrl\/Cmd to select multiple team members<\/small>\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"first-visit-date\">First Visit Date *<\/label>\n <input type=\"date\" id=\"first-visit-date\" required>\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"first-visit-status\">First Visit Status *<\/label>\n <select id=\"first-visit-status\" required>\n <option value=\"\">Select Status<\/option>\n <option value=\"Onboarded\">Onboarded<\/option>\n <option value=\"Not-Onboarded\">Not-Onboarded<\/option>\n <\/select>\n <\/div>\n <\/div>\n \n \n <div id=\"onboarded-section\" class=\"conditional-section\" style=\"display: none;\">\n <h3>Onboarding Details<\/h3>\n <div class=\"form-grid\">\n <div class=\"form-group\">\n <label for=\"welcome-call\">Welcome Call?<\/label>\n <select id=\"welcome-call\">\n <option value=\"Yes\">Yes<\/option>\n <option value=\"No\" selected>No<\/option>\n <\/select>\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"welcome-message\">Welcome Message?<\/label>\n <select id=\"welcome-message\">\n <option value=\"Yes\">Yes<\/option>\n <option value=\"No\" selected>No<\/option>\n <\/select>\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"profile-setup\">Profile Setup?<\/label>\n <select id=\"profile-setup\">\n <option value=\"Yes\">Yes<\/option>\n <option value=\"No\" selected>No<\/option>\n <\/select>\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"qr-designed\">QR Designed?<\/label>\n <select id=\"qr-designed\">\n <option value=\"Yes\">Yes<\/option>\n <option value=\"No\" selected>No<\/option>\n <\/select>\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"qr-delivered\">QR Delivered?<\/label>\n <select id=\"qr-delivered\">\n <option value=\"Yes\">Yes<\/option>\n <option value=\"No\" selected>No<\/option>\n <\/select>\n <\/div>\n <\/div>\n \n <div class=\"form-grid\">\n <div class=\"form-group\">\n <label for=\"trial-start-date\">Trial Start Date<\/label>\n <input type=\"date\" id=\"trial-start-date\">\n <\/div>\n <\/div>\n \n <h3>Follow-up Schedule<\/h3>\n <div class=\"form-grid\">\n <div class=\"form-group\">\n <label for=\"followup1-date\">1st Follow-up Date<\/label>\n <input type=\"date\" id=\"followup1-date\" class=\"followup-date\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"followup1-remarks\">1st Follow-up Remarks<\/label>\n <textarea id=\"followup1-remarks\" rows=\"2\"><\/textarea>\n <\/div>\n <\/div>\n \n <div class=\"form-grid\">\n <div class=\"form-group\">\n <label for=\"followup2-date\">2nd Follow-up Date<\/label>\n <input type=\"date\" id=\"followup2-date\" class=\"followup-date\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"followup2-remarks\">2nd Follow-up Remarks<\/label>\n <textarea id=\"followup2-remarks\" rows=\"2\"><\/textarea>\n <\/div>\n <\/div>\n \n <div class=\"form-grid\">\n <div class=\"form-group\">\n <label for=\"followup3-date\">3rd Follow-up Date<\/label>\n <input type=\"date\" id=\"followup3-date\" class=\"followup-date\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"followup3-remarks\">3rd Follow-up Remarks<\/label>\n <textarea id=\"followup3-remarks\" rows=\"2\"><\/textarea>\n <\/div>\n <\/div>\n \n <div class=\"form-grid\">\n <div class=\"form-group\">\n <label for=\"followup4-date\">4th Follow-up Date<\/label>\n <input type=\"date\" id=\"followup4-date\" class=\"followup-date\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"followup4-remarks\">4th Follow-up Remarks<\/label>\n <textarea id=\"followup4-remarks\" rows=\"2\"><\/textarea>\n <\/div>\n <\/div>\n \n <div class=\"form-grid\">\n <div class=\"form-group\">\n <label for=\"followup5-date\">5th Follow-up Date<\/label>\n <input type=\"date\" id=\"followup5-date\" class=\"followup-date\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"followup5-remarks\">5th Follow-up Remarks<\/label>\n <textarea id=\"followup5-remarks\" rows=\"2\"><\/textarea>\n <\/div>\n <\/div>\n \n <div class=\"form-grid\">\n <div class=\"form-group\">\n <label for=\"followup6-date\">6th Follow-up Date<\/label>\n <input type=\"date\" id=\"followup6-date\" class=\"followup-date\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"followup6-remarks\">6th Follow-up Remarks<\/label>\n <textarea id=\"followup6-remarks\" rows=\"2\"><\/textarea>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div id=\"not-onboarded-section\" class=\"conditional-section\" style=\"display: none;\">\n <div class=\"form-group\">\n <label for=\"first-visit-remarks\">1st Visit Remarks<\/label>\n <textarea id=\"first-visit-remarks\" rows=\"3\"><\/textarea>\n <\/div>\n \n <h3>Follow-up Visits<\/h3>\n <div class=\"form-grid\">\n <div class=\"form-group\">\n <label for=\"visit2-date\">2nd Visit Date<\/label>\n <input type=\"date\" id=\"visit2-date\" class=\"visit-date\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"visit2-remarks\">2nd Visit Remarks<\/label>\n <textarea id=\"visit2-remarks\" rows=\"2\"><\/textarea>\n <\/div>\n <\/div>\n \n <div class=\"form-grid\">\n <div class=\"form-group\">\n <label for=\"visit3-date\">3rd Visit Date<\/label>\n <input type=\"date\" id=\"visit3-date\" class=\"visit-date\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"visit3-remarks\">3rd Visit Remarks<\/label>\n <textarea id=\"visit3-remarks\" rows=\"2\"><\/textarea>\n <\/div>\n <\/div>\n \n <div class=\"form-grid\">\n <div class=\"form-group\">\n <label for=\"visit4-date\">4th Visit Date<\/label>\n <input type=\"date\" id=\"visit4-date\" class=\"visit-date\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"visit4-remarks\">4th Visit Remarks<\/label>\n <textarea id=\"visit4-remarks\" rows=\"2\"><\/textarea>\n <\/div>\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"later-onboard-status\">Onboard Status After Visit<\/label>\n <select id=\"later-onboard-status\">\n <option value=\"\">Not Yet Onboarded<\/option>\n <option value=\"Onboarded\">Onboarded<\/option>\n <\/select>\n <\/div>\n <\/div>\n \n <button type=\"submit\" id=\"submit-btn\">Save Restaurant Data<\/button>\n <\/form>\n <\/div>\n \n <div class=\"card\">\n <h2>Analytics Dashboard<\/h2>\n \n <div class=\"filter-bar\">\n <div class=\"form-group\">\n <label for=\"date-from\">From<\/label>\n <input type=\"date\" id=\"date-from\">\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"date-to\">To<\/label>\n <input type=\"date\" id=\"date-to\">\n <\/div>\n \n <div class=\"form-group\">\n <label style=\"visibility: hidden;\">Filter<\/label>\n <button id=\"apply-filter\">Apply Filter<\/button>\n <\/div>\n \n <div class=\"form-group\">\n <label style=\"visibility: hidden;\">Download<\/label>\n <button id=\"download-data\">Download Excel<\/button>\n <\/div>\n <\/div>\n \n <div class=\"stats-grid\">\n <div class=\"stat-card clickable-stat\" id=\"total-visits-card\">\n <h3>Total Visits<\/h3>\n <div class=\"stat-number\" id=\"total-visits\">0<\/div>\n <p>Restaurants visited<\/p>\n <\/div>\n \n <div class=\"stat-card clickable-stat onboarded\" id=\"onboarded-card\">\n <h3>Onboarded<\/h3>\n <div class=\"stat-number\" id=\"onboarded-count\">0<\/div>\n <p>Successful onboardings<\/p>\n <\/div>\n \n <div class=\"stat-card clickable-stat not-onboarded\" id=\"not-onboarded-card\">\n <h3>Not Onboarded<\/h3>\n <div class=\"stat-number\" id=\"not-onboarded-count\">0<\/div>\n <p>Unsuccessful visits<\/p>\n <\/div>\n \n <div class=\"stat-card\">\n <h3>Conversion Rate<\/h3>\n <div class=\"stat-number\" id=\"conversion-rate\">0%<\/div>\n <p>Visits to onboardings<\/p>\n <\/div>\n <\/div>\n \n <h3>Onboarding Completion Status<\/h3>\n <div class=\"stats-grid\">\n <div class=\"stat-card clickable-stat\" id=\"welcome-call-card\">\n <h3>Welcome Call<\/h3>\n <div class=\"stat-number\" id=\"welcome-call-count\">0<\/div>\n <p>Pending: <span id=\"welcome-call-pending\">0<\/span><\/p>\n <\/div>\n \n <div class=\"stat-card clickable-stat\" id=\"welcome-message-card\">\n <h3>Welcome Message<\/h3>\n <div class=\"stat-number\" id=\"welcome-message-count\">0<\/div>\n <p>Pending: <span id=\"welcome-message-pending\">0<\/span><\/p>\n <\/div>\n \n <div class=\"stat-card clickable-stat\" id=\"profile-setup-card\">\n <h3>Profile Setup<\/h3>\n <div class=\"stat-number\" id=\"profile-setup-count\">0<\/div>\n <p>Pending: <span id=\"profile-setup-pending\">0<\/span><\/p>\n <\/div>\n \n <div class=\"stat-card clickable-stat\" id=\"qr-designed-card\">\n <h3>QR Designed<\/h3>\n <div class=\"stat-number\" id=\"qr-designed-count\">0<\/div>\n <p>Pending: <span id=\"qr-designed-pending\">0<\/span><\/p>\n <\/div>\n \n <div class=\"stat-card clickable-stat\" id=\"qr-delivered-card\">\n <h3>QR Delivered<\/h3>\n <div class=\"stat-number\" id=\"qr-delivered-count\">0<\/div>\n <p>Pending: <span id=\"qr-delivered-pending\">0<\/span><\/p>\n <\/div>\n <\/div>\n \n <div class=\"chart-container\">\n <canvas id=\"onboarding-chart\"><\/canvas>\n <\/div>\n \n <div class=\"chart-container\">\n <canvas id=\"team-performance-chart\"><\/canvas>\n <\/div>\n \n <h3>Team Performance<\/h3>\n <div class=\"team-grid\" id=\"team-performance\">\n \n <\/div>\n \n <div id=\"details-modal\" style=\"display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 1000; justify-content: center; align-items: center;\">\n <div style=\"background: white; padding: 20px; border-radius: 10px; max-width: 500px; width: 90%; max-height: 80vh; overflow-y: auto;\">\n <h3 id=\"modal-title\">Details<\/h3>\n <div id=\"modal-content\"><\/div>\n <button id=\"close-modal\" style=\"margin-top: 20px;\">Close<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ Team members array\n const teamMembers = [\n \"Amit Gour\",\n \"Etina Pradhan\",\n \"Chetna Mohapatra\",\n \"Kamakshya Prasad Nayak\",\n \"Soumyajit Das\",\n \"Chandrakanta Sahoo\",\n \"Madhusmita Rath\",\n \"SZ Raheman\",\n \"Raja Biswal\"\n ];\n \n \/\/ Google Sheets setup - REPLACE THIS WITH YOUR ACTUAL SCRIPT URL\n const scriptURL = 'https:\/\/script.google.com\/macros\/s\/AKfycbwWQ10azSq7anvR42dPn1TzZjMql-8p7kos7kGGkO37KoLfYgxVJgT-Cn8H0YhAOG86\/exec';\n \n \/\/ Show\/hide sections based on onboarding status\n document.getElementById('first-visit-status').addEventListener('change', function() {\n const onboardedSection = document.getElementById('onboarded-section');\n const notOnboardedSection = document.getElementById('not-onboarded-section');\n \n if (this.value === 'Onboarded') {\n onboardedSection.style.display = 'block';\n notOnboardedSection.style.display = 'none';\n } else if (this.value === 'Not-Onboarded') {\n onboardedSection.style.display = 'none';\n notOnboardedSection.style.display = 'block';\n } else {\n onboardedSection.style.display = 'none';\n notOnboardedSection.style.display = 'none';\n }\n });\n \n \/\/ Form submission\n document.getElementById('restaurant-form').addEventListener('submit', async function(e) {\n e.preventDefault();\n \n const submitBtn = document.getElementById('submit-btn');\n submitBtn.disabled = true;\n submitBtn.textContent = 'Saving...';\n \n \/\/ Collect form data\n const formData = {\n restaurantName: document.getElementById('restaurant-name').value,\n visitedBy: Array.from(document.getElementById('visited-by').selectedOptions).map(opt => opt.value),\n firstVisitDate: document.getElementById('first-visit-date').value,\n firstVisitStatus: document.getElementById('first-visit-status').value,\n timestamp: new Date().toISOString()\n };\n \n if (formData.firstVisitStatus === 'Onboarded') {\n formData.welcomeCall = document.getElementById('welcome-call').value;\n formData.welcomeMessage = document.getElementById('welcome-message').value;\n formData.profileSetup = document.getElementById('profile-setup').value;\n formData.qrDesigned = document.getElementById('qr-designed').value;\n formData.qrDelivered = document.getElementById('qr-delivered').value;\n formData.trialStartDate = document.getElementById('trial-start-date').value;\n \n \/\/ Follow-up dates and remarks\n for (let i = 1; i <= 6; i++) {\n formData[`followup${i}Date`] = document.getElementById(`followup${i}-date`).value;\n formData[`followup${i}Remarks`] = document.getElementById(`followup${i}-remarks`).value;\n }\n } else {\n formData.firstVisitRemarks = document.getElementById('first-visit-remarks').value;\n \n \/\/ Visit dates and remarks\n for (let i = 2; i <= 4; i++) {\n formData[`visit${i}Date`] = document.getElementById(`visit${i}-date`).value;\n formData[`visit${i}Remarks`] = document.getElementById(`visit${i}-remarks`).value;\n }\n \n formData.laterOnboardStatus = document.getElementById('later-onboard-status').value;\n }\n \n try {\n \/\/ Send data to Google Sheets\n const response = await fetch(scriptURL, {\n method: 'POST',\n body: JSON.stringify(formData),\n headers: {\n 'Content-Type': 'application\/json'\n }\n });\n \n if (response.ok) {\n alert('Data saved successfully!');\n document.getElementById('restaurant-form').reset();\n document.getElementById('onboarded-section').style.display = 'none';\n document.getElementById('not-onboarded-section').style.display = 'none';\n \n \/\/ Refresh analytics\n loadAnalyticsData();\n } else {\n throw new Error('Failed to save data');\n }\n } catch (error) {\n console.error('Error:', error);\n alert('Error saving data. Please try again.');\n } finally {\n submitBtn.disabled = false;\n submitBtn.textContent = 'Save Restaurant Data';\n }\n });\n \n \/\/ Load analytics data\n async function loadAnalyticsData() {\n try {\n const response = await fetch(`${scriptURL}?action=getData`);\n const data = await response.json();\n \n \/\/ Update summary statistics\n document.getElementById('total-visits').textContent = data.totalVisits;\n document.getElementById('onboarded-count').textContent = data.onboardedCount;\n document.getElementById('not-onboarded-count').textContent = data.notOnboardedCount;\n \n const conversionRate = data.totalVisits > 0 ? \n Math.round((data.onboardedCount \/ data.totalVisits) * 100) : 0;\n document.getElementById('conversion-rate').textContent = `${conversionRate}%`;\n \n \/\/ Update onboarding completion stats\n document.getElementById('welcome-call-count').textContent = data.welcomeCallYes;\n document.getElementById('welcome-call-pending').textContent = data.welcomeCallNo;\n \n document.getElementById('welcome-message-count').textContent = data.welcomeMessageYes;\n document.getElementById('welcome-message-pending').textContent = data.welcomeMessageNo;\n \n document.getElementById('profile-setup-count').textContent = data.profileSetupYes;\n document.getElementById('profile-setup-pending').textContent = data.profileSetupNo;\n \n document.getElementById('qr-designed-count').textContent = data.qrDesignedYes;\n document.getElementById('qr-designed-pending').textContent = data.qrDesignedNo;\n \n document.getElementById('qr-delivered-count').textContent = data.qrDeliveredYes;\n document.getElementById('qr-delivered-pending').textContent = data.qrDeliveredNo;\n \n \/\/ Update team performance\n updateTeamPerformance(data.teamStats);\n \n \/\/ Update charts\n updateCharts(data);\n \n } catch (error) {\n console.error('Error loading analytics:', error);\n }\n }\n \n \/\/ Update team performance stats\n function updateTeamPerformance(teamStats) {\n const teamContainer = document.getElementById('team-performance');\n teamContainer.innerHTML = '';\n \n teamMembers.forEach(member => {\n const stats = teamStats[member] || { visits: 0, onboarded: 0 };\n \n const memberElement = document.createElement('div');\n memberElement.className = 'team-member';\n memberElement.innerHTML = `\n <h4>${member}<\/h4>\n <div class=\"stat-number\">${stats.visits}<\/div>\n <p>Visits<\/p>\n <div class=\"stat-number\">${stats.onboarded}<\/div>\n <p>Onboarded<\/p>\n `;\n \n teamContainer.appendChild(memberElement);\n });\n }\n \n \/\/ Update charts\n function updateCharts(data) {\n \/\/ Onboarding status chart\n const onboardingCtx = document.getElementById('onboarding-chart').getContext('2d');\n if (window.onboardingChart) {\n window.onboardingChart.destroy();\n }\n window.onboardingChart = new Chart(onboardingCtx, {\n type: 'doughnut',\n data: {\n labels: ['Onboarded', 'Not Onboarded'],\n datasets: [{\n data: [data.onboardedCount, data.notOnboardedCount],\n backgroundColor: ['#06d6a0', '#ef476f']\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n legend: {\n position: 'bottom'\n }\n }\n }\n });\n \n \/\/ Team performance chart\n const teamCtx = document.getElementById('team-performance-chart').getContext('2d');\n if (window.teamChart) {\n window.teamChart.destroy();\n }\n window.teamChart = new Chart(teamCtx, {\n type: 'bar',\n data: {\n labels: teamMembers,\n datasets: [\n {\n label: 'Visits',\n data: teamMembers.map(member => data.teamStats[member]?.visits || 0),\n backgroundColor: '#4361ee'\n },\n {\n label: 'Onboarded',\n data: teamMembers.map(member => data.teamStats[member]?.onboarded || 0),\n backgroundColor: '#06d6a0'\n }\n ]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n x: {\n ticks: {\n maxRotation: 45,\n minRotation: 45\n }\n }\n }\n }\n });\n }\n \n \/\/ Set up click events for stat cards\n function setupStatCardEvents() {\n \/\/ These would show detailed modals when implemented with real data\n const statCards = document.querySelectorAll('.clickable-stat');\n statCards.forEach(card => {\n card.addEventListener('click', function() {\n \/\/ This would show a modal with detailed information\n alert('Detailed view would show here with real data integration');\n });\n });\n }\n \n \/\/ Initialize the dashboard\n document.addEventListener('DOMContentLoaded', function() {\n \/\/ Set default date range (last 30 days)\n const today = new Date();\n const thirtyDaysAgo = new Date();\n thirtyDaysAgo.setDate(today.getDate() - 30);\n \n document.getElementById('date-from').valueAsDate = thirtyDaysAgo;\n document.getElementById('date-to').valueAsDate = today;\n \n \/\/ Load initial data\n loadAnalyticsData();\n \n \/\/ Set up event listeners\n setupStatCardEvents();\n \n document.getElementById('apply-filter').addEventListener('click', loadAnalyticsData);\n document.getElementById('download-data').addEventListener('click', function() {\n alert('This would download the data in Excel format with real implementation');\n });\n \n document.getElementById('close-modal').addEventListener('click', function() {\n document.getElementById('details-modal').style.display = 'none';\n });\n });\n <\/script>\n<script>\n \/\/ Team members array\n const teamMembers = [\n \"Amit Gour\",\n \"Etina Pradhan\",\n \"Chetna Mohapatra\",\n \"Kamakshya Prasad Nayak\",\n \"Soumyajit Das\",\n \"Chandrakanta Sahoo\",\n \"Madhusmita Rath\",\n \"SZ Raheman\",\n \"Raja Biswal\"\n ];\n \n \/\/ Google Sheets setup - REPLACE THIS WITH YOUR ACTUAL SCRIPT URL\n const scriptURL = 'https:\/\/script.google.com\/macros\/s\/YOUR_SCRIPT_ID\/exec';\n \n \/\/ Show\/hide sections based on onboarding status\n document.getElementById('first-visit-status').addEventListener('change', function() {\n const onboardedSection = document.getElementById('onboarded-section');\n const notOnboardedSection = document.getElementById('not-onboarded-section');\n \n if (this.value === 'Onboarded') {\n onboardedSection.style.display = 'block';\n notOnboardedSection.style.display = 'none';\n } else if (this.value === 'Not-Onboarded') {\n onboardedSection.style.display = 'none';\n notOnboardedSection.style.display = 'block';\n } else {\n onboardedSection.style.display = 'none';\n notOnboardedSection.style.display = 'none';\n }\n });\n \n \/\/ Form submission\n document.getElementById('restaurant-form').addEventListener('submit', async function(e) {\n e.preventDefault();\n \n const submitBtn = document.getElementById('submit-btn');\n submitBtn.disabled = true;\n submitBtn.textContent = 'Saving...';\n \n \/\/ Collect form data\n const formData = {\n restaurantName: document.getElementById('restaurant-name').value,\n visitedBy: Array.from(document.getElementById('visited-by').selectedOptions).map(opt => opt.value),\n firstVisitDate: document.getElementById('first-visit-date').value,\n firstVisitStatus: document.getElementById('first-visit-status').value,\n timestamp: new Date().toISOString()\n };\n \n if (formData.firstVisitStatus === 'Onboarded') {\n formData.welcomeCall = document.getElementById('welcome-call').value;\n formData.welcomeMessage = document.getElementById('welcome-message').value;\n formData.profileSetup = document.getElementById('profile-setup').value;\n formData.qrDesigned = document.getElementById('qr-designed').value;\n formData.qrDelivered = document.getElementById('qr-delivered').value;\n formData.trialStartDate = document.getElementById('trial-start-date').value;\n \n \/\/ Follow-up dates and remarks\n for (let i = 1; i <= 6; i++) {\n formData[`followup${i}Date`] = document.getElementById(`followup${i}-date`).value;\n formData[`followup${i}Remarks`] = document.getElementById(`followup${i}-remarks`).value;\n }\n } else {\n formData.firstVisitRemarks = document.getElementById('first-visit-remarks').value;\n \n \/\/ Visit dates and remarks\n for (let i = 2; i <= 4; i++) {\n formData[`visit${i}Date`] = document.getElementById(`visit${i}-date`).value;\n formData[`visit${i}Remarks`] = document.getElementById(`visit${i}-remarks`).value;\n }\n \n formData.laterOnboardStatus = document.getElementById('later-onboard-status').value;\n }\n \n try {\n \/\/ Send data to Google Sheets\n const response = await fetch(scriptURL, {\n method: 'POST',\n body: JSON.stringify(formData),\n headers: {\n 'Content-Type': 'application\/json'\n }\n });\n \n if (response.ok) {\n alert('Data saved successfully!');\n document.getElementById('restaurant-form').reset();\n document.getElementById('onboarded-section').style.display = 'none';\n document.getElementById('not-onboarded-section').style.display = 'none';\n \n \/\/ Refresh analytics\n loadAnalyticsData();\n } else {\n throw new Error('Failed to save data');\n }\n } catch (error) {\n console.error('Error:', error);\n alert('Error saving data. Please try again.');\n } finally {\n submitBtn.disabled = false;\n submitBtn.textContent = 'Save Restaurant Data';\n }\n });\n \n \/\/ Load analytics data\n async function loadAnalyticsData() {\n try {\n const response = await fetch(`${scriptURL}?action=getData`);\n const data = await response.json();\n \n \/\/ Update summary statistics\n document.getElementById('total-visits').textContent = data.totalVisits;\n document.getElementById('onboarded-count').textContent = data.onboardedCount;\n document.getElementById('not-onboarded-count').textContent = data.notOnboardedCount;\n \n const conversionRate = data.totalVisits > 0 ? \n Math.round((data.onboardedCount \/ data.totalVisits) * 100) : 0;\n document.getElementById('conversion-rate').textContent = `${conversionRate}%`;\n \n \/\/ Update onboarding completion stats\n document.getElementById('welcome-call-count').textContent = data.welcomeCallYes;\n document.getElementById('welcome-call-pending').textContent = data.welcomeCallNo;\n \n document.getElementById('welcome-message-count').textContent = data.welcomeMessageYes;\n document.getElementById('welcome-message-pending').textContent = data.welcomeMessageNo;\n \n document.getElementById('profile-setup-count').textContent = data.profileSetupYes;\n document.getElementById('profile-setup-pending').textContent = data.profileSetupNo;\n \n document.getElementById('qr-designed-count').textContent = data.qrDesignedYes;\n document.getElementById('qr-designed-pending').textContent = data.qrDesignedNo;\n \n document.getElementById('qr-delivered-count').textContent = data.qrDeliveredYes;\n document.getElementById('qr-delivered-pending').textContent = data.qrDeliveredNo;\n \n \/\/ Update team performance\n updateTeamPerformance(data.teamStats);\n \n \/\/ Update charts\n updateCharts(data);\n \n } catch (error) {\n console.error('Error loading analytics:', error);\n }\n }\n \n \/\/ UPDATE: Add the showDetails function here\n function showDetails(type, value) {\n \/\/ This would fetch detailed data from your Google Sheet\n \/\/ and display it in the modal\n \n const modal = document.getElementById('details-modal');\n const modalTitle = document.getElementById('modal-title');\n const modalContent = document.getElementById('modal-content');\n \n modalTitle.textContent = `${type}: ${value}`;\n modalContent.innerHTML = '<p>Loading details...<\/p>';\n \n \/\/ Show modal\n modal.style.display = 'flex';\n \n \/\/ In a real implementation, you would fetch this data from your Google Sheet\n \/\/ For now, we'll use sample data\n setTimeout(() => {\n modalContent.innerHTML = `\n <ul>\n <li>Restaurant A<\/li>\n <li>Restaurant B<\/li>\n <li>Restaurant C<\/li>\n <li>Restaurant D<\/li>\n <li>Restaurant E<\/li>\n <\/ul>\n <p><em>Note: With real implementation, this would show actual restaurant names from your data<\/em><\/p>\n `;\n }, 500);\n }\n \n \/\/ UPDATE: Replace the existing setupStatCardEvents function with this one\n function setupStatCardEvents() {\n const statCards = document.querySelectorAll('.clickable-stat');\n statCards.forEach(card => {\n card.addEventListener('click', function() {\n const title = this.querySelector('h3').textContent;\n const value = this.querySelector('.stat-number').textContent;\n showDetails(title, value);\n });\n });\n }\n \n \/\/ Update team performance stats\n function updateTeamPerformance(teamStats) {\n const teamContainer = document.getElementById('team-performance');\n teamContainer.innerHTML = '';\n \n teamMembers.forEach(member => {\n const stats = teamStats[member] || { visits: 0, onboarded: 0 };\n \n const memberElement = document.createElement('div');\n memberElement.className = 'team-member';\n memberElement.innerHTML = `\n <h4>${member}<\/h4>\n <div class=\"stat-number\">${stats.visits}<\/div>\n <p>Visits<\/p>\n <div class=\"stat-number\">${stats.onboarded}<\/div>\n <p>Onboarded<\/p>\n `;\n \n teamContainer.appendChild(memberElement);\n });\n }\n \n \/\/ Update charts\n function updateCharts(data) {\n \/\/ Onboarding status chart\n const onboardingCtx = document.getElementById('onboarding-chart').getContext('2d');\n if (window.onboardingChart) {\n window.onboardingChart.destroy();\n }\n window.onboardingChart = new Chart(onboardingCtx, {\n type: 'doughnut',\n data: {\n labels: ['Onboarded', 'Not Onboarded'],\n datasets: [{\n data: [data.onboardedCount, data.notOnboardedCount],\n backgroundColor: ['#06d6a0', '#ef476f']\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n legend: {\n position: 'bottom'\n }\n }\n }\n });\n \n \/\/ Team performance chart\n const teamCtx = document.getElementById('team-performance-chart').getContext('2d');\n if (window.teamChart) {\n window.teamChart.destroy();\n }\n window.teamChart = new Chart(teamCtx, {\n type: 'bar',\n data: {\n labels: teamMembers,\n datasets: [\n {\n label: 'Visits',\n data: teamMembers.map(member => data.teamStats[member]?.visits || 0),\n backgroundColor: '#4361ee'\n },\n {\n label: 'Onboarded',\n data: teamMembers.map(member => data.teamStats[member]?.onboarded || 0),\n backgroundColor: '#06d6a0'\n }\n ]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n x: {\n ticks: {\n maxRotation: 45,\n minRotation: 45\n }\n }\n }\n }\n });\n }\n \n \/\/ Initialize the dashboard\n document.addEventListener('DOMContentLoaded', function() {\n \/\/ Set default date range (last 30 days)\n const today = new Date();\n const thirtyDaysAgo = new Date();\n thirtyDaysAgo.setDate(today.getDate() - 30);\n \n document.getElementById('date-from').valueAsDate = thirtyDaysAgo;\n document.getElementById('date-to').valueAsDate = today;\n \n \/\/ Load initial data\n loadAnalyticsData();\n \n \/\/ Set up event listeners\n setupStatCardEvents();\n \n document.getElementById('apply-filter').addEventListener('click', loadAnalyticsData);\n document.getElementById('download-data').addEventListener('click', function() {\n alert('This would download the data in Excel format with real implementation');\n });\n \n document.getElementById('close-modal').addEventListener('click', function() {\n document.getElementById('details-modal').style.display = 'none';\n });\n });\n<\/script>\n\/\/ Update the download button event listener\ndocument.getElementById('download-data').addEventListener('click', function() {\n const dateFrom = document.getElementById('date-from').value;\n const dateTo = document.getElementById('date-to').value;\n \n \/\/ Open download link in new tab\n window.open(`${scriptURL}?action=download&from=${dateFrom}&to=${dateTo}`, '_blank');\n});\n\n<\/body>\n<\/html>\n\n\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Thryvoo Marketing Dashboard Thryvoo Restaurant Outreach Dashboard Track and analyze marketing efforts in Puri New Restaurant Entry Restaurant Name * Visited By * Amit GourEtina PradhanChetna MohapatraKamakshya Prasad NayakSoumyajit DasChandrakanta SahooMadhusmita RathSZ RahemanRaja Biswal Hold Ctrl\/Cmd to select multiple team members First Visit Date * First Visit Status * Select StatusOnboardedNot-Onboarded Onboarding Details Welcome Call? YesNo Welcome Message? YesNo Profile Setup? YesNo QR Designed? YesNo QR Delivered? YesNo Trial Start Date Follow-up Schedule 1st Follow-up Date 1st Follow-up Remarks 2nd Follow-up Date 2nd Follow-up Remarks 3rd Follow-up Date 3rd Follow-up Remarks 4th Follow-up Date 4th Follow-up Remarks 5th Follow-up Date 5th Follow-up Remarks 6th Follow-up Date 6th Follow-up Remarks 1st Visit Remarks Follow-up Visits 2nd Visit Date 2nd Visit Remarks 3rd Visit Date 3rd Visit Remarks 4th Visit Date 4th Visit Remarks Onboard Status After Visit Not Yet OnboardedOnboarded Save Restaurant Data Analytics Dashboard From To Filter Apply Filter Download Download Excel Total Visits 0 Restaurants visited Onboarded 0 Successful onboardings Not Onboarded 0 Unsuccessful visits Conversion Rate 0% Visits to onboardings Onboarding Completion Status Welcome Call 0 Pending: 0 Welcome Message 0 Pending: 0 Profile Setup 0 Pending: 0 QR Designed 0 Pending: 0 QR Delivered 0 Pending: 0 Team Performance Details Close \/\/ Update the download button event listener document.getElementById(‘download-data’).addEventListener(‘click’, function() { const dateFrom = document.getElementById(‘date-from’).value; const dateTo = document.getElementById(‘date-to’).value; \/\/ Open download link in new tab window.open(`${scriptURL}?action=download&from=${dateFrom}&to=${dateTo}`, ‘_blank’); });<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-5583","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/vedas.veraztech.com\/index.php\/wp-json\/wp\/v2\/pages\/5583","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vedas.veraztech.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vedas.veraztech.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vedas.veraztech.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vedas.veraztech.com\/index.php\/wp-json\/wp\/v2\/comments?post=5583"}],"version-history":[{"count":22,"href":"https:\/\/vedas.veraztech.com\/index.php\/wp-json\/wp\/v2\/pages\/5583\/revisions"}],"predecessor-version":[{"id":5607,"href":"https:\/\/vedas.veraztech.com\/index.php\/wp-json\/wp\/v2\/pages\/5583\/revisions\/5607"}],"wp:attachment":[{"href":"https:\/\/vedas.veraztech.com\/index.php\/wp-json\/wp\/v2\/media?parent=5583"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}