From 857b268991b6498704867ed1fa2fc4c5819c02db Mon Sep 17 00:00:00 2001
From: dharaneesh-r <dharaneesh@tenext.in>
Date: Thu, 25 Jun 2026 12:35:25 +0530
Subject: [PATCH] updates on the active page section regarding the kms and the
 eta

---
 src/pages/nearle/dispatch/ActiveSection.js | 23 +++++++++++++---------
 src/pages/nearle/dispatch/Dispatch.css     |  8 ++++++++
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/pages/nearle/dispatch/ActiveSection.js b/src/pages/nearle/dispatch/ActiveSection.js
index aab6c32..8d03dc5 100644
--- a/src/pages/nearle/dispatch/ActiveSection.js
+++ b/src/pages/nearle/dispatch/ActiveSection.js
@@ -3,8 +3,8 @@ import {
   MdTwoWheeler,
   MdLocationOn,
   MdRestaurant,
-  MdStraighten,
   MdMyLocation,
+  MdAccessTime,
   MdInventory2
 } from 'react-icons/md';
 import dayjs from 'dayjs';
@@ -117,15 +117,20 @@ const ActiveSection = ({
             <span />
           )}
           <span className="adcard-metrics">
-            <span className="adcard-m adcard-m-km" title="Trip distance">
-              <span className="adcard-ic"><MdStraighten /></span>
-              {parseFloat(o.actualkms || o.kms || 0).toFixed(1)} km
-            </span>
             {estMeters !== null && (
-              <span className="adcard-m adcard-m-eta" title="Estimated distance to drop location">
-                <span className="adcard-ic"><MdMyLocation /></span>
-                {formatMeters(estMeters)}
-              </span>
+              <>
+                <span className="adcard-m adcard-m-eta" title="Distance to drop">
+                  <span className="adcard-ic"><MdMyLocation /></span>
+                  {formatMeters(estMeters)}
+                </span>
+                <span className="adcard-m adcard-m-time" title="Estimated time to drop">
+                  <span className="adcard-ic"><MdAccessTime /></span>
+                  {(() => {
+                    const etaMin = estMeters / 1000 / 20 * 60;
+                    return etaMin < 1 ? '< 1 min' : `${Math.ceil(etaMin)} min`;
+                  })()}
+                </span>
+              </>
             )}
           </span>
         </div>
diff --git a/src/pages/nearle/dispatch/Dispatch.css b/src/pages/nearle/dispatch/Dispatch.css
index f483884..edaf928 100644
--- a/src/pages/nearle/dispatch/Dispatch.css
+++ b/src/pages/nearle/dispatch/Dispatch.css
@@ -10909,6 +10909,14 @@
   color: var(--text-muted);
 }
 
+.dispatch-container .adcard-m-eta {
+  color: var(--ad-accent, var(--accent));
+}
+
+.dispatch-container .adcard-m-time {
+  color: #10b981;
+}
+
 /* =========================================================================
    Mobile / app-like layout (≤ 768px). Purely a LAYOUT pass — no behaviour
    changes. On phones the side-by-side map + sidebar collapses into a single