updates on the active section regarding the notifications

src/pages/nearle/dispatch/ActiveSection.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef, useEffect } from 'react';
 import {
   MdTwoWheeler,
   MdLocationOn,
@@ -9,6 +9,7 @@ import {
 } from 'react-icons/md';
 import dayjs from 'dayjs';
 import { getStatusStyle, getActiveOrder } from './dispatchShared';
+import { OpenToast } from 'components/third-party/OpenToast';
 
 const ActiveSection = ({
   visibleRiders,
@@ -20,14 +21,55 @@ const ActiveSection = ({
   getRiderColor,
   formatMeters
 }) => {
+  // Sort by live distance ascending (closest drop-off first; null/unknown last)
   const activeDeliveries = visibleRiders
     .map((r) => getActiveOrder(r.orders))
     .filter(Boolean)
-    .sort((a, b) =>
-      String(a.rider_name || a.ridername || '').localeCompare(
-        String(b.rider_name || b.ridername || '')
-      )
-    );
+    .sort((a, b) => {
+      const mA = calculateEstMeters(a.rider_id, a) ?? Infinity;
+      const mB = calculateEstMeters(b.rider_id, b) ?? Infinity;
+      return mA - mB;
+    });
+
+  // Toast notifications: detect status transitions across renders
+  const prevStatusMapRef = useRef(null);
+
+  useEffect(() => {
+    const currentMap = {};
+    visibleRiders.forEach((r) => {
+      (r.orders || []).forEach((o) => {
+        currentMap[String(o.orderid)] = {
+          status: String(o.orderstatus || '').toLowerCase(),
+          riderName: o.rider_name || o.ridername || 'Rider',
+          customer: o.deliverycustomer || o.customername || `Order #${o.orderid}`
+        };
+      });
+    });
+
+    const prev = prevStatusMapRef.current;
+    if (prev !== null) {
+      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);
+        }
+      });
+    }
+
+    prevStatusMapRef.current = currentMap;
+  }, [visibleRiders]);
 
   if (activeDeliveries.length === 0) {
     return (
@@ -78,11 +120,11 @@ const ActiveSection = ({
         <div className="adcard-top">
           <div className="adcard-avatar" style={{ background: color }}>{initials}</div>
           <div className="adcard-titles">
-            <div className="adcard-customer" title={customer}>{customer}</div>
             <div className="adcard-rider" title={riderName}>
               <MdTwoWheeler style={{ fontSize: 13, flexShrink: 0 }} />
               <span className="adcard-tx">{riderName}</span>
             </div>
+            <div className="adcard-customer" title={customer}>{customer}</div>
           </div>
           <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: '4px' }}>
             <span

src/pages/nearle/dispatch/Dispatch.css

@@ -10810,9 +10810,9 @@
 }
 
 .dispatch-container .adcard-customer {
-  font-size: 14.5px;
-  font-weight: 700;
-  color: var(--text);
+  font-size: 12px;
+  font-weight: 500;
+  color: #94a3b8;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -10822,9 +10822,9 @@
   display: flex;
   align-items: center;
   gap: 4px;
-  color: var(--text-muted);
-  font-size: 12px;
-  font-weight: 500;
+  color: var(--text);
+  font-size: 14.5px;
+  font-weight: 700;
 }
 
 .dispatch-container .adcard-status {