restored failed state x2

frontend/vehicles.html

@@ -528,7 +528,7 @@
     <!-- Toast Container -->
     <div id="toast-container"></div>
 
-    <main class="flex-1 flex flex-col min-h-0 p-4 gap-4 overflow-hidden relative">
+    <main class="flex-1 flex flex-col min-h-0 p-4 gap-4 overflow-hidden relative" style="height: 100vh;">
 
         <!-- TAB: About -->
         <div id="tab-about" class="hidden flex-1 min-h-0 overflow-y-auto max-h-full">
@@ -624,7 +624,7 @@
                                 </li>
                                 <li class="flex items-start gap-3"><i class="fa-solid fa-circle text-[5px] mt-1.5"
                                         style="color:#8b5e3c"></i>
-                                    <span>Institutional deployment with dedicated SLAs and onboarding</span>
+                                    <span>Enterprise deployment with dedicated SLAs and onboarding</span>
                                 </li>
                             </ul>
                         </div>
@@ -760,10 +760,39 @@
                 </div>
                 <div class="flex-1 w-full relative min-h-[220px]">
                     <canvas id="flowChart"></canvas>
+                    </div>
+            </div>
+
+            <!-- Additional KPI Rows (Speed & Insights) -->
+            <div id="stats-insights-row" class="col-span-12 grid grid-cols-12 gap-4">
+                <!-- Speed Distribution -->
+                <div class="col-span-12 xl:col-span-6 bg-[#0a0a0a] rounded-xl border border-[#2a2a2a] shadow-sm flex flex-col overflow-hidden">
+                    <div class="px-6 py-4 border-b border-[#2a2a2a] bg-[#0c0c0c]">
+                        <h3 class="font-bold text-white text-sm flex items-center">Speed Distribution
+                            <span class="info-wrap"><span class="info-btn"><i class="fa-solid fa-info"></i></span>
+                                <span class="info-tip">Relative speed categories based on pixel displacement. Slow/Normal/Fast are percentile-based within this video.</span></span>
+                        </h3>
+                    </div>
+                    <div class="p-6" id="speed-stats-card">
+                        <!-- Populated by renderInsights -->
+                    </div>
                 </div>
+
+                <!-- Congestion Insights -->
+                <div class="col-span-12 xl:col-span-6 bg-[#0a0a0a] rounded-xl border border-[#2a2a2a] shadow-sm flex flex-col overflow-hidden">
+                    <div class="px-6 py-4 border-b border-[#2a2a2a] bg-[#0c0c0c]">
+                        <h3 class="font-bold text-white text-sm flex items-center">Automated Peak Analysis
+                            <span class="info-wrap"><span class="info-btn"><i class="fa-solid fa-info"></i></span>
+                                <span class="info-tip">AI-driven detection of traffic surges and peak periods.</span></span>
+                        </h3>
+                    </div>
+                    <div class="p-6 space-y-3" id="pcu-stats-card">
+                        <!-- Populated by renderInsights -->
+                    </div>
                 </div>
             </div>
         </div>
+    </div>
 
         <!-- TAB: Run -->
         <div id="tab-run-details" class="hidden flex-1 min-h-0 overflow-y-auto max-h-full">
@@ -909,7 +938,7 @@
                                 <span class="info-tip">Relative speed categories based on pixel displacement between frames. Slow/Normal/Fast are percentile-based within this video — not km/h.</span></span>
                         </h3>
                     </div>
-                    <div class="flex-1 flex items-center justify-center" id="speed-stats-card">
+                    <div class="flex-1 flex items-center justify-center" id="speed-reports-card">
                         <div class="text-center text-slate-600 text-xs"><i class="fa-solid fa-gauge-high text-2xl mb-2"></i><br>Available after processing</div>
                     </div>
                 </div>
@@ -922,7 +951,7 @@
                                 <span class="info-tip">Passenger Car Units (IRC:106-1990). Converts heterogeneous Indian traffic into standardized units for road capacity analysis.</span></span>
                         </h3>
                     </div>
-                    <div class="flex-1 flex items-center justify-center" id="pcu-stats-card">
+                    <div class="flex-1 flex items-center justify-center" id="pcu-reports-card">
                         <div class="text-center text-slate-600 text-xs"><i class="fa-solid fa-car text-2xl mb-2"></i><br>Available after processing</div>
                     </div>
                 </div>
@@ -1145,7 +1174,7 @@
         <!-- TAB: Feedback -->
         <div id="tab-feedback" class="hidden flex-1 min-h-0 overflow-y-auto max-h-full">
             <!-- Full Header Area -->
-            <div class="max-w-6xl mx-auto space-y-6">
+            <div class="max-w-none px-6 space-y-6 w-full">
                 <div class="text-center space-y-3 mb-6">
                     <h2 class="text-2xl font-bold tracking-tight" style="color:#f0ece6">Share Your Feedback</h2>
                     <p class="text-xs" style="color:#777">We are constantly refining UrbanFlow. Your technical insights directly drive our roadmap.</p>
@@ -1497,35 +1526,37 @@
             const panel = document.getElementById('insights-panel');
             panel.classList.remove('hidden');
 
-            // Speed distribution bars
             const dist = d.speed_distribution || {};
-            const bars = document.getElementById('speed-bars');
+            const pcu = d.pcu || {};
             const colors = { slow: '#ef4444', normal: '#eab308', fast: '#22c55e' };
             const labels = { slow: 'Slow', normal: 'Normal', fast: 'Fast' };
-            bars.innerHTML = ['slow', 'normal', 'fast'].map(cat => {
-                const pct = dist[cat] || 0;
-                const h = Math.max(8, pct * 1.2);
-                return `<div class="flex flex-col items-center gap-1">
-                    <span class="text-[10px] font-bold" style="color:${colors[cat]}">${pct}%</span>
-                    <div style="width:36px;height:${h}px;background:${colors[cat]};border-radius:6px;transition:height 0.5s"></div>
-                    <span class="text-[9px] font-bold text-slate-500 uppercase">${labels[cat]}</span>
-                </div>`;
-            }).join('');
 
-            // Congestion insights
+            // 1. Update Run Tab Insights
+            const bars = document.getElementById('speed-bars');
+            if (bars) {
+                bars.innerHTML = ['slow', 'normal', 'fast'].map(cat => {
+                    const pct = dist[cat] || 0;
+                    const h = Math.max(8, pct * 1.2);
+                    return `<div class="flex flex-col items-center gap-1">
+                        <span class="text-[10px] font-bold" style="color:${colors[cat]}">${pct}%</span>
+                        <div style="width:36px;height:${h}px;background:${colors[cat]};border-radius:6px;transition:height 0.5s"></div>
+                        <span class="text-[9px] font-bold text-slate-500 uppercase">${labels[cat]}</span>
+                    </div>`;
+                }).join('');
+            }
             const ci = document.getElementById('congestion-insights');
-            const pcu = d.pcu || {};
-            ci.innerHTML = [
-                infoRow('Total PCU', pcu.total_pcu || 0, 'Passenger Car Units (IRC:106-1990). Normalizes mixed traffic.'),
-                infoRow('PCU In / Out', `${pcu.pcu_in || 0} / ${pcu.pcu_out || 0}`, 'Directional PCU split.'),
-                infoRow('Speed Profile', `${dist.slow || 0}% slow · ${dist.normal || 0}% normal · ${dist.fast || 0}% fast`, 'Relative speed categories within this video.'),
-            ].join('');
-
-            // ---- Also populate Stats tab cards ----
-            // Speed card in Stats
-            const speedCard = document.getElementById('speed-stats-card');
-            if (speedCard) {
-                speedCard.innerHTML = `<div class="flex gap-5 items-end justify-center w-full">
+            if (ci) {
+                ci.innerHTML = [
+                    infoRow('Total PCU', pcu.total_pcu || 0, 'Passenger Car Units (IRC:106-1990). Normalizes mixed traffic.'),
+                    infoRow('PCU In / Out', `${pcu.pcu_in || 0} / ${pcu.pcu_out || 0}`, 'Directional PCU split.'),
+                    infoRow('Speed Profile', `${dist.slow || 0}% slow · ${dist.normal || 0}% normal · ${dist.fast || 0}% fast`, 'Relative speed categories within this video.'),
+                ].join('');
+            }
+
+            // 2. Update Stats Tab Cards
+            const speedStats = document.getElementById('speed-stats-card');
+            if (speedStats) {
+                speedStats.innerHTML = `<div class="flex gap-5 items-end justify-center w-full">
                     ${['slow', 'normal', 'fast'].map(cat => {
                         const pct = dist[cat] || 0;
                         const h = Math.max(12, pct * 1.0);
@@ -1537,27 +1568,44 @@
                     }).join('')}
                 </div>`;
             }
-
-            // PCU card in Stats
-            const pcuCard = document.getElementById('pcu-stats-card');
-            if (pcuCard) {
-                pcuCard.innerHTML = `<div class="space-y-3 w-full">
+            const pcuStats = document.getElementById('pcu-stats-card');
+            if (pcuStats) {
+                pcuStats.innerHTML = `<div class="space-y-3 w-full">
                     <div class="flex justify-between items-center">
                         <span class="text-xs font-medium text-slate-500">Total PCU</span>
-                        <span class="text-2xl font-black" style="color:#8b5e3c">${pcu.total_pcu || 0}</span>
+                        <span class="text-2xl font-black" style="color:#c89a6c">${pcu.total_pcu || 0}</span>
                     </div>
                     <div class="flex gap-3">
-                        <div class="flex-1 bg-green-50 rounded-lg p-2.5 text-center border border-green-100">
-                            <div class="text-lg font-bold text-green-700">${pcu.pcu_in || 0}</div>
-                            <div class="text-[9px] font-bold text-green-500 uppercase">PCU In</div>
+                        <div class="flex-1 bg-[#111] rounded-lg p-2.5 text-center border border-[#222]">
+                            <div class="text-lg font-bold" style="color:#22c55e">${pcu.pcu_in || 0}</div>
+                            <div class="text-[9px] font-bold text-slate-500 uppercase">PCU In</div>
                         </div>
-                        <div class="flex-1 bg-red-50 rounded-lg p-2.5 text-center border border-red-100">
-                            <div class="text-lg font-bold text-red-700">${pcu.pcu_out || 0}</div>
-                            <div class="text-[9px] font-bold text-red-500 uppercase">PCU Out</div>
+                        <div class="flex-1 bg-[#111] rounded-lg p-2.5 text-center border border-[#222]">
+                            <div class="text-lg font-bold" style="color:#ef4444">${pcu.pcu_out || 0}</div>
+                            <div class="text-[9px] font-bold text-slate-500 uppercase">PCU Out</div>
                         </div>
                     </div>
                 </div>`;
             }
+
+            // 3. Update Reports Tab Insights
+            const speedReports = document.getElementById('speed-reports-card');
+            if (speedReports) {
+                speedReports.innerHTML = `<div class="flex gap-3 items-end justify-center w-full h-16">
+                    ${['slow', 'normal', 'fast'].map(cat => {
+                        const pct = dist[cat] || 0;
+                        const h = Math.max(6, pct * 0.6);
+                        return `<div style="width:24px;height:${h}px;background:${colors[cat]};border-radius:4px;"></div>`;
+                    }).join('')}
+                </div>`;
+            }
+            const pcuReports = document.getElementById('pcu-reports-card');
+            if (pcuReports) {
+                pcuReports.innerHTML = `<div class="text-center">
+                    <div class="text-3xl font-black" style="color:var(--cocoa-l)">${pcu.total_pcu || 0}</div>
+                    <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mt-1">Passenger Car Units</div>
+                </div>`;
+            }
         }
 
         // =========== Run Details helpers ===========