@fleetbase/fleetops-engine 0.6.63 → 0.6.65

package/addon/components/trailer/pill.hbs

@@ -0,0 +1,21 @@
+{{#let (or @trailer @resource) as |resource|}}
+    <Pill
+        @resource={{resource}}
+        @imageSrc={{resource.photo_url}}
+        @imageFallback={{(trailer-placeholder-image)}}
+        @showOnlineIndicator={{true}}
+        @noTooltip={{true}}
+        @onClick={{@onClick}}
+        @anchorClass={{@anchorClass}}
+        @imageClass={{@imageClass}}
+        @imageWrapperClass={{@imageWrapperClass}}
+        @contentWrapperClass="min-w-0 {{@contentWrapperClass}}"
+        ...attributes
+    >
+        <div class="text-sm truncate {{@titleClass}}">{{or resource.displayName resource.display_name resource.name resource.public_id}}</div>
+        <div class="text-xs text-gray-400 dark:text-gray-500 truncate {{@subtitleClass}}">
+            {{#if resource.type}}{{t (concat "trailer.types." resource.type)}}{{/if}}
+            {{#if (or resource.plate_number resource.vin resource.code)}}<span class="mx-1">·</span>{{or resource.plate_number resource.vin resource.code}}{{/if}}
+        </div>
+    </Pill>
+{{/let}}

package/addon/components/trailer/pill.js

@@ -0,0 +1,3 @@
+import Component from '@glimmer/component';
+
+export default class TrailerPillComponent extends Component {}

package/addon/components/vehicle/card.hbs

@@ -1,9 +1,12 @@
-<Layout::Resource::Card ...attributes as |Card|>
+<Layout::Resource::Card class="fleetops-resource-card vehicle-card" ...attributes as |Card|>
     <Card.header class="{{@headerClass}}">
         <RegistryYield @registry="fleet-ops:component:vehicle:card:header:start" as |RegistryComponent|>
             <RegistryComponent @order={{@resource}} @resource={{@resource}} />
         </RegistryYield>
-        <div class="font-semibold w-full truncate">{{or @resource.name @resource.yearMakeModel}}</div>
+        <div class="fleetops-card-title">
+            <div class="font-semibold flex-1 truncate">{{or @resource.name @resource.yearMakeModel}}</div>
+            <FaIcon @icon="circle" @size="xs" class="fleetops-card-title-indicator {{if @resource.online 'text-green-500' 'text-gray-400'}}" />
+        </div>
         <div class="text-gray-400 dark:text-gray-500 text-sm w-full truncate">{{or @resource.plate_number @resource.vin @resource.serial_number @resource.call_sign @resource.public_id}}</div>
         {{#if (has-block "header")}}
             {{yield to="header"}}
@@ -12,8 +15,8 @@
             <RegistryComponent @order={{@resource}} @resource={{@resource}} />
         </RegistryYield>
     </Card.header>
-    <Card.body class={{@bodyClass}}>
-        <Image src={{@resource.photo_url}} class="card-img-lg" />
+    <Card.body class="{{@bodyClass}} h-40 overflow-hidden">
+        <Image src={{resource-image @resource.photo_url "vehicle"}} @fallbackSrc={{(placeholder-image "vehicle")}} alt={{or @resource.name @resource.yearMakeModel}} class="fleetops-card-image fleetops-card-image--cover" />
         {{#if (has-block "body")}}
             {{yield to="body"}}
         {{/if}}
@@ -22,10 +25,13 @@
         <RegistryYield @registry="fleet-ops:component:vehicle:card:footer:start" as |RegistryComponent|>
             <RegistryComponent @order={{@resource}} @resource={{@resource}} />
         </RegistryYield>
-        <div class="flex flex-row items-center space-x-1">
-            <Button @icon="eye" @size="xs" @onClick={{fn this.vehicleActions.transition.view @resource}} />
-            <Button @icon="pencil" @size="xs" @onClick={{fn this.vehicleActions.transition.edit @resource}} />
-            <Button @icon="trash" @size="xs" @type="danger" @onClick={{fn this.vehicleActions.delete @resource}} />
+        <div class="flex flex-row items-center justify-between w-full">
+            <Badge @status={{or @resource.status "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.vehicleActions.transition.view @resource}} @permission="fleet-ops view vehicle" />
+                <Button @icon="pencil" @size="xs" @helpText={{t "common.edit"}} @onClick={{fn this.vehicleActions.transition.edit @resource}} @permission="fleet-ops update vehicle" />
+                <Button @icon="trash" @size="xs" @type="danger" @helpText={{t "common.delete"}} @onClick={{fn this.vehicleActions.delete @resource}} @permission="fleet-ops delete vehicle" />
+            </div>
         </div>
         <RegistryYield @registry="fleet-ops:component:vehicle:card:footer:end" as |RegistryComponent|>
             <RegistryComponent @order={{@resource}} @resource={{@resource}} />
@@ -33,9 +39,34 @@
         {{#if (has-block "footer")}}
             {{yield to="footer"}}
         {{/if}}
-        <div class="mt-1.5">
-            <div class="text-gray-400 dark:text-gray-500 text-xs">Last Modified: {{@resource.updatedAt}}</div>
+        <div class="fleetops-card-meta-list">
+            <div class="fleetops-card-meta">
+                <FaIcon @icon="id-card" @prefix="fas" />
+                <span class="fleetops-card-meta-value">
+                    {{#if this.driverName}}
+                        {{#if @resource.driver}}
+                            <a href="javascript:;" class="fleetops-card-meta-link" {{on "click" this.viewDriver}}>{{this.driverName}}</a>
+                        {{else}}
+                            {{this.driverName}}
+                        {{/if}}
+                    {{else}}
+                        {{t "common.no-driver-assigned"}}
+                    {{/if}}
+                </span>
+            </div>
+            <div class="fleetops-card-meta">
+                <FaIcon @icon="trailer" @prefix="fas" />
+                <span class="fleetops-card-meta-value">
+                    {{#each @resource.trailers as |trailer index|}}
+                        {{#if index}}, {{/if}}
+                        <a href="javascript:;" class="fleetops-card-meta-link" {{on "click" (fn this.viewTrailer trailer)}}>{{trailer.displayName}}</a>
+                    {{else}}
+                        {{t "vehicle.empty.trailers"}}
+                    {{/each}}
+                </span>
+            </div>
+            <div class="fleetops-card-meta">{{t "common.last-modified"}}: {{@resource.updatedAt}}</div>
         </div>
     </Card.footer>
 </Layout::Resource::Card>
-{{yield}}
+{{yield}}

package/addon/components/vehicle/card.js

@@ -1,6 +1,37 @@
 import Component from '@glimmer/component';
 import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
 
 export default class VehicleCardComponent extends Component {
     @service vehicleActions;
+    @service driverActions;
+    @service trailerActions;
+
+    get driverName() {
+        const vehicle = this.args.resource;
+
+        return vehicle?.driver_name ?? vehicle?.driver?.name ?? null;
+    }
+
+    @action viewDriver() {
+        const driver = this.args.resource?.driver;
+
+        if (!driver) {
+            return;
+        }
+
+        if (this.driverActions.panel?.view) {
+            return this.driverActions.panel.view(driver);
+        }
+
+        return this.driverActions.transition.view(driver);
+    }
+
+    @action viewTrailer(trailer) {
+        if (this.trailerActions.panel?.view) {
+            return this.trailerActions.panel.view(trailer);
+        }
+
+        return this.trailerActions.transition.view(trailer);
+    }
 }

package/addon/components/vehicle/details/equipment.hbs

@@ -0,0 +1,25 @@
+<AttachmentList
+    @title={{t "resource.equipment"}}
+    @description={{t "vehicle.equipment.description"}}
+    @actionText={{t "vehicle.actions.attach-equipment"}}
+    @actionIcon="plus"
+    @onAction={{this.attach}}
+    @actionPermission="fleet-ops update vehicle"
+    @isLoading={{this.loadEquipment.isRunning}}
+    @items={{this.equipment}}
+    @emptyIcon="toolbox"
+    @emptyTitle={{t "vehicle.empty.equipment"}}
+    @emptyDescription={{t "vehicle.empty.equipment-description"}}
+    class="vehicle-details-equipment"
+>
+    <:item as |item|>
+        <Equipment::Pill @equipment={{item}} @onClick={{fn this.view item}} />
+        {{#if item.status}}
+            <Badge @status={{item.status}} @size="xs" class="fleetops-attachment-list-item-badge" />
+        {{/if}}
+    </:item>
+    <:itemActions as |item|>
+        <Button @icon="eye" @size="xs" @helpText={{t "common.view"}} @onClick={{fn this.view item}} @permission="fleet-ops view equipment" />
+        <Button @icon="unlink" @size="xs" @type="danger" @helpText={{t "vehicle.actions.detach-equipment"}} @onClick={{fn this.detach item}} @permission="fleet-ops update vehicle" />
+    </:itemActions>
+</AttachmentList>

package/addon/components/vehicle/details/equipment.js

@@ -0,0 +1,55 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { task } from 'ember-concurrency';
+
+/**
+ * Equipment currently equipped to a vehicle, with attach/detach controls.
+ */
+export default class VehicleDetailsEquipmentComponent extends Component {
+    @service store;
+    @service notifications;
+    @service equipmentActions;
+    @service vehicleActions;
+    @tracked equipment = [];
+
+    get vehicle() {
+        return this.args.resource ?? this.args.vehicle;
+    }
+
+    constructor() {
+        super(...arguments);
+        this.loadEquipment.perform();
+    }
+
+    @task *loadEquipment() {
+        try {
+            const equipment = yield this.store.query('equipment', {
+                equipable_type: 'fleet-ops:vehicle',
+                equipable: this.vehicle.public_id ?? this.vehicle.id,
+                sort: '-created_at',
+            });
+
+            this.equipment = Array.from(equipment ?? []);
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+
+    @action attach() {
+        return this.vehicleActions.attachEquipment(this.vehicle, { callback: () => this.loadEquipment.perform() });
+    }
+
+    @action detach(equipment) {
+        return this.vehicleActions.detachEquipment(this.vehicle, equipment, { callback: () => this.loadEquipment.perform() });
+    }
+
+    @action view(equipment) {
+        if (this.equipmentActions.panel?.view) {
+            return this.equipmentActions.panel.view(equipment);
+        }
+
+        return this.equipmentActions.transition.view(equipment);
+    }
+}

package/addon/components/vehicle/details/trailers.hbs

@@ -0,0 +1,35 @@
+<AttachmentList
+    @title={{t "resource.trailers"}}
+    @description={{t "vehicle.trailers.description"}}
+    @actionText={{t "vehicle.actions.attach-trailer"}}
+    @actionIcon="link"
+    @onAction={{this.attach}}
+    @actionPermission="fleet-ops attach-vehicle-for trailer"
+    @isLoading={{this.loadTrailers.isRunning}}
+    @items={{this.trailers}}
+    @emptyIcon="trailer"
+    @emptyTitle={{t "vehicle.empty.trailers"}}
+    @emptyDescription={{t "vehicle.empty.trailers-description"}}
+    class="vehicle-details-trailers"
+>
+    <:item as |trailer|>
+        <Trailer::Pill @trailer={{trailer}} @onClick={{fn this.view trailer}} />
+        <div class="fleetops-attachment-list-item-meta">
+            {{#if trailer.current_connection.position}}
+                <span class="fleetops-attachment-list-item-meta-entry">
+                    <FaIcon @icon="arrow-down-1-9" class="mr-1" />{{t "trailer.attachment.position" position=trailer.current_connection.position}}
+                </span>
+            {{/if}}
+            {{#if trailer.attached_at}}
+                <span class="fleetops-attachment-list-item-meta-entry">
+                    <FaIcon @icon="link" class="mr-1" />{{t "trailer.connections.connected" date=(format-date-fns trailer.attached_at "dd MMM yyyy, HH:mm")}}
+                </span>
+            {{/if}}
+            <Badge @status={{or trailer.connectivity_status "never_connected"}} @size="xs" @text={{t (concat "trailer.connectivity." (or trailer.connectivity_status "never_connected"))}} />
+        </div>
+    </:item>
+    <:itemActions as |trailer|>
+        <Button @icon="eye" @size="xs" @helpText={{t "common.view"}} @onClick={{fn this.view trailer}} @permission="fleet-ops view trailer" />
+        <Button @icon="unlink" @size="xs" @type="danger" @helpText={{t "trailer.actions.detach-vehicle"}} @onClick={{fn this.detach trailer}} @permission="fleet-ops detach-vehicle-for trailer" />
+    </:itemActions>
+</AttachmentList>

package/addon/components/vehicle/details/trailers.js

@@ -0,0 +1,55 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { task } from 'ember-concurrency';
+
+/**
+ * Trailers currently coupled to a vehicle, with attach/detach controls.
+ */
+export default class VehicleDetailsTrailersComponent extends Component {
+    @service store;
+    @service notifications;
+    @service trailerActions;
+    @service vehicleActions;
+    @tracked trailers = [];
+
+    get vehicle() {
+        return this.args.resource ?? this.args.vehicle;
+    }
+
+    constructor() {
+        super(...arguments);
+        this.loadTrailers.perform();
+    }
+
+    @task *loadTrailers() {
+        try {
+            const trailers = yield this.store.query('trailer', {
+                vehicle: this.vehicle.id,
+                attachment_state: 'attached',
+                sort: '-created_at',
+            });
+
+            this.trailers = Array.from(trailers ?? []);
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+
+    @action attach() {
+        return this.vehicleActions.attachTrailer(this.vehicle, { callback: () => this.loadTrailers.perform() });
+    }
+
+    @action detach(trailer) {
+        return this.trailerActions.detachVehicle(trailer, { callback: () => this.loadTrailers.perform() });
+    }
+
+    @action view(trailer) {
+        if (this.trailerActions.panel?.view) {
+            return this.trailerActions.panel.view(trailer);
+        }
+
+        return this.trailerActions.transition.view(trailer);
+    }
+}

package/addon/components/vehicle/form.hbs

@@ -8,8 +8,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.vehicleImage"}}
+                    src={{resource-image @resource.photo_url "vehicle"}}
+                    @fallbackSrc={{(placeholder-image "vehicle")}}
                     alt={{@resource.name}}
                     height="48"
                     width="48"

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

@@ -3,8 +3,8 @@
         <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.driverImage"}}
+                    src={{resource-image @resource.photo_url "vehicle"}}
+                    @fallbackSrc={{(placeholder-image "vehicle")}}
                     alt={{@resource.displayName}}
                     height="48"
                     width="48"

package/addon/components/vehicle/pill.hbs

@@ -1,7 +1,7 @@
 <Pill
     @this.resource={{this.resource}}
-    @imageSrc={{this.resource.photo_url}}
-    @fallbackImageType="vehicleImage"
+    @imageSrc={{resource-image this.resource.photo_url "vehicle"}}
+    @imageFallback={{(placeholder-image "vehicle")}}
     @showOnlineIndicator={{if this.resource true false}}
     @noTooltip={{not this.resource}}
     @onClick={{@onClick}}

package/addon/components/vendor/card.hbs

@@ -0,0 +1,58 @@
+<Layout::Resource::Card class="fleetops-resource-card vendor-card" ...attributes as |Card|>
+    <Card.header class={{@headerClass}}>
+        <RegistryYield @registry="fleet-ops:component:vendor: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.internal_id @resource.business_id @resource.public_id}}</div>
+        {{#if (has-block "header")}}
+            {{yield to="header"}}
+        {{/if}}
+        <RegistryYield @registry="fleet-ops:component:vendor:card:header:end" as |RegistryComponent|>
+            <RegistryComponent @resource={{@resource}} />
+        </RegistryYield>
+    </Card.header>
+    <Card.body class="{{@bodyClass}} h-40 overflow-hidden">
+        <Image src={{resource-image @resource.logo_url "vendor"}} @fallbackSrc={{(placeholder-image "vendor")}} 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:vendor: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 "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.vendorActions.transition.view @resource}} @permission="fleet-ops view vendor" />
+                <Button @icon="pencil" @size="xs" @helpText={{t "common.edit"}} @onClick={{fn this.vendorActions.transition.edit @resource}} @permission="fleet-ops update vendor" />
+                <Button @icon="trash" @size="xs" @type="danger" @helpText={{t "common.delete"}} @onClick={{fn this.vendorActions.delete @resource}} @permission="fleet-ops delete vendor" />
+            </div>
+        </div>
+        <RegistryYield @registry="fleet-ops:component:vendor: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 @resource.country}}</span>
+            </div>
+            <div class="fleetops-card-meta">{{t "common.last-modified"}}: {{@resource.updatedAt}}</div>
+        </div>
+    </Card.footer>
+</Layout::Resource::Card>
+{{yield}}

package/addon/components/vendor/card.js

@@ -0,0 +1,6 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+
+export default class VendorCardComponent extends Component {
+    @service vendorActions;
+}

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

@@ -3,8 +3,8 @@
         <div class="flex min-w-0 flex-row items-start gap-3">
             <div class="relative flex flex-shrink-0 items-start justify-start">
                 <Image
-                    src={{this.imageUrl}}
-                    @fallbackSrc={{config "defaultValues.vendorImage"}}
+                    src={{resource-image this.imageUrl "vendor"}}
+                    @fallbackSrc={{(placeholder-image "vendor")}}
                     alt={{this.name}}
                     height="48"
                     width="48"

package/addon/components/vendor/personnel-manager.hbs

@@ -44,7 +44,7 @@
                             >
                                 <div class="flex flex-row items-center">
                                     <div class="mr-2 w-6">
-                                        <Image src={{model.photo_url}} @fallbackSrc={{config "defaultValues.contactImage"}} alt={{model.name}} class="h-6 w-6 rounded-md" />
+                                        <Image src={{resource-image model.photo_url "contact"}} @fallbackSrc={{(placeholder-image "contact")}} alt={{model.name}} class="h-6 w-6 rounded-md" />
                                     </div>
                                     <div class="min-w-0">
                                         <div class="truncate font-semibold">{{model.name}}</div>
@@ -135,7 +135,7 @@
                     {{#each this.personnels as |personnel|}}
                         <div class="grid grid-cols-12 items-center border-b border-gray-100 px-3 py-2 text-xs last:border-b-0 dark:border-gray-700 dark:text-gray-100">
                             <div class="col-span-6 flex min-w-0 items-center">
-                                <Image src={{personnel.photo_url}} @fallbackSrc={{config "defaultValues.contactImage"}} alt={{personnel.name}} class="mr-2 h-7 w-7 rounded-md" />
+                                <Image src={{resource-image personnel.photo_url "contact"}} @fallbackSrc={{(placeholder-image "contact")}} alt={{personnel.name}} class="mr-2 h-7 w-7 rounded-md" />
                                 <div class="min-w-0">
                                     <div class="truncate font-semibold">{{or personnel.name personnel.public_id}}</div>
                                     <div class="truncate text-gray-500 dark:text-gray-400">{{n-a personnel.email}} {{n-a personnel.phone}}</div>

package/addon/components/work-order/form.js

@@ -1,6 +1,7 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
 import { workOrderCategories, workOrderStatuses } from '../../utils/fleet-ops-options';
 
 /**
@@ -9,6 +10,7 @@ import { workOrderCategories, workOrderStatuses } from '../../utils/fleet-ops-op
  */
 const TYPE_TO_MODEL = {
     'fleet-ops:vehicle': 'vehicle',
+    'fleet-ops:trailer': 'trailer',
     'fleet-ops:equipment': 'equipment',
     'fleet-ops:vendor': 'vendor',
     'fleet-ops:contact': 'contact',
@@ -22,9 +24,11 @@ const TYPE_TO_MODEL = {
  */
 const TARGET_MODEL_TO_TYPE = {
     'maintenance-subject-vehicle': 'fleet-ops:vehicle',
+    'maintenance-subject-trailer': 'fleet-ops:trailer',
     'maintenance-subject-equipment': 'fleet-ops:equipment',
     // Fall-through for raw models passed from vehicle-actions.js
     vehicle: 'fleet-ops:vehicle',
+    trailer: 'fleet-ops:trailer',
     equipment: 'fleet-ops:equipment',
 };
 
@@ -42,6 +46,7 @@ const ASSIGNEE_MODEL_TO_TYPE = {
 };
 
 export default class WorkOrderFormComponent extends Component {
+    @service intl;
     /** Status options for work orders. */
     statusOptions = workOrderStatuses;
 
@@ -54,10 +59,13 @@ export default class WorkOrderFormComponent extends Component {
     /**
      * Polymorphic target type options — the asset a work order is raised against.
      */
-    targetTypeOptions = [
-        { value: 'fleet-ops:vehicle', label: 'Vehicle' },
-        { value: 'fleet-ops:equipment', label: 'Equipment' },
-    ];
+    get targetTypeOptions() {
+        return [
+            { value: 'fleet-ops:vehicle', label: this.intl.t('resource.vehicle') },
+            { value: 'fleet-ops:trailer', label: this.intl.t('resource.trailer') },
+            { value: 'fleet-ops:equipment', label: this.intl.t('resource.equipment') },
+        ];
+    }
 
     /**
      * Polymorphic assignee type options — who is responsible for completing

package/addon/controllers/connectivity/devices/index/details/vehicle.js

@@ -9,6 +9,7 @@ export default class ConnectivityDevicesIndexDetailsVehicleController extends Co
     @service intl;
     @service mapManager;
     @service vehicleActions;
+    @service trailerActions;
 
     @tracked queryParams = [];
 
@@ -20,6 +21,10 @@ export default class ConnectivityDevicesIndexDetailsVehicleController extends Co
         return this.device?.attachable;
     }
 
+    get isTrailer() {
+        return `${this.device?.attachable_type ?? ''}`.toLowerCase().includes('trailer');
+    }
+
     get positions() {
         return Array.from(this.model?.positions ?? []);
     }
@@ -86,12 +91,18 @@ export default class ConnectivityDevicesIndexDetailsVehicleController extends Co
 
     @action openVehicle() {
         if (this.vehicle?.id) {
+            if (this.isTrailer) {
+                return this.trailerActions.transition.view(this.vehicle);
+            }
             return this.hostRouter.transitionTo('console.fleet-ops.management.vehicles.index.details', this.vehicle.public_id);
         }
     }
 
     @action openVehiclePositions() {
         if (this.vehicle?.id) {
+            if (this.isTrailer) {
+                return this.hostRouter.transitionTo('console.fleet-ops.management.trailers.index.details.positions', this.vehicle.public_id);
+            }
             return this.hostRouter.transitionTo('console.fleet-ops.management.vehicles.index.details.positions', this.vehicle.public_id);
         }
     }

package/addon/controllers/connectivity/devices/index/details.js

@@ -17,7 +17,7 @@ export default class ConnectivityDevicesIndexDetailsController extends Controlle
             },
             {
                 route: 'connectivity.devices.index.details.vehicle',
-                label: this.intl.t('resource.vehicle'),
+                label: this.intl.t('device.attachment.asset'),
             },
             {
                 route: 'connectivity.devices.index.details.sensors',
@@ -44,7 +44,7 @@ export default class ConnectivityDevicesIndexDetailsController extends Controlle
                 renderInPlace: true,
                 items: [
                     {
-                        text: this.intl.t('device.actions.attach-to-vehicle'),
+                        text: this.intl.t('device.actions.attach-to-asset'),
                         icon: 'link',
                         fn: () => this.deviceActions.attachToVehicle(this.model),
                         permission: 'fleet-ops update device',
@@ -52,7 +52,7 @@ export default class ConnectivityDevicesIndexDetailsController extends Controlle
                     ...(this.model.attachable_uuid || this.model.attached_to_name || this.model.attachable
                         ? [
                               {
-                                  text: this.intl.t('device.actions.detach-from-vehicle'),
+                                  text: this.intl.t('device.attachment.detach'),
                                   icon: 'unlink',
                                   fn: () => this.deviceActions.detachFromVehicle(this.model),
                                   permission: 'fleet-ops update device',

package/addon/controllers/connectivity/devices/index.js

@@ -14,6 +14,7 @@ export default class ConnectivityDevicesIndexController extends Controller {
     @service notifications;
     @service store;
     @service vehicleActions;
+    @service trailerActions;
 
     /** query params */
     @tracked queryParams = [