@fleetbase/fleetops-engine 0.6.64 → 0.6.65

package/addon/components/modals/attach-equipment.hbs

@@ -0,0 +1,22 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <InputGroup @name={{t "common.select-field" field=(t "resource.equipment")}} @helpText={{t "trailer.help.select-equipment"}}>
+            <ModelSelect
+                @modelName="equipment"
+                @selectedModel={{@options.selectedEquipment}}
+                @query={{hash attachment_state="detached"}}
+                @placeholder={{t "trailer.placeholders.equipment"}}
+                @triggerClass="form-select form-input"
+                @infiniteScroll={{true}}
+                @renderInPlace={{true}}
+                @onChange={{fn (mut @options.selectedEquipment)}}
+                as |equipment|
+            >
+                <div class="flex flex-col">
+                    <span class="text-sm font-semibold">{{or equipment.name equipment.public_id}}</span>
+                    <span class="text-xs text-gray-500 dark:text-gray-400">{{n-a (or equipment.type equipment.serial_number equipment.code)}}</span>
+                </div>
+            </ModelSelect>
+        </InputGroup>
+    </div>
+</Modal::Default>

package/addon/components/modals/attach-equipment.js

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

package/addon/components/modals/attach-telematic-device.hbs

@@ -1,25 +1,30 @@
 <Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
     <div class="modal-body-container">
         <div class="mb-4 rounded-md border border-gray-200 bg-gray-50 p-3 dark:border-gray-700 dark:bg-gray-800">
-            <div class="text-xs font-semibold uppercase text-gray-500 dark:text-gray-400">Synced device</div>
+            <div class="text-xs font-semibold uppercase text-gray-500 dark:text-gray-400">{{t "device.attachment.synced-device"}}</div>
             <div class="mt-2">
                 <Device::Pill @device={{@options.device}} />
             </div>
         </div>
 
-        <InputGroup @name={{t "common.select-field" field=(t "resource.vehicle")}} @value={{@options.selectedVehicle}}>
+        <InputGroup @name={{t "device.attachment.asset-type"}}>
+            <PowerSelect @options={{this.assetTypeOptions}} @selected={{@options.selectedAssetType}} @placeholder={{t "device.attachment.select-asset-type"}} @triggerClass="form-select form-input" @onChange={{fn (mut @options.selectedAssetType)}} as |option|>{{option.label}}</PowerSelect>
+        </InputGroup>
+        {{#if @options.selectedAssetType}}
+        <InputGroup @name={{t "common.select-field" field=@options.selectedAssetType.label}} @value={{@options.selectedAsset}}>
             <ModelSelect
-                @modelName="vehicle"
-                @selectedModel={{@options.selectedVehicle}}
-                @placeholder={{t "common.select-field" field=(t "resource.vehicle")}}
+                @modelName={{@options.selectedAssetType.model}}
+                @selectedModel={{@options.selectedAsset}}
+                @placeholder={{t "common.select-field" field=@options.selectedAssetType.label}}
                 @triggerClass="form-select form-input"
                 @infiniteScroll={{true}}
                 @renderInPlace={{true}}
-                @onChange={{fn (mut @options.selectedVehicle)}}
-                as |vehicle|
+                @onChange={{fn (mut @options.selectedAsset)}}
+                as |asset|
             >
-                <Vehicle::Pill @resource={{vehicle}} />
+                {{or asset.displayName asset.display_name asset.name asset.public_id}}
             </ModelSelect>
         </InputGroup>
+        {{/if}}
     </div>
 </Modal::Default>

package/addon/components/modals/attach-telematic-device.js

@@ -1,3 +1,13 @@
 import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
 
-export default class ModalsAttachTelematicDeviceComponent extends Component {}
+export default class ModalsAttachTelematicDeviceComponent extends Component {
+    @service intl;
+
+    get assetTypeOptions() {
+        return [
+            { value: 'fleet-ops:vehicle', model: 'vehicle', label: this.intl.t('resource.vehicle') },
+            { value: 'fleet-ops:trailer', model: 'trailer', label: this.intl.t('resource.trailer') },
+        ];
+    }
+}

package/addon/components/modals/attach-trailer.hbs

@@ -0,0 +1,30 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        {{#if @options.trailer}}
+            <div class="mb-4 rounded-md border border-gray-200 bg-gray-50 p-3 dark:border-gray-700 dark:bg-gray-800">
+                <div class="text-xs font-semibold uppercase text-gray-500 dark:text-gray-400">{{t "resource.trailer"}}</div>
+                <div class="mt-1 text-sm font-semibold text-gray-900 dark:text-gray-100">{{@options.trailer.displayName}}</div>
+                <div class="text-xs text-gray-500 dark:text-gray-400">{{n-a (or @options.trailer.plate_number @options.trailer.code @options.trailer.public_id)}}</div>
+            </div>
+        {{/if}}
+
+        <InputGroup @name={{t "trailer.fields.vehicle"}} @helpText={{t "trailer.help.attach-vehicle"}}>
+            <ModelSelect
+                @modelName="vehicle"
+                @selectedModel={{@options.selectedVehicle}}
+                @placeholder={{t "trailer.placeholders.vehicle"}}
+                @triggerClass="form-select form-input"
+                @infiniteScroll={{true}}
+                @renderInPlace={{true}}
+                @onChange={{fn (mut @options.selectedVehicle)}}
+                as |vehicle|
+            >
+                <Vehicle::Pill @vehicle={{vehicle}} />
+            </ModelSelect>
+        </InputGroup>
+
+        <InputGroup @name={{t "trailer.fields.position"}} @helpText={{t "trailer.help.position"}}>
+            <Input @type="number" @value={{@options.position}} min="1" step="1" class="w-full form-input" placeholder={{t "trailer.placeholders.position"}} />
+        </InputGroup>
+    </div>
+</Modal::Default>

package/addon/components/modals/attach-trailer.js

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

package/addon/components/modals/contact-form.hbs

@@ -3,8 +3,8 @@
         <div class="flex">
             <div class="w-32 mb-6 mr-6">
                 <Image
-                    src={{@options.contact.photo_url}}
-                    @fallbackSrc={{config "defaultValues.contactImage"}}
+                    src={{resource-image @options.contact.photo_url "contact"}}
+                    @fallbackSrc={{(placeholder-image "contact")}}
                     alt={{@options.contact.name}}
                     height="128"
                     width="128"

package/addon/components/modals/convert-customer-to-vendor.hbs

@@ -11,7 +11,7 @@
 
         <InputGroup @name="Primary Personnel" @wrapperClass="mb-0i">
             <div class="flex items-start rounded-md border border-gray-200 bg-gray-50 px-3 py-2 dark:border-gray-700 dark:bg-gray-800">
-                <Image src={{this.customer.photo_url}} @fallbackSrc={{config "defaultValues.contactImage"}} alt={{this.customer.name}} class="mr-2 h-6 w-6 rounded-md" />
+                <Image src={{resource-image this.customer.photo_url "customer"}} @fallbackSrc={{(placeholder-image "customer")}} alt={{this.customer.name}} class="mr-2 h-6 w-6 rounded-md" />
                 <div class="min-w-0">
                     <div class="leading-4 text-sm truncate font-semibold dark:text-gray-100">{{this.customer.name}}</div>
                     <div class="truncate text-sm text-gray-500 dark:text-gray-400">{{n-a this.customer.email}}</div>

package/addon/components/modals/driver-form.hbs

@@ -3,8 +3,8 @@
         <div class="flex">
             <div class="w-32 mb-6 mr-6">
                 <Image
-                    src={{@options.driver.photo_url}}
-                    @fallbackSrc={{config "defaultValues.driverImage"}}
+                    src={{resource-image @options.driver.photo_url "driver"}}
+                    @fallbackSrc={{(placeholder-image "driver")}}
                     alt={{@options.driver.name}}
                     height="128"
                     width="128"

package/addon/components/modals/select-trailer.hbs

@@ -0,0 +1,35 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        {{#if @options.vehicle}}
+            <div class="mb-4 rounded-md border border-gray-200 bg-gray-50 p-3 dark:border-gray-700 dark:bg-gray-800">
+                <div class="text-xs font-semibold uppercase text-gray-500 dark:text-gray-400">{{t "resource.vehicle"}}</div>
+                <div class="mt-2">
+                    <Vehicle::Pill @vehicle={{@options.vehicle}} />
+                </div>
+            </div>
+        {{/if}}
+
+        <InputGroup @name={{t "resource.trailer"}} @helpText={{t "trailer.help.select-trailer"}}>
+            <ModelSelect
+                @modelName="trailer"
+                @selectedModel={{@options.selectedTrailer}}
+                @query={{hash attachment_state="detached"}}
+                @placeholder={{t "trailer.placeholders.trailer"}}
+                @triggerClass="form-select form-input"
+                @infiniteScroll={{true}}
+                @renderInPlace={{true}}
+                @onChange={{fn (mut @options.selectedTrailer)}}
+                as |trailer|
+            >
+                <div class="flex flex-col">
+                    <span class="text-sm font-semibold">{{trailer.displayName}}</span>
+                    <span class="text-xs text-gray-500 dark:text-gray-400">{{n-a (or trailer.plate_number trailer.code trailer.public_id)}}</span>
+                </div>
+            </ModelSelect>
+        </InputGroup>
+
+        <InputGroup @name={{t "trailer.fields.position"}} @helpText={{t "trailer.help.position"}}>
+            <Input @type="number" @value={{@options.position}} min="1" step="1" class="w-full form-input" placeholder={{t "trailer.placeholders.position"}} />
+        </InputGroup>
+    </div>
+</Modal::Default>

package/addon/components/modals/select-trailer.js

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

package/addon/components/modals/vehicle-form.hbs

@@ -3,8 +3,8 @@
         <div class="flex">
             <div class="w-32 mb-6 mr-6">
                 <Image
-                    src={{@options.vehicle.photo_url}}
-                    @fallbackSrc={{config "defaultValues.vehicleImage"}}
+                    src={{resource-image @options.vehicle.photo_url "vehicle"}}
+                    @fallbackSrc={{(placeholder-image "vehicle")}}
                     alt={{@options.vehicle.name}}
                     height="128"
                     width="128"

package/addon/components/orchestrator/resource-panel.hbs

@@ -232,10 +232,10 @@
                         {{! Avatar — online dot top-right }}
                         <div class="relative flex-shrink-0 mt-0.5">
                             <img
-                                src={{driver.photo_url}}
+                                src={{resource-image driver.photo_url "driver"}}
                                 alt={{or driver.name "Driver"}}
                                 class="w-9 h-9 rounded-full object-cover bg-gray-200 dark:bg-gray-700"
-                                {{fallback-img-src (config "defaultValues.driverImage")}}
+                                {{fallback-img-src (placeholder-image "driver")}}
                             />
                             <span
                                 class="absolute top-0 left-0 block w-2.5 h-2.5 rounded-full border-2 border-white dark:border-gray-900 {{if driver.online 'bg-green-500' 'bg-gray-400'}}"

package/addon/components/order/customer-avatar-stack.hbs

@@ -2,8 +2,8 @@
     {{#each this.entries as |entry idx|}}
         <div class="relative group {{if (gt idx 0) this.overlapClass}}" {{set-z-index (add 1 idx)}}>
             <Image
-                src={{avatar-url entry.photoUrl}}
-                @fallbackSrc={{config "defaultValues.contactImage"}}
+                src={{resource-image entry.photoUrl "customer"}}
+                @fallbackSrc={{(placeholder-image "customer")}}
                 alt={{or entry.name "Unknown customer"}}
                 class="{{this.sizeClass}} rounded-full ring-2 ring-gray-800 dark:ring-gray-700 shadow transition-shadow hover:shadow-md focus:shadow-md"
                 role="img"

package/addon/components/order/details/detail.hbs

@@ -44,8 +44,8 @@
                         <div class="flex flex-row space-x-2">
                             <div>
                                 <Image
-                                    src={{avatar-url @resource.customer.photo_url}}
-                                    @fallbackSrc={{config "defaultValues.contactImage"}}
+                                    src={{resource-image @resource.customer.photo_url "customer"}}
+                                    @fallbackSrc={{(placeholder-image "customer")}}
                                     width="28"
                                     height="28"
                                     class="w-7 h-7 rounded-full ring-2 ring-gray-800 dark:ring-gray-700 shadow transition-shadow hover:shadow-md focus:shadow-md"
@@ -66,8 +66,8 @@
                     <div class="flex flex-row space-x-2">
                         <div>
                             <Image
-                                src={{avatar-url @resource.facilitator.photo_url}}
-                                @fallbackSrc={{config "defaultValues.contactImage"}}
+                                src={{resource-image @resource.facilitator.photo_url "vendor"}}
+                                @fallbackSrc={{(placeholder-image "vendor")}}
                                 width="28"
                                 height="28"
                                 class="w-7 h-7 rounded-full ring-2 ring-gray-800 dark:ring-gray-700 shadow transition-shadow hover:shadow-md focus:shadow-md"

package/addon/components/order/details/payload.hbs

@@ -10,8 +10,8 @@
                                     <div class="flex flex-row">
                                         <div>
                                             <Image
-                                                src={{avatar-url group.waypoint.customer.photo_url}}
-                                                @fallbackSrc={{config "defaultValues.contactImage"}}
+                                                src={{resource-image group.waypoint.customer.photo_url "customer"}}
+                                                @fallbackSrc={{(placeholder-image "customer")}}
                                                 class="w-8 h-8 rounded-md shadow-sm mr-2"
                                                 alt={{group.waypoint.customer.name}}
                                             />

package/addon/components/order/kanban-card.hbs

@@ -64,8 +64,8 @@
                 <div class="flex flex-row space-x-2">
                     <div class="resource-assigned-photo relative">
                         <Image
-                            src={{avatar-url @card.customer.photo_url}}
-                            @fallbackSrc={{config "defaultValues.contactImage"}}
+                            src={{resource-image @card.customer.photo_url "customer"}}
+                            @fallbackSrc={{(placeholder-image "customer")}}
                             class="w-5 h-5 rounded-lg shadow-sm"
                             alt={{@card.customer.name}}
                         />
@@ -81,8 +81,8 @@
                 <div class="flex flex-row space-x-2">
                     <div class="resource-assigned-photo relative">
                         <Image
-                            src={{avatar-url @card.driver_assigned.photo_url}}
-                            @fallbackSrc={{config "defaultValues.driverImage"}}
+                            src={{resource-image @card.driver_assigned.photo_url "driver"}}
+                            @fallbackSrc={{(placeholder-image "driver")}}
                             class="w-5 h-5 rounded-lg shadow-sm"
                             alt={{@card.driver_assigned.name}}
                         />

package/addon/components/order-list-overlay/order.hbs

@@ -74,8 +74,8 @@
                         <div class="resource-assigned">
                             <div class="resource-assigned-photo">
                                 <Image
-                                    src={{avatar-url @order.customer.photo_url}}
-                                    @fallbackSrc={{config "defaultValues.contactImage"}}
+                                    src={{resource-image @order.customer.photo_url "customer"}}
+                                    @fallbackSrc={{(placeholder-image "customer")}}
                                     width="32"
                                     height="32"
                                     class="w-8 h-8 rounded-lg shadow-sm mr-2"
@@ -93,8 +93,8 @@
                         <div class="resource-assigned">
                             <div class="resource-assigned-photo">
                                 <Image
-                                    src={{avatar-url @order.driver_assigned.photo_url}}
-                                    @fallbackSrc={{config "defaultValues.driverImage"}}
+                                    src={{resource-image @order.driver_assigned.photo_url "driver"}}
+                                    @fallbackSrc={{(placeholder-image "driver")}}
                                     width="32"
                                     height="32"
                                     class="w-8 h-8 rounded-lg shadow-sm mr-2"

package/addon/components/trailer/card.hbs

@@ -0,0 +1,68 @@
+<Layout::Resource::Card class="fleetops-resource-card trailer-card" ...attributes as |Card|>
+    <Card.header class={{@headerClass}}>
+        <RegistryYield @registry="fleet-ops:component:trailer:card:header:start" as |RegistryComponent|>
+            <RegistryComponent @resource={{@resource}} />
+        </RegistryYield>
+        <div class="fleetops-card-title">
+            <div class="font-semibold flex-1 truncate">{{@resource.displayName}}</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">
+            {{#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>
+        {{#if (has-block "header")}}
+            {{yield to="header"}}
+        {{/if}}
+        <RegistryYield @registry="fleet-ops:component:trailer: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 "trailer"}} @fallbackSrc={{(placeholder-image "trailer")}} alt={{@resource.displayName}} 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:trailer: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 "available"}} @size="xs" @text={{t (concat "trailer.statuses." (or @resource.status "available"))}} />
+            <div class="flex flex-row items-center space-x-1">
+                <Button @icon="eye" @size="xs" @helpText={{t "common.view"}} @onClick={{fn this.trailerActions.transition.view @resource}} @permission="fleet-ops view trailer" />
+                <Button @icon="pencil" @size="xs" @helpText={{t "common.edit"}} @onClick={{fn this.trailerActions.transition.edit @resource}} @permission="fleet-ops update trailer" />
+                <Button @icon="trash" @size="xs" @type="danger" @helpText={{t "common.delete"}} @onClick={{fn this.trailerActions.delete @resource}} @permission="fleet-ops delete trailer" />
+            </div>
+        </div>
+        <RegistryYield @registry="fleet-ops:component:trailer: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="car" @prefix="fas" />
+                <span class="fleetops-card-meta-value">
+                    {{#if @resource.isAttached}}
+                        {{#if @resource.current_vehicle}}
+                            <a href="javascript:;" class="fleetops-card-meta-link" {{on "click" this.viewVehicle}}>{{n-a @resource.current_vehicle_name}}</a>
+                        {{else}}
+                            {{n-a @resource.current_vehicle_name}}
+                        {{/if}}
+                    {{else}}
+                        {{t "trailer.attachment.no-vehicle"}}
+                    {{/if}}
+                </span>
+            </div>
+            <div class="fleetops-card-meta">
+                <FaIcon @icon="satellite-dish" @prefix="fas" />
+                <span class="fleetops-card-meta-value">{{t (concat "trailer.connectivity." (or @resource.connectivity_status "never_connected"))}}</span>
+            </div>
+            <div class="fleetops-card-meta">{{t "common.last-modified"}}: {{@resource.updatedAt}}</div>
+        </div>
+    </Card.footer>
+</Layout::Resource::Card>
+{{yield}}

package/addon/components/trailer/card.js

@@ -0,0 +1,22 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+
+export default class TrailerCardComponent extends Component {
+    @service trailerActions;
+    @service vehicleActions;
+
+    @action viewVehicle() {
+        const vehicle = this.args.resource?.current_vehicle;
+
+        if (!vehicle) {
+            return;
+        }
+
+        if (this.vehicleActions.panel?.view) {
+            return this.vehicleActions.panel.view(vehicle);
+        }
+
+        return this.vehicleActions.transition.view(vehicle);
+    }
+}

package/addon/components/trailer/details/connections.hbs

@@ -0,0 +1,57 @@
+<AttachmentList
+    @title={{t "trailer.tabs.connections"}}
+    @description={{t "trailer.connections.description"}}
+    @actionText={{if this.isAttached (t "trailer.actions.detach-vehicle") (t "trailer.actions.attach-vehicle")}}
+    @actionIcon={{if this.isAttached "unlink" "link"}}
+    @actionType={{if this.isAttached "danger" "primary"}}
+    @onAction={{if this.isAttached this.detachVehicle this.attachVehicle}}
+    @actionPermission={{if this.isAttached "fleet-ops detach-vehicle-for trailer" "fleet-ops attach-vehicle-for trailer"}}
+    @hideEmptyAction={{this.isAttached}}
+    @isLoading={{this.loadConnections.isRunning}}
+    @items={{this.connections}}
+    @emptyIcon="link-slash"
+    @emptyTitle={{t "trailer.empty.connections"}}
+    @emptyDescription={{t "trailer.empty.connections-description"}}
+    class="trailer-details-connections"
+>
+    <:item as |connection|>
+        <div class="fleetops-towing-entry {{if connection.isActive 'fleetops-towing-entry--active'}}">
+            <div class="fleetops-towing-entry-vehicle">
+                {{#if connection.vehicle}}
+                    <Vehicle::Pill @vehicle={{connection.vehicle}} @onClick={{fn this.viewVehicle connection.vehicle}} @noTooltip={{true}} />
+                {{else}}
+                    <span class="text-sm text-gray-400 dark:text-gray-500">{{t "trailer.attachment.no-vehicle"}}</span>
+                {{/if}}
+            </div>
+            <div class="fleetops-towing-entry-timeline">
+                <div class="fleetops-towing-entry-timeline-row">
+                    <FaIcon @icon="link" class="text-green-500 dark:text-green-400" />
+                    <span>{{t "trailer.connections.connected" date=(format-date-fns connection.connected_at "dd MMM yyyy, HH:mm")}}</span>
+                </div>
+                <div class="fleetops-towing-entry-timeline-row">
+                    {{#if connection.disconnected_at}}
+                        <FaIcon @icon="link-slash" class="text-gray-400 dark:text-gray-500" />
+                        <span>{{t "trailer.connections.disconnected" date=(format-date-fns connection.disconnected_at "dd MMM yyyy, HH:mm")}}</span>
+                    {{else}}
+                        <FaIcon @icon="circle" @size="2xs" class="text-green-500 dark:text-green-400 animate-pulse" />
+                        <span class="text-green-600 dark:text-green-400 font-medium">{{t "trailer.connections.still-attached"}}</span>
+                    {{/if}}
+                </div>
+                <div class="fleetops-attachment-list-item-meta">
+                    {{#if connection.position}}
+                        <span class="fleetops-attachment-list-item-meta-entry">{{t "trailer.attachment.position" position=connection.position}}</span>
+                    {{/if}}
+                    {{#if connection.duration}}
+                        <span class="fleetops-attachment-list-item-meta-entry"><FaIcon @icon="clock" class="mr-1" />{{connection.duration}}</span>
+                    {{/if}}
+                    {{#if connection.source}}
+                        <span class="fleetops-attachment-list-item-meta-entry">{{smart-humanize connection.source}}</span>
+                    {{/if}}
+                </div>
+            </div>
+        </div>
+    </:item>
+    <:itemActions as |connection|>
+        <Badge @status={{if connection.isActive "attached" "detached"}} @size="xs" @icon={{if connection.isActive "link" "link-slash"}} @text={{t (concat "trailer.attachment." (if connection.isActive "attached" "detached"))}} />
+    </:itemActions>
+</AttachmentList>

package/addon/components/trailer/details/connections.js

@@ -0,0 +1,59 @@
+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';
+
+/**
+ * Effective-dated towing history for a trailer, newest first. The active
+ * connection is highlighted and can be ended from here.
+ */
+export default class TrailerDetailsConnectionsComponent extends Component {
+    @service store;
+    @service notifications;
+    @service trailerActions;
+    @service vehicleActions;
+    @tracked connections = [];
+
+    get trailer() {
+        return this.args.resource;
+    }
+
+    get isAttached() {
+        return this.trailer?.isAttached ?? this.trailer?.attachment_state === 'attached';
+    }
+
+    constructor() {
+        super(...arguments);
+        this.loadConnections.perform();
+    }
+
+    @task *loadConnections() {
+        try {
+            const trailer = yield this.store.queryRecord('trailer', { public_id: this.trailer.public_id ?? this.trailer.id, single: true, with: ['connections.vehicle'] });
+            this.connections = Array.from(trailer?.connections ?? []);
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+
+    @action viewVehicle(vehicle) {
+        if (!vehicle) {
+            return;
+        }
+
+        if (this.vehicleActions.panel?.view) {
+            return this.vehicleActions.panel.view(vehicle);
+        }
+
+        return this.vehicleActions.transition.view(vehicle);
+    }
+
+    @action attachVehicle() {
+        return this.trailerActions.attachVehicle(this.trailer, { callback: () => this.loadConnections.perform() });
+    }
+
+    @action detachVehicle() {
+        return this.trailerActions.detachVehicle(this.trailer, { callback: () => this.loadConnections.perform() });
+    }
+}

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

@@ -0,0 +1,25 @@
+<AttachmentList
+    @title={{t "trailer.tabs.equipment"}}
+    @description={{t "trailer.equipment.description"}}
+    @actionText={{t "trailer.actions.attach-equipment"}}
+    @actionIcon="plus"
+    @onAction={{this.attach}}
+    @actionPermission="fleet-ops attach-equipment-for trailer"
+    @isLoading={{this.loadEquipment.isRunning}}
+    @items={{this.equipment}}
+    @emptyIcon="toolbox"
+    @emptyTitle={{t "trailer.empty.equipment"}}
+    @emptyDescription={{t "trailer.empty.equipment-description"}}
+    class="trailer-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 "trailer.actions.detach-equipment"}} @onClick={{fn this.detach item}} @permission="fleet-ops detach-equipment-for trailer" />
+    </:itemActions>
+</AttachmentList>

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

@@ -0,0 +1,52 @@
+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';
+
+export default class TrailerDetailsEquipmentComponent extends Component {
+    @service store;
+    @service notifications;
+    @service equipmentActions;
+    @service trailerActions;
+    @tracked equipment = [];
+
+    get trailer() {
+        return this.args.resource;
+    }
+
+    constructor() {
+        super(...arguments);
+        this.loadEquipment.perform();
+    }
+
+    @task *loadEquipment() {
+        try {
+            const equipment = yield this.store.query('equipment', {
+                equipable_type: 'fleet-ops:trailer',
+                equipable: this.trailer.public_id ?? this.trailer.id,
+                sort: '-created_at',
+            });
+
+            this.equipment = Array.from(equipment ?? []);
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+
+    @action attach() {
+        return this.trailerActions.attachEquipment(this.trailer, { callback: () => this.loadEquipment.perform() });
+    }
+
+    @action detach(equipment) {
+        return this.trailerActions.detachEquipment(this.trailer, 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);
+    }
+}