@fleetbase/fleetops-engine 0.6.48 → 0.6.50

package/addon/components/widget/top-drivers.js

@@ -0,0 +1,54 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { task } from 'ember-concurrency';
+
+const SORTS = [
+    { key: 'orders_completed', label: 'Orders' },
+    { key: 'on_time', label: 'On-time' },
+    { key: 'distance', label: 'Distance' },
+];
+
+export default class WidgetTopDriversComponent extends Component {
+    static widgetId = 'fleet-ops-top-drivers-widget';
+
+    @service fetch;
+
+    @tracked sortBy = 'orders_completed';
+    @tracked data = null;
+    @tracked error = null;
+
+    sorts = SORTS;
+
+    constructor() {
+        super(...arguments);
+        this.load.perform();
+    }
+
+    @task *load() {
+        try {
+            this.data = yield this.fetch.get('fleet-ops/analytics/top-drivers', {
+                period: '30d',
+                limit: 10,
+                sort_by: this.sortBy,
+            });
+            this.error = null;
+        } catch (e) {
+            this.error = e?.message ?? 'Failed to load top drivers';
+        }
+    }
+
+    @action
+    setSort(key) {
+        this.sortBy = key;
+        this.load.perform();
+    }
+
+    onTimeStatus(pct) {
+        if (typeof pct !== 'number') return 'info';
+        if (pct >= 95) return 'success';
+        if (pct >= 85) return 'warning';
+        return 'danger';
+    }
+}

package/addon/controllers/management/vehicles/index/new.js

@@ -4,7 +4,7 @@ import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
 import { task } from 'ember-concurrency';
 
-const DEFAULT_PROPERTIES = { status: 'active' };
+const DEFAULT_PROPERTIES = { status: 'available' };
 
 export default class ManagementVehiclesIndexNewController extends Controller {
     @service store;

package/addon/controllers/operations/orders/index/details.js

@@ -103,10 +103,10 @@ export default class OperationsOrdersIndexDetailsController extends Controller {
                             }),
                     },
                     {
-                        text: 'Unassign driver',
-                        icon: 'user-xmark',
-                        disabled: this.model.status === 'canceled' || !this.model.driver_assigned,
-                        fn: () => this.orderActions.unassignDriver(this.model),
+                        text: this.model.has_driver_assigned ? 'Unassign driver' : 'Assign driver',
+                        icon: this.model.has_driver_assigned ? 'user-xmark' : 'edit',
+                        disabled: this.model.has_driver_assigned ? !this.model.hasActiveStatus || !this.model.driver_assigned : !this.model.hasActiveStatus,
+                        fn: () => (this.model.has_driver_assigned ? this.orderActions.unassignDriver(this.model) : this.orderActions.assignDriver(this.model)),
                     },
                     {
                         text: 'View order label',

package/addon/controllers/operations/orders/index.js

@@ -385,6 +385,20 @@ export default class OperationsOrdersIndexController extends Controller {
                         permission: 'fleet-ops dispatch order',
                         isVisible: (order) => order.canBeDispatched,
                     },
+                    {
+                        label: this.intl.t('common.assign-driver'),
+                        icon: 'edit',
+                        fn: this.orderActions.assignDriver,
+                        permission: 'fleet-ops update order',
+                        isVisible: (order) => !order.has_driver_assigned,
+                    },
+                    {
+                        label: this.intl.t('common.unassign-driver'),
+                        icon: 'edit',
+                        fn: this.orderActions.unassignDriver,
+                        permission: 'fleet-ops update order',
+                        isVisible: (order) => order.has_driver_assigned,
+                    },
                     {
                         label: this.intl.t('common.cancel-resource', { resource: this.intl.t('resource.order') }),
                         icon: 'ban',

package/addon/controllers/settings/routing.js

@@ -20,6 +20,12 @@ export default class SettingsRoutingController extends Controller {
     @tracked trackingRouteCacheTtlSeconds = 600;
     @tracked trackingStaleLocationThresholdSeconds = 300;
     @tracked trackingDefaultVehicleSpeedKph = 35;
+    @tracked lateDepartureAlertsEnabled = true;
+    @tracked lateDepartureGracePeriodMinutes = 15;
+    @tracked routeDeviationAlertsEnabled = true;
+    @tracked routeDeviationDistanceThresholdMeters = 500;
+    @tracked prolongedStoppageAlertsEnabled = true;
+    @tracked prolongedStoppageDurationThresholdMinutes = 30;
     @tracked showTrackingAdvancedSettings = false;
     @tracked trackingProviderOptions = [
         { value: 'google_routes', label: 'Google Routes' },
@@ -89,6 +95,12 @@ export default class SettingsRoutingController extends Controller {
             this.trackingRouteCacheTtlSeconds = trackingSettings.route_cache_ttl_seconds ?? 600;
             this.trackingStaleLocationThresholdSeconds = trackingSettings.stale_location_threshold_seconds ?? 300;
             this.trackingDefaultVehicleSpeedKph = trackingSettings.default_vehicle_speed_kph ?? 35;
+            this.lateDepartureAlertsEnabled = trackingSettings.alerts?.late_departures?.enabled ?? true;
+            this.lateDepartureGracePeriodMinutes = trackingSettings.alerts?.late_departures?.grace_period_minutes ?? 15;
+            this.routeDeviationAlertsEnabled = trackingSettings.alerts?.route_deviations?.enabled ?? true;
+            this.routeDeviationDistanceThresholdMeters = trackingSettings.alerts?.route_deviations?.distance_threshold_meters ?? 500;
+            this.prolongedStoppageAlertsEnabled = trackingSettings.alerts?.prolonged_stoppages?.enabled ?? true;
+            this.prolongedStoppageDurationThresholdMinutes = trackingSettings.alerts?.prolonged_stoppages?.duration_threshold_minutes ?? 30;
             this.trackingProviderOptions = this.normalizeProviderOptions(trackingSettings.providers ?? this.trackingProviderOptions);
         } catch (error) {
             this.notifications.serverError(error);
@@ -110,6 +122,20 @@ export default class SettingsRoutingController extends Controller {
             route_cache_ttl_seconds: Number(this.trackingRouteCacheTtlSeconds) || 600,
             stale_location_threshold_seconds: Number(this.trackingStaleLocationThresholdSeconds) || 300,
             default_vehicle_speed_kph: Number(this.trackingDefaultVehicleSpeedKph) || 35,
+            alerts: {
+                late_departures: {
+                    enabled: this.lateDepartureAlertsEnabled,
+                    grace_period_minutes: Number(this.lateDepartureGracePeriodMinutes) || 15,
+                },
+                route_deviations: {
+                    enabled: this.routeDeviationAlertsEnabled,
+                    distance_threshold_meters: Number(this.routeDeviationDistanceThresholdMeters) || 500,
+                },
+                prolonged_stoppages: {
+                    enabled: this.prolongedStoppageAlertsEnabled,
+                    duration_threshold_minutes: Number(this.prolongedStoppageDurationThresholdMinutes) || 30,
+                },
+            },
         };
     }
 

package/addon/extension.js

@@ -128,13 +128,182 @@ export default {
 
     registerWidgets(widgetService) {
         const widgets = [
+            // Legacy monolithic 13-tile widget — kept registered for one release as
+            // users have it pinned to existing dashboards. The new KPI tile widgets
+            // below supersede it. Scheduled for removal in the next major.
             new Widget({
                 id: 'fleet-ops-key-metrics-widget',
-                name: 'Fleet-Ops Metrics',
-                description: 'Key metrics from Fleet-Ops.',
+                name: 'Fleet-Ops Metrics (Legacy)',
+                description: 'DEPRECATED — replaced by individual KPI tile widgets. Will be removed in the next major release.',
                 icon: 'truck',
                 component: new ExtensionComponent('@fleetbase/fleetops-engine', 'widget/fleet-ops-key-metrics'),
-                grid_options: { w: 12, h: 12, minW: 8, minH: 12 },
+                grid_options: { w: 12, h: 8, minW: 8, minH: 6 },
+                category: 'Legacy',
+                default: false,
+            }),
+
+            // Small KPI tile widgets — S-tier, each wraps <Widget::KpiTile> with a
+            // fixed slug pointing at GET /fleet-ops/metrics/{slug}.
+            new Widget({
+                id: 'fleet-ops-kpi-earnings-widget',
+                name: 'Earnings (30d)',
+                description: 'Total earnings over the last 30 days with trend.',
+                icon: 'sack-dollar',
+                component: new ExtensionComponent('@fleetbase/fleetops-engine', 'widget/kpi-earnings'),
+                grid_options: { w: 3, h: 4, minW: 3, minH: 4 },
+                category: 'KPI Tiles',
+                default: true,
+            }),
+            new Widget({
+                id: 'fleet-ops-kpi-aov-widget',
+                name: 'Avg Order Value (30d)',
+                description: 'Average revenue per completed order with trend.',
+                icon: 'receipt',
+                component: new ExtensionComponent('@fleetbase/fleetops-engine', 'widget/kpi-aov'),
+                grid_options: { w: 3, h: 4, minW: 3, minH: 4 },
+                category: 'KPI Tiles',
+                default: true,
+            }),
+            new Widget({
+                id: 'fleet-ops-kpi-distance-widget',
+                name: 'Distance Travelled (30d)',
+                description: 'Total kilometres delivered over the last 30 days.',
+                icon: 'route',
+                component: new ExtensionComponent('@fleetbase/fleetops-engine', 'widget/kpi-distance'),
+                grid_options: { w: 3, h: 4, minW: 3, minH: 4 },
+                category: 'KPI Tiles',
+                default: false,
+            }),
+            new Widget({
+                id: 'fleet-ops-kpi-active-orders-widget',
+                name: 'Active Orders',
+                description: 'Live count of orders currently in flight.',
+                icon: 'bolt',
+                component: new ExtensionComponent('@fleetbase/fleetops-engine', 'widget/kpi-active-orders'),
+                grid_options: { w: 3, h: 4, minW: 3, minH: 4 },
+                category: 'KPI Tiles',
+                default: true,
+            }),
+            new Widget({
+                id: 'fleet-ops-kpi-drivers-online-widget',
+                name: 'Drivers Online',
+                description: 'Live count of drivers currently active on a job.',
+                icon: 'id-card',
+                component: new ExtensionComponent('@fleetbase/fleetops-engine', 'widget/kpi-drivers-online'),
+                grid_options: { w: 3, h: 4, minW: 3, minH: 4 },
+                category: 'KPI Tiles',
+                default: true,
+            }),
+            new Widget({
+                id: 'fleet-ops-kpi-open-issues-widget',
+                name: 'Open Issues',
+                description: 'Pending issues across the fleet (lower is better).',
+                icon: 'triangle-exclamation',
+                component: new ExtensionComponent('@fleetbase/fleetops-engine', 'widget/kpi-open-issues'),
+                grid_options: { w: 3, h: 4, minW: 3, minH: 4 },
+                category: 'KPI Tiles',
+                default: false,
+            }),
+
+            // Analytics widgets — composed visualizations powered by /fleet-ops/analytics/*.
+            new Widget({
+                id: 'fleet-ops-operations-pulse-widget',
+                name: 'Operations Pulse',
+                description: 'Live operational snapshot with day-over-day deltas.',
+                icon: 'wave-pulse',
+                component: new ExtensionComponent('@fleetbase/fleetops-engine', 'widget/operations-pulse'),
+                grid_options: { w: 6, h: 6, minW: 5, minH: 5 },
+                category: 'Analytics',
+                default: false,
+            }),
+            new Widget({
+                id: 'fleet-ops-revenue-trend-widget',
+                name: 'Revenue Trend',
+                description: 'Revenue over time with period comparison.',
+                icon: 'chart-line',
+                component: new ExtensionComponent('@fleetbase/fleetops-engine', 'widget/revenue-trend'),
+                grid_options: { w: 6, h: 6, minW: 5, minH: 5 },
+                category: 'Analytics',
+                default: true,
+            }),
+            new Widget({
+                id: 'fleet-ops-orders-by-status-widget',
+                name: 'Order Volume by Status',
+                description: 'Daily stacked bars of order counts by status.',
+                icon: 'chart-column',
+                component: new ExtensionComponent('@fleetbase/fleetops-engine', 'widget/orders-by-status'),
+                grid_options: { w: 6, h: 6, minW: 5, minH: 5 },
+                category: 'Analytics',
+                default: false,
+            }),
+            new Widget({
+                id: 'fleet-ops-on-time-delivery-widget',
+                name: 'On-Time Delivery',
+                description: 'Percentage of deliveries completed within the SLA window.',
+                icon: 'clock',
+                component: new ExtensionComponent('@fleetbase/fleetops-engine', 'widget/on-time-delivery'),
+                grid_options: { w: 3, h: 4, minW: 3, minH: 4 },
+                category: 'Analytics',
+                default: false,
+            }),
+            new Widget({
+                id: 'fleet-ops-top-drivers-widget',
+                name: 'Top Drivers',
+                description: 'Driver leaderboard sortable by orders, on-time %, or distance.',
+                icon: 'medal',
+                component: new ExtensionComponent('@fleetbase/fleetops-engine', 'widget/top-drivers'),
+                grid_options: { w: 6, h: 6, minW: 5, minH: 5 },
+                category: 'Analytics',
+                default: false,
+            }),
+            new Widget({
+                id: 'fleet-ops-fuel-efficiency-widget',
+                name: 'Fuel Cost & Efficiency',
+                description: 'Weekly fuel cost and cost-per-km trend.',
+                icon: 'gas-pump',
+                component: new ExtensionComponent('@fleetbase/fleetops-engine', 'widget/fuel-efficiency'),
+                grid_options: { w: 6, h: 6, minW: 5, minH: 5 },
+                category: 'Analytics',
+                default: false,
+            }),
+            new Widget({
+                id: 'fleet-ops-issues-insights-widget',
+                name: 'Issues Insights',
+                description: 'Open/resolved issues, category breakdown, and average resolution time.',
+                icon: 'triangle-exclamation',
+                component: new ExtensionComponent('@fleetbase/fleetops-engine', 'widget/issues-insights'),
+                grid_options: { w: 6, h: 6, minW: 5, minH: 5 },
+                category: 'Analytics',
+                default: false,
+            }),
+            new Widget({
+                id: 'fleet-ops-maintenance-overview-widget',
+                name: 'Maintenance Overview',
+                description: 'Overdue, scheduled, and YTD maintenance spend.',
+                icon: 'wrench',
+                component: new ExtensionComponent('@fleetbase/fleetops-engine', 'widget/maintenance-overview'),
+                grid_options: { w: 6, h: 6, minW: 5, minH: 5 },
+                category: 'Analytics',
+                default: true,
+            }),
+            new Widget({
+                id: 'fleet-ops-geofence-violations-widget',
+                name: 'Geofence Violations',
+                description: 'Dwell-time outliers and geofence event hotspots.',
+                icon: 'location-crosshairs',
+                component: new ExtensionComponent('@fleetbase/fleetops-engine', 'widget/geofence-violations'),
+                grid_options: { w: 6, h: 6, minW: 5, minH: 5 },
+                category: 'Analytics',
+                default: false,
+            }),
+            new Widget({
+                id: 'fleet-ops-live-fleet-widget',
+                name: 'Live Fleet Map',
+                description: 'Real-time driver positions and active routes.',
+                icon: 'map-location-dot',
+                component: new ExtensionComponent('@fleetbase/fleetops-engine', 'widget/live-fleet'),
+                grid_options: { w: 12, h: 10, minW: 8, minH: 8 },
+                category: 'Maps',
                 default: true,
             }),
         ];

package/addon/helpers/place-address-html.js

@@ -1,6 +1,6 @@
 import { helper } from '@ember/component/helper';
 import placeAddressHtml from '../utils/place-address-html';
 
-export default helper(function placeAddressHtmlHelper([place]) {
-    return placeAddressHtml(place);
+export default helper(function placeAddressHtmlHelper([place], hash = {}) {
+    return placeAddressHtml(place, hash);
 });

package/addon/routes/operations/service-rates/index.js

@@ -27,7 +27,7 @@ export default class OperationsServiceRatesIndexRoute extends Route {
     model(params) {
         return this.store.query('service-rate', {
             ...params,
-            with: ['parcelFees', 'rateFees', 'zone', 'serviceArea'],
+            with: ['parcelFees', 'rateFees.zone', 'rateFees.serviceArea', 'zone', 'serviceArea'],
         });
     }
 }

package/addon/services/geofence.js

@@ -9,6 +9,7 @@ import Service, { inject as service } from '@ember/service';
 import { action } from '@ember/object';
 import { debug } from '@ember/debug';
 import { dasherize } from '@ember/string';
+import { later } from '@ember/runloop';
 import toMultiPolygon from '../utils/to-multi-polygon';
 
 export default class GeofenceService extends Service {
@@ -173,9 +174,11 @@ export default class GeofenceService extends Service {
                 },
                 {
                     callback: (serviceArea) => {
-                        this.#resetDraftSession({ hideControl: true, removeDraft: true });
-                        this.#showServiceArea(serviceArea);
+                        this.#finishDraftSave((draftLayer) => {
+                            this.#reloadThenFocusServiceArea(serviceArea, { draftLayer });
+                        });
                     },
+                    refresh: false,
                 }
             );
             return;
@@ -184,7 +187,7 @@ export default class GeofenceService extends Service {
         if (this._draftSession.mode === 'zone') {
             const serviceArea = this._draftSession.serviceArea;
             this.zoneActions.modal.create(
-                { border: geoJson, service_area_uuid: serviceArea.id },
+                { border: geoJson, service_area: serviceArea },
                 {
                     decline: (modal) => {
                         this.#resetDraftSession({ hideControl: true, removeDraft: true });
@@ -193,10 +196,11 @@ export default class GeofenceService extends Service {
                 },
                 {
                     callback: (zone) => {
-                        serviceArea?.zones?.pushObject?.(zone);
-                        this.#resetDraftSession({ hideControl: true, removeDraft: true });
-                        this.#showZone(zone);
+                        this.#finishDraftSave((draftLayer) => {
+                            this.#reloadThenFocusZone(serviceArea, zone, { draftLayer });
+                        });
                     },
+                    refresh: false,
                 }
             );
             return;
@@ -246,19 +250,19 @@ export default class GeofenceService extends Service {
                 } else {
                     record.setProperties({
                         border: geoJson,
-                        service_area_uuid: selectedServiceArea.id,
-                        serviceArea: selectedServiceArea,
+                        service_area: selectedServiceArea,
                     });
                 }
 
                 return record.save().then((savedRecord) => {
-                    this.#resetDraftSession({ hideControl: true, removeDraft: true });
-
                     if (selectedLayerType === 'Service Area') {
-                        this.#showServiceArea(savedRecord);
+                        this.#finishDraftSave((draftLayer) => {
+                            this.#reloadThenFocusServiceArea(savedRecord, { draftLayer });
+                        });
                     } else {
-                        selectedServiceArea?.zones?.pushObject?.(savedRecord);
-                        this.#showZone(savedRecord);
+                        this.#finishDraftSave((draftLayer) => {
+                            this.#reloadThenFocusZone(selectedServiceArea, savedRecord, { draftLayer });
+                        });
                     }
 
                     return savedRecord;
@@ -289,28 +293,168 @@ export default class GeofenceService extends Service {
         this._draftSession = null;
     }
 
+    #finishDraftSave(callback) {
+        const draftLayer = this._draftSession?.draftLayer ?? null;
+        callback?.(draftLayer);
+        this.#resetDraftSession({ hideControl: true, removeDraft: false });
+    }
+
     async #editPolygonLayer(originalLayer, { focusBounds = null } = {}) {
         return this.mapManager.editPolygon(originalLayer, { focusBounds });
     }
 
     #showZone(zone, { pin = false } = {}) {
-        const layer = this.mapManager.getOverlay(zone.id) ?? zone?.leafletLayer ?? null;
+        const overlay = this.mapManager.getOverlay(zone.id);
+        const layer = overlay ?? zone?.leafletLayer ?? null;
         this.#setLayerPinned(layer, pin);
-        this.mapManager.showPolygon(zone.id);
+        if (overlay) {
+            this.mapManager.showPolygon(zone.id);
+        } else if (layer) {
+            this.mapManager.showLayer?.(layer);
+        }
+    }
+
+    #includeServiceArea(serviceArea) {
+        if (!serviceArea?.id) return;
+
+        const currentServiceAreas = this.serviceAreaActions.serviceAreas;
+        if (!currentServiceAreas) {
+            this.serviceAreaActions.serviceAreas = [serviceArea];
+            return;
+        }
+
+        const serviceAreas = Array.from(currentServiceAreas);
+        const exists = serviceAreas.some((existingServiceArea) => existingServiceArea?.id === serviceArea.id);
+        if (exists) return;
+
+        this.serviceAreaActions.serviceAreas = [...serviceAreas, serviceArea];
+    }
+
+    #includeZone(serviceArea, zone) {
+        if (!serviceArea?.id || !zone?.id) return;
+
+        const zones = serviceArea.zones;
+        if (!zones) {
+            serviceArea.set?.('zones', [zone]);
+            this.serviceAreaActions.serviceAreas = Array.from(this.serviceAreaActions.serviceAreas ?? []);
+            return;
+        }
+
+        const exists = Array.from(zones).some((existingZone) => existingZone?.id === zone.id);
+        if (exists) return;
+
+        if (typeof zones.pushObject === 'function') {
+            zones.pushObject(zone);
+        } else if (typeof zones.addObject === 'function') {
+            zones.addObject(zone);
+        } else if (typeof zones.push === 'function') {
+            zones.push(zone);
+        }
+
+        this.serviceAreaActions.serviceAreas = Array.from(this.serviceAreaActions.serviceAreas ?? []);
+    }
+
+    #reloadThenFocusServiceArea(serviceArea, options = {}) {
+        this.#reloadServiceAreas()
+            .then((serviceAreas) => {
+                const canonicalServiceArea = this.#findResource(serviceAreas, serviceArea) ?? serviceArea;
+                this.#focusServiceAreaAfterCreate(canonicalServiceArea, options);
+            })
+            .catch(() => {
+                this.#includeServiceArea(serviceArea);
+                this.#focusServiceAreaAfterCreate(serviceArea, options);
+            });
+    }
+
+    #reloadThenFocusZone(serviceArea, zone, options = {}) {
+        this.#reloadServiceAreas()
+            .then((serviceAreas) => {
+                const canonicalServiceArea = this.#findResource(serviceAreas, serviceArea) ?? serviceArea;
+                const canonicalZone = this.#findResource(canonicalServiceArea?.zones, zone) ?? zone;
+                this.#focusZoneAfterCreate(canonicalZone, options);
+            })
+            .catch(() => {
+                this.#includeZone(serviceArea, zone);
+                this.#focusZoneAfterCreate(zone, options);
+            });
+    }
+
+    #reloadServiceAreas() {
+        return Promise.resolve(this.serviceAreaActions.loadAll.perform()).then(() => this.serviceAreaActions.serviceAreas ?? []);
+    }
+
+    #findResource(resources, resource) {
+        if (!resource || !resources) return null;
+
+        const resourceId = resource.id ?? resource.public_id;
+        const publicId = resource.public_id ?? resource.id;
+
+        return (
+            Array.from(resources).find((candidate) => {
+                return candidate?.id === resourceId || candidate?.id === publicId || candidate?.public_id === publicId || candidate?.public_id === resourceId;
+            }) ?? null
+        );
+    }
+
+    #focusServiceAreaAfterCreate(serviceArea, options = {}) {
+        this.#focusWhenReady([serviceArea], () => this.focusServiceArea(serviceArea), options);
+    }
+
+    #focusZoneAfterCreate(zone, options = {}) {
+        this.#focusWhenReady([zone], () => this.focusZone(zone), options);
+    }
+
+    #focusWhenReady(models, focus, { attempts = 60, delay = 100, draftLayer = null } = {}) {
+        const overlays = models
+            .map((model) => {
+                const overlay = this.mapManager.getOverlay(model?.id);
+                if (overlay) {
+                    return overlay;
+                }
+
+                return model?.leafletLayer === draftLayer ? null : model?.leafletLayer;
+            })
+            .filter(Boolean);
+        const allRegistered = overlays.length === models.length;
+
+        if (allRegistered || attempts <= 0) {
+            focus();
+            if (draftLayer && !draftLayer.__removedAfterCreate && !overlays.includes(draftLayer)) {
+                draftLayer.__removedAfterCreate = true;
+                this.mapManager.removeLayer(draftLayer);
+            }
+            return;
+        }
+
+        later(this, () => this.#focusWhenReady(models, focus, { attempts: attempts - 1, delay, draftLayer }), delay);
     }
 
     #showServiceArea(serviceArea, { pin = false } = {}) {
         [serviceArea, ...(serviceArea.zones ?? [])].forEach((model) => {
-            const layer = this.mapManager.getOverlay(model.id) ?? model?.leafletLayer ?? null;
+            const overlay = this.mapManager.getOverlay(model.id);
+            const layer = overlay ?? model?.leafletLayer ?? null;
             this.#setLayerPinned(layer, pin);
-            this.mapManager.showPolygon(model.id);
+            if (overlay) {
+                this.mapManager.showPolygon(model.id);
+            } else if (layer) {
+                this.mapManager.showLayer?.(layer);
+            }
         });
     }
 
     #hideServiceArea(serviceArea) {
         [serviceArea, ...(serviceArea.zones ?? [])].forEach((model) => {
-            this.#setLayerPinned(model?.leafletLayer ?? this.mapManager.getOverlay(model.id), false);
-            this.mapManager.hidePolygon(model.id);
+            const overlay = this.mapManager.getOverlay(model.id);
+            const layer = model?.leafletLayer;
+
+            this.#setLayerPinned(layer ?? overlay, false);
+            if (overlay) {
+                this.mapManager.hidePolygon(model.id);
+            }
+
+            if (layer && layer !== overlay) {
+                this.mapManager.hideLayer?.(layer);
+            }
         });
     }
 

package/addon/services/leaflet-contextmenu-manager.js

@@ -85,6 +85,33 @@ export default class LeafletContextmenuManagerService extends Service {
         return null;
     }
 
+    /**
+     * Remove a registered context menu and detach it from its layer when possible.
+     *
+     * @param {string} registryName - The public context menu registry name.
+     * @returns {Object|null} The removed registry, or null when none existed.
+     */
+    removeContextMenu(registryName) {
+        const internalRegistryName = this.createInternalRegistryName(registryName);
+        const registry = this.contextMenuRegistry[internalRegistryName];
+
+        if (!registry) {
+            return null;
+        }
+
+        try {
+            registry.contextmenuApi?.removeAllItems?.();
+            registry.layer?.unbindContextMenu?.();
+        } catch (error) {
+            // Context menus are disposable UI state; stale layer cleanup should not block record deletion.
+        }
+
+        delete this.contextMenuRegistry[internalRegistryName];
+        this.contextMenuRegistry = { ...this.contextMenuRegistry };
+
+        return registry;
+    }
+
     /**
      * Creates an internal registry name by camelizing the provided registry name and appending "ConextmenuRegistry" to it.
      *