From 8fcc9305e30829ce7b755867385c9f5df6d3be13 Mon Sep 17 00:00:00 2001
From: dsutanto <dedy.sutanto@saltis.id>
Date: Sat, 1 Aug 2026 18:58:48 +0700
Subject: [PATCH] Live Camera with Recent Activity

---
 templates/dashboard.html | 51 ++++++++++++++++++++--------------------
 1 file changed, 26 insertions(+), 25 deletions(-)

diff --git a/templates/dashboard.html b/templates/dashboard.html
index 82b7a0c..653ac08 100644
--- a/templates/dashboard.html
+++ b/templates/dashboard.html
@@ -283,7 +283,7 @@
   /* Charts + Stats layout */
   .charts-row {
     display: grid;
-    grid-template-columns: 2fr 1fr;
+    grid-template-columns: 1fr 1fr;
     gap: 20px;
     margin-bottom: 24px;
   }
@@ -615,26 +615,34 @@
     <span id="best-date">--</span>
   </div>
 
-  <!-- Live Video Feed -->
-  <div class="video-panel" id="video-panel">
-    <div class="video-header">
-      <span class="section-title" style="margin-bottom:0;">&#9673; Live Camera Feed</span>
-      <div style="display:flex;align-items:center;gap:10px;">
-        <span class="video-status waiting" id="video-status">
-          <span style="width:6px;height:6px;border-radius:50%;background:var(--text-secondary);"></span>
-          waiting...
-        </span>
-        <button class="video-toggle" id="videoToggle" onclick="toggleVideo()">STREAM OFF</button>
+  <!-- Live Video + Recent Activity -->
+  <div class="charts-row">
+    <div class="video-panel" id="video-panel" style="margin-bottom:0;">
+      <div class="video-header">
+        <span class="section-title" style="margin-bottom:0;">&#9673; Live Camera Feed</span>
+        <div style="display:flex;align-items:center;gap:10px;">
+          <span class="video-status waiting" id="video-status">
+            <span style="width:6px;height:6px;border-radius:50%;background:var(--text-secondary);"></span>
+            waiting...
+          </span>
+          <button class="video-toggle" id="videoToggle" onclick="toggleVideo()">STREAM OFF</button>
+        </div>
+      </div>
+      <div class="video-container" id="video-container">
+        <div class="video-placeholder" id="video-placeholder">
+          <div class="vp-icon">&#9638;</div>
+          <div class="vp-text">Live Feed Unavailable</div>
+          <div class="vp-hint">Enable <code>LIVE_STREAM_ENABLED=true</code> in counter .env</div>
+        </div>
+        <img id="live-video-img" alt="Live Feed" style="display:none;" onerror="onVideoError()" onload="onVideoLoad()" />
+        <div class="video-error-overlay" id="video-error-overlay">Connection lost — retrying...</div>
       </div>
     </div>
-    <div class="video-container" id="video-container">
-      <div class="video-placeholder" id="video-placeholder">
-        <div class="vp-icon">&#9638;</div>
-        <div class="vp-text">Live Feed Unavailable</div>
-        <div class="vp-hint">Enable <code>LIVE_STREAM_ENABLED=true</code> in counter .env</div>
+    <div class="panel">
+      <span class="section-title">&#9673; Recent Activity</span>
+      <div style="margin-top:16px;" id="recent-batches">
+        <!-- Populated by JS -->
       </div>
-      <img id="live-video-img" alt="Live Feed" style="display:none;" onerror="onVideoError()" onload="onVideoLoad()" />
-      <div class="video-error-overlay" id="video-error-overlay">Connection lost — retrying...</div>
     </div>
   </div>
 
@@ -687,13 +695,6 @@
           <span class="qs-val" id="avg-per-batch">--</span>
         </div>
       </div>
-
-      <div class="recent-section">
-        <div class="rs-title">&#9673; Recent Activity</div>
-        <div id="recent-batches">
-          <!-- Populated by JS -->
-        </div>
-      </div>
     </div>
   </div>