From 7bb5133523645cc6a99b75d1ed8dbdb7be944f1f Mon Sep 17 00:00:00 2001
From: Adam Moussa <166072409+amoussa1229@users.noreply.github.com>
Date: Fri, 17 Apr 2026 12:16:38 -0400
Subject: [PATCH] Redesign vendor item layout in dispatch modal

- Checkbox on the left, vendor info in the middle, distance badge on the right
- Distance shown as large blue number with "miles" label in a rounded badge
- Vendor address on its own line below trades
---
 .../workorders/view/WorkOrderViewPage.css     | 36 +++++++++++++++----
 .../workorders/view/WorkOrderViewPage.js      | 11 +++---
 2 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/src/pages/workorders/view/WorkOrderViewPage.css b/src/pages/workorders/view/WorkOrderViewPage.css
index 07fe6e96..d41161c5 100644
--- a/src/pages/workorders/view/WorkOrderViewPage.css
+++ b/src/pages/workorders/view/WorkOrderViewPage.css
@@ -507,7 +507,7 @@
   display: flex;
   align-items: center;
   gap: 10px;
-  padding: 8px 12px;
+  padding: 10px 12px;
   cursor: pointer;
   border-bottom: 1px solid #f0f0f0;
 }
@@ -524,11 +524,18 @@
   background: #e6f0ff;
 }
 
+.woDispatchVendorItem input[type="checkbox"] {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+}
+
 .woDispatchVendorInfo {
   display: flex;
   flex-direction: column;
   gap: 1px;
   min-width: 0;
+  flex: 1;
 }
 
 .woDispatchVendorName {
@@ -541,16 +548,33 @@
   color: #007bff;
 }
 
-.woDispatchVendorMeta {
-  display: flex;
-  gap: 8px;
+.woDispatchVendorAddr {
   font-size: 11px;
   color: #999;
 }
 
-.woDispatchVendorDist {
-  font-weight: 600;
+.woDispatchVendorDistBadge {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-shrink: 0;
+  min-width: 60px;
+  padding: 4px 8px;
+  background: #f0f7ff;
+  border-radius: 6px;
+}
+
+.woDispatchDistNum {
+  font-size: 16px;
+  font-weight: 700;
   color: #007bff;
+  line-height: 1.1;
+}
+
+.woDispatchDistLabel {
+  font-size: 10px;
+  color: #999;
+  text-transform: uppercase;
 }
 
 .woDispatchLoading {
diff --git a/src/pages/workorders/view/WorkOrderViewPage.js b/src/pages/workorders/view/WorkOrderViewPage.js
index 01a30e13..6dddaceb 100644
--- a/src/pages/workorders/view/WorkOrderViewPage.js
+++ b/src/pages/workorders/view/WorkOrderViewPage.js
@@ -231,11 +231,14 @@ function DispatchModal({ wo, onClose, onDispatched }) {
                     <div className="woDispatchVendorInfo">
                       <span className="woDispatchVendorName">{v.companyName}</span>
                       {v.tradeSpecialties && <span className="woDispatchVendorTrades">{v.tradeSpecialties}</span>}
-                      <span className="woDispatchVendorMeta">
-                        {v.address && <span>{v.address}</span>}
-                        {v.distanceMiles != null && <span className="woDispatchVendorDist">{v.distanceMiles} mi</span>}
-                      </span>
+                      {v.address && <span className="woDispatchVendorAddr">{v.address}</span>}
                     </div>
+                    {v.distanceMiles != null && (
+                      <div className="woDispatchVendorDistBadge">
+                        <span className="woDispatchDistNum">{v.distanceMiles}</span>
+                        <span className="woDispatchDistLabel">miles</span>
+                      </div>
+                    )}
                   </label>
                 ))}
               </div>