updates on the active page section regarding the kms and the eta

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-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>

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