@fleetbase/fleetops-engine 0.6.63 → 0.6.65

package/RELEASE.md

@@ -1,14 +1,15 @@
-> v0.6.63 ~ "Fleet and driver relationship display fixes"
+> v0.6.65 ~ "First-class trailer operations"
 
 ---
-## Bug Fixes
-- **Driver vendor names display correctly.** The Drivers table now uses the `vendor_name` value included in the list response instead of reading an unloaded `vendor` relationship.
-- **Fleet pages load hierarchy relationships correctly.** Internal Fleet-Ops requests now use the Fleet model's Eloquent relationship names, preventing the `RelationNotFoundException` raised when opening the Fleets route.
+## What's New
+- **Trailers become a first-class Fleet-Ops resource.** Create and manage trailers independently, attach them to vehicles, connect equipment and telematics devices, and review operational, maintenance, location, and towing details from dedicated Trailer screens.
+- **Vehicle and equipment relationships are easier to understand.** Vehicle details expose attached trailers and equipment, while Trailer details show the current towing vehicle and installed equipment.
+- **Trailer APIs support complete integrations.** Internal and public endpoints cover trailer lifecycle, filtering, towing connections, equipment, devices, telemetry, imports, and exports.
 
 ---
 ## Testing
-- Added a regression assertion for the vendor column used by the Drivers table.
-- Added route coverage for the relationship names requested by the Fleet index, edit and details pages.
+- Added frontend, backend, API-contract, attachment, telematics, spatial-data, permission, and serialization coverage for first-class trailers.
+- Expanded the Fleetbase Postman collection and documentation alongside the Fleet-Ops implementation.
 
 ---
 ## Need help?

package/addon/components/attachment-list.hbs

@@ -0,0 +1,65 @@
+<div class="fleetops-attachment-list {{@wrapperClass}}" ...attributes>
+    <div class="fleetops-attachment-list-header">
+        <div class="min-w-0">
+            <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">{{@title}}</h3>
+            {{#if @description}}
+                <p class="text-xs text-gray-500 dark:text-gray-400">{{@description}}</p>
+            {{/if}}
+        </div>
+        <div class="flex flex-row items-center space-x-2 shrink-0">
+            {{yield to="actions"}}
+            {{#if @actionText}}
+                <Button
+                    @icon={{or @actionIcon "plus"}}
+                    @text={{@actionText}}
+                    @size="xs"
+                    @type={{or @actionType "primary"}}
+                    @onClick={{@onAction}}
+                    @permission={{@actionPermission}}
+                    @disabled={{@actionDisabled}}
+                />
+            {{/if}}
+        </div>
+    </div>
+
+    {{#if @isLoading}}
+        <div class="fleetops-attachment-list-loading">
+            <Spinner />
+        </div>
+    {{else if @items.length}}
+        <div class="fleetops-attachment-list-items" role="list">
+            {{#each @items as |item index|}}
+                <div class="fleetops-attachment-list-item" role="listitem">
+                    <div class="fleetops-attachment-list-item-content">
+                        {{yield item index to="item"}}
+                    </div>
+                    {{#if (has-block "itemActions")}}
+                        <div class="fleetops-attachment-list-item-actions">
+                            {{yield item index to="itemActions"}}
+                        </div>
+                    {{/if}}
+                </div>
+            {{/each}}
+        </div>
+    {{else}}
+        <div class="fleetops-attachment-list-empty">
+            <FaIcon @icon={{or @emptyIcon "box-open"}} @size="2x" class="text-gray-400 dark:text-gray-500 mb-2" />
+            <h3 class="text-base font-semibold text-gray-700 dark:text-gray-300">{{@emptyTitle}}</h3>
+            {{#if @emptyDescription}}
+                <p class="text-sm text-gray-500 dark:text-gray-400">{{@emptyDescription}}</p>
+            {{/if}}
+            {{#if (and @actionText (not @hideEmptyAction))}}
+                <Button
+                    @icon={{or @actionIcon "plus"}}
+                    @text={{@actionText}}
+                    @size="xs"
+                    @type={{or @actionType "primary"}}
+                    @onClick={{@onAction}}
+                    @permission={{@actionPermission}}
+                    @disabled={{@actionDisabled}}
+                    class="mt-3"
+                />
+            {{/if}}
+        </div>
+    {{/if}}
+</div>

package/addon/components/attachment-list.js

@@ -0,0 +1,8 @@
+import Component from '@glimmer/component';
+
+/**
+ * Shared layout for "things attached to an asset" tabs (devices, equipment,
+ * trailers, towing history) so every attachment tab reads the same way: a
+ * header with a description and primary action, uniform rows, one empty state.
+ */
+export default class AttachmentListComponent extends Component {}

package/addon/components/cell/attached-vehicle.hbs

@@ -4,7 +4,7 @@
     {{else}}
         <div class="flex items-center gap-2 py-1 text-xs text-gray-400 dark:text-gray-500">
             <FaIcon @icon="link-slash" />
-            <span>Unattached</span>
+            <span>{{t "trailer.attachment.detached"}}</span>
         </div>
     {{/if}}
 </div>

package/addon/components/cell/attached-vehicle.js

@@ -31,13 +31,13 @@ export default class CellAttachedVehicleComponent extends Component {
     }
 
     get hasVehicle() {
-        return Boolean(this.device?.attachable_uuid && this.isVehicleAttachment);
+        return Boolean(this.device?.attachable_uuid && this.isSupportedAttachment);
     }
 
-    get isVehicleAttachment() {
+    get isSupportedAttachment() {
         const attachableType = `${this.device?.attachable_type ?? ''}`.toLowerCase();
 
-        return !attachableType || attachableType.includes('vehicle');
+        return !attachableType || attachableType.includes('vehicle') || attachableType.includes('trailer');
     }
 
     @action onClick(_vehicle, event) {

package/addon/components/cell/driver-identity.js

@@ -1,6 +1,6 @@
 import Component from '@glimmer/component';
 import { action, get } from '@ember/object';
-import config from 'ember-get-config';
+import { getPlaceholderImage, resolveResourceImage } from '../../utils/placeholder-images';
 import { resolveIdentityCellResource } from '../../utils/identity-cell-resource';
 
 const DEFAULT_STATUS_TONES = {
@@ -34,11 +34,11 @@ export default class CellDriverIdentityComponent extends Component {
     }
 
     get mediaUrl() {
-        return get(this.resource, 'photo_url');
+        return resolveResourceImage(get(this.resource, 'photo_url'), 'driver');
     }
 
     get fallbackImage() {
-        return config?.defaultValues?.driverImage;
+        return getPlaceholderImage('driver');
     }
 
     get hasCompactStatusDot() {
@@ -97,7 +97,7 @@ export default class CellDriverIdentityComponent extends Component {
             ...(this.args.column ?? {}),
             labelPath: 'name',
             mediaPath: 'photo_url',
-            fallbackImage: config?.defaultValues?.driverImage,
+            fallbackImage: getPlaceholderImage('driver'),
             statusPath: 'status',
             onlinePath: 'online',
             showStatusBadge: this.args.column?.showStatusBadge ?? true,

package/addon/components/cell/driver-name.hbs

@@ -1,7 +1,7 @@
 {{#let (or @row.driver this.driver) as |driver|}}
     {{#if driver}}
         <div class="relative flex items-center" ...attributes>
-            <img src={{driver.photo_url}} alt={{driver.name}} {{fallback-img-src (config "defaultValues.driverImage")}} class="w-5 h-5 mr-2 rounded-md" />
+            <img src={{resource-image driver.photo_url "driver"}} alt={{driver.name}} {{fallback-img-src (placeholder-image "driver")}} class="w-5 h-5 mr-2 rounded-md" />
             <a href="javascript:;" class="relative flex flex-row items-center" disabled={{and @column.permission (cannot @column.permission)}} {{on "click" (fn this.onClick driver)}}>
                 <span>{{get-default-value driver.name}}</span>
                 {{#if @row.vehicle_assigned}}

package/addon/components/cell/translated-value.hbs

@@ -0,0 +1,9 @@
+{{#if this.label}}
+    {{#if this.isBadge}}
+        <Badge @status={{this.value}} @text={{this.label}} @icon={{this.icon}} @hideStatusDot={{unless this.icon false true}} ...attributes />
+    {{else}}
+        <span class={{@column.className}} ...attributes>{{this.label}}</span>
+    {{/if}}
+{{else}}
+    <span class="text-gray-400 dark:text-gray-500" ...attributes>{{this.emptyText}}</span>
+{{/if}}

package/addon/components/cell/translated-value.js

@@ -0,0 +1,57 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { get } from '@ember/object';
+
+/**
+ * Table cell that renders a stable enum value (`dry_van`, `never_connected`, ...)
+ * through its localized label. Configure the column with:
+ *
+ *   translationPrefix: 'trailer.types'   // required, joined with the raw value
+ *   badge: true                          // optional, render as a status badge
+ *   badgeIconPath / badgeIcons           // optional badge icon per value
+ */
+export default class CellTranslatedValueComponent extends Component {
+    @service intl;
+
+    get value() {
+        const row = this.args.row;
+        const valuePath = this.args.column?.valuePath;
+
+        if (this.args.value !== undefined && this.args.value !== null) {
+            return this.args.value;
+        }
+
+        return valuePath ? get(row, valuePath) : null;
+    }
+
+    get label() {
+        const value = this.value;
+        const prefix = this.args.column?.translationPrefix;
+
+        if (value === null || value === undefined || value === '') {
+            return null;
+        }
+
+        if (!prefix) {
+            return String(value);
+        }
+
+        const key = `${prefix}.${value}`;
+
+        return this.intl.exists(key) ? this.intl.t(key) : String(value);
+    }
+
+    get isBadge() {
+        return Boolean(this.args.column?.badge);
+    }
+
+    get icon() {
+        const icons = this.args.column?.badgeIcons;
+
+        return icons && this.value ? icons[this.value] : undefined;
+    }
+
+    get emptyText() {
+        return this.args.column?.emptyText ?? '-';
+    }
+}

package/addon/components/contact/card.hbs

@@ -0,0 +1,58 @@
+<Layout::Resource::Card class="fleetops-resource-card contact-card" ...attributes as |Card|>
+    <Card.header class={{@headerClass}}>
+        <RegistryYield @registry="fleet-ops:component:contact:card:header:start" as |RegistryComponent|>
+            <RegistryComponent @resource={{@resource}} />
+        </RegistryYield>
+        <div class="fleetops-card-title">
+            <div class="font-semibold flex-1 truncate">{{n-a @resource.name}}</div>
+        </div>
+        <div class="text-gray-400 dark:text-gray-500 text-sm w-full truncate">{{n-a @resource.title @resource.internal_id @resource.public_id}}</div>
+        {{#if (has-block "header")}}
+            {{yield to="header"}}
+        {{/if}}
+        <RegistryYield @registry="fleet-ops:component:contact:card:header:end" as |RegistryComponent|>
+            <RegistryComponent @resource={{@resource}} />
+        </RegistryYield>
+    </Card.header>
+    <Card.body class="{{@bodyClass}} h-40 overflow-hidden">
+        <Image src={{resource-image @resource.photo_url this.placeholderType}} @fallbackSrc={{(placeholder-image this.placeholderType)}} alt={{@resource.name}} class="fleetops-card-image fleetops-card-image--cover" />
+        {{#if (has-block "body")}}
+            {{yield to="body"}}
+        {{/if}}
+    </Card.body>
+    <Card.footer class={{@footerClass}}>
+        <RegistryYield @registry="fleet-ops:component:contact:card:footer:start" as |RegistryComponent|>
+            <RegistryComponent @resource={{@resource}} />
+        </RegistryYield>
+        <div class="flex flex-row items-center justify-between w-full">
+            <Badge @status={{or @resource.status @resource.type "default"}} @size="xs" />
+            <div class="flex flex-row items-center space-x-1">
+                <Button @icon="eye" @size="xs" @helpText={{t "common.view"}} @onClick={{fn this.resourceActions.transition.view @resource}} @permission="fleet-ops view contact" />
+                <Button @icon="pencil" @size="xs" @helpText={{t "common.edit"}} @onClick={{fn this.resourceActions.transition.edit @resource}} @permission="fleet-ops update contact" />
+                <Button @icon="trash" @size="xs" @type="danger" @helpText={{t "common.delete"}} @onClick={{fn this.resourceActions.delete @resource}} @permission="fleet-ops delete contact" />
+            </div>
+        </div>
+        <RegistryYield @registry="fleet-ops:component:contact:card:footer:end" as |RegistryComponent|>
+            <RegistryComponent @resource={{@resource}} />
+        </RegistryYield>
+        {{#if (has-block "footer")}}
+            {{yield to="footer"}}
+        {{/if}}
+        <div class="fleetops-card-meta-list">
+            <div class="fleetops-card-meta">
+                <FaIcon @icon="envelope" @prefix="fas" />
+                <span class="fleetops-card-meta-value">{{#if @resource.email}}<a href="mailto:{{@resource.email}}" class="fleetops-card-meta-link">{{@resource.email}}</a>{{else}}-{{/if}}</span>
+            </div>
+            <div class="fleetops-card-meta">
+                <FaIcon @icon="phone" @prefix="fas" />
+                <span class="fleetops-card-meta-value">{{#if @resource.phone}}<a href="tel:{{@resource.phone}}" class="fleetops-card-meta-link">{{@resource.phone}}</a>{{else}}-{{/if}}</span>
+            </div>
+            <div class="fleetops-card-meta">
+                <FaIcon @icon="location-dot" @prefix="fas" />
+                <span class="fleetops-card-meta-value">{{n-a @resource.address @resource.place.address}}</span>
+            </div>
+            <div class="fleetops-card-meta">{{t "common.last-modified"}}: {{@resource.updatedAt}}</div>
+        </div>
+    </Card.footer>
+</Layout::Resource::Card>
+{{yield}}

package/addon/components/contact/card.js

@@ -0,0 +1,19 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+
+/**
+ * Card for contacts and customers. Customers are contacts driven by the customer
+ * actions service, so the actions service can be passed in as `@resourceActions`.
+ */
+export default class ContactCardComponent extends Component {
+    @service contactActions;
+
+    get resourceActions() {
+        return this.args.resourceActions ?? this.contactActions;
+    }
+
+    /** Customers get their own silhouette; plain contacts the generic one. */
+    get placeholderType() {
+        return this.args.placeholderType ?? 'contact';
+    }
+}

package/addon/components/contact/form.hbs

@@ -2,7 +2,7 @@
     <ContentPanel @title={{t "contact.fields.contact-details"}} @open={{true}} @wrapperClass="bordered-top">
         <div class="flex flex-row space-x-3 mb-3">
             <div class="flex items-center justify-start rounded-full">
-                <Image src={{@resource.photo_url}} @fallbackSrc={{config "defaultValues.userImage"}} alt={{@resource.name}} height="48" width="48" class="h-14 w-14 rounded-full shadow-sm" />
+                <Image src={{resource-image @resource.photo_url "contact"}} @fallbackSrc={{(placeholder-image "contact")}} alt={{@resource.name}} height="48" width="48" class="h-14 w-14 rounded-full shadow-sm" />
                 <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
                     <InputInfo @text={{t "common.upload-new-photo"}} />
                 </Attach::Tooltip>

package/addon/components/contact/panel-header.hbs

@@ -2,7 +2,7 @@
     <div class="flex flex-1 flex-row items-start justify-between">
         <div class="flex flex-row space-x-3">
             <div class="flex items-start justify-start rounded-full">
-                <Image src={{@resource.photo_url}} @fallbackSrc={{config "defaultValues.userImage"}} alt={{@resource.name}} height="48" width="48" class="h-14 w-14 rounded-full shadow-sm" />
+                <Image src={{resource-image @resource.photo_url "contact"}} @fallbackSrc={{(placeholder-image "contact")}} alt={{@resource.name}} height="48" width="48" class="h-14 w-14 rounded-full shadow-sm" />
                 <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
                     <InputInfo @text={{@resource.name}} />
                 </Attach::Tooltip>

package/addon/components/customer/form.hbs

@@ -3,8 +3,8 @@
         <div class="flex flex-row space-x-3 mb-3">
             <div class="flex items-center justify-start rounded-full">
                 <Image
-                    src={{@resource.photo_url}}
-                    @fallbackSrc={{config "defaultValues.contactImage"}}
+                    src={{resource-image @resource.photo_url "customer"}}
+                    @fallbackSrc={{(placeholder-image "customer")}}
                     alt={{@resource.name}}
                     height="48"
                     width="48"

package/addon/components/device/manager.hbs

@@ -1,28 +1,26 @@
-<div class="fleetops-device-manager" ...attributes>
-    <div class="flex flex-row items-center justify-between mb-4 px-3 pt-2">
-        <div></div>
-        <div>
-            <Button @icon="plus" @text={{t "device.actions.attach-device"}} @onClick={{this.addDevice}} @disabled={{not @resource}} />
-        </div>
-    </div>
-    <div>
-        {{#each this.devices as |device|}}
-            <div class="flex flex-row justify-between px-3 py-4 border-t border-gray-200 dark:border-gray-700">
-                <Device::Pill @device={{device}} />
-                <div>
-                    <Button @type="danger" @icon="times" @text={{t "device.actions.detach-from-vehicle"}} @size="xs" @onClick={{fn this.removeDevice device}} />
-                </div>
-            </div>
-        {{else}}
-            <div class="empty-state bg-white dark:bg-gray-800 rounded-lg shadow-sm p-12 text-center">
-                <FaIcon @icon="hard-drive" @size="2x" class="text-gray-400 mb-2" />
-                <h3 class="text-base font-semibold text-gray-700 dark:text-gray-300">
-                    {{t "device.prompts.no-devices-attached-title"}}
-                </h3>
-                <p class="text-sm text-gray-500 dark:text-gray-400">
-                    {{t "device.prompts.no-devices-attached-body" resourceType=(get-model-name @resource)}}
-                </p>
-            </div>
-        {{/each}}
-    </div>
-</div>
+<AttachmentList
+    @title={{t "resource.devices"}}
+    @description={{t "device.prompts.manager-description" resourceType=(get-model-name @resource)}}
+    @actionText={{t "device.actions.attach-device"}}
+    @actionIcon="plus"
+    @onAction={{this.addDevice}}
+    @actionDisabled={{not @resource}}
+    @isLoading={{this.loadDevices.isRunning}}
+    @items={{this.devices}}
+    @emptyIcon="hard-drive"
+    @emptyTitle={{t "device.prompts.no-devices-attached-title"}}
+    @emptyDescription={{t "device.prompts.no-devices-attached-body" resourceType=(get-model-name @resource)}}
+    class="fleetops-device-manager"
+    ...attributes
+>
+    <:item as |device|>
+        <Device::Pill @device={{device}} @onClick={{fn this.viewDevice device}} />
+        {{#if device.status}}
+            <Badge @status={{device.status}} @size="xs" class="fleetops-attachment-list-item-badge" />
+        {{/if}}
+    </:item>
+    <:itemActions as |device|>
+        <Button @icon="eye" @size="xs" @helpText={{t "common.view"}} @onClick={{fn this.viewDevice device}} />
+        <Button @type="danger" @icon="unlink" @size="xs" @helpText={{t "device.attachment.detach"}} @onClick={{fn this.removeDevice device}} />
+    </:itemActions>
+</AttachmentList>

package/addon/components/device/manager.js

@@ -5,6 +5,8 @@ import { inject as service } from '@ember/service';
 import { debug } from '@ember/debug';
 import { task } from 'ember-concurrency';
 import getModelName from '@fleetbase/ember-core/utils/get-model-name';
+import { pluralize } from 'ember-inflector';
+import { dasherize } from '@ember/string';
 
 export default class DeviceManagerComponent extends Component {
     @service store;
@@ -12,6 +14,7 @@ export default class DeviceManagerComponent extends Component {
     @service modalsManager;
     @service notifications;
     @service intl;
+    @service deviceActions;
     @tracked devices = [];
 
     get resourceName() {
@@ -28,6 +31,21 @@ export default class DeviceManagerComponent extends Component {
         );
     }
 
+    /**
+     * The internal attach/detach endpoints are namespaced by the attachable resource
+     * (`vehicles/{id}/attach-device`, `trailers/{id}/attach-device`). Derive the prefix
+     * from the resource's model name unless an explicit `@endpoint` is given.
+     */
+    get endpoint() {
+        if (this.args.endpoint) {
+            return this.args.endpoint;
+        }
+
+        const modelName = getModelName(this.args.resource);
+
+        return modelName ? dasherize(pluralize(modelName)) : 'vehicles';
+    }
+
     constructor() {
         super(...arguments);
         this.loadDevices.perform();
@@ -45,7 +63,7 @@ export default class DeviceManagerComponent extends Component {
                 modal.startLoading();
 
                 try {
-                    await this.fetch.post(`vehicles/${this.args.resource.id}/attach-device`, { device: selectedDevice.id });
+                    await this.fetch.post(`${this.endpoint}/${this.args.resource.id}/attach-device`, { device: selectedDevice.id });
                     await this.loadDevices.perform();
                     this.notifications.success(this.intl.t('device.prompts.attach-device-success'));
                     modal.done();
@@ -57,6 +75,14 @@ export default class DeviceManagerComponent extends Component {
         });
     }
 
+    @action viewDevice(device) {
+        if (this.deviceActions.panel?.view) {
+            return this.deviceActions.panel.view(device);
+        }
+
+        return this.deviceActions.transition.view(device);
+    }
+
     @action removeDevice(device) {
         const deviceName = device.displayName ?? device.name ?? device.device_id ?? this.intl.t('resource.device');
 
@@ -67,7 +93,7 @@ export default class DeviceManagerComponent extends Component {
                 modal.startLoading();
 
                 try {
-                    await this.fetch.post(`vehicles/${this.args.resource.id}/detach-device`, { device: device.id });
+                    await this.fetch.post(`${this.endpoint}/${this.args.resource.id}/detach-device`, { device: device.id });
                     await this.loadDevices.perform();
                     this.notifications.success(this.intl.t('device.prompts.detach-from-resource-success', { deviceName, resourceName: this.resourceName }));
                     modal.done();

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

@@ -1,21 +1,21 @@
 <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>
+            <h2 class="text-base font-bold text-gray-900 dark:text-gray-100">{{t "device.attachment.title"}}</h2>
+            <p class="mt-0.5 text-xs text-gray-500 dark:text-gray-300">{{t "device.attachment.description"}}</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}} />
+                    <Button @icon="eye" @text={{t "device.attachment.open"}} @size="xs" @onClick={{this.openVehicle}} />
                 {{/if}}
                 {{#if this.canLocateVehicle}}
-                    <Button @icon="location-dot" @text="Locate" @size="xs" @onClick={{this.locateVehicle}} />
+                    <Button @icon="location-dot" @text={{t "device.attachment.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}} />
+                <Button @icon="shuffle" @text={{t "device.attachment.change"}} @size="xs" @onClick={{this.attachToVehicle}} />
+                <Button @icon="unlink" @text={{t "device.attachment.detach"}} @size="xs" @type="danger" @onClick={{this.detachFromVehicle}} />
             {{else}}
-                <Button @icon="link" @text="Attach Vehicle" @size="xs" @onClick={{this.attachToVehicle}} />
+                <Button @icon="link" @text={{t "device.actions.attach-to-asset"}} @size="xs" @onClick={{this.attachToVehicle}} />
             {{/if}}
         </div>
     </div>
@@ -39,15 +39,15 @@
                     <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="font-semibold uppercase text-gray-400 dark:text-gray-500">{{t "resource.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="font-semibold uppercase text-gray-400 dark:text-gray-500">{{t "device.attachment.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="font-semibold uppercase text-gray-400 dark:text-gray-500">{{t "device.attachment.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>
@@ -58,9 +58,9 @@
         <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"
+            @title={{t "device.attachment.none-title"}}
+            @message={{t "device.attachment.none-message"}}
+            @primaryText={{t "device.actions.attach-to-asset"}}
             @primaryIcon="link"
             @primaryAction={{this.attachToVehicle}}
         />

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

@@ -7,6 +7,7 @@ export default class DevicePanelTabsVehicleComponent extends Component {
     @service hostRouter;
     @service mapManager;
     @service vehicleActions;
+    @service trailerActions;
 
     get device() {
         return this.args.resource ?? this.args.model;
@@ -16,6 +17,10 @@ export default class DevicePanelTabsVehicleComponent extends Component {
         return this.device?.attachable;
     }
 
+    get isTrailer() {
+        return `${this.device?.attachable_type ?? ''}`.toLowerCase().includes('trailer');
+    }
+
     get vehicleName() {
         return this.device?.attached_to_name ?? this.vehicle?.displayName ?? this.vehicle?.display_name ?? this.vehicle?.name;
     }
@@ -58,6 +63,9 @@ export default class DevicePanelTabsVehicleComponent extends Component {
 
     @action openVehicle() {
         if (this.vehicle?.id) {
+            if (this.isTrailer) {
+                return this.trailerActions.transition.view(this.vehicle);
+            }
             return this.vehicleActions.panel?.view
                 ? this.vehicleActions.panel.view(this.vehicle)
                 : this.hostRouter.transitionTo('console.fleet-ops.management.vehicles.index.details', this.vehicle);