@fleetbase/fleetops-engine 0.6.45 → 0.6.46

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

@@ -9,9 +9,12 @@ import { camelize, capitalize, dasherize } from '@ember/string';
 import { singularize, pluralize } from 'ember-inflector';
 import { all } from 'rsvp';
 import { task } from 'ember-concurrency';
+import { next } from '@ember/runloop';
 import getModelName from '@fleetbase/ember-core/utils/get-model-name';
 
 export default class MapLeafletLiveMapComponent extends Component {
+    @service mapManager;
+    @service mapSettings;
     @service leafletMapManager;
     @service leafletLayerVisibilityManager;
     @service leafletContextmenuManager;
@@ -47,6 +50,7 @@ export default class MapLeafletLiveMapComponent extends Component {
     @tracked drivers = [];
     @tracked vehicles = [];
     @tracked places = [];
+    _viewportReloadLocks = new Set();
 
     constructor() {
         super(...arguments);
@@ -61,9 +65,9 @@ export default class MapLeafletLiveMapComponent extends Component {
         this.#updateCoordinatesFromLocation();
 
         if (this.currentUser.companyId) {
-            this.geofenceEventBus.subscribe(this.currentUser.companyId);
+            next(this, () => this.geofenceEventBus.subscribe(this.currentUser.companyId));
         } else {
-            this._currentUserLoadedHandler = () => this.geofenceEventBus.subscribe(this.currentUser.companyId);
+            this._currentUserLoadedHandler = () => next(this, () => this.geofenceEventBus.subscribe(this.currentUser.companyId));
             this.currentUser.on('user.loaded', this._currentUserLoadedHandler);
         }
 
@@ -101,12 +105,35 @@ export default class MapLeafletLiveMapComponent extends Component {
         this.#createMapContextMenu(map);
         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());
     }
 
+    /**
+     * Called when the Google Maps adapter is ready.
+     * Mirrors `didLoad` but receives the adapter instance instead of a raw Leaflet map.
+     *
+     * @param {{ target: * }} event
+     */
+    @action didLoadGoogleMap({ target: map }) {
+        this.#setMapFromAdapter(map);
+        this.trigger('onLoad', { target: map });
+        this.load.perform();
+    }
+
+    suspendViewportReload(lockId = 'default') {
+        this._viewportReloadLocks.add(lockId);
+    }
+
+    resumeViewportReload(lockId = 'default') {
+        this._viewportReloadLocks.delete(lockId);
+    }
+
+    get isViewportReloadSuspended() {
+        return this._viewportReloadLocks.size > 0;
+    }
+
     @action trigger(name, ...rest) {
         if (typeof this[name] === 'function') {
             this[name](...rest);
@@ -121,11 +148,13 @@ export default class MapLeafletLiveMapComponent extends Component {
 
     @action didCreateDrawControl(drawControl) {
         this.leafletMapManager.setDrawControl(drawControl);
+        this.mapManager.adapter?.setDrawControl?.(drawControl, this.leafletMapManager.drawControlFeatureGroup);
         this.trigger('onDrawControlCreated', ...arguments);
     }
 
     @action didCreateDrawControlFeatureGroup(featureGroup) {
         this.leafletMapManager.setDrawControlFeatureGroup(featureGroup);
+        this.mapManager.adapter?.setDrawControl?.(this.leafletMapManager.drawControl, featureGroup);
         this.trigger('onDrawFeatureGroupCreated', ...arguments);
     }
 
@@ -139,9 +168,7 @@ export default class MapLeafletLiveMapComponent extends Component {
         this.driverActions.panel.view(driver, {
             size: 'xs',
             onOpen: () => {
-                this.map.once('moveend', () => {
-                    this.map.panBy([200, 0]);
-                });
+                this.mapManager.once?.('moveend', () => this.mapManager.panBy?.(200, 0)) ?? this.map?.once?.('moveend', () => this.map?.panBy?.([200, 0]));
             },
         });
     }
@@ -156,9 +183,7 @@ export default class MapLeafletLiveMapComponent extends Component {
         this.vehicleActions.panel.view(vehicle, {
             size: 'xs',
             onOpen: () => {
-                this.map.once('moveend', () => {
-                    this.map.panBy([200, 0]);
-                });
+                this.mapManager.once?.('moveend', () => this.mapManager.panBy?.(200, 0)) ?? this.map?.once?.('moveend', () => this.map?.panBy?.([200, 0]));
             },
         });
     }
@@ -171,9 +196,7 @@ export default class MapLeafletLiveMapComponent extends Component {
         this.placeActions.panel.view(place, {
             size: 'xs',
             onOpen: () => {
-                this.map.once('moveend', () => {
-                    this.map.panBy([200, 0]);
-                });
+                this.mapManager.once?.('moveend', () => this.mapManager.panBy?.(200, 0)) ?? this.map?.once?.('moveend', () => this.map?.panBy?.([200, 0]));
             },
         });
     }
@@ -191,13 +214,10 @@ export default class MapLeafletLiveMapComponent extends Component {
     /** load resources and wait for stuff here and trigger map ready **/
     @task *load() {
         try {
-            // Get initial map bounds for spatial filtering
-            const bounds = this.map ? this.map.getBounds() : null;
-            const params = bounds
-                ? {
-                      bounds: [bounds.getSouth(), bounds.getWest(), bounds.getNorth(), bounds.getEast()],
-                  }
-                : {};
+            // 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 data = yield all([
                 this.loadResource.perform('routes'),
@@ -216,15 +236,18 @@ export default class MapLeafletLiveMapComponent extends Component {
     }
 
     @task({ restartable: true }) *reloadResourcesInViewport() {
-        if (!this.map) {
+        if (!this.map && !this.mapManager.isReady) {
             return;
         }
-
-        // Get current map bounds
-        const bounds = this.map.getBounds();
-        const params = {
-            bounds: [bounds.getSouth(), bounds.getWest(), bounds.getNorth(), bounds.getEast()],
-        };
+        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 };
 
         // Reload spatially-filtered resources (drivers, vehicles, places)
         // Orders, routes, and service-areas are not spatially filtered
@@ -272,6 +295,10 @@ export default class MapLeafletLiveMapComponent extends Component {
         return this.ready === true;
     }
 
+    get shouldUseGoogleMaps() {
+        return this.mapSettings.isGoogleMaps;
+    }
+
     /**
      * Get valid zoom level for map initialization
      * @returns {number} Valid zoom level between 1-20
@@ -372,46 +399,93 @@ export default class MapLeafletLiveMapComponent extends Component {
         set(map, 'livemap', this);
         this.map = map;
         this.leafletMapManager.setMap(map);
+        this.mapManager.setLivemap(this);
+        // Also register with the provider-agnostic manager so all services can use it
+        this.mapManager.setActiveProvider('leaflet');
+        this.mapManager.setMapInstance(map);
+        this.universe.trigger('fleet-ops.live-map.loaded', map);
+        this.universe.set('component:fleet-ops:live-map', this);
+    }
+
+    /**
+     * Called when the Google Maps adapter initialises.
+     * Registers the adapter as the active provider so all services
+     * route through the provider-agnostic MapManagerService.
+     *
+     * @param {import('../services/map-manager').default} adapter
+     */
+    #setMapFromAdapter(map) {
+        this.map = map;
+        this.mapManager.setLivemap(this);
+        this.mapManager.setActiveProvider('google');
         this.universe.trigger('fleet-ops.live-map.loaded', map);
         this.universe.set('component:fleet-ops:live-map', this);
     }
 
+    #serializeBoundsForRequest(rawBounds) {
+        if (!rawBounds) return null;
+
+        if (isArray(rawBounds) && rawBounds.length === 2) {
+            const [[south, west], [north, east]] = rawBounds;
+            return [south, west, north, east].every(Number.isFinite) ? [south, west, north, east] : null;
+        }
+
+        if (typeof rawBounds.getSouth === 'function') {
+            const bounds = [rawBounds.getSouth(), rawBounds.getWest(), rawBounds.getNorth(), rawBounds.getEast()];
+            return bounds.every(Number.isFinite) ? bounds : null;
+        }
+
+        if (typeof rawBounds.getSouthWest === 'function') {
+            const sw = rawBounds.getSouthWest();
+            const ne = rawBounds.getNorthEast();
+            const bounds = [sw.lat(), sw.lng(), ne.lat(), ne.lng()];
+            return bounds.every(Number.isFinite) ? bounds : null;
+        }
+
+        return null;
+    }
+
     #setResourceLayer(model, layer, options = {}) {
         const { hidden = false } = options;
         const type = getModelName(model);
-
+        // Leaflet backward-compat: keep leafletLayer for existing code
         set(model, 'leafletLayer', layer);
         set(layer, 'record_id', model.id);
         set(layer, 'record_type', type);
-
         this.leafletLayerVisibilityManager.registerLayer(pluralize(type), layer, { id: model.id, hidden });
+
+        if (type === 'service-area' || type === 'zone') {
+            this.mapManager.registerPolygon?.(model.id, layer, { type, hidden });
+        } else {
+            this.mapManager.registerMarker?.(model.id, layer, { type, hidden });
+        }
     }
 
     #createMapContextMenu(map) {
         const items = [
             {
                 text: this.intl.t('live-map.show-coordinates'),
-                callback: this.leafletMapManager.showCoordinates,
+                callback: this.mapManager.showCoordinates?.bind(this.mapManager) ?? this.leafletMapManager.showCoordinates,
                 index: 0,
             },
             {
                 text: this.intl.t('live-map.center-map'),
-                callback: this.leafletMapManager.centerMap,
+                callback: this.mapManager.centerMap?.bind(this.mapManager) ?? this.leafletMapManager.centerMap,
                 index: 1,
             },
             {
                 text: this.intl.t('live-map.zoom-in'),
-                callback: this.leafletMapManager.zoomIn,
+                callback: this.mapManager.zoomIn?.bind(this.mapManager) ?? this.leafletMapManager.zoomIn,
                 index: 2,
             },
             {
                 text: this.intl.t('live-map.zoom-out'),
-                callback: this.leafletMapManager.zoomOut,
+                callback: this.mapManager.zoomOut?.bind(this.mapManager) ?? this.leafletMapManager.zoomOut,
                 index: 3,
             },
             {
                 text: this.intl.t('live-map.toggle-draw-controls'),
-                callback: this.leafletMapManager.toggleDrawControl,
+                callback: this.geofence.toggleDrawControl.bind(this.geofence),
                 index: 4,
             },
             { separator: true },
@@ -445,16 +519,19 @@ export default class MapLeafletLiveMapComponent extends Component {
                 text: this.intl.t('live-map.edit-zone', { zoneName: zone.name }),
                 callback: () => this.zoneActions.modal.edit(zone),
             },
-            {
-                text: this.intl.t('live-map.edit-boundaries', { resource: zone.name }),
-                callback: () => this.geofence.editZone(zone),
-            },
             {
                 text: this.intl.t('live-map.delete-zone', { zoneName: zone.name }),
                 callback: () => this.zoneActions.delete(zone),
             },
         ];
 
+        if (!this.mapManager.isGoogleMaps) {
+            items.splice(2, 0, {
+                text: this.intl.t('live-map.edit-boundaries', { resource: zone.name }),
+                callback: () => this.geofence.editZone(zone),
+            });
+        }
+
         // create contextmenu registry
         const contextmenuRegistry = this.leafletContextmenuManager.createContextMenu(`zone:${zone.public_id}`, layer, items, { zone });
         this.universe.trigger('fleet-ops:contextmenu:zone:created', contextmenuRegistry, this.leafletContextmenuManager);
@@ -479,16 +556,19 @@ export default class MapLeafletLiveMapComponent extends Component {
                 text: this.intl.t('live-map.edit-service', { serviceName: serviceArea.name }),
                 callback: () => this.serviceAreaActions.modal.edit(serviceArea),
             },
-            {
-                text: this.intl.t('live-map.edit-boundaries', { resource: serviceArea.name }),
-                callback: () => this.geofence.editServiceArea(serviceArea),
-            },
             {
                 text: this.intl.t('live-map.delete-service', { serviceName: serviceArea.name }),
                 callback: () => this.serviceAreaActions.delete(serviceArea),
             },
         ];
 
+        if (!this.mapManager.isGoogleMaps) {
+            items.splice(4, 0, {
+                text: this.intl.t('live-map.edit-boundaries', { resource: serviceArea.name }),
+                callback: () => this.geofence.editServiceArea(serviceArea),
+            });
+        }
+
         // create contextmenu registry
         const contextmenuRegistry = this.leafletContextmenuManager.createContextMenu(`service-area:${serviceArea.public_id}`, layer, items, { serviceArea });
         this.universe.trigger('fleet-ops:contextmenu:service-area:created', contextmenuRegistry, this.leafletContextmenuManager);

package/addon/components/map/toolbar/visibility-control-panel.js

@@ -6,13 +6,13 @@ import { calculateInPlacePosition } from 'ember-basic-dropdown/utils/calculate-p
 
 export default class MapToolbarVisibilityControlPanel extends Component {
     @service leafletLayerVisibilityManager;
-    @service leafletMapManager;
+    @service mapManager;
     @tracked areVehiclesHidden = false;
     @tracked arePlacesHidden = false;
     @tracked areDriversHidden = false;
 
     get livemap() {
-        return this.leafletMapManager?._livemap ?? {};
+        return this.mapManager.livemap ?? {};
     }
 
     get vehicles() {

package/addon/components/map/toolbar/zones-panel.hbs

@@ -6,9 +6,9 @@
     </div>
     <div class="next-dd-menu-seperator"></div>
     <div class="px-1">
-        <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn @dd this.geofence.createServiceArea)}}>{{t "map.zones-panel.create-service"}}</a>
-        <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn @dd this.geofence.showAllServiceAreas)}}>{{t "map.zones-panel.show"}}</a>
-        <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn @dd this.geofence.hideAllServiceAreas)}}>{{t "map.zones-panel.hide"}}</a>
+        <a href="javascript:;" class="next-dd-item truncate w-full" {{on "click" (dropdown-fn @dd this.geofence.createServiceArea)}}>{{t "map.zones-panel.create-service"}}</a>
+        <a href="javascript:;" class="next-dd-item truncate w-full" {{on "click" (dropdown-fn @dd this.geofence.showAllServiceAreas)}}>{{t "map.zones-panel.show"}}</a>
+        <a href="javascript:;" class="next-dd-item truncate w-full" {{on "click" (dropdown-fn @dd this.geofence.hideAllServiceAreas)}}>{{t "map.zones-panel.hide"}}</a>
         {{#each this.serviceAreaActions.serviceAreas as |serviceArea|}}
             <BasicDropdownHover @horizontalPosition="right" @calculatePosition={{this.calculatePosition}} @renderInPlace={{true}} as |dd|>
                 <dd.Trigger class="next-dd-item {{if dd.isOpen 'active'}}">
@@ -26,24 +26,24 @@
                         <div class="next-dd-menu-seperator"></div>
                         <div class="px-1">
                             {{#if (is-model-leaflet-layer-hidden serviceArea)}}
-                                <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.geofence.focusServiceArea serviceArea)}}>
+                                <a href="javascript:;" class="next-dd-item truncate w-full" {{on "click" (dropdown-fn dd this.geofence.focusServiceArea serviceArea)}}>
                                     <span>{{t "map.zones-panel.focus-resource" resource=serviceArea.name}}</span>
                                 </a>
                             {{else}}
-                                <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.geofence.blurServiceArea serviceArea)}}>
+                                <a href="javascript:;" class="next-dd-item truncate w-full" {{on "click" (dropdown-fn dd this.geofence.blurServiceArea serviceArea)}}>
                                     <span>{{t "map.zones-panel.blur-resource" resource=serviceArea.name}}</span>
                                 </a>
                             {{/if}}
-                            <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.geofence.createZone serviceArea)}}>
+                            <a href="javascript:;" class="next-dd-item truncate w-full" {{on "click" (dropdown-fn dd this.geofence.createZone serviceArea)}}>
                                 <span>{{t "map.zones-panel.create-zone-inside" serviceAreaName=serviceArea.name}}</span>
                             </a>
-                            <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.serviceAreaActions.modal.edit serviceArea)}}>
+                            <a href="javascript:;" class="next-dd-item truncate w-full" {{on "click" (dropdown-fn dd this.serviceAreaActions.modal.edit serviceArea)}}>
                                 <span>{{t "common.edit-resource-name" resourceName=serviceArea.name}}</span>
                             </a>
-                            <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.geofence.editServiceArea serviceArea)}}>
+                            <a href="javascript:;" class="next-dd-item truncate w-full" {{on "click" (dropdown-fn dd this.geofence.editServiceArea serviceArea)}}>
                                 <span>{{t "map.zones-panel.edit-boundaries" resource=serviceArea.name}}</span>
                             </a>
-                            <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.serviceAreaActions.delete serviceArea)}}>
+                            <a href="javascript:;" class="next-dd-item truncate w-full" {{on "click" (dropdown-fn dd this.serviceAreaActions.delete serviceArea)}}>
                                 <span>{{t "common.delete-resource-name" resourceName=serviceArea.name}}</span>
                             </a>
                         </div>

package/addon/components/map/toolbar.hbs

@@ -1,12 +1,12 @@
 <div class="next-map-container-toolbar-container {{if @horizontal 'toolbar-container-horizontal'}} {{if (eq @position 'bottom') 'position-bottom'}}" ...attributes>
     <div class="next-map-container-toolbar next-map-container-toolbar-zoom-control">
         <div id="map-toolbar-zoom-in-button-wrapper">
-            <button type="button" id="map-toolbar-zoom-in-button" class="toolbar-button" {{on "click" this.leafletMapManager.zoomIn}}>
+            <button type="button" id="map-toolbar-zoom-in-button" class="toolbar-button" {{on "click" this.zoomIn}}>
                 <FaIcon @icon="plus" @prefix="fas" class="text-gray-100" />
             </button>
         </div>
         <div id="map-toolbar-zoom-out-button-wrapper">
-            <button type="button" class="toolbar-button" {{on "click" this.leafletMapManager.zoomOut}}>
+            <button type="button" class="toolbar-button" {{on "click" this.zoomOut}}>
                 <FaIcon @icon="minus" id="map-toolbar-zoom-out-button" @prefix="fas" class="text-gray-100" />
             </button>
         </div>
@@ -87,4 +87,4 @@
             </Attach::Tooltip>
         </button>
     </div>
-</div>
+</div>

package/addon/components/map/toolbar.js

@@ -6,7 +6,7 @@ import { debug } from '@ember/debug';
 import { task } from 'ember-concurrency';
 
 export default class MapToolbarComponent extends Component {
-    @service leafletMapManager;
+    @service mapManager;
     @service orderListOverlay;
     @service mapDrawer;
     @service globalSearch;
@@ -30,6 +30,14 @@ export default class MapToolbarComponent extends Component {
         return { style };
     }
 
+    @action zoomIn() {
+        return this.mapManager.zoomIn?.();
+    }
+
+    @action zoomOut() {
+        return this.mapManager.zoomOut?.();
+    }
+
     @task *getActiveOrderCount() {
         try {
             const count = yield this.fetch.get('fleet-ops/metrics', { discover: ['orders_in_progress'] });

package/addon/components/modals/map-layer-form.hbs

@@ -1,67 +1,136 @@
 <Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
-    <div class="modal-body-container">
-        <div class="mb-4 border border-gray-700 shadow-sm rounded-md pt-2 px-4">
-            <InputGroup @name={{t "modals.map-layer-form.layer-type"}} @helpText={{t "modals.map-layer-form.layer-type-text"}}>
-                <Select
-                    @options={{@options.layerTypes}}
-                    @value={{@options.selectedLayerType}}
-                    @onSelect={{fn (mut @options.selectedLayerType)}}
-                    @placeholder={{t "modals.map-layer-form.select-layer-type"}}
-                    class="w-full"
+    <div>
+        <ContentPanel @title={{if (eq @options.selectedLayerType "Zone") "Zone Details" "Service Area Details"}} @open={{true}} @wrapperClass="bordered-top">
+            <div class="space-y-2">
+                <InputGroup @name={{t "modals.map-layer-form.layer-type"}} @helpText={{t "modals.map-layer-form.layer-type-text"}}>
+                    <Select
+                        @options={{@options.layerTypes}}
+                        @value={{@options.selectedLayerType}}
+                        @onSelect={{fn (mut @options.selectedLayerType)}}
+                        @placeholder={{t "modals.map-layer-form.select-layer-type"}}
+                        class="w-full"
+                    />
+                </InputGroup>
+
+                {{#if (eq @options.selectedLayerType "Zone")}}
+                    <InputGroup @name={{t "modals.map-layer-form.service-area"}} @helpText={{t "modals.map-layer-form.service-area-text"}}>
+                        <ModelSelect
+                            @modelName="service-area"
+                            @selectedModel={{@options.layerOptions.service_area}}
+                            @placeholder={{t "modals.map-layer-form.select-service-area"}}
+                            @triggerClass="form-select form-input"
+                            @infiniteScroll={{false}}
+                            @renderInPlace={{true}}
+                            @onChange={{fn (mut @options.layerOptions.service_area)}}
+                            as |model|
+                        >
+                            {{model.name}}
+                        </ModelSelect>
+                    </InputGroup>
+                {{/if}}
+
+                <InputGroup
+                    @value={{@options.layerOptions.name}}
+                    @name="{{@options.selectedLayerType}} Name"
+                    @helpText={{t "modals.map-layer-form.set-name" htmlSafe=true options=@options.selectedLayerType}}
+                    @required={{true}}
                 />
-            </InputGroup>
-        </div>
-        {{#if (eq @options.selectedLayerType "Zone")}}
-            <InputGroup @name={{t "modals.map-layer-form.service-area"}} @helpText={{t "modals.map-layer-form.service-area-text"}}>
-                <ModelSelect
-                    @modelName="service-area"
-                    @selectedModel={{@options.layerOptions.service_area}}
-                    @placeholder={{t "modals.map-layer-form.select-service-area"}}
-                    @triggerClass="form-select form-input"
-                    @infiniteScroll={{false}}
-                    @renderInPlace={{true}}
-                    @onChange={{fn (mut @options.layerOptions.service_area)}}
-                    as |model|
-                >
-                    {{model.name}}
-                </ModelSelect>
-            </InputGroup>
-        {{/if}}
-        <InputGroup
-            @value={{@options.layerOptions.name}}
-            @name="{{@options.selectedLayerType}} Name"
-            @helpText={{t "modals.map-layer-form.set-name" htmlSafe=true options=@options.selectedLayerType}}
-            @required={{true}}
-        />
-        {{#if (eq @options.selectedLayerType "Service Area")}}
-            <InputGroup @name={{t "modals.map-layer-form.service-type"}} @helpText={{t "modals.map-layer-form.service-type-text"}}>
-                <Select
-                    @options={{@options.serviceAreaTypes}}
-                    @value={{@options.layerOptions.type}}
-                    @onSelect={{fn (mut @options.layerOptions.type)}}
-                    @placeholder={{t "modals.map-layer-form.select-service-type"}}
-                    class="w-full"
+
+                {{#if (eq @options.selectedLayerType "Service Area")}}
+                    <InputGroup @name={{t "modals.map-layer-form.service-type"}} @helpText={{t "modals.map-layer-form.service-type-text"}}>
+                        <Select
+                            @options={{@options.serviceAreaTypes}}
+                            @value={{@options.layerOptions.type}}
+                            @onSelect={{fn (mut @options.layerOptions.type)}}
+                            @placeholder={{t "modals.map-layer-form.select-service-type"}}
+                            class="w-full"
+                        />
+                    </InputGroup>
+                {{/if}}
+
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-2">
+                    <InputGroup
+                        @type="color"
+                        @value={{@options.layerOptions.stroke_color}}
+                        @name="{{@options.selectedLayerType}} Border Color"
+                        @helpText={{t "modals.map-layer-form.customize-border" htmlSafe=true options=@options.selectedLayerType}}
+                        class="p-0 border-0 m-0 w-8 h-8 bg-transparent rounded-none"
+                    />
+                    <InputGroup
+                        @type="color"
+                        @value={{@options.layerOptions.color}}
+                        @name="{{@options.selectedLayerType}} Color"
+                        @helpText={{t "modals.map-layer-form.customize-fill-color" htmlSafe=true options=@options.selectedLayerType}}
+                        class="p-0 border-0 m-0 w-8 h-8 bg-transparent rounded-none"
+                    />
+                </div>
+
+                {{#if (eq @options.selectedLayerType "Service Area")}}
+                    <InputGroup @name={{t "modals.map-layer-form.service-area-country"}} @helpText={{t "modals.map-layer-form.service-area-country-text"}}>
+                        <CountrySelect class="w-full form-input" @value={{@options.layerOptions.country}} @onChange={{fn (mut @options.layerOptions.country)}} />
+                    </InputGroup>
+                {{else}}
+                    <InputGroup @name={{t "modals.zone-form.description-zone"}} @helpText={{t "modals.zone-form.optionally"}}>
+                        <Textarea @value={{@options.layerOptions.description}} rows={{3}} type="text" class="w-full form-input" placeholder={{t "modals.zone-form.description-zone"}} />
+                    </InputGroup>
+                {{/if}}
+            </div>
+        </ContentPanel>
+
+        <ContentPanel @title="Geofence Triggers" @open={{true}} @wrapperClass="bordered-top">
+            <div class="space-y-4">
+                <p class="text-sm text-gray-500 dark:text-gray-400">
+                    Configure when this {{if (eq @options.selectedLayerType "Zone") "zone" "service area"}} fires active geofence events. Entry and exit events are dispatched to webhooks, WebSocket channels, and the notification system whenever a driver crosses the boundary.
+                </p>
+
+                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                    <div class="flex items-start space-x-3 p-3 rounded-lg border border-gray-200 dark:border-gray-700">
+                        <div class="flex-shrink-0 mt-0.5">
+                            <Toggle
+                                @isToggled={{@options.layerOptions.trigger_on_entry}}
+                                @onToggle={{fn (mut @options.layerOptions.trigger_on_entry)}}
+                            />
+                        </div>
+                        <div>
+                            <p class="text-sm font-medium text-gray-900 dark:text-white">Trigger on Entry</p>
+                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
+                                Fire a <code class="font-mono">geofence.entered</code> event when a driver enters this {{if (eq @options.selectedLayerType "Zone") "zone" "service area"}}.
+                            </p>
+                        </div>
+                    </div>
+
+                    <div class="flex items-start space-x-3 p-3 rounded-lg border border-gray-200 dark:border-gray-700">
+                        <div class="flex-shrink-0 mt-0.5">
+                            <Toggle
+                                @isToggled={{@options.layerOptions.trigger_on_exit}}
+                                @onToggle={{fn (mut @options.layerOptions.trigger_on_exit)}}
+                            />
+                        </div>
+                        <div>
+                            <p class="text-sm font-medium text-gray-900 dark:text-white">Trigger on Exit</p>
+                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
+                                Fire a <code class="font-mono">geofence.exited</code> event when a driver leaves this {{if (eq @options.selectedLayerType "Zone") "zone" "service area"}}.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+
+                <InputGroup
+                    @name="Dwell Threshold (minutes)"
+                    @value={{@options.layerOptions.dwell_threshold_minutes}}
+                    @type="number"
+                    @placeholder="e.g. 10"
+                    @helpText="Fire a geofence.dwelled event after a driver has been inside this boundary for this many minutes. Leave blank to disable dwell tracking."
                 />
-            </InputGroup>
-        {{/if}}
-        <InputGroup
-            @type="color"
-            @value={{@options.layerOptions.stroke_color}}
-            @name="{{@options.selectedLayerType}} Border Color"
-            @helpText={{t "modals.map-layer-form.customize-border" htmlSafe=true options=@options.selectedLayerType}}
-            class="p-0 border-0 m-0 w-8 h-8 bg-transparent rounded-none"
-        />
-        <InputGroup
-            @type="color"
-            @value={{@options.layerOptions.color}}
-            @name="{{@options.selectedLayerType}} Color"
-            @helpText={{t "modals.map-layer-form.customize-fill-color" htmlSafe=true options=@options.selectedLayerType}}
-            class="p-0 border-0 m-0 w-8 h-8 bg-transparent rounded-none"
-        />
-        {{#if (eq @options.selectedLayerType "Service Area")}}
-            <InputGroup @name={{t "modals.map-layer-form.service-area-country"}} @helpText={{t "modals.map-layer-form.service-area-country-text"}}>
-                <CountrySelect class="w-full form-input" @value={{@options.layerOptions.country}} @onChange={{fn (mut @options.layerOptions.country)}} />
-            </InputGroup>
-        {{/if}}
+
+                <InputGroup
+                    @name="Speed Limit (km/h)"
+                    @value={{@options.layerOptions.speed_limit_kmh}}
+                    @type="number"
+                    @placeholder="e.g. 50"
+                    @helpText="Optional speed limit enforced within this boundary. Leave blank for no limit."
+                />
+            </div>
+        </ContentPanel>
     </div>
-</Modal::Default>
+</Modal::Default>