AI_Coach_Site_Supervisor5

Sleeping

App Files Files Community

geethareddy commited on May 7

Commit

8a37466

verified ·

1 Parent(s): e1551f7

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +971 -224

templates/index.html CHANGED Viewed

@@ -3,204 +3,824 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>AI Coach for Site Supervisors</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/heroicons/2.1.1/outline/index.min.css" rel="stylesheet">
     <style>
         body {
-            font-family: 'Inter', sans-serif;
         }
-        .checklist-item {
-            transition: background-color 0.3s ease, transform 0.2s ease;
         }
-        .checklist-item.completed {
-            background-color: #ecfdf5;
-            transform: scale(1.02);
         }
         .checklist-item:hover {
-            transform: scale(1.02);
         }
         .tip-card {
-            transition: transform 0.3s ease, box-shadow 0.3s ease;
         }
         .tip-card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
         }
-        .fade-in {
-            animation: fadeIn 0.5s ease-in-out;
         }
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(10px); }
-            to { opacity: 1; transform: translateY(0); }
         }
-        .gradient-header {
-            background: linear-gradient(135deg, #3b82f6, #1d4ed8);
         }
-        .spinner {
-            border: 4px solid #f3f3f3;
-            border-top: 4px solid #3b82f6;
-            border-radius: 50%;
-            width: 24px;
-            height: 24px;
-            animation: spin 1s linear infinite;
             display: none;
         }
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
         }
     </style>
 </head>
-<body class="bg-gray-50 min-h-screen flex flex-col">
-    <!-- Header -->
-    <header class="gradient-header text-white p-6 shadow-lg">
-        <h1 class="text-3xl font-bold tracking-tight flex items-center">
-            <svg class="w-8 h-8 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-            </svg>
-            AI Coach for Supervisors
-        </h1>
-        <p class="mt-1 text-sm opacity-80">Your daily guide to success</p>
-    </header>
-    <!-- Main Content -->
-    <main class="flex-1 p-6 space-y-8 max-w-3xl mx-auto">
-        <!-- Supervisor Input Form -->
-        <section class="bg-white rounded-xl shadow-md p-6 fade-in">
-            <h2 class="text-2xl font-semibold text-gray-800 mb-4 flex items-center">
-                <svg class="w-6 h-6 mr-2 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
-                </svg>
-                Supervisor Details
-            </h2>
-            <div class="space-y-4">
-                <div>
-                    <label class="block text-gray-700 font-medium mb-1">Role</label>
-                    <input id="role" type="text" value="Site Supervisor" class="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-400 focus:border-transparent" placeholder="e.g., Site Supervisor">
                 </div>
-                <div>
-                    <label class="block text-gray-700 font-medium mb-1">Location</label>
-                    <input id="location" type="text" value="Construction Site A" class="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-400 focus:border-transparent" placeholder="e.g., Construction Site A">
                 </div>
-                <div>
-                    <label class="block text-gray-700 font-medium mb-1">Project Schedule (JSON)</label>
-                    <textarea id="schedule" class="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-400 focus:border-transparent" rows="3" placeholder='e.g., [{"task": "Foundation Inspection", "due_date": "2025-05-07", "status": "Pending"}]'>[{"task": "Foundation Inspection", "due_date": "2025-05-07", "status": "Pending"}, {"task": "Material Delivery", "due_date": "2025-05-06", "status": "Delayed"}]</textarea>
                 </div>
-                <button id="loadData" class="w-full bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors duration-200 flex items-center justify-center">
-                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9H20m-7 7v5h-.582m-7.356-2A8.001 8.001 0 0119.418 15H4"></path>
-                    </svg>
-                    Load Coaching Data
-                    <div id="spinner" class="spinner ml-2"></div>
-                </button>
             </div>
-        </section>
-        <!-- Alerts (Placeholder) -->
-        <section id="alerts" class="bg-red-50 rounded-xl shadow-md p-6 fade-in hidden">
-            <h2 class="text-2xl font-semibold text-red-800 mb-4 flex items-center">
-                <svg class="w-6 h-6 mr-2 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-                </svg>
-                Alerts
-            </h2>
-            <p class="text-red-700">No alerts at this time. (Placeholder for missed milestones or unsafe patterns)</p>
-        </section>
-        <!-- Checklist -->
-        <section id="checklistSection" class="bg-white rounded-xl shadow-md p-6 fade-in hidden">
-            <h2 class="text-2xl font-semibold text-gray-800 mb-4 flex items-center">
-                <svg class="w-6 h-6 mr-2 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-                </svg>
-                Daily Checklist
-            </h2>
-            <ul id="checklist" class="space-y-3"></ul>
-        </section>
-        <!-- Tips -->
-        <section id="tipsSection" class="bg-white rounded-xl shadow-md p-6 fade-in hidden">
-            <h2 class="text-2xl font-semibold text-gray-800 mb-4 flex items-center">
-                <svg class="w-6 h-6 mr-2 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
-                </svg>
-                Today's Top 3 Focus Areas
-            </h2>
-            <ul id="tips" class="space-y-3"></ul>
-        </section>
-        <!-- Quote -->
-        <section id="quoteSection" class="bg-white rounded-xl shadow-md p-6 fade-in hidden">
-            <h2 class="text-2xl font-semibold text-gray-800 mb-4 flex items-center">
-                <svg class="w-6 h-6 mr-2 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path>
-                </svg>
-                Motivational Quote
-            </h2>
-            <p id="quote" class="italic text-gray-600 text-lg"></p>
-        </section>
-        <!-- Reflection Journal -->
-        <section class="bg-white rounded-xl shadow-md p-6 fade-in">
-            <h2 class="text-2xl font-semibold text-gray-800 mb-4 flex items-center">
-                <svg class="w-6 h-6 mr-2 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
-                </svg>
-                Reflection Journal
-            </h2>
-            <textarea id="reflection" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-400 focus:border-transparent" rows="4" placeholder="Log your thoughts or observations..."></textarea>
-            <button id="saveReflection" class="mt-3 w-full bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors duration-200">Save Reflection</button>
-        </section>
-        <!-- Engagement Score -->
-        <section class="bg-white rounded-xl shadow-md p-6 fade-in">
-            <h2 class="text-2xl font-semibold text-gray-800 mb-4 flex items-center">
-                <svg class="w-6 h-6 mr-2 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 012-2h2a2 2 0 012 2v12a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
-                </svg>
-                Engagement Score
-            </h2>
-            <p class="text-gray-600 mb-3">Weekly trend (Placeholder)</p>
-            <div class="h-40 bg-gray-100 rounded-lg flex items-center justify-center">
-                <svg width="100%" height="100" class="max-w-full">
-                    <polyline points="10,90 30,70 50,80 70,50 90,60 110,40 130,60" fill="none" stroke="#3b82f6" stroke-width="2"/>
-                    <text x="10" y="20" fill="#4b5563" font-size="12">Engagement: 85%</text>
-                    <line x1="10" y1="90" x2="130" y2="90" stroke="#d1d5db" stroke-width="1"/>
-                    <line x1="10" y1="90" x2="10" y2="30" stroke="#d1d5db" stroke-width="1"/>
-                </svg>
             </div>
-        </section>
-        <!-- PDF Download -->
-        <section class="bg-white rounded-xl shadow-md p-6 fade-in">
-            <h2 class="text-2xl font-semibold text-gray-800 mb-4 flex items-center">
-                <svg class="w-6 h-6 mr-2 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
-                </svg>
-                Summary Report
-            </h2>
-            <button id="downloadPdf" class="w-full bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition-colors duration-200">Download PDF Summary</button>
-        </section>
-    </main>
     <script>
-        // Default supervisor data
-        let supervisorData = {
-            supervisor_id: "SUP123",
-            role: "Site Supervisor",
-            project_id: "PRJ456",
-            milestones: [
-                { task: "Foundation Inspection", due_date: "2025-05-07", status: "Pending" },
-                { task: "Material Delivery", due_date: "2025-05-06", status: "Delayed" }
-            ],
-            reflection_log: "Noticed delays due to rain; team morale is low.",
-            weather: "Rainy, 20°C"
-        };
-        async function fetchCoachingOutput() {
-            const spinner = document.getElementById('spinner');
-            spinner.style.display = 'block';
             try {
                 const response = await fetch('/generate', {
                     method: 'POST',
@@ -208,73 +828,200 @@
                     body: JSON.stringify(supervisorData)
                 });
                 const result = await response.json();
                 if (result.status === 'success') {
-                    updateUI(result.output);
                 } else {
-                    alert('Error: ' + result.message);
                 }
             } catch (error) {
-                alert('Failed to fetch coaching output: ' + error.message);
-            } finally {
-                spinner.style.display = 'none';
             }
         }
-        function updateUI(output) {
-            // Show sections
-            document.getElementById('checklistSection').classList.remove('hidden');
-            document.getElementById('tipsSection').classList.remove('hidden');
-            document.getElementById('quoteSection').classList.remove('hidden');
-            // Checklist
-            const checklist = document.getElementById('checklist');
-            checklist.innerHTML = output.checklist.map(item => `
-                <li class="checklist-item flex items-center p-3 bg-gray-50 rounded-lg">
-                    <input type="checkbox" class="w-5 h-5 text-green-500 rounded focus:ring-green-400 mr-3" onchange="toggleCompletion(this)">
-                    <span class="text-gray-700">${item}</span>
-                </li>
-            `).join('');
-            // Tips
-            const tips = document.getElementById('tips');
-            tips.innerHTML = output.tips.map(tip => `
-                <li class="tip-card p-4 bg-blue-50 rounded-lg text-gray-700">${tip}</li>
-            `).join('');
-            // Quote
-            document.getElementById('quote').textContent = output.quote;
         }
-        function toggleCompletion(checkbox) {
-            const li = checkbox.parentElement;
-            li.classList.toggle('completed', checkbox.checked);
         }
-        document.getElementById('saveReflection').addEventListener('click', () => {
-            const reflection = document.getElementById('reflection').value;
-            if (reflection) {
-                alert('Reflection saved: ' + reflection);
-            } else {
-                alert('Please enter a reflection');
-            }
-        });
-        document.getElementById('downloadPdf').addEventListener('click', () => {
-            alert('PDF download feature coming soon...');
-        });
-        document.getElementById('loadData').addEventListener('click', () => {
-            const role = document.getElementById('role').value;
-            const location = document.getElementById('location').value;
-            const schedule = JSON.parse(document.getElementById('schedule').value || '[]');
-            supervisorData.role = role;
-            supervisorData.location = location;
-            supervisorData.milestones = schedule;
-            fetchCoachingOutput();
-        });
-        // Initial load (optional, can be triggered by button only)
-        fetchCoachingOutput();
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Coach Dashboard</title>
     <style>
         body {
+            font-family: 'Roboto', Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            background: linear-gradient(135deg, #f0f2f5 0%, #e9ecef 100%);
+            color: #2d3748;
+            line-height: 1.6;
         }
+        .header {
+            background: linear-gradient(to right, #1a3c7a, #2957a4);
+            padding: 15px 25px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+            position: sticky;
+            top: 0;
+            z-index: 100;
         }
+        .header-title {
+            color: #fff;
+            margin: 0;
+            font-size: 26px;
+            font-weight: 700;
+            text-align: center;
+            padding-bottom: 10px;
+        }
+        .header-actions {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 20px;
+        }
+        .avatar {
+            width: 42px;
+            height: 42px;
+            background: linear-gradient(to right, #f6ad55, #ed8936);
+            color: #fff;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            font-weight: 600;
+            cursor: pointer;
+            position: relative;
+            transition: transform 0.2s ease;
+        }
+        .avatar:hover {
+            transform: scale(1.05);
+            background: linear-gradient(to right, #ed8936, #dd6b20);
+        }
+        .dropdown {
+            display: none;
+            position: absolute;
+            top: 50px;
+            right: 0;
+            background-color: #fff;
+            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
+            border-radius: 10px;
+            min-width: 160px;
+            z-index: 101;
+            overflow: hidden;
+        }
+        .dropdown.active {
+            display: block;
+        }
+        .dropdown a {
+            display: block;
+            padding: 12px 20px;
+            color: #2d3748;
+            text-decoration: none;
+            font-size: 15px;
+            transition: background 0.3s ease;
+        }
+        .dropdown a:hover {
+            background-color: #f7fafc;
+        }
+        .search-container {
+            position: relative;
+            flex: 1;
+            max-width: 500px;
+        }
+        .search-bar {
+            width: 100%;
+            padding: 12px 45px 12px 20px;
+            border: 2px solid #e2e8f0;
+            border-radius: 25px;
+            font-size: 15px;
+            box-sizing: border-box;
+            transition: border-color 0.3s ease, box-shadow 0.3s ease;
+            background-color: #fff;
+        }
+        .search-bar:focus {
+            border-color: #ed8936;
+            outline: none;
+            box-shadow: 0 0 8px rgba(237, 137, 54, 0.3);
+        }
+        .mic-icon {
+            position: absolute;
+            right: 15px;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 22px;
+            height: 22px;
+            background: url('https://img.icons8.com/ios-filled/50/000000/microphone.png') no-repeat center;
+            background-size: contain;
+            cursor: pointer;
+            opacity: 0.6;
+            transition: opacity 0.3s ease;
+        }
+        .mic-icon:hover {
+            opacity: 1;
+        }
+        .search-results {
+            position: absolute;
+            top: 50px;
+            left: 0;
+            right: 0;
+            background-color: #fff;
+            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
+            border-radius: 10px;
+            max-height: 220px;
+            overflow-y: auto;
+            z-index: 100;
+            display: none;
+        }
+        .search-results.active {
+            display: block;
+        }
+        .search-results p {
+            padding: 10px 15px;
+            margin: 0;
+            font-size: 14px;
+            color: #4a5568;
+            border-bottom: 1px solid #edf2f7;
+            transition: background 0.2s ease;
+        }
+        .search-results p:hover {
+            background-color: #f7fafc;
+        }
+        .search-results p:last-child {
+            border-bottom: none;
+        }
+        .action-bar {
+            background-color: #fff;
+            padding: 15px 25px;
+            display: flex;
+            justify-content: center;
+            gap: 20px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            position: sticky;
+            top: 90px;
+            z-index: 99;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 40px auto;
+            padding: 0 25px;
+        }
+        .content-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 30px;
+            margin-bottom: 40px;
+        }
+        .section {
+            padding: 25px;
+            background-color: #fff;
+            border-radius: 12px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+            border-left: 5px solid #ed8936;
+            transition: transform 0.2s ease, box-shadow 0.3s ease;
+        }
+        .section:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
+        }
+        .section.full-width {
+            grid-column: span 2;
+        }
+        h3 {
+            margin: 0 0 20px 0;
+            color: #1a3c7a;
+            font-size: 22px;
+            font-weight: 600;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        h3 i {
+            font-size: 20px;
+            color: #ed8936;
+        }
+        /* Daily Checklist Section */
+        .checklist-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+        }
+        .progress-circle {
+            width: 50px;
+            height: 50px;
+            background: conic-gradient(#ed8936 var(--progress), #e2e8f0 0);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 14px;
+            font-weight: 600;
+            color: #2d3748;
+            position: relative;
+        }
+        .progress-circle::before {
+            content: '';
+            position: absolute;
+            width: 40px;
+            height: 40px;
+            background-color: #fff;
+            border-radius: 50%;
+        }
+        .progress-circle span {
+            position: relative;
+            z-index: 1;
+        }
+        .checklist-item {
+            display: flex;
+            align-items: center;
+            margin-bottom: 15px;
+            font-size: 16px;
+            padding: 10px;
+            border-radius: 8px;
+            transition: background 0.2s ease;
         }
         .checklist-item:hover {
+            background-color: #f7fafc;
         }
+        .checklist-item input {
+            width: 20px;
+            height: 20px;
+            margin-right: 15px;
+            accent-color: #ed8936;
+            cursor: pointer;
+        }
+        .checklist-item label {
+            flex: 1;
+            color: #4a5568;
+            cursor: pointer;
+        }
+        .checklist-item.completed label {
+            text-decoration: line-through;
+            color: #a0aec0;
+        }
+        /* Focus Tips Section */
         .tip-card {
+            background: linear-gradient(145deg, #e6f0fa, #d1e3ff);
+            padding: 20px;
+            border-radius: 10px;
+            margin-bottom: 15px;
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
+            transition: transform 0.2s ease;
         }
         .tip-card:hover {
+            transform: translateY(-3px);
         }
+        .tip-card h4 {
+            margin: 0 0 15px 0;
+            color: #1a3c7a;
+            font-size: 18px;
+            font-weight: 600;
         }
+        .tip-card ul {
+            padding-left: 20px;
+            margin: 0;
+            list-style-type: disc;
         }
+        .tip-card li {
+            margin-bottom: 10px;
+            font-size: 15px;
+            color: #4a5568;
         }
+        /* Supervisor Data Section */
+        pre {
+            background-color: #f7fafc;
+            padding: 15px;
+            border: 1px solid #e2e8f0;
+            border-radius: 8px;
+            white-space: pre-wrap;
+            font-size: 15px;
+            max-height: 250px;
+            overflow-y: auto;
+            color: #4a5568;
+        }
+        /* Reflection Journal Section */
+        .reflection-journal {
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+        }
+        .reflection-input-area {
+            display: flex;
+            flex-direction: column;
+            gap: 15px;
+        }
+        .reflection-journal textarea {
+            width: 100%;
+            height: 120px;
+            padding: 15px;
+            border: 2px solid #e2e8f0;
+            border-radius: 10px;
+            resize: none;
+            font-size: 15px;
+            box-sizing: border-box;
+            transition: border-color 0.3s ease, box-shadow 0.3s ease;
+            background-color: #f7fafc;
+        }
+        .reflection-journal textarea:focus {
+            border-color: #ed8936;
+            outline: none;
+            box-shadow: 0 0 8px rgba(237, 137, 54, 0.3);
+        }
+        .reflection-history {
+            max-height: 200px;
+            overflow-y: auto;
+            padding: 15px;
+            background-color: #f7fafc;
+            border-radius: 10px;
+            border: 1px solid #e2e8f0;
+        }
+        .reflection-entry {
+            margin-bottom: 15px;
+            padding-bottom: 10px;
+            border-bottom: 1px solid #e2e8f0;
+            font-size: 14px;
+            color: #4a5568;
+        }
+        .reflection-entry:last-child {
+            border-bottom: none;
+            margin-bottom: 0;
+        }
+        .reflection-entry span {
+            font-weight: 600;
+            color: #2d3748;
+        }
+        /* KPI Summary Dashboard Section */
+        .kpi-dashboard {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 20px;
+            padding: 20px;
+            background: linear-gradient(145deg, #fff, #f7fafc);
+            border-radius: 12px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+        }
+        .kpi-card {
+            padding: 20px;
+            border-radius: 10px;
+            background-color: #fff;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+            text-align: center;
+            transition: transform 0.2s ease;
+        }
+        .kpi-card:hover {
+            transform: translateY(-3px);
+        }
+        .kpi-card h4 {
+            margin: 0 0 10px 0;
+            font-size: 16px;
+            color: #1a3c7a;
+            font-weight: 600;
+        }
+        .kpi-value {
+            font-size: 24px;
+            font-weight: 700;
+            color: #ed8936;
+            margin-bottom: 10px;
+        }
+        .progress-bar {
+            width: 100%;
+            height: 8px;
+            background-color: #e2e8f0;
+            border-radius: 4px;
+            overflow: hidden;
+        }
+        .progress-fill {
+            height: 100%;
+            background: linear-gradient(to right, #ed8936, #f6ad55);
+            transition: width 0.5s ease;
+        }
+        .kpi-trend {
+            font-size: 13px;
+            color: #718096;
+            margin-top: 8px;
+        }
+        .kpi-flag {
+            display: inline-block;
+            padding: 5px 10px;
+            border-radius: 5px;
+            font-size: 12px;
+            font-weight: 600;
+            margin-top: 8px;
+        }
+        .kpi-flag.active {
+            background-color: #48bb78;
+            color: #fff;
+        }
+        .kpi-flag.inactive {
+            background-color: #f56565;
+            color: #fff;
+        }
+        /* Buttons */
+        button {
+            padding: 12px 25px;
+            background: linear-gradient(to right, #f6ad55, #ed8936);
+            color: #fff;
+            border: none;
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 15px;
+            font-weight: 600;
+            transition: transform 0.1s ease, background 0.3s ease;
+        }
+        button:hover {
+            background: linear-gradient(to right, #ed8936, #dd6b20);
+            transform: scale(1.02);
+        }
+        .download-btn {
+            background: linear-gradient(to right, #38a169, #48bb78);
+        }
+        .download-btn:hover {
+            background: linear-gradient(to right, #2f855a, #38a169);
+        }
+        /* Toast Notifications */
+        .toast {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            padding: 15px 25px;
+            border-radius: 8px;
+            z-index: 102;
             display: none;
+            font-size: 15px;
+            font-weight: 500;
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+        }
+        .toast.error {
+            background-color: #f56565;
+            color: #fff;
         }
+        .toast.success {
+            background-color: #48bb78;
+            color: #fff;
+        }
+        .toast.visible {
+            display: block;
+        }
+        /* Responsive Design */
+        @media (max-width: 900px) {
+            .content-grid {
+                grid-template-columns: 1fr;
+            }
+            .section.full-width {
+                grid-column: span 1;
+            }
+            .kpi-dashboard {
+                grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+            }
+        }
+        @media (max-width: 700px) {
+            body {
+                padding: 0;
+            }
+            .header {
+                padding: 10px 15px;
+            }
+            .header-title {
+                font-size: 22px;
+                padding-bottom: 8px;
+            }
+            .header-actions {
+                flex-wrap: wrap;
+                gap: 10px;
+            }
+            .search-container {
+                flex: 100%;
+                max-width: 100%;
+            }
+            .avatar {
+                width: 38px;
+                height: 38px;
+                font-size: 18px;
+            }
+            .dropdown {
+                top: 48px;
+                min-width: 140px;
+            }
+            .action-bar {
+                top: 70px;
+                flex-direction: column;
+                gap: 10px;
+                padding: 10px 15px;
+            }
+            .container {
+                padding: 20px 15px;
+                margin: 15px 0;
+            }
+            h3 {
+                font-size: 20px;
+            }
+            .section {
+                padding: 20px;
+            }
+            .progress-circle {
+                width: 40px;
+                height: 40px;
+                font-size: 12px;
+            }
+            .progress-circle::before {
+                width: 32px;
+                height: 32px;
+            }
+            .checklist-item, .tip-card li, .reflection-journal textarea, pre {
+                font-size: 14px;
+            }
+            .kpi-value {
+                font-size: 20px;
+            }
+            .kpi-card h4 {
+                font-size: 14px;
+            }
+            button {
+                width: 100%;
+                padding: 10px;
+                font-size: 14px;
+            }
+            .toast {
+                top: 10px;
+                right: 10px;
+                padding: 10px 15px;
+                font-size: 14px;
+            }
         }
     </style>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
 </head>
+<body>
+    <div class="header">
+        <h2 class="header-title">AI Coach Dashboard</h2>
+        <div class="header-actions">
+            <div class="search-container">
+                <input type="text" class="search-bar" id="search-bar" placeholder="Search checklists, tips, reflections...">
+                <div class="mic-icon" onclick="simulateVoiceSearch()"></div>
+                <div class="search-results" id="search-results"></div>
+            </div>
+            <div class="avatar" id="avatar" onclick="toggleDropdown()">?</div>
+            <div class="dropdown" id="dropdown">
+                <a href="#" onclick="viewProfile()">View Profile</a>
+                <a href="#" onclick="logout()">Logout</a>
+            </div>
+        </div>
+    </div>
+    <div class="action-bar">
+        <button onclick="generateCoaching()">Generate Coaching Output</button>
+        <button class="download-btn" onclick="downloadPDF()" id="download-btn">Download PDF Summary</button>
+    </div>
+    <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>
+                    <div class="progress-circle" id="checklist-progress"><span>0%</span></div>
                 </div>
+                <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">
+                    <textarea id="reflection-input" placeholder="Log your reflections for today..."></textarea>
+                    <button onclick="submitReflection()">Submit Reflection</button>
                 </div>
+                <div class="reflection-history" id="reflection-history">
+                    <p>No reflections yet. Start logging your thoughts!</p>
                 </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>
+        </div>
+    </div>
+    <!-- Toast Notifications -->
+    <div id="error" class="toast error"></div>
+    <div id="success" class="toast success"></div>
     <script>
+        let supervisorData = null;
+        let coachingOutput = null;
+        let reflectionHistory = [];
+        let checklistProgress = 0;
+        let totalChecklistItems = 0;
+        // Toast Notification Function
+        function showToast(id, message) {
+            const toast = document.getElementById(id);
+            toast.textContent = message;
+            toast.classList.add('visible');
+            setTimeout(() => {
+                toast.classList.remove('visible');
+            }, 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();
+                } else {
+                    avatar.textContent = 'G';
+                }
+            } catch (error) {
+                avatar.textContent = 'U';
+            }
+        }
+        // Dropdown Toggle
+        function toggleDropdown() {
+            const dropdown = document.getElementById('dropdown');
+            dropdown.classList.toggle('active');
+        }
+        function viewProfile() {
+            showToast('error', 'Profile view not implemented yet.');
+        }
+        async function logout() {
+            try {
+                const response = await fetch('/logout', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' }
+                });
+                const result = await response.json();
+                if (result.status === 'success') {
+                    window.location.href = '/login';
+                } else {
+                    showToast('error', result.message);
+                }
+            } catch (error) {
+                showToast('error', 'Error during logout: ' + error.message);
+            }
+        }
+        // Search Functionality
+        function searchData() {
+            const query = document.getElementById('search-bar').value.toLowerCase().trim();
+            const resultsDiv = document.getElementById('search-results');
+            resultsDiv.innerHTML = '';
+            resultsDiv.classList.remove('active');
+            if (!query) return;
+            const searchableContent = [];
+            if (coachingOutput && coachingOutput.checklist) {
+                coachingOutput.checklist.forEach(item => searchableContent.push(`Checklist: ${item}`));
+            }
+            if (coachingOutput && coachingOutput.tips) {
+                coachingOutput.tips.forEach(tip => searchableContent.push(`Tip: ${tip}`));
+            }
+            if (supervisorData && supervisorData.reflection_log) {
+                searchableContent.push(`Reflection: ${supervisorData.reflection_log}`);
+            }
+            if (reflectionHistory.length > 0) {
+                reflectionHistory.forEach(ref => searchableContent.push(`Past Reflection: ${ref.text}`));
+            }
+            const results = searchableContent.filter(item => item.toLowerCase().includes(query));
+            if (results.length > 0) {
+                results.forEach(result => {
+                    const p = document.createElement('p');
+                    p.textContent = result;
+                    resultsDiv.appendChild(p);
+                });
+                resultsDiv.classList.add('active');
+            } else {
+                const p = document.createElement('p');
+                p.textContent = 'No results found.';
+                resultsDiv.appendChild(p);
+                resultsDiv.classList.add('active');
+            }
+        }
+        function simulateVoiceSearch() {
+            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;
+            const progressCircle = document.getElementById('checklist-progress');
+            progressCircle.style.setProperty('--progress', `${checklistProgress}%`);
+            progressCircle.querySelector('span').textContent = `${Math.round(checklistProgress)}%`;
+        }
+        async function fetchSupervisorData() {
+            try {
+                const response = await fetch('/get_supervisor_data');
+                const result = await response.json();
+                if (result.status === 'success') {
+                    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());
+                        totalChecklistItems = checklistItems.length;
+                        checklistDiv.innerHTML = '';
+                        checklistItems.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 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',
                     body: JSON.stringify(supervisorData)
                 });
                 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');
+            } 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);
+                });
+            } 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;
+            }
+            try {
+                const response = await fetch('/submit_reflection', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ reflection: reflectionInput })
+                });
+                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);
+            }
         }
+        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>
+            `;
+            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();
+        };
     </script>
 </body>
 </html>