updates on the active page section

src/pages/nearle/dispatch/ActiveSection.js

@@ -30,8 +30,8 @@ const ActiveSection = ({
     .filter(Boolean)
     .filter((o) => String(o.orderstatus || '').toLowerCase() === 'active')
     .sort((a, b) => {
-      const mA = calculateEstMeters(a.rider_id, a) ?? Infinity;
+      const mA = calculateEstMeters(a.rider_id || a.userid, a) ?? Infinity;
-      const mB = calculateEstMeters(b.rider_id, b) ?? Infinity;
+      const mB = calculateEstMeters(b.rider_id || b.userid, b) ?? Infinity;
       return mA - mB;
     });
 
@@ -96,7 +96,7 @@ const ActiveSection = ({
   }
 
   const renderActiveDeliveryCard = (o, i) => {
-    const rid = o.rider_id;
+    const rid = o.rider_id || o.userid;
     const rider = riders.find((r) => String(r.id) === String(rid));
     const color = getRiderColor(rid);
     const statusStyle = getStatusStyle(o.orderstatus);

src/pages/nearle/dispatch/Dispatch.js

@@ -1702,7 +1702,7 @@ const Dispatch = ({
     // is already gated to active-order riders) so the tiles can't disagree with
     // the list/map below.
     if (isAllActiveView) {
-      const activeOrders = allViewOrders.filter(isActiveDelivery);
+      const activeOrders = allViewOrders.filter((o) => String(o?.orderstatus || '').toLowerCase() === 'active');
       return {
         orders: activeOrders.length,
         riders: visibleRiders.length,
@@ -1725,7 +1725,7 @@ const Dispatch = ({
   // the header (RIDER DISPATCH title + Active Fleet badge + order/rider tiles)
   // is hidden so the "No active deliveries" empty state stands on its own.
   const activeDeliveryCount = useMemo(
-    () => (isAllActiveView ? allViewOrders.filter(isActiveDelivery).length : 0),
+    () => (isAllActiveView ? allViewOrders.filter((o) => String(o?.orderstatus || '').toLowerCase() === 'active').length : 0),
     [isAllActiveView, allViewOrders]
   );
 
@@ -2462,7 +2462,7 @@ const Dispatch = ({
     html: `<div class="kitchen-mark${focused ? ' is-focused' : ''}">${(name || 'K').charAt(0).toUpperCase()}</div>`
   });
 
-  const getRiderColor = (rid) => riders.find(r => r.id === rid)?.color || '#475569';
+  const getRiderColor = (rid) => riders.find(r => String(r.id) === String(rid))?.color || '#475569';
 
   const calculateEstMeters = (riderId, order) => {
     if (!riderId || !order || !hasValidDrop(order)) return null;
@@ -3872,6 +3872,7 @@ const Dispatch = ({
               so the empty state isn't topped by a "0 orders / 0 riders" header. */}
               {!focusedRider && !(isAllActiveView && activeDeliveryCount === 0) && (
                 <div className="sb-header">
+                  {!isAllActiveView && (
                     <div className="sb-header-top">
                       <div className="sb-header-title">
                         <span className="sb-title-bar" aria-hidden="true" />
@@ -3882,6 +3883,7 @@ const Dispatch = ({
                         {activeStats.label}
                       </span>
                     </div>
+                  )}
 
                   <div className="sb-header-tiles">
                     <div className="sb-tile sb-tile-orders">
@@ -4449,7 +4451,7 @@ const Dispatch = ({
                   {/* Hide the panel title in the Active view when there are no
                       in-progress deliveries, so the empty state isn't topped by
                       an "Active rider dispatch" heading. */}
-                  {!(isAllActiveView && activeDeliveryCount === 0) && (
+                  {!isAllActiveView && (
                     <div className="ph">{
                       viewMode === 'zones' ? 'Zone dispatch' :
                         viewMode === 'kitchens' ? 'Kitchen dispatch' :