Add Cancel Dispatch button to dispatch detail modal

- Red outlined button on the left side of actions row
- Confirmation prompt before cancelling
- Hidden when dispatch is already cancelled or verified
- Updates status to Cancelled and refreshes

src/pages/workorders/view/WorkOrderViewPage.css

@@ -840,6 +840,23 @@
   color: #dc3545;
 }
 
+.dispatchCancelBtn {
+  padding: 6px 14px;
+  background: #fff;
+  color: #dc3545;
+  border: 1px solid #dc3545;
+  border-radius: 4px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  margin-right: auto;
+}
+
+.dispatchCancelBtn:hover {
+  background: #dc3545;
+  color: #fff;
+}
+
 .dispatchVerifiedBanner {
   padding: 12px 20px;
   background: #d4edda;

src/pages/workorders/view/WorkOrderViewPage.js

@@ -337,7 +337,18 @@ function DispatchDetailModal({ dispatchId, onClose, onUpdated }) {
                     </div>
                   )}
                   <div className="dispatchDetailActions">
-                    {!dispatch.verifiedAt && <button className="btn btn-primary" onClick={() => setEditing(true)}>Edit</button>}
+                    {!dispatch.verifiedAt && dispatch.status !== "Cancelled" && (
+                      <button className="dispatchCancelBtn" onClick={async () => {
+                        if (!window.confirm("Are you sure you want to cancel this dispatch?")) return;
+                        try {
+                          await updateDispatch({ Id: dispatchId, Status: "Cancelled", NTEAmount: dispatch.nteAmount, ScheduledDate: dispatch.scheduledDate, CompletedDate: dispatch.completedDate, Description: dispatch.description });
+                          toast.success("Dispatch cancelled");
+                          loadDispatch();
+                          onUpdated();
+                        } catch { toast.error("Failed to cancel"); }
+                      }}>Cancel Dispatch</button>
+                    )}
+                    {!dispatch.verifiedAt && dispatch.status !== "Cancelled" && <button className="btn btn-primary" onClick={() => setEditing(true)}>Edit</button>}
                   </div>
                 </>
               )}