@fleetbase/fleetops-engine 0.6.54 → 0.6.56

package/addon/components/device/panel-tabs/sensors.hbs

@@ -0,0 +1,30 @@
+<div class="flex flex-col gap-3 p-3" ...attributes>
+    <div class="flex items-start justify-between gap-3">
+        <div class="min-w-0">
+            <h2 class="text-base font-bold text-gray-900 dark:text-gray-100">Sensor Inventory</h2>
+            <p class="mt-0.5 text-xs text-gray-500 dark:text-gray-300">Recent sensor readings and health for this device.</p>
+        </div>
+        <Button @icon="refresh" @size="xs" @onClick={{this.refreshSensors}} @isLoading={{this.loadSensors.isRunning}} />
+    </div>
+
+    <Layout::Resource::Tabular
+        @resource="sensor"
+        @title="Device Sensors"
+        @data={{this.sensors}}
+        @columns={{this.columns}}
+        @controller={{this}}
+        @pagination={{false}}
+        @withoutHeader={{true}}
+        @tableWrapperClass="no-table-extra-spacing"
+        @emptyStateComponent={{component
+            "table/empty-state"
+            variant="compact"
+            icon="gauge-high"
+            title="No sensors connected"
+            description="Sensors appear here after provider telemetry links them to this device."
+            primaryText="Refresh"
+            primaryIcon="refresh"
+            primaryAction=this.refreshSensors
+        }}
+    />
+</div>

package/addon/components/device/panel-tabs/sensors.js

@@ -0,0 +1,93 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { task } from 'ember-concurrency';
+
+function toRecentList(records) {
+    const list = Array.from(records ?? []);
+
+    list.meta = {
+        current_page: 1,
+        last_page: 1,
+        per_page: list.length,
+        total: list.length,
+        from: list.length > 0 ? 1 : 0,
+        to: list.length,
+    };
+
+    return list;
+}
+
+export default class DevicePanelTabsSensorsComponent extends Component {
+    @service sensorActions;
+    @service store;
+
+    @tracked sensors = toRecentList();
+
+    constructor() {
+        super(...arguments);
+        this.loadSensors.perform();
+    }
+
+    get device() {
+        return this.args.resource ?? this.args.model;
+    }
+
+    get columns() {
+        return [
+            {
+                sticky: true,
+                label: 'Sensor',
+                valuePath: 'name',
+                cellComponent: 'table/cell/anchor',
+                action: this.sensorActions.panel?.view ?? this.sensorActions.transition.view,
+                permission: 'fleet-ops view sensor',
+                resizable: true,
+            },
+            {
+                label: 'Type',
+                valuePath: 'type',
+                cellComponent: 'table/cell/base',
+                humanize: true,
+                resizable: true,
+            },
+            {
+                label: 'Value',
+                valuePath: 'last_value',
+                resizable: true,
+            },
+            {
+                label: 'Unit',
+                valuePath: 'unit',
+                resizable: true,
+            },
+            {
+                label: 'Status',
+                valuePath: 'status',
+                cellComponent: 'table/cell/status',
+                resizable: true,
+            },
+            {
+                label: 'Last Reading',
+                valuePath: 'lastReadingAt',
+                sortParam: 'last_reading_at',
+                resizable: true,
+            },
+        ];
+    }
+
+    @action refreshSensors() {
+        return this.loadSensors.perform();
+    }
+
+    @task *loadSensors() {
+        if (!this.device?.id) {
+            this.sensors = toRecentList();
+            return;
+        }
+
+        const sensors = yield this.store.query('sensor', { device_uuid: this.device.id, limit: 10, sort: '-updated_at' });
+        this.sensors = toRecentList(sensors);
+    }
+}

package/addon/components/device/panel-tabs/vehicle.hbs

@@ -0,0 +1,68 @@
+<div class="flex flex-col gap-3 p-3" ...attributes>
+    <div class="flex 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>
+        </div>
+        <div class="flex flex-wrap items-center justify-end gap-2">
+            {{#if this.hasVehicle}}
+                {{#if this.canOpenVehicle}}
+                    <Button @icon="eye" @text="Open Vehicle" @size="xs" @onClick={{this.openVehicle}} />
+                {{/if}}
+                {{#if this.canLocateVehicle}}
+                    <Button @icon="location-dot" @text="Locate" @size="xs" @onClick={{this.locateVehicle}} />
+                {{/if}}
+                <Button @icon="shuffle" @text="Change Vehicle" @size="xs" @onClick={{this.attachToVehicle}} />
+                <Button @icon="unlink" @text="Detach" @size="xs" @type="danger" @onClick={{this.detachFromVehicle}} />
+            {{else}}
+                <Button @icon="link" @text="Attach Vehicle" @size="xs" @onClick={{this.attachToVehicle}} />
+            {{/if}}
+        </div>
+    </div>
+
+    {{#if this.hasVehicle}}
+        <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 gap-3 p-3">
+                <Image
+                    src={{this.vehiclePhotoUrl}}
+                    @fallbackSrc={{config "defaultValues.vehicleAvatar"}}
+                    alt={{this.vehicleName}}
+                    class="h-16 w-16 flex-shrink-0 rounded-md object-cover shadow-sm"
+                />
+                <div class="min-w-0 flex-1">
+                    <div class="flex flex-wrap items-center gap-2">
+                        <h3 class="truncate text-base font-bold text-gray-900 dark:text-gray-100">{{this.vehicleName}}</h3>
+                        {{#if this.vehicleStatus}}
+                            <Badge @status={{this.vehicleStatus}} @size="xs">{{smart-humanize this.vehicleStatus}}</Badge>
+                        {{/if}}
+                    </div>
+                    <div class="mt-1 text-xs text-gray-500 dark:text-gray-300">{{n-a this.vehicleSubtitle}}</div>
+                    <div class="mt-3 grid grid-cols-1 gap-2 text-xs sm:grid-cols-3">
+                        <div>
+                            <div class="font-semibold uppercase text-gray-400 dark:text-gray-500">Driver</div>
+                            <div class="truncate text-gray-800 dark:text-gray-100">{{n-a this.vehicleDriverName}}</div>
+                        </div>
+                        <div>
+                            <div class="font-semibold uppercase text-gray-400 dark:text-gray-500">Attached Device</div>
+                            <div class="truncate text-gray-800 dark:text-gray-100">{{n-a this.device.displayName this.device.name}}</div>
+                        </div>
+                        <div>
+                            <div class="font-semibold uppercase text-gray-400 dark:text-gray-500">Device Last Seen</div>
+                            <div class="truncate text-gray-800 dark:text-gray-100">{{n-a (format-date-fns this.device.last_online_at "dd MMM yyyy, HH:mm")}}</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    {{else}}
+        <Telematic::TabEmptyState
+            @tone="warning"
+            @icon="link-slash"
+            @title="No vehicle attached"
+            @message="Attach this device to a vehicle so telemetry has fleet context."
+            @primaryText="Attach Vehicle"
+            @primaryIcon="link"
+            @primaryAction={{this.attachToVehicle}}
+        />
+    {{/if}}
+</div>

package/addon/components/device/panel-tabs/vehicle.js

@@ -0,0 +1,90 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+
+export default class DevicePanelTabsVehicleComponent extends Component {
+    @service deviceActions;
+    @service hostRouter;
+    @service mapManager;
+    @service vehicleActions;
+
+    get device() {
+        return this.args.resource ?? this.args.model;
+    }
+
+    get vehicle() {
+        return this.device?.attachable;
+    }
+
+    get vehicleName() {
+        return this.device?.attached_to_name ?? this.vehicle?.displayName ?? this.vehicle?.display_name ?? this.vehicle?.name;
+    }
+
+    get vehicleSubtitle() {
+        return this.vehicle?.plate_number ?? this.vehicle?.call_sign ?? this.vehicle?.vin ?? this.vehicle?.public_id ?? this.device?.attachable_uuid;
+    }
+
+    get vehiclePhotoUrl() {
+        return this.vehicle?.photo_url ?? this.vehicle?.avatar_url;
+    }
+
+    get vehicleStatus() {
+        return this.vehicle?.status ?? (this.vehicle?.online ? 'online' : null);
+    }
+
+    get vehicleDriverName() {
+        return this.vehicle?.driver?.displayName ?? this.vehicle?.driver?.display_name ?? this.vehicle?.driver?.name ?? this.vehicle?.driver_name;
+    }
+
+    get hasVehicle() {
+        return Boolean(this.vehicleName || this.device?.attachable_uuid);
+    }
+
+    get canOpenVehicle() {
+        return Boolean(this.vehicle?.id);
+    }
+
+    get canLocateVehicle() {
+        return Boolean(this.vehicle?.id && (this.vehicle?.location || this.vehicle?.last_position));
+    }
+
+    @action attachToVehicle() {
+        return this.deviceActions.attachToVehicle(this.device, { callback: () => this.device?.reload?.() });
+    }
+
+    @action detachFromVehicle() {
+        return this.deviceActions.detachFromVehicle(this.device, { callback: () => this.device?.reload?.() });
+    }
+
+    @action openVehicle() {
+        if (this.vehicle?.id) {
+            return this.vehicleActions.panel?.view
+                ? this.vehicleActions.panel.view(this.vehicle)
+                : this.hostRouter.transitionTo('console.fleet-ops.management.vehicles.index.details', this.vehicle);
+        }
+    }
+
+    @action async locateVehicle() {
+        if (!this.vehicle?.id) {
+            return;
+        }
+
+        await this.transitionToLiveMap();
+        await this.mapManager.waitForMap({ timeoutMs: 8000 });
+
+        this.mapManager.focusResource(this.vehicle, 16, {
+            paddingBottomRight: [300, 200],
+            moveend: () => {
+                this.vehicleActions.panel?.view?.(this.vehicle, { closeOnTransition: true });
+            },
+        });
+    }
+
+    async transitionToLiveMap() {
+        try {
+            await this.hostRouter.transitionTo('console.fleet-ops.operations.orders.index', { queryParams: { layout: 'map' } });
+        } catch (_) {
+            // Keep locate usable if another transition is already active.
+        }
+    }
+}

package/addon/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/addon/components/device-event/details.js

@@ -0,0 +1,151 @@
+import Component from '@glimmer/component';
+import { action, get } from '@ember/object';
+import { inject as service } from '@ember/service';
+
+const warningSeverities = ['warning', 'error', 'critical', 'high'];
+
+function firstPresent(...values) {
+    return values.find((value) => value !== undefined && value !== null && value !== '');
+}
+
+function prettyJson(value) {
+    if (!value) {
+        return null;
+    }
+
+    if (typeof value === 'string') {
+        try {
+            return JSON.stringify(JSON.parse(value), null, 2);
+        } catch {
+            return value;
+        }
+    }
+
+    return JSON.stringify(value, null, 2);
+}
+
+export default class DeviceEventDetailsComponent extends Component {
+    @service hostRouter;
+
+    get resource() {
+        return this.args.resource ?? {};
+    }
+
+    get eventType() {
+        return firstPresent(get(this.resource, 'event_type'), get(this.resource, 'eventType'), get(this.resource, 'type'));
+    }
+
+    get severity() {
+        return firstPresent(get(this.resource, 'severity'), 'info');
+    }
+
+    get isProcessed() {
+        return Boolean(firstPresent(get(this.resource, 'processed_at'), get(this.resource, 'processedAt')));
+    }
+
+    get processedStatus() {
+        return this.isProcessed ? 'success' : 'warning';
+    }
+
+    get processedLabel() {
+        return this.isProcessed ? 'Processed' : 'Unprocessed';
+    }
+
+    get severityAccentClass() {
+        return warningSeverities.includes(String(this.severity ?? '').toLowerCase()) ? 'fleetops-connectivity-kpi-accent-amber' : 'fleetops-connectivity-kpi-accent-green';
+    }
+
+    get message() {
+        return get(this.resource, 'message');
+    }
+
+    get occurredAt() {
+        return firstPresent(get(this.resource, 'occurred_at'), get(this.resource, 'occurredAt'), get(this.resource, 'created_at'), get(this.resource, 'createdAt'));
+    }
+
+    get processedAt() {
+        return firstPresent(get(this.resource, 'processed_at'), get(this.resource, 'processedAt'));
+    }
+
+    get processingDelay() {
+        return firstPresent(get(this.resource, 'processing_delay_minutes'), get(this.resource, 'processingDelayMinutes'));
+    }
+
+    get ageMinutes() {
+        return firstPresent(get(this.resource, 'age_minutes'), get(this.resource, 'ageMinutes'));
+    }
+
+    get deviceName() {
+        return firstPresent(
+            get(this.resource, 'device.displayName'),
+            get(this.resource, 'device.display_name'),
+            get(this.resource, 'device.name'),
+            get(this.resource, 'device_name'),
+            get(this.resource, 'device_id')
+        );
+    }
+
+    get deviceIdentifier() {
+        return firstPresent(
+            get(this.resource, 'device_id'),
+            get(this.resource, 'device.device_id'),
+            get(this.resource, 'device_imei'),
+            get(this.resource, 'device_serial_number'),
+            get(this.resource, 'ident')
+        );
+    }
+
+    get deviceRouteModel() {
+        return firstPresent(get(this.resource, 'device.id'), get(this.resource, 'device.public_id'), get(this.resource, 'device_uuid'));
+    }
+
+    get providerLabel() {
+        return firstPresent(get(this.resource, 'provider_descriptor.label'), get(this.resource, 'telematic.name'), get(this.resource, 'telematic_name'), get(this.resource, 'provider'));
+    }
+
+    get telematicRouteModel() {
+        return firstPresent(get(this.resource, 'telematic.id'), get(this.resource, 'telematic.public_id'), get(this.resource, 'telematic_uuid'));
+    }
+
+    get deviceStatus() {
+        return firstPresent(get(this.resource, 'device.status'), get(this.resource, 'device_status'), get(this.resource, 'device_connection_status'));
+    }
+
+    get metrics() {
+        return [
+            { label: 'Severity', value: this.severity, icon: 'triangle-exclamation', accentClass: this.severityAccentClass },
+            {
+                label: 'Processing',
+                value: this.processedLabel,
+                icon: this.isProcessed ? 'check' : 'clock',
+                accentClass: this.isProcessed ? 'fleetops-connectivity-kpi-accent-green' : 'fleetops-connectivity-kpi-accent-rose',
+            },
+            { label: 'Device', value: this.deviceName, meta: this.deviceIdentifier, icon: 'microchip', accentClass: 'fleetops-connectivity-kpi-accent-blue' },
+            { label: 'Provider', value: this.providerLabel, icon: 'satellite-dish', accentClass: 'fleetops-connectivity-kpi-accent-green' },
+        ];
+    }
+
+    get payloadJson() {
+        return prettyJson(get(this.resource, 'payload'));
+    }
+
+    get dataJson() {
+        return prettyJson(get(this.resource, 'data'));
+    }
+
+    get metaJson() {
+        return prettyJson(get(this.resource, 'meta'));
+    }
+
+    @action openDevice() {
+        if (this.deviceRouteModel) {
+            return this.hostRouter.transitionTo('console.fleet-ops.connectivity.devices.index.details', this.deviceRouteModel);
+        }
+    }
+
+    @action openTelematic() {
+        if (this.telematicRouteModel) {
+            return this.hostRouter.transitionTo('console.fleet-ops.connectivity.telematics.details', this.telematicRouteModel);
+        }
+    }
+}

package/addon/components/driver/schedule.js

@@ -219,7 +219,7 @@ export default class DriverScheduleComponent extends Component {
     }
 
     /**
-     * Load HOS (Hours of Service) status from the FleetOps driver endpoint.
+     * Load HOS (Hours of Service) status from the Fleet-Ops driver endpoint.
      * Best-effort — if the endpoint is not yet implemented hosStatus stays null.
      */
     @task *loadHOSStatus() {

package/addon/components/equipment/form.js

@@ -11,9 +11,16 @@ import { task } from 'ember-concurrency';
 const TYPE_TO_MODEL = {
     'fleet-ops:vehicle': 'vehicle',
     'fleet-ops:driver': 'driver',
+    'Fleetbase\\FleetOps\\Models\\Vehicle': 'vehicle',
+    'Fleetbase\\FleetOps\\Models\\Driver': 'driver',
     'fleet-ops:equipment': 'equipment',
 };
 
+const TYPE_TO_OPTION_VALUE = {
+    'Fleetbase\\FleetOps\\Models\\Vehicle': 'fleet-ops:vehicle',
+    'Fleetbase\\FleetOps\\Models\\Driver': 'fleet-ops:driver',
+};
+
 export default class EquipmentFormComponent extends Component {
     @service fetch;
     @service currentUser;
@@ -45,7 +52,7 @@ export default class EquipmentFormComponent extends Component {
         const { resource } = args;
         if (resource?.equipable_type) {
             this.equipableModelName = TYPE_TO_MODEL[resource.equipable_type] ?? null;
-            this.selectedEquipableType = this.equipableTypeOptions.find((o) => o.value === resource.equipable_type) ?? null;
+            this.selectedEquipableType = this.equipableTypeOptions.find((o) => o.value === (TYPE_TO_OPTION_VALUE[resource.equipable_type] ?? resource.equipable_type)) ?? null;
         }
     }
 

package/addon/components/layout/fleet-ops-sidebar.hbs

@@ -3,7 +3,7 @@
     @primaryAction={{this.createOrderAction}}
     @searchPlaceholder="Search Fleet-Ops..."
     @searchProvider={{this.searchNavigation}}
-    @initialActiveParentSync={{false}}
+    @shouldSyncInitialActiveParent={{this.shouldSyncInitialActiveParent}}
     class="fleet-ops-sidebar-navigator"
 >
     <:footer as |state|>