@fleetbase/fleetops-engine 0.6.55 → 0.6.56

package/addon/controllers/connectivity/telematics/details/sensors.js

@@ -171,6 +171,8 @@ export default class ConnectivityTelematicsDetailsSensorsController extends Cont
                 filterParam: 'type',
                 filterComponent: 'filter/multi-option',
                 filterOptions: fleetOpsOptions('sensorTypes'),
+                filterOptionLabel: 'label',
+                filterOptionValue: 'value',
             },
             {
                 label: 'Device',
@@ -209,6 +211,8 @@ export default class ConnectivityTelematicsDetailsSensorsController extends Cont
                 filterable: true,
                 filterComponent: 'filter/multi-option',
                 filterOptions: fleetOpsOptions('sensorStatuses'),
+                filterOptionLabel: 'label',
+                filterOptionValue: 'value',
             },
             {
                 label: 'Last Reading',

package/addon/controllers/settings/map.js

@@ -19,6 +19,12 @@ export default class SettingsMapController extends Controller {
      * @var {Array}
      */
     @tracked mapProviderOptions = MAP_PROVIDER_OPTIONS;
+    @tracked googleMapsMapTypeOptions = [
+        { label: 'Roadmap', value: 'roadmap' },
+        { label: 'Satellite', value: 'satellite' },
+        { label: 'Hybrid', value: 'hybrid' },
+        { label: 'Terrain', value: 'terrain' },
+    ];
 
     /**
      * The currently-selected map provider key (e.g. 'leaflet' or 'google').
@@ -27,6 +33,9 @@ export default class SettingsMapController extends Controller {
      * @var {String}
      */
     @tracked mapProvider = 'leaflet';
+    @tracked googleMapsMapType = 'roadmap';
+    @tracked showGoogleMapsTrafficLayer = false;
+    @tracked showGoogleMapsTransitLayer = false;
 
     /**
      * Whether settings have been loaded from the server.
@@ -68,6 +77,9 @@ export default class SettingsMapController extends Controller {
     @task *saveSettings() {
         const settings = {
             mapProvider: this.mapProvider,
+            googleMapsMapType: this.googleMapsMapType,
+            showGoogleMapsTrafficLayer: this.showGoogleMapsTrafficLayer,
+            showGoogleMapsTransitLayer: this.showGoogleMapsTransitLayer,
         };
 
         try {
@@ -89,6 +101,9 @@ export default class SettingsMapController extends Controller {
             const response = yield this.mapSettings.load({ force: true });
 
             this.mapProvider = response?.mapProvider ?? 'leaflet';
+            this.googleMapsMapType = response?.googleMapsMapType ?? 'roadmap';
+            this.showGoogleMapsTrafficLayer = Boolean(response?.showGoogleMapsTrafficLayer);
+            this.showGoogleMapsTransitLayer = Boolean(response?.showGoogleMapsTransitLayer);
             this.settingsLoaded = true;
         } catch (error) {
             this.notifications.serverError(error);

package/addon/instance-initializers/register-vroom-allocation.js

@@ -10,7 +10,7 @@
  * Third-party orchestration engines follow the same pattern:
  *   1. Create a service extending OrchestrationEngineInterfaceService
  *   2. Create an instance initializer that calls orchestrationEngine.register()
- *   3. The engine will appear in the FleetOps orchestrator settings dropdown
+ *   3. The engine will appear in the Fleet-Ops orchestrator settings dropdown
  */
 export function initialize(appInstance) {
     const orchestrationEngine = appInstance.lookup('service:orchestration-engine');

package/addon/routes/connectivity/events/details.js

@@ -1,3 +1,28 @@
 import Route from '@ember/routing/route';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
 
-export default class ConnectivityEventsDetailsRoute extends Route {}
+export default class ConnectivityEventsDetailsRoute extends Route {
+    @service abilities;
+    @service hostRouter;
+    @service intl;
+    @service notifications;
+    @service store;
+
+    @action error(error) {
+        this.notifications.serverError(error);
+
+        return this.hostRouter.transitionTo('console.fleet-ops.connectivity.events.index');
+    }
+
+    beforeModel() {
+        if (this.abilities.cannot('fleet-ops view device-event')) {
+            this.notifications.warning(this.intl.t('common.unauthorized-access'));
+            return this.hostRouter.transitionTo('console.fleet-ops.connectivity.events.index');
+        }
+    }
+
+    model({ public_id }) {
+        return this.store.findRecord('device-event', public_id);
+    }
+}

package/addon/routes/management/vehicles/index/details.js

@@ -28,6 +28,8 @@ export default class ManagementVehiclesIndexDetailsRoute extends Route {
     }
 
     afterModel(model) {
-        model.loadDriver();
+        if (model && typeof model.loadDriver === 'function') {
+            model.loadDriver();
+        }
     }
 }

package/addon/services/map-adapter/google.js

@@ -108,6 +108,12 @@ export default class GoogleMapsAdapter extends MapAdapterInterface {
     /** @type {google.maps.ImageMapType|null} */
     _customTileLayer = null;
 
+    /** @type {google.maps.TrafficLayer|null} */
+    _trafficLayer = null;
+
+    /** @type {google.maps.TransitLayer|null} */
+    _transitLayer = null;
+
     /** @type {Map<string, Function[]>} Normalized event name → array of [handler, gmListener] pairs */
     _eventListeners = new Map();
 
@@ -176,6 +182,7 @@ export default class GoogleMapsAdapter extends MapAdapterInterface {
             styles: mergedMapStyles,
         });
 
+        this.#syncGoogleLayers(options);
         await this.#initDrawingManager();
 
         debug('[GoogleMapsAdapter] Map initialized');
@@ -231,6 +238,10 @@ export default class GoogleMapsAdapter extends MapAdapterInterface {
         this._tooltipOverlayView?.setMap?.(null);
         this._tooltipOverlayView = null;
         this._supportsAdvancedMarkers = false;
+        this._trafficLayer?.setMap(null);
+        this._trafficLayer = null;
+        this._transitLayer?.setMap(null);
+        this._transitLayer = null;
 
         this._map = null;
         debug('[GoogleMapsAdapter] Map destroyed');
@@ -1184,6 +1195,20 @@ export default class GoogleMapsAdapter extends MapAdapterInterface {
         }
     }
 
+    #syncGoogleLayers(options = {}) {
+        if (!this._map) return;
+
+        if (options.showTrafficLayer) {
+            this._trafficLayer = new google.maps.TrafficLayer();
+            this._trafficLayer.setMap(this._map);
+        }
+
+        if (options.showTransitLayer) {
+            this._transitLayer = new google.maps.TransitLayer();
+            this._transitLayer.setMap(this._map);
+        }
+    }
+
     #ensureDrawToolbar() {
         if (this._drawControlEl || !this._map) return;
 

package/addon/services/map-adapter/leaflet.js

@@ -3,7 +3,7 @@
  *
  * Implements the MapAdapterInterface using the Leaflet library (via ember-leaflet).
  * This adapter wraps all existing Leaflet-specific logic, preserving 100% of
- * the original FleetOps map functionality while conforming to the provider-agnostic
+ * the original Fleet-Ops map functionality while conforming to the provider-agnostic
  * interface.
  *
  * All Leaflet-specific plugins are supported:

package/addon/services/map-adapter-interface.js

@@ -2,7 +2,7 @@
  * MapAdapterInterface
  *
  * Abstract base class that defines the standardized contract all map provider
- * adapters must implement. This enables FleetOps to support multiple map
+ * adapters must implement. This enables Fleet-Ops to support multiple map
  * providers (Leaflet, Google Maps, Mapbox, etc.) without changing any
  * application-level business logic.
  *

package/addon/services/map-manager.js

@@ -1,7 +1,7 @@
 /**
  * MapManagerService
  *
- * Provider-agnostic central map service for FleetOps. Replaces the
+ * Provider-agnostic central map service for Fleet-Ops. Replaces the
  * Leaflet-specific `leaflet-map-manager` as the single point of contact
  * for all map operations across the application.
  *
@@ -139,6 +139,9 @@ export default class MapManagerService extends Service {
             ...options,
             apiKey: options.apiKey ?? this.mapSettings.googleMapsApiKey,
             mapId: options.mapId ?? this.mapSettings.googleMapsMapId,
+            mapTypeId: options.mapTypeId ?? this.mapSettings.googleMapsMapType,
+            showTrafficLayer: options.showTrafficLayer ?? this.mapSettings.showGoogleMapsTrafficLayer,
+            showTransitLayer: options.showTransitLayer ?? this.mapSettings.showGoogleMapsTransitLayer,
         });
 
         return Promise.resolve(map).then((nativeMap) => {

package/addon/services/map-settings.js

@@ -6,6 +6,9 @@ const DEFAULT_SETTINGS = {
     mapProvider: 'leaflet',
     googleMapsApiKey: '',
     googleMapsMapId: '',
+    googleMapsMapType: 'roadmap',
+    showGoogleMapsTrafficLayer: false,
+    showGoogleMapsTransitLayer: false,
 };
 
 export default class MapSettingsService extends Service {
@@ -26,6 +29,18 @@ export default class MapSettingsService extends Service {
         return this.settings.googleMapsMapId ?? '';
     }
 
+    get googleMapsMapType() {
+        return this.settings.googleMapsMapType ?? 'roadmap';
+    }
+
+    get showGoogleMapsTrafficLayer() {
+        return Boolean(this.settings.showGoogleMapsTrafficLayer);
+    }
+
+    get showGoogleMapsTransitLayer() {
+        return Boolean(this.settings.showGoogleMapsTransitLayer);
+    }
+
     get isGoogleMaps() {
         return this.mapProvider === 'google';
     }

package/addon/styles/fleetops-engine.css

@@ -1,4 +1,4 @@
-/* stylelint-disable alpha-value-notation -- FleetOps lazy engine production CSS is minified by legacy clean-css, which corrupts comma-form rgba() percent alpha values. */
+/* stylelint-disable alpha-value-notation -- Fleet-Ops lazy engine production CSS is minified by legacy clean-css, which corrupts comma-form rgba() percent alpha values. */
 .scheduler-left-sidebar {
     border-right: 1px rgb(229 231 235 / 100%) solid;
     height: 100vh;

package/addon/templates/connectivity/devices/index/details/vehicle.hbs

@@ -1,5 +1,5 @@
 <div class="flex flex-col gap-3 p-3">
-    <div class="flex items-start justify-between gap-3">
+    <div class="flex flex-col items-start justify-between gap-3">
         <div class="min-w-0">
             <h2 class="text-base font-bold text-gray-900 dark:text-gray-100">Vehicle Attachment</h2>
             <p class="mt-0.5 text-xs text-gray-500 dark:text-gray-300">Fleet context for telemetry from this device.</p>
@@ -119,6 +119,7 @@
                 <div class="border-t border-gray-200 dark:border-gray-700">
                     <PositionsReplay @resource={{this.vehicle}} @mapHeight={{180}} class="max-h-[360px] overflow-hidden" />
                 </div>
+                <Spacer @height="150px" />
             {{else}}
                 <div class="p-3">
                     <Telematic::TabEmptyState

package/addon/templates/connectivity/events/details.hbs

@@ -1 +1,40 @@
-{{outlet}}
+<div class="h-full overflow-y-auto bg-gray-50 dark:bg-gray-900">
+    <section class="sticky top-0 z-40 border-b border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-900">
+        <div class="mx-auto flex w-full max-w-7xl flex-col gap-3 px-4 py-3 md:px-6 lg:flex-row lg:items-start lg:justify-between">
+            <div class="min-w-0 flex-1">
+                <div class="flex flex-wrap items-center gap-2">
+                    <h1 class="truncate text-lg font-bold text-gray-900 dark:text-gray-100">{{smart-humanize this.event.event_type}}</h1>
+                    <Badge @status={{this.event.severity}} @hideStatusDot={{true}}>{{smart-humanize this.event.severity}}</Badge>
+                    <Badge @status={{this.processedStatus}} @hideStatusDot={{true}}>{{this.processedLabel}}</Badge>
+                </div>
+                <div class="mt-1 flex flex-wrap gap-2 text-xs text-gray-500 dark:text-gray-300">
+                    <span>{{n-a this.event.public_id}}</span>
+                    <span>Device: {{n-a (or this.event.device_name this.event.device_id this.event.ident)}}</span>
+                    <span>Provider: {{n-a (or this.event.telematic_name this.event.provider)}}</span>
+                    <span>Occurred: {{n-a (format-date-fns this.event.occurred_at "dd MMM yyyy, HH:mm")}}</span>
+                </div>
+            </div>
+
+            <div class="flex shrink-0 flex-row flex-nowrap items-center gap-2 whitespace-nowrap">
+                <Button @icon="arrow-left" @text="Back" @size="xs" @wrapperClass="shrink-0" @onClick={{this.goBack}} />
+                <Button @icon="refresh" @text="Refresh" @size="xs" @wrapperClass="shrink-0" @onClick={{this.refresh}} />
+                {{#unless this.isProcessed}}
+                    <Button
+                        @icon="check"
+                        @text="Mark Processed"
+                        @type="primary"
+                        @size="xs"
+                        @wrapperClass="shrink-0"
+                        @isLoading={{this.isMarkingProcessed}}
+                        @disabled={{this.isMarkingProcessed}}
+                        @onClick={{this.markProcessed}}
+                    />
+                {{/unless}}
+            </div>
+        </div>
+    </section>
+
+    <section class="mx-auto w-full max-w-7xl">
+        <DeviceEvent::Details @resource={{this.event}} />
+    </section>
+</div>

package/addon/templates/settings/map.hbs

@@ -14,15 +14,12 @@
     <div class="container mx-auto h-screen">
         <div class="max-w-3xl my-10 mx-auto space-y-6">
 
-            {{!-- ─── Map Provider Panel ──────────────────────────────────────────── --}}
+            {{! ─── Map Provider Panel ──────────────────────────────────────────── }}
             <ContentPanel @title={{t "settings.map.configure-map"}} @open={{true}} @wrapperClass="bordered-classic">
                 {{#if this.settingsLoaded}}
 
-                    {{!-- Provider selector --}}
-                    <InputGroup
-                        @name={{t "settings.map.map-provider"}}
-                        @helpText={{t "settings.map.map-provider-help-text"}}
-                    >
+                    {{! Provider selector }}
+                    <InputGroup @name={{t "settings.map.map-provider"}} @helpText={{t "settings.map.map-provider-help-text"}}>
                         <Select
                             class="w-full flex-1"
                             @value={{this.mapProvider}}
@@ -34,15 +31,47 @@
                         />
                     </InputGroup>
 
+                    {{#if this.isGoogleMapsSelected}}
+                        <InputGroup @name={{t "settings.map.google-maps-map-type"}} @helpText={{t "settings.map.google-maps-map-type-help-text"}}>
+                            <Select
+                                class="w-full flex-1"
+                                @value={{this.googleMapsMapType}}
+                                @options={{this.googleMapsMapTypeOptions}}
+                                @optionLabel="label"
+                                @optionValue="value"
+                                @placeholder={{t "settings.map.select-map-type"}}
+                                @onSelect={{fn (mut this.googleMapsMapType)}}
+                            />
+                        </InputGroup>
+
+                        <InputGroup>
+                            <Toggle
+                                @label={{t "settings.map.show-traffic-layer"}}
+                                @isToggled={{this.showGoogleMapsTrafficLayer}}
+                                @onToggle={{fn (mut this.showGoogleMapsTrafficLayer)}}
+                                @helpText={{t "settings.map.show-traffic-layer-help-text"}}
+                            />
+                        </InputGroup>
+
+                        <InputGroup>
+                            <Toggle
+                                @label={{t "settings.map.show-transit-layer"}}
+                                @isToggled={{this.showGoogleMapsTransitLayer}}
+                                @onToggle={{fn (mut this.showGoogleMapsTransitLayer)}}
+                                @helpText={{t "settings.map.show-transit-layer-help-text"}}
+                            />
+                        </InputGroup>
+                    {{/if}}
+
                 {{else}}
-                    {{!-- Loading state --}}
+                    {{! Loading state }}
                     <div class="flex items-center justify-center py-8">
                         <Spinner />
                     </div>
                 {{/if}}
             </ContentPanel>
 
-            {{!-- Extension point for third-party panels --}}
+            {{! Extension point for third-party panels }}
             <RegistryYield @registry="fleet-ops:template:settings:map" as |RegistryComponent|>
                 <RegistryComponent @controller={{this}} />
             </RegistryYield>
@@ -50,4 +79,4 @@
         </div>
     </div>
     <Spacer @height="600px" />
-</Layout::Section::Body>
+</Layout::Section::Body>

package/addon/utils/leaflet-plugin-loader.js

@@ -79,7 +79,7 @@ function waitForLeafletGlobal({ timeoutMs = 8000 } = {}) {
 
             if (timeoutMs != null && Date.now() - startedAt >= timeoutMs) {
                 clearInterval(interval);
-                reject(new Error('[FleetOps Leaflet] Leaflet global is not available'));
+                reject(new Error('[Fleet-Ops Leaflet] Leaflet global is not available'));
             }
         }, 50);
     });
@@ -105,7 +105,7 @@ function appendStylesheet(href) {
 
 function loadScript(src, { timeoutMs = 8000, isReady = null } = {}) {
     if (typeof document === 'undefined') {
-        return Promise.reject(new Error('[FleetOps Leaflet] document is not available'));
+        return Promise.reject(new Error('[Fleet-Ops Leaflet] document is not available'));
     }
 
     const existing = findAssetElement('script', 'src', src);
@@ -137,7 +137,7 @@ function loadScript(src, { timeoutMs = 8000, isReady = null } = {}) {
 
         const onError = () => {
             cleanup();
-            reject(new Error(`[FleetOps Leaflet] Failed to load ${src}`));
+            reject(new Error(`[Fleet-Ops Leaflet] Failed to load ${src}`));
         };
 
         script.addEventListener('load', onLoad);
@@ -146,7 +146,7 @@ function loadScript(src, { timeoutMs = 8000, isReady = null } = {}) {
         if (timeoutMs != null) {
             timeoutId = setTimeout(() => {
                 cleanup();
-                reject(new Error(`[FleetOps Leaflet] Timed out loading ${src}`));
+                reject(new Error(`[Fleet-Ops Leaflet] Timed out loading ${src}`));
             }, timeoutMs);
         }
 
@@ -202,7 +202,7 @@ export default function ensureLeafletPluginsReady(options = {}) {
         .then(() => {
             const readyLeaflet = normalizeLeafletGlobal();
             if (!hasLeafletPluginsReady()) {
-                throw new Error('[FleetOps Leaflet] Leaflet plugins loaded but required Draw/contextmenu APIs are missing');
+                throw new Error('[Fleet-Ops Leaflet] Leaflet plugins loaded but required Draw/contextmenu APIs are missing');
             }
 
             window.fleetopsLeafletPluginsLoaded = true;

package/addon/utils/route-colors.js

@@ -2,7 +2,7 @@
  * Route Colors Utility
  *
  * Provides deterministic color assignment, color manipulation helpers,
- * and status-based route line styling for the FleetOps map visualization.
+ * and status-based route line styling for the Fleet-Ops map visualization.
  */
 
 /**

package/app/components/device-event/details.hbs

@@ -0,0 +1,192 @@
+<div class="flex flex-col gap-3 p-3" ...attributes>
+    <section class="overflow-hidden rounded-md border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800">
+        <div class="flex flex-col gap-3 p-3 lg:flex-row lg:items-start lg:justify-between">
+            <div class="min-w-0">
+                <div class="flex flex-wrap items-center gap-2">
+                    <h2 class="truncate text-base font-bold text-gray-900 dark:text-gray-100">{{smart-humanize this.eventType}}</h2>
+                    <Badge @status={{this.severity}} @hideStatusDot={{true}}>{{smart-humanize this.severity}}</Badge>
+                    <Badge @status={{this.processedStatus}} @hideStatusDot={{true}}>{{this.processedLabel}}</Badge>
+                </div>
+
+                <p class="mt-2 max-w-4xl text-sm leading-5 text-gray-700 dark:text-gray-200">{{n-a this.message}}</p>
+
+                <div class="mt-2 flex flex-wrap gap-2 text-xs text-gray-500 dark:text-gray-300">
+                    <span>Occurred: {{n-a (format-date-fns this.occurredAt "dd MMM yyyy, HH:mm")}}</span>
+                    <span>Processed: {{n-a (format-date-fns this.processedAt "dd MMM yyyy, HH:mm")}}</span>
+                    <span>Public ID: {{n-a @resource.public_id}}</span>
+                    <span>UUID: {{n-a @resource.id}}</span>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-4">
+        {{#each this.metrics as |metric|}}
+            <div class="fleet-ops-widget fleet-ops-kpi-tile fleetops-connectivity-kpi-tile {{metric.accentClass}} relative min-h-[82px] overflow-hidden rounded-md border bg-white shadow-sm dark:bg-gray-800">
+                <div class="flex h-full items-start justify-between gap-2 p-3">
+                    <div class="min-w-0">
+                        <div class="truncate text-[10px] font-bold uppercase text-gray-500 dark:text-gray-400">{{metric.label}}</div>
+                        <div class="mt-1 truncate text-lg font-extrabold leading-none text-gray-900 dark:text-gray-50">{{n-a metric.value}}</div>
+                        {{#if metric.meta}}
+                            <div class="mt-1 truncate text-xs text-gray-500 dark:text-gray-300">{{metric.meta}}</div>
+                        {{/if}}
+                    </div>
+                    <div class="fleetops-connectivity-kpi-icon flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md text-[13px]">
+                        <FaIcon @icon={{metric.icon}} />
+                    </div>
+                </div>
+            </div>
+        {{/each}}
+    </section>
+
+    <section class="grid grid-cols-1 gap-3 xl:grid-cols-2">
+        <div class="overflow-hidden rounded-md border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800">
+            <div class="border-b border-gray-200 px-3 py-2 dark:border-gray-700">
+                <h3 class="text-sm font-bold text-gray-900 dark:text-gray-100">Event Details</h3>
+            </div>
+            <div class="grid grid-cols-1 gap-2 p-3 sm:grid-cols-2 lg:grid-cols-3">
+                <div class="field-info-container">
+                    <div class="field-name">Event Type</div>
+                    <div class="field-value">{{n-a (smart-humanize this.eventType)}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Severity</div>
+                    <div class="field-value"><Badge @status={{this.severity}}>{{smart-humanize this.severity}}</Badge></div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">State</div>
+                    <div class="field-value">{{n-a (smart-humanize @resource.state)}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Code</div>
+                    <div class="field-value">{{n-a @resource.code}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Reason</div>
+                    <div class="field-value">{{n-a @resource.reason}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Mileage</div>
+                    <div class="field-value">{{n-a @resource.mileage}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Age</div>
+                    <div class="field-value">{{#if this.ageMinutes}}{{this.ageMinutes}} minutes{{else}}{{n-a null}}{{/if}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Processing Delay</div>
+                    <div class="field-value">{{#if this.processingDelay}}{{this.processingDelay}} minutes{{else}}{{n-a null}}{{/if}}</div>
+                </div>
+                <div class="field-info-container sm:col-span-2 lg:col-span-3">
+                    <div class="field-name">Comment</div>
+                    <div class="field-value whitespace-pre-line">{{n-a @resource.comment}}</div>
+                </div>
+            </div>
+        </div>
+
+        <div class="overflow-hidden rounded-md border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800">
+            <div class="border-b border-gray-200 px-3 py-2 dark:border-gray-700">
+                <h3 class="text-sm font-bold text-gray-900 dark:text-gray-100">Device & Provider</h3>
+            </div>
+            <div class="grid grid-cols-1 gap-2 p-3 sm:grid-cols-2 lg:grid-cols-3">
+                <div class="field-info-container">
+                    <div class="field-name">Device</div>
+                    <div class="field-value">
+                        {{#if this.deviceRouteModel}}
+                            <button
+                                type="button"
+                                class="text-blue-600 hover:text-blue-700 hover:underline dark:text-blue-300 dark:hover:text-blue-200"
+                                data-test-device-event-device-link
+                                {{on "click" this.openDevice}}
+                            >
+                                {{n-a this.deviceName}}
+                            </button>
+                        {{else}}
+                            {{n-a this.deviceName}}
+                        {{/if}}
+                    </div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Device UUID</div>
+                    <div class="field-value">{{n-a @resource.device_uuid}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Device ID</div>
+                    <div class="field-value">{{n-a @resource.device_id}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">IMEI</div>
+                    <div class="field-value">{{n-a @resource.device_imei}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Serial Number</div>
+                    <div class="field-value">{{n-a @resource.device_serial_number}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">IDENT</div>
+                    <div class="field-value">{{n-a @resource.ident}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Provider</div>
+                    <div class="field-value">
+                        {{#if this.telematicRouteModel}}
+                            <button
+                                type="button"
+                                class="text-blue-600 hover:text-blue-700 hover:underline dark:text-blue-300 dark:hover:text-blue-200"
+                                data-test-device-event-telematic-link
+                                {{on "click" this.openTelematic}}
+                            >
+                                {{n-a this.providerLabel}}
+                            </button>
+                        {{else}}
+                            {{n-a this.providerLabel}}
+                        {{/if}}
+                    </div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Protocol</div>
+                    <div class="field-value">{{n-a @resource.protocol}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Telematic UUID</div>
+                    <div class="field-value">{{n-a @resource.telematic_uuid}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Device Status</div>
+                    <div class="field-value" data-test-device-event-device-status>
+                        {{#if this.deviceStatus}}
+                            <Badge @status={{this.deviceStatus}}>{{smart-humanize this.deviceStatus}}</Badge>
+                        {{else}}
+                            {{n-a null}}
+                        {{/if}}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="grid grid-cols-1 gap-3 xl:grid-cols-3">
+        <div class="overflow-hidden rounded-md border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800">
+            <div class="border-b border-gray-200 px-3 py-2 dark:border-gray-700">
+                <h3 class="text-sm font-bold text-gray-900 dark:text-gray-100">Payload</h3>
+            </div>
+            <pre class="max-h-80 overflow-auto bg-gray-900 p-3 text-[11px] leading-5 text-gray-100">{{n-a this.payloadJson}}</pre>
+        </div>
+
+        <div class="overflow-hidden rounded-md border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800">
+            <div class="border-b border-gray-200 px-3 py-2 dark:border-gray-700">
+                <h3 class="text-sm font-bold text-gray-900 dark:text-gray-100">Data</h3>
+            </div>
+            <pre class="max-h-80 overflow-auto bg-gray-900 p-3 text-[11px] leading-5 text-gray-100">{{n-a this.dataJson}}</pre>
+        </div>
+
+        <div class="overflow-hidden rounded-md border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800">
+            <div class="border-b border-gray-200 px-3 py-2 dark:border-gray-700">
+                <h3 class="text-sm font-bold text-gray-900 dark:text-gray-100">Meta</h3>
+            </div>
+            <pre class="max-h-80 overflow-auto bg-gray-900 p-3 text-[11px] leading-5 text-gray-100">{{n-a this.metaJson}}</pre>
+        </div>
+    </section>
+
+    <CustomField::Yield @subject={{@resource}} @viewMode={{true}} @wrapperClass="bordered-top" />
+</div>

package/app/components/device-event/details.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/fleetops-engine/components/device-event/details';

package/composer.json

@@ -1,6 +1,6 @@
 {
     "name": "fleetbase/fleetops-api",
-    "version": "0.6.55",
+    "version": "0.6.56",
     "description": "Fleet & Transport Management Extension for Fleetbase",
     "keywords": [
         "fleetbase-extension",

package/extension.json

@@ -1,6 +1,6 @@
 {
     "name": "Fleet-Ops",
-    "version": "0.6.55",
+    "version": "0.6.56",
     "description": "Fleet & Transport Management Extension for Fleetbase",
     "repository": "https://github.com/fleetbase/fleetops",
     "license": "AGPL-3.0-or-later",