updates on the dispatch page under active section fixes

src/pages/nearle/dispatch/ActiveSection.js

@@ -21,12 +21,12 @@ const ActiveSection = ({
   calculateEstMeters,
   getRiderColor,
   formatMeters,
-  isLoading,
+  isLoading
-  onMapZoom
 }) => {
   // Sort by live distance ascending (closest drop-off first; null/unknown last)
   const activeDeliveries = visibleRiders
-    .flatMap((r) => (r.orders || []).filter((o) => String(o.orderstatus || '').toLowerCase() === 'active'))
+    .map((r) => getActiveOrder(r.orders))
+    .filter(Boolean)
     .sort((a, b) => {
       const mA = calculateEstMeters(a.rider_id || a.userid, a) ?? Infinity;
       const mB = calculateEstMeters(b.rider_id || b.userid, b) ?? Infinity;
@@ -53,14 +53,17 @@ const ActiveSection = ({
       Object.entries(currentMap).forEach(([oid, cur]) => {
         const old = prev[oid];
         if (!old) {
+          // Brand-new order that is already active → rider has taken a new order
           if (cur.status === 'active') {
             OpenToast(`🛵 ${cur.riderName} is now delivering to ${cur.customer}`, 'success', 3000);
           }
           return;
         }
+        // Rider transitioned into active → started heading to customer
         if (old.status !== 'active' && cur.status === 'active') {
           OpenToast(`🛵 ${cur.riderName} is now delivering to ${cur.customer}`, 'success', 3000);
         }
+        // Rider delivered → reached customer location
         if (old.status === 'active' && cur.status === 'delivered') {
           OpenToast(`📍 ${cur.riderName} has reached ${cur.customer}'s location`, 'info', 3000);
         }
@@ -121,7 +124,8 @@ const ActiveSection = ({
         className={`adcard${isActive ? ' is-active' : ''}`}
         style={{ '--ad-accent': color }}
         onClick={() => {
-          if (canFocus && onMapZoom) onMapZoom(lat, lon);
+          if (rider) handleRiderFocus(rider);
+          if (canFocus) setFocusedStop({ orderid: o.orderid, lat, lon });
         }}
       >
         <div className="adcard-top">

src/pages/nearle/dispatch/Dispatch.js

@@ -2258,21 +2258,8 @@ const Dispatch = ({
     btn.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
   }, [selectedBatch]);
 
-  // When the user clicks a step in the focused-rider sidebar (sets focusedStop),
+  // Sidebar order-card clicks (setFocusedStop) only zoom the map to the stop —
-  // surface that order in the centered popup overlay so the details show up
+  // the popup opens only when the user clicks the numbered marker on the map.
-  // without a second click. focusedStop is a slim { orderid, lat, lon }, so
-  // hydrate the full order out of allOrders before passing it to the popup
-  // (renderOrderPopupContent needs the rich timeline + status fields).
-  // Wait ~350ms so MapController has a chance to recenter first (matches
-  // the prior delay before openPopup was called).
-  useEffect(() => {
-    if (!focusedStop) return;
-    const t = setTimeout(() => {
-      const fullOrder = allOrders?.find?.((o) => String(o.orderid) === String(focusedStop.orderid));
-      if (fullOrder) setCenterPopupOrder(fullOrder);
-    }, 350);
-    return () => clearTimeout(t);
-  }, [focusedStop, allOrders]);
 
   const startAnimation = () => {
     if (isAnimating) {
@@ -4586,7 +4573,6 @@ const Dispatch = ({
                         getRiderColor={getRiderColor}
                         formatMeters={formatMeters}
                         isLoading={shouldFetchLive && liveIsFetching && visibleRiders.length === 0}
-                        onMapZoom={(lat, lon) => setActiveFlyTo({ lat, lon, t: Date.now() })}
                       />
                     ) : (
                       visibleRiders.map(renderRiderCard)