@fleetbase/fleetops-engine 0.6.64 → 0.6.65

package/RELEASE.md

@@ -1,13 +1,15 @@
-> v0.6.64 ~ "Order responses no longer fail when a vehicle is assigned"
+> v0.6.65 ~ "First-class trailer operations"
 
 ---
-## Bug Fixes
-- **Orders with an assigned vehicle serialize again when expansions are requested.** The Vehicle and Fleet resources read the request's `with` list and loaded it onto the model they wrap. That is correct on their own endpoints, where the controller has already allowlisted the list, but both resources are also rendered nested inside Order and Driver responses. There the same request carries the parent's expansions, so `GET /v1/orders?with=payload` on an order with a vehicle assigned failed during serialisation with `RelationNotFoundException: Call to undefined relationship [payload] on model Vehicle`. Navigator order fetches and the console scheduler both hit this. Nested resources now keep only the relations the wrapped model actually defines; direct endpoint behaviour is unchanged.
+## 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 resource-level regressions for parent expansions reaching a nested Vehicle or Fleet resource, for string and empty `with` forms, and for resources wrapping plain data.
-- Added end-to-end checks resolving a real vehicle and a real fleet against an order-shaped request.
+- 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);