@fleetbase/fleetops-engine 0.6.49 → 0.6.50

package/addon/components/customer/create-order-form.hbs

@@ -335,7 +335,7 @@
                                             {{#each serviceQuote.items as |item|}}
                                                 <tr>
                                                     <td>
-                                                        <span class="font-semibold">{{smart-humanize item.details}}</span>
+                                                        <span class="font-semibold">{{item.details}}</span>
                                                     </td>
                                                     <td>
                                                         <span>{{format-currency item.amount serviceQuote.currency}}</span>
@@ -449,4 +449,4 @@
 
         <Spacer @height="300px" />
     </Overlay::Body>
-</Overlay>
+</Overlay>

package/addon/components/customer/form.hbs

@@ -6,7 +6,7 @@
                     @modelName="user"
                     @selectedModel={{@resource.user}}
                     @placeholder={{t "customer.fields.select-user"}}
-                    @query={{hash doesnt_have_contact=true}}
+                    @query={{hash doesnt_have_contact=true is_customer=true}}
                     @triggerClass="form-select form-input"
                     @infiniteScroll={{false}}
                     @renderInPlace={{true}}
@@ -141,4 +141,4 @@
     <RegistryYield @registry="fleet-ops:component:customer:form" as |RegistryComponent|>
         <RegistryComponent @resource={{@resource}} @controller={{@controller}} @permission={{get-write-permission @resource}} />
     </RegistryYield>
-</div>
+</div>

package/addon/components/customer/order-form.hbs

@@ -351,7 +351,7 @@
                                             {{#each serviceQuote.items as |item|}}
                                                 <tr>
                                                     <td>
-                                                        <span class="font-semibold">{{smart-humanize item.details}}</span>
+                                                        <span class="font-semibold">{{item.details}}</span>
                                                     </td>
                                                     <td>
                                                         <span>{{format-currency item.amount serviceQuote.currency}}</span>
@@ -473,4 +473,4 @@
 
         <Spacer @height="300px" />
     </Overlay::Body>
-</Overlay>
+</Overlay>

package/addon/components/customer/orders.hbs

@@ -274,7 +274,7 @@
                                                                     {{#each order.purchase_rate.service_quote.items as |item|}}
                                                                         <tr>
                                                                             <td>
-                                                                                <span class="font-semibold">{{smart-humanize item.details}}</span>
+                                                                                <span class="font-semibold">{{item.details}}</span>
                                                                             </td>
                                                                             <td>
                                                                                 <div class="flex flex-row items-center justify-end">{{format-currency
@@ -320,4 +320,4 @@
         </div>
         <div id="customer-portal-content-wormhole"></div>
     {{/let}}
-</div>
+</div>

package/addon/components/display-place.hbs

@@ -31,7 +31,7 @@
                             <div class="next-dd-menu-seperator"></div>
                             {{#each-in @waypointActions as |actionId action|}}
                                 <div class="px-1">
-                                    <a href="javascript:;" class="next-dd-item" disabled={{cannot "fleet-ops view order"}} {{on "click" (dropdown-fn dd action.fn this.place)}}>
+                                    <a href="javascript:;" class="next-dd-item" disabled={{cannot "fleet-ops view order"}} {{on "click" (dropdown-fn dd action.fn (or @waypointActionContext this.place))}}>
                                         {{action.label}}
                                     </a>
                                 </div>
@@ -65,4 +65,4 @@
             {{/if}}
         </address>
     {{/if}}
-</div>
+</div>

package/addon/components/map/google-live-map.js

@@ -276,15 +276,19 @@ export default class MapGoogleLiveMapComponent extends Component {
     }
 
     _showServiceAreaContextMenu(serviceArea, event) {
-        const items = this.mapManager.getComposedContextMenuItems(`service-area:${serviceArea.public_id}`);
+        const items = this.mapManager.getComposedContextMenuItems(this._resourceContextKey('service-area', serviceArea));
         this.mapManager.showContextMenu(event, items);
     }
 
     _showZoneContextMenu(zone, event) {
-        const items = this.mapManager.getComposedContextMenuItems(`zone:${zone.public_id}`);
+        const items = this.mapManager.getComposedContextMenuItems(this._resourceContextKey('zone', zone));
         this.mapManager.showContextMenu(event, items);
     }
 
+    _resourceContextKey(type, resource) {
+        return `${type}:${resource?.public_id ?? resource?.id}`;
+    }
+
     _closeAllInfoWindows() {
         this._infoWindows.forEach((iw) => iw.close());
         this.mapManager.closeContextMenu();

package/addon/components/map/leaflet-live-map.hbs

@@ -13,7 +13,7 @@
     through the provider-agnostic MapManagerService.
 }}
 
-<div class="live-map-component {{@wrapperClass}}">
+<div class="live-map-component {{@wrapperClass}}" {{did-update this.syncServiceAreaContextMenus this.serviceAreaActions.serviceAreas this.serviceAreaActions.serviceAreas.length}}>
 
     {{#if this.shouldUseGoogleMaps}}
         {{! ─── Google Maps branch ──────────────────────────────────────────── }}
@@ -87,7 +87,11 @@
                                 <div class="flex items-center gap-1.5 text-xs font-semibold mb-1.5">
                                     <span class="inline-block w-2 h-2 rounded-full {{if driver.online 'bg-green-400' 'bg-red-500'}}"></span>
                                     <span>{{driver.name}}</span>
-                                    <div class="status-badge {{if driver.status (dasherize driver.status) 'default'}}-status-badge status-badge-{{if driver.status (dasherize driver.status) 'default'}} shadow-none ml-auto">
+                                    <div
+                                        class="status-badge
+                                            {{if driver.status (dasherize driver.status) 'default'}}-status-badge status-badge-{{if driver.status (dasherize driver.status) 'default'}}
+                                            shadow-none ml-auto"
+                                    >
                                         <span class="rounded-full text-[9px] px-1.5 py-0.5">{{n-a driver.meta.status_label (smart-humanize driver.status)}}</span>
                                     </div>
                                 </div>
@@ -122,7 +126,10 @@
                                     </div>
                                     <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
                                         <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Location</div>
-                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a driver.meta.location_coordinates (point-coordinates driver.location)}}</div>
+                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a
+                                                driver.meta.location_coordinates
+                                                (point-coordinates driver.location)
+                                            }}</div>
                                     </div>
                                 </div>
                             </div>
@@ -132,7 +139,11 @@
                                 <div class="flex items-center gap-1.5 text-xs font-semibold mb-1.5">
                                     <span class="inline-block w-2 h-2 rounded-full {{if driver.online 'bg-green-400' 'bg-red-500'}}"></span>
                                     <span>{{driver.name}}</span>
-                                    <div class="status-badge {{if driver.status (dasherize driver.status) 'default'}}-status-badge status-badge-{{if driver.status (dasherize driver.status) 'default'}} shadow-none ml-auto">
+                                    <div
+                                        class="status-badge
+                                            {{if driver.status (dasherize driver.status) 'default'}}-status-badge status-badge-{{if driver.status (dasherize driver.status) 'default'}}
+                                            shadow-none ml-auto"
+                                    >
                                         <span class="rounded-full text-[9px] px-1.5 py-0.5">{{n-a driver.meta.status_label (smart-humanize driver.status)}}</span>
                                     </div>
                                 </div>
@@ -167,7 +178,10 @@
                                     </div>
                                     <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
                                         <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Location</div>
-                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a driver.meta.location_coordinates (point-coordinates driver.location)}}</div>
+                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a
+                                                driver.meta.location_coordinates
+                                                (point-coordinates driver.location)
+                                            }}</div>
                                     </div>
                                 </div>
                             </div>
@@ -192,14 +206,24 @@
                                 <div class="flex items-center gap-1.5 text-xs font-semibold mb-1.5">
                                     <span class="inline-block w-2 h-2 rounded-full {{if vehicle.online 'bg-green-400' 'bg-red-500'}}"></span>
                                     <span>{{vehicle.displayName}}</span>
-                                    <div class="status-badge {{if vehicle.status (dasherize vehicle.status) 'default'}}-status-badge status-badge-{{if vehicle.status (dasherize vehicle.status) 'default'}} shadow-none ml-auto">
+                                    <div
+                                        class="status-badge
+                                            {{if vehicle.status (dasherize vehicle.status) 'default'}}-status-badge status-badge-{{if vehicle.status (dasherize vehicle.status) 'default'}}
+                                            shadow-none ml-auto"
+                                    >
                                         <span class="rounded-full text-[9px] px-1.5 py-0.5">{{n-a vehicle.meta.status_label}}</span>
                                     </div>
                                 </div>
                                 <div class="grid grid-cols-2 gap-1">
                                     <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
                                         <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Vehicle #</div>
-                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a vehicle.internal_id vehicle.public_id vehicle.plate_number vehicle.serial_number vehicle.vin}}</div>
+                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a
+                                                vehicle.internal_id
+                                                vehicle.public_id
+                                                vehicle.plate_number
+                                                vehicle.serial_number
+                                                vehicle.vin
+                                            }}</div>
                                     </div>
                                     <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
                                         <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Driver</div>
@@ -229,14 +253,24 @@
                                 <div class="flex items-center gap-1.5 text-xs font-semibold mb-1.5">
                                     <span class="inline-block w-2 h-2 rounded-full {{if vehicle.online 'bg-green-400' 'bg-red-500'}}"></span>
                                     <span>{{vehicle.displayName}}</span>
-                                    <div class="status-badge {{if vehicle.status (dasherize vehicle.status) 'default'}}-status-badge status-badge-{{if vehicle.status (dasherize vehicle.status) 'default'}} shadow-none ml-auto">
+                                    <div
+                                        class="status-badge
+                                            {{if vehicle.status (dasherize vehicle.status) 'default'}}-status-badge status-badge-{{if vehicle.status (dasherize vehicle.status) 'default'}}
+                                            shadow-none ml-auto"
+                                    >
                                         <span class="rounded-full text-[9px] px-1.5 py-0.5">{{n-a vehicle.meta.status_label}}</span>
                                     </div>
                                 </div>
                                 <div class="grid grid-cols-2 gap-1">
                                     <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
                                         <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Vehicle #</div>
-                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a vehicle.internal_id vehicle.public_id vehicle.plate_number vehicle.serial_number vehicle.vin}}</div>
+                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a
+                                                vehicle.internal_id
+                                                vehicle.public_id
+                                                vehicle.plate_number
+                                                vehicle.serial_number
+                                                vehicle.vin
+                                            }}</div>
                                     </div>
                                     <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
                                         <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Driver</div>
@@ -291,8 +325,8 @@
                         @id={{serviceArea.id}}
                         @record={{serviceArea}}
                         @locations={{unwrap-coordinates serviceArea.leafletCoordinates}}
-                        @fillColor={{serviceArea.color}}
-                        @color={{serviceArea.stroke_color}}
+                        @fillColor={{or serviceArea.color "#3388ff"}}
+                        @color={{or serviceArea.stroke_color serviceArea.color "#3388ff"}}
                         @onAdd={{fn this.trigger "onServiceAreaLayerAdded" serviceArea}}
                         as |polygon|
                     >
@@ -304,8 +338,8 @@
                             @id={{zone.id}}
                             @record={{zone}}
                             @locations={{unwrap-coordinates zone.leafletCoordinates}}
-                            @fillColor={{zone.color}}
-                            @color={{zone.stroke_color}}
+                            @fillColor={{or zone.color "#3388ff"}}
+                            @color={{or zone.stroke_color zone.color "#3388ff"}}
                             @onAdd={{fn this.trigger "onZoneLayerAdd" zone}}
                             as |polygon|
                         >
@@ -340,4 +374,4 @@
         @liveMap={{this}}
         @onDrawerReady={{this.setDrawerContext}}
     />
-{{/if}} --}}
+{{/if}} --}}

package/addon/components/map/leaflet-live-map.js

@@ -8,11 +8,14 @@ import { guidFor } from '@ember/object/internals';
 import { camelize, capitalize, dasherize } from '@ember/string';
 import { singularize, pluralize } from 'ember-inflector';
 import { all } from 'rsvp';
-import { task } from 'ember-concurrency';
+import { task, timeout } from 'ember-concurrency';
 import { next } from '@ember/runloop';
 import getModelName from '@fleetbase/ember-core/utils/get-model-name';
 
 export default class MapLeafletLiveMapComponent extends Component {
+    liveViewportReloadDebounceMs = 300;
+    liveViewportResourceLimit = 500;
+
     @service mapManager;
     @service mapSettings;
     @service leafletMapManager;
@@ -98,6 +101,11 @@ export default class MapLeafletLiveMapComponent extends Component {
             this.universe.off('fleet-ops.geofence.exited', this._geofenceExitedHandler);
             this._geofenceExitedHandler = null;
         }
+        if (this._viewportReloadHandler && this.map && typeof this.map.off === 'function') {
+            this.map.off('moveend', this._viewportReloadHandler);
+            this.map.off('zoomend', this._viewportReloadHandler);
+            this._viewportReloadHandler = null;
+        }
     }
 
     @action didLoad({ target: map }) {
@@ -106,8 +114,9 @@ export default class MapLeafletLiveMapComponent extends Component {
         this.trigger('onLoad', ...arguments);
         this.load.perform();
         // Listen for map move/zoom events to trigger viewport-based resource reload
-        map.on('moveend', () => this.reloadResourcesInViewport.perform());
-        map.on('zoomend', () => this.reloadResourcesInViewport.perform());
+        this._viewportReloadHandler = () => this.reloadResourcesInViewport.perform();
+        map.on('moveend', this._viewportReloadHandler);
+        map.on('zoomend', this._viewportReloadHandler);
     }
 
     /**
@@ -211,13 +220,27 @@ export default class MapLeafletLiveMapComponent extends Component {
         this.#createZoneContextMenu(zone, layer);
     }
 
+    @action rebuildMapContextMenu() {
+        if (!this.map) {
+            return;
+        }
+
+        this.#createMapContextMenu(this.map);
+        this.#refreshResourceContextMenus();
+        this.#pruneResourceContextMenus();
+    }
+
+    @action syncServiceAreaContextMenus() {
+        this.rebuildMapContextMenu();
+    }
+
     /** load resources and wait for stuff here and trigger map ready **/
     @task *load() {
         try {
             // Get initial map bounds for spatial filtering (provider-agnostic)
             const mapBounds = this.mapManager.getBounds?.() ?? (this.map ? this.map.getBounds() : null);
             const bounds = this.#serializeBoundsForRequest(mapBounds);
-            const params = bounds ? { bounds } : {};
+            const params = this.#liveViewportRequestParams(bounds);
 
             const data = yield all([
                 this.loadResource.perform('routes'),
@@ -242,12 +265,19 @@ export default class MapLeafletLiveMapComponent extends Component {
         if (this.isViewportReloadSuspended) {
             return;
         }
+
+        yield timeout(this.liveViewportReloadDebounceMs);
+
+        if (this.isViewportReloadSuspended) {
+            return;
+        }
+
         // Get current map bounds (provider-agnostic)
         const rawBounds = this.mapManager.getBounds?.() ?? this.map?.getBounds();
         if (!rawBounds) return;
         const bounds = this.#serializeBoundsForRequest(rawBounds);
         if (!bounds) return;
-        const params = { bounds };
+        const params = this.#liveViewportRequestParams(bounds);
 
         // Reload spatially-filtered resources (drivers, vehicles, places)
         // Orders, routes, and service-areas are not spatially filtered
@@ -445,6 +475,10 @@ export default class MapLeafletLiveMapComponent extends Component {
         return null;
     }
 
+    #liveViewportRequestParams(bounds) {
+        return bounds ? { bounds, limit: this.liveViewportResourceLimit } : { limit: this.liveViewportResourceLimit };
+    }
+
     #setResourceLayer(model, layer, options = {}) {
         const { hidden = false } = options;
         const type = getModelName(model);
@@ -462,6 +496,7 @@ export default class MapLeafletLiveMapComponent extends Component {
     }
 
     #createMapContextMenu(map) {
+        const serviceAreas = Array.from(this.serviceAreaActions.serviceAreas ?? []);
         const items = [
             {
                 text: this.intl.t('live-map.show-coordinates'),
@@ -494,10 +529,10 @@ export default class MapLeafletLiveMapComponent extends Component {
                 callback: () => this.geofence.createServiceArea(),
                 index: 5,
             },
-            this.serviceAreaActions.serviceAreas.length ? { separator: true } : null,
-            ...this.serviceAreaActions.serviceAreas.map((serviceArea, i) => {
+            serviceAreas.length ? { separator: true } : null,
+            ...serviceAreas.map((serviceArea, i) => {
                 return {
-                    text: this.intl.t('live-map.focus-service', { serviceName: serviceArea.name }),
+                    text: this.intl.t('live-map.focus-service', { serviceName: this.#resourceDisplayName(serviceArea) }),
                     callback: () => this.geofence.focusServiceArea(serviceArea),
                     index: 6 + i,
                 };
@@ -511,71 +546,200 @@ export default class MapLeafletLiveMapComponent extends Component {
     }
 
     #createZoneContextMenu(zone, layer) {
+        const zoneName = this.#resourceDisplayName(zone);
         let items = [
             {
                 separator: true,
             },
             {
-                text: this.intl.t('live-map.edit-zone', { zoneName: zone.name }),
+                text: this.intl.t('live-map.edit-zone', { zoneName }),
                 callback: () => this.zoneActions.modal.edit(zone),
             },
             {
-                text: this.intl.t('live-map.delete-zone', { zoneName: zone.name }),
-                callback: () => this.zoneActions.delete(zone),
+                text: this.intl.t('live-map.delete-zone', { zoneName }),
+                callback: () => this.#deleteZone(zone),
             },
         ];
 
         if (!this.mapManager.isGoogleMaps) {
             items.splice(2, 0, {
-                text: this.intl.t('live-map.edit-boundaries', { resource: zone.name }),
+                text: this.intl.t('live-map.edit-boundaries', { resource: zoneName }),
                 callback: () => this.geofence.editZone(zone),
             });
         }
 
         // create contextmenu registry
-        const contextmenuRegistry = this.leafletContextmenuManager.createContextMenu(`zone:${zone.public_id}`, layer, items, { zone });
+        const contextmenuRegistry = this.leafletContextmenuManager.createContextMenu(this.#resourceContextKey('zone', zone), layer, items, { zone });
         this.universe.trigger('fleet-ops:contextmenu:zone:created', contextmenuRegistry, this.leafletContextmenuManager);
 
         return contextmenuRegistry;
     }
 
     #createServiceAreaContextMenu(serviceArea, layer) {
+        const serviceName = this.#resourceDisplayName(serviceArea);
         let items = [
             {
                 separator: true,
             },
             {
-                text: this.intl.t('live-map.blur-service', { serviceName: serviceArea.name }),
+                text: this.intl.t('live-map.blur-service', { serviceName }),
                 callback: () => this.geofence.blurServiceArea(serviceArea),
             },
             {
-                text: this.intl.t('live-map.create-zone', { serviceName: serviceArea.name }),
+                text: this.intl.t('live-map.create-zone', { serviceName }),
                 callback: () => this.geofence.createZone(serviceArea),
             },
             {
-                text: this.intl.t('live-map.edit-service', { serviceName: serviceArea.name }),
+                text: this.intl.t('live-map.edit-service', { serviceName }),
                 callback: () => this.serviceAreaActions.modal.edit(serviceArea),
             },
             {
-                text: this.intl.t('live-map.delete-service', { serviceName: serviceArea.name }),
-                callback: () => this.serviceAreaActions.delete(serviceArea),
+                text: this.intl.t('live-map.delete-service', { serviceName }),
+                callback: () => this.#deleteServiceArea(serviceArea),
             },
         ];
 
         if (!this.mapManager.isGoogleMaps) {
             items.splice(4, 0, {
-                text: this.intl.t('live-map.edit-boundaries', { resource: serviceArea.name }),
+                text: this.intl.t('live-map.edit-boundaries', { resource: serviceName }),
                 callback: () => this.geofence.editServiceArea(serviceArea),
             });
         }
 
         // create contextmenu registry
-        const contextmenuRegistry = this.leafletContextmenuManager.createContextMenu(`service-area:${serviceArea.public_id}`, layer, items, { serviceArea });
+        const contextmenuRegistry = this.leafletContextmenuManager.createContextMenu(this.#resourceContextKey('service-area', serviceArea), layer, items, { serviceArea });
         this.universe.trigger('fleet-ops:contextmenu:service-area:created', contextmenuRegistry, this.leafletContextmenuManager);
 
         return contextmenuRegistry;
     }
 
+    #resourceContextKey(type, resource) {
+        return `${type}:${resource?.public_id ?? resource?.id}`;
+    }
+
+    #resourceDisplayName(resource) {
+        return resource?.get?.('name') || resource?.name || resource?.display_name || resource?.public_id || resource?.id || '';
+    }
+
+    #deleteServiceArea(serviceArea) {
+        const zones = Array.from(serviceArea?.zones ?? []);
+
+        return this.serviceAreaActions.delete(
+            serviceArea,
+            {},
+            {
+                callback: () => {
+                    this.#removeServiceAreaFromMapState(serviceArea, zones);
+                    this.rebuildMapContextMenu();
+                },
+            }
+        );
+    }
+
+    #deleteZone(zone) {
+        return this.zoneActions.delete(
+            zone,
+            {},
+            {
+                callback: () => {
+                    this.#removeZoneFromMapState(zone);
+                    this.rebuildMapContextMenu();
+                },
+            }
+        );
+    }
+
+    #removeServiceAreaFromMapState(serviceArea, zones = []) {
+        const serviceAreaId = serviceArea?.id;
+        const serviceAreaKey = this.#resourceContextKey('service-area', serviceArea);
+
+        zones.forEach((zone) => this.#removeZoneFromMapState(zone));
+        this.#removeOverlay(serviceArea);
+        this.leafletContextmenuManager.removeContextMenu(serviceAreaKey);
+
+        this.serviceAreaActions.serviceAreas = Array.from(this.serviceAreaActions.serviceAreas ?? []).filter((candidate) => candidate?.id !== serviceAreaId);
+    }
+
+    #removeZoneFromMapState(zone) {
+        const zoneId = zone?.id;
+        const zoneKey = this.#resourceContextKey('zone', zone);
+
+        this.#removeOverlay(zone);
+        this.leafletContextmenuManager.removeContextMenu(zoneKey);
+
+        for (const serviceArea of Array.from(this.serviceAreaActions.serviceAreas ?? [])) {
+            const zones = serviceArea?.zones;
+            if (!zones) {
+                continue;
+            }
+
+            const currentZones = Array.from(zones);
+            const nextZones = currentZones.filter((candidate) => candidate?.id !== zoneId);
+            if (nextZones.length !== currentZones.length) {
+                if (typeof zones.removeObject === 'function') {
+                    zones.removeObject(zone);
+                } else {
+                    serviceArea.set?.('zones', nextZones);
+                }
+                break;
+            }
+        }
+
+        this.serviceAreaActions.serviceAreas = Array.from(this.serviceAreaActions.serviceAreas ?? []);
+    }
+
+    #removeOverlay(resource) {
+        if (!resource?.id) {
+            return;
+        }
+
+        this.mapManager.removeOverlay?.(resource.id);
+
+        const layer = resource?.leafletLayer;
+        if (layer) {
+            this.mapManager.removeLayer?.(layer);
+        }
+    }
+
+    #refreshResourceContextMenus() {
+        for (const serviceArea of Array.from(this.serviceAreaActions.serviceAreas ?? [])) {
+            const serviceAreaLayer = this.mapManager.getOverlay(serviceArea?.id) ?? serviceArea?.leafletLayer;
+            if (serviceAreaLayer) {
+                this.#createServiceAreaContextMenu(serviceArea, serviceAreaLayer);
+            }
+
+            for (const zone of Array.from(serviceArea?.zones ?? [])) {
+                const zoneLayer = this.mapManager.getOverlay(zone?.id) ?? zone?.leafletLayer;
+                if (zoneLayer) {
+                    this.#createZoneContextMenu(zone, zoneLayer);
+                }
+            }
+        }
+    }
+
+    #pruneResourceContextMenus() {
+        const activeServiceAreaKeys = new Set();
+        const activeZoneKeys = new Set();
+
+        for (const serviceArea of Array.from(this.serviceAreaActions.serviceAreas ?? [])) {
+            activeServiceAreaKeys.add(this.#resourceContextKey('service-area', serviceArea));
+
+            for (const zone of Array.from(serviceArea?.zones ?? [])) {
+                activeZoneKeys.add(this.#resourceContextKey('zone', zone));
+            }
+        }
+
+        for (const registry of Object.values(this.leafletContextmenuManager.contextMenuRegistry ?? {})) {
+            if (registry?.serviceArea && !activeServiceAreaKeys.has(this.#resourceContextKey('service-area', registry.serviceArea))) {
+                this.leafletContextmenuManager.removeContextMenu(this.#resourceContextKey('service-area', registry.serviceArea));
+            }
+
+            if (registry?.zone && !activeZoneKeys.has(this.#resourceContextKey('zone', registry.zone))) {
+                this.leafletContextmenuManager.removeContextMenu(this.#resourceContextKey('zone', registry.zone));
+            }
+        }
+    }
+
     #createDriverContextMenu(driver, layer) {
         let items = [
             {

package/addon/components/modals/order-change-destination.hbs

@@ -0,0 +1,46 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{perform this.confirmSelection}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <div class="space-y-3">
+            {{#each this.waypointOptions as |option|}}
+                <button
+                    type="button"
+                    class="w-full rounded-md border px-4 py-3 text-left shadow-sm transition {{if option.isCurrent 'border-blue-500 bg-blue-50 dark:border-blue-600 dark:bg-blue-900' (if option.isSelected 'border-green-500 bg-green-50 dark:border-green-700 dark:bg-green-900' 'border-gray-200 bg-white hover:border-blue-300 hover:bg-blue-50 dark:border-gray-700 dark:bg-gray-800 dark:hover:border-blue-700 dark:hover:bg-gray-900')}}"
+                    disabled={{this.confirmSelection.isRunning}}
+                    {{on "click" (fn this.selectOption option)}}
+                >
+                    <div class="flex items-start gap-3">
+                        <div
+                            class="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full text-xs font-bold {{if option.isCurrent 'bg-blue-600 text-white' 'bg-gray-200 text-gray-800 dark:bg-gray-700 dark:text-gray-100'}}"
+                        >
+                            {{option.label}}
+                        </div>
+                        <div class="min-w-0 flex-1">
+                            <div class="flex items-center justify-between gap-2">
+                                <div class="truncate text-sm font-semibold dark:text-gray-100">{{option.title}} - {{or option.waypoint.name option.waypoint.id}}</div>
+                                {{#if option.isCurrent}}
+                                    <Badge @status="info" class="uppercase">Current</Badge>
+                                {{else if option.isSelected}}
+                                    <Badge @status="success" class="uppercase">Selected</Badge>
+                                {{else if option.waypoint.complete}}
+                                    <Badge @status="completed" class="uppercase">Complete</Badge>
+                                {{else if option.waypoint.status_code}}
+                                    <Badge @status={{dasherize option.waypoint.status_code}} class="uppercase">{{option.waypoint.status_code}}</Badge>
+                                {{else if option.waypoint.status}}
+                                    <Badge @status={{dasherize option.waypoint.status}} class="uppercase">{{option.waypoint.status}}</Badge>
+                                {{/if}}
+                            </div>
+                            <div class="mt-1 truncate text-xs text-gray-600 dark:text-gray-300">{{or option.waypoint.address option.waypoint.street1}}</div>
+                            {{#if option.tracking}}
+                                <div class="mt-1 text-xs font-mono text-gray-500 dark:text-gray-400">{{option.tracking}}</div>
+                            {{/if}}
+                        </div>
+                    </div>
+                </button>
+            {{else}}
+                <div class="rounded-md border border-dashed border-gray-300 p-6 text-center text-sm text-gray-500 dark:border-gray-700 dark:text-gray-400">
+                    No waypoint destinations are available.
+                </div>
+            {{/each}}
+        </div>
+    </div>
+</Modal::Default>