From 8d54a317cc892e0a54a17d1d13e9e804f05f1d1f Mon Sep 17 00:00:00 2001
From: dharaneesh-r <dharaneesh@tenext.in>
Date: Fri, 28 Aug 2026 16:51:17 +0530
Subject: [PATCH] updates on the build regarding the dispatch page design fix

---
 src/pages/doormile/dispatch/Dispatch.css | 51 ++++++++++++++++++++----
 src/pages/doormile/dispatch/Dispatch.jsx | 32 +++++++++++++++
 2 files changed, 76 insertions(+), 7 deletions(-)

diff --git a/src/pages/doormile/dispatch/Dispatch.css b/src/pages/doormile/dispatch/Dispatch.css
index d0c318e..2b65d5b 100644
--- a/src/pages/doormile/dispatch/Dispatch.css
+++ b/src/pages/doormile/dispatch/Dispatch.css
@@ -5530,39 +5530,76 @@
 }
 
 /* Kitchen Popup */
+.dispatch-container .kitchen-popup .leaflet-popup-content-wrapper {
+  padding: 0;
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: 0 12px 28px -4px rgba(15, 23, 42, 0.22), 0 4px 10px -2px rgba(15, 23, 42, 0.08);
+  border: 1px solid #e2e8f0;
+}
+
+.dispatch-container .kitchen-popup .leaflet-popup-content {
+  margin: 0;
+  line-height: normal;
+}
+
+.dispatch-container .kitchen-popup .leaflet-popup-close-button {
+  top: 7px;
+  right: 7px;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border-radius: 6px;
+  color: #64748b;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.04);
+  transition: all 0.15s ease;
+  z-index: 10;
+}
+
+.dispatch-container .kitchen-popup .leaflet-popup-close-button:hover {
+  background: rgba(0, 0, 0, 0.09);
+  color: #0f172a;
+}
+
 .dispatch-container .kitchen-popup .kp-header {
   background: #f8fafc;
   color: #64748b;
   font-size: 10px;
   font-weight: 800;
   letter-spacing: 0.1em;
-  padding: 8px 14px;
+  padding: 9px 34px 9px 14px;
   border-bottom: 1px solid #e2e8f0;
-  border-radius: 5px 5px 0 0;
 }
 
 .dispatch-container .kitchen-popup .kp-name {
   padding: 14px 14px 4px;
-  font-size: 16px;
+  font-size: 17px;
   font-weight: 800;
-  color: var(--kitchen);
+  color: #ea580c;
+  letter-spacing: -0.01em;
 }
 
 .dispatch-container .kitchen-popup .kp-stat {
   display: flex;
+  align-items: center;
   justify-content: space-between;
-  padding: 8px 14px 16px;
+  padding: 8px 14px 14px;
 }
 
 .dispatch-container .kitchen-popup .kp-stat-lbl {
   font-size: 12px;
+  font-weight: 600;
   color: #64748b;
 }
 
 .dispatch-container .kitchen-popup .kp-stat-val {
-  font-size: 16px;
+  font-size: 18px;
   font-weight: 800;
-  color: #1e293b;
+  color: #0f172a;
 }
 
 /* Empty slot state — shown in the sidebar list when no orders match the selected batch */
diff --git a/src/pages/doormile/dispatch/Dispatch.jsx b/src/pages/doormile/dispatch/Dispatch.jsx
index 876c7f1..be66125 100644
--- a/src/pages/doormile/dispatch/Dispatch.jsx
+++ b/src/pages/doormile/dispatch/Dispatch.jsx
@@ -1477,6 +1477,38 @@ const Dispatch = ({
     return out;
   }, [livePagesData, liveIsFetching, liveHasNextPage]);
 
+  // Global delivery status transition tracking: notifies operator when an order is completed/delivered
+  const prevLiveOrderStatusesRef = useRef(null);
+  useEffect(() => {
+    if (!liveRows || liveRows.length === 0) return;
+    const currentStatusMap = new Map();
+    liveRows.forEach((r) => {
+      if (r.orderid != null) {
+        currentStatusMap.set(String(r.orderid), {
+          status: String(r.orderstatus || '').toLowerCase(),
+          rider: r.ridername || r.rider_name || r.username || 'Rider',
+          customer: r.deliverycustomer || r.customername || `Order #${r.orderid}`
+        });
+      }
+    });
+
+    const prev = prevLiveOrderStatusesRef.current;
+    if (prev !== null) {
+      currentStatusMap.forEach((cur, orderId) => {
+        const old = prev.get(orderId);
+        if (old) {
+          const wasActive = ['active', 'out_for_delivery', 'picked_up', 'in_transit', 'assigned'].includes(old.status);
+          const isNowDelivered = ['delivered', 'complete', 'completed'].includes(cur.status);
+          if (wasActive && isNowDelivered) {
+            OpenToast(`✅ ${cur.rider} delivered to ${cur.customer}`, 'success', 3500);
+          }
+        }
+      });
+    }
+
+    prevLiveOrderStatusesRef.current = currentStatusMap;
+  }, [liveRows]);
+
   // Distinct riders across the WHOLE day's rows — NOT slot-filtered. Used by
   // the Rider Info view so the operator can pick any rider regardless of
   // whether they had orders in the currently selected slot.