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