@fleetbase/fleetops-engine 0.6.64 → 0.6.66

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

@@ -1,33 +1 @@
-{{#if this.resource}}
-    {{#if this.compact}}
-        <button
-            type="button"
-            disabled={{and @column.permission (cannot @column.permission)}}
-            {{on "click" this.onClick}}
-            class="group flex w-full min-w-0 cursor-pointer items-center gap-2 py-0.5 text-left"
-            data-test-vehicle-identity-compact
-            ...attributes
-        >
-            <div class="relative flex h-5 w-5 flex-shrink-0 items-center justify-center">
-                <Image src={{this.mediaUrl}} @fallbackSrc={{this.fallbackImage}} class="h-5 w-5 rounded-md border border-gray-200 object-cover shadow-sm dark:border-gray-700" />
-                {{#if this.hasCompactStatusDot}}
-                    <FaIcon @icon="circle" @size="2xs" class="absolute left-0 top-0 -ml-1 -mt-1 {{this.compactStatusDotClass}}" data-test-resource-identity-status-dot />
-                {{/if}}
-            </div>
-            <div class="min-w-0 truncate text-sm leading-4 text-gray-900 group-hover:text-blue-600 dark:text-gray-200 dark:group-hover:text-blue-300">{{n-a this.label}}</div>
-            {{#if this.assignedDriverLabel}}
-                <span
-                    data-test-resource-identity-meta-badge
-                    class="inline-flex min-w-0 max-w-[12rem] flex-shrink items-center rounded-lg bg-gray-200 px-1 py-0 text-[10px] leading-4 text-gray-700 shadow-sm dark:bg-gray-800 dark:text-gray-300"
-                >
-                    <FaIcon @icon="user" @prefix="fas" @size="xs" class="mr-1 flex-shrink-0" />
-                    <span class="truncate">{{n-a this.assignedDriverLabel}}</span>
-                </span>
-            {{/if}}
-        </button>
-    {{else}}
-        <Table::Cell::ResourceIdentity @row={{this.resource}} @value={{@value}} @column={{this.column}} @onClick={{@onClick}} ...attributes />
-    {{/if}}
-{{else}}
-    <div class="py-1 text-xs text-gray-400 dark:text-gray-500" data-test-identity-empty-text ...attributes>{{this.emptyText}}</div>
-{{/if}}
+<Table::Cell::Identity @row={{@row}} @column={{@column}} @value={{@value}} @onClick={{@onClick}} @resourceType="vehicle" ...attributes />

package/addon/components/cell/vendor-identity.hbs

@@ -0,0 +1 @@
+<Table::Cell::Identity @row={{@row}} @column={{@column}} @value={{@value}} @onClick={{@onClick}} @resourceType="vendor" ...attributes />

package/addon/components/cell/warranty-identity.hbs

@@ -0,0 +1 @@
+<Table::Cell::Identity @row={{@row}} @column={{@column}} @value={{@value}} @onClick={{@onClick}} @resourceType="warranty" ...attributes />

package/addon/components/cell/waypoint-identity.hbs

@@ -0,0 +1 @@
+<Table::Cell::Identity @row={{@row}} @column={{@column}} @value={{@value}} @onClick={{@onClick}} @resourceType="waypoint" ...attributes />

package/addon/components/cell/work-order-identity.hbs

@@ -0,0 +1 @@
+<Table::Cell::Identity @row={{@row}} @column={{@column}} @value={{@value}} @onClick={{@onClick}} @resourceType="work-order" ...attributes />

package/addon/components/cell/zone-identity.hbs

@@ -0,0 +1 @@
+<Table::Cell::Identity @row={{@row}} @column={{@column}} @value={{@value}} @onClick={{@onClick}} @resourceType="zone" ...attributes />

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>
@@ -59,6 +59,7 @@
                 </div>
                 <ModelSelect
                     @modelName="place"
+                    @selectedItemComponent={{component "select-option/place" compact=true}}
                     @selectedModel={{@resource.place}}
                     @placeholder={{t "common.select-address"}}
                     @triggerClass="form-select form-input"
@@ -68,10 +69,7 @@
                     @disabled={{cannot-write @resource}}
                     as |model|
                 >
-                    <div class="flex items-center flex-row justify-between">
-                        <div class="truncate flex-1">{{n-a model.address}}</div>
-                        <Badge @hideStatusDot={{true}} @status="info">{{model.public_id}}</Badge>
-                    </div>
+                    <SelectOption::Place @option={{model}} />
                 </ModelSelect>
             </InputGroup>
 

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/contact/pill.hbs

@@ -0,0 +1,24 @@
+<Resource::Pill
+    @resource={{(or @contact @resource)}}
+    @resourceType="contact"
+    @title={{@title}}
+    @titleFallback={{@titleFallback}}
+    @subtitle={{@subtitle}}
+    @showOnlineIndicator={{@showOnlineIndicator}}
+    @noPopover={{@noPopover}}
+    @popoverPlacement={{@popoverPlacement}}
+    @static={{@static}}
+    @onClick={{@onClick}}
+    @onView={{@onView}}
+    @anchorClass={{@anchorClass}}
+    @imageClass={{@imageClass}}
+    @imageWrapperClass={{@imageWrapperClass}}
+    @contentWrapperClass={{@contentWrapperClass}}
+    @titleClass={{@titleClass}}
+    @subtitleClass={{@subtitleClass}}
+    @useBlock={{(has-block)}}
+    ...attributes
+    as |resource|
+>
+    {{yield resource}}
+</Resource::Pill>

package/addon/components/contact/summary.hbs

@@ -0,0 +1 @@
+<Resource::Summary @resource={{(or @contact @resource)}} @resourceType="contact" @onView={{@onView}} @showView={{@showView}} @onClose={{@onClose}} @titleFallback={{@titleFallback}} ...attributes />

package/addon/components/customer/create-order-form.hbs

@@ -74,6 +74,7 @@
                                     <div class="flex-1 flex-col px-3">
                                         <ModelSelect
                                             @modelName="place"
+                                            @selectedItemComponent={{component "select-option/place" compact=true}}
                                             @selectedModel={{waypoint.place}}
                                             @placeholder={{concat (t "order.fields.select-waypoint") " " (add index 1)}}
                                             @triggerClass="form-select form-input truncate max-w-250px"
@@ -85,7 +86,7 @@
                                             @permission="fleet-ops create order"
                                             as |model|
                                         >
-                                            {{model.address}}
+                                            <SelectOption::Place @option={{model}} />
                                         </ModelSelect>
                                         {{#if waypoint.place.hasInvalidCoordinates}}
                                             <div class="leading-5 text-sm text-red-400 mt-2">
@@ -121,6 +122,7 @@
                                 </div>
                                 <ModelSelect
                                     @modelName="place"
+                                    @selectedItemComponent={{component "select-option/place" compact=true}}
                                     @selectedModel={{this.payload.pickup}}
                                     @placeholder={{t "order.fields.select-pickup"}}
                                     @triggerClass="form-select form-input"
@@ -132,7 +134,7 @@
                                     @permission="fleet-ops create order"
                                     as |model|
                                 >
-                                    {{model.address}}
+                                    <SelectOption::Place @option={{model}} />
                                 </ModelSelect>
                                 {{#if this.payload.pickup.hasInvalidCoordinates}}
                                     <div class="leading-5 text-sm text-red-400 mt-2">
@@ -157,6 +159,7 @@
                                 </div>
                                 <ModelSelect
                                     @modelName="place"
+                                    @selectedItemComponent={{component "select-option/place" compact=true}}
                                     @selectedModel={{this.payload.dropoff}}
                                     @placeholder={{t "order.fields.select-dropoff"}}
                                     @triggerClass="form-select form-input"
@@ -168,7 +171,7 @@
                                     @permission="fleet-ops create order"
                                     as |model|
                                 >
-                                    {{model.address}}
+                                    <SelectOption::Place @option={{model}} />
                                 </ModelSelect>
                                 {{#if this.payload.dropoff.hasInvalidCoordinates}}
                                     <div class="leading-5 text-sm text-red-400 mt-2">
@@ -186,6 +189,7 @@
                                 </div>
                                 <ModelSelect
                                     @modelName="place"
+                                    @selectedItemComponent={{component "select-option/place" compact=true}}
                                     @selectedModel={{this.payload.return}}
                                     @placeholder={{t "order.fields.select-return"}}
                                     @triggerClass="form-select form-input"
@@ -197,7 +201,7 @@
                                     @permission="fleet-ops create order"
                                     as |model|
                                 >
-                                    {{model.address}}
+                                    <SelectOption::Place @option={{model}} />
                                 </ModelSelect>
                                 {{#if this.payload.return.hasInvalidCoordinates}}
                                     <div class="leading-5 text-sm text-red-400 mt-2">

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"
@@ -66,6 +66,7 @@
                 </div>
                 <ModelSelect
                     @modelName="place"
+                    @selectedItemComponent={{component "select-option/place" compact=true}}
                     @selectedModel={{@resource.place}}
                     @placeholder={{t "common.select-field" field=(t "common.address")}}
                     @triggerClass="form-select form-input"
@@ -75,10 +76,7 @@
                     @disabled={{cannot-write @resource}}
                     as |model|
                 >
-                    <div class="flex items-center flex-row justify-between">
-                        <div class="truncate flex-1">{{place-address-html model}}</div>
-                        <Badge @hideStatusDot={{true}} @status="info">{{model.public_id}}</Badge>
-                    </div>
+                    <SelectOption::Place @option={{model}} />
                 </ModelSelect>
             </InputGroup>
             {{#if this.showWelcomeEmailOption}}

package/addon/components/customer/order-form.hbs

@@ -18,16 +18,14 @@
                         <PowerSelect
                             @options={{this.orderConfigActions.allOrderConfigs}}
                             @selected={{@order.order_config}}
+                            @selectedItemComponent={{component "select-option/order-config" compact=true}}
                             @onChange={{perform this.selectOrderConfig}}
                             @placeholder={{t "order.fields.order-type-placeholder"}}
                             @triggerClass="form-select form-input"
                             @disabled={{cannot-write @order}}
                             as |orderConfig|
                         >
-                            <div class="text-sm">
-                                <div class="font-semibold normalize-in-trigger">{{orderConfig.name}}</div>
-                                <div class="hide-from-trigger">{{n-a orderConfig.description}}</div>
-                            </div>
+                            <SelectOption::OrderConfig @option={{orderConfig}} />
                         </PowerSelect>
                     </div>
                 </InputGroup>
@@ -83,6 +81,7 @@
                                     <div class="flex-1 flex-col px-3">
                                         <ModelSelect
                                             @modelName="place"
+                                            @selectedItemComponent={{component "select-option/place" compact=true}}
                                             @selectedModel={{waypoint.place}}
                                             @placeholder={{concat (t "order.fields.select-waypoint") " " (add index 1)}}
                                             @triggerClass="form-select form-input truncate max-w-250px"
@@ -94,7 +93,7 @@
                                             @permission="fleet-ops create order"
                                             as |model|
                                         >
-                                            {{model.address}}
+                                            <SelectOption::Place @option={{model}} />
                                         </ModelSelect>
                                         {{#if waypoint.place.hasInvalidCoordinates}}
                                             <div class="leading-5 text-sm text-red-400 mt-2">
@@ -130,6 +129,7 @@
                                 </div>
                                 <ModelSelect
                                     @modelName="place"
+                                    @selectedItemComponent={{component "select-option/place" compact=true}}
                                     @selectedModel={{this.payload.pickup}}
                                     @placeholder={{t "order.fields.select-pickup"}}
                                     @triggerClass="form-select form-input"
@@ -141,7 +141,7 @@
                                     @permission="fleet-ops create order"
                                     as |model|
                                 >
-                                    {{model.address}}
+                                    <SelectOption::Place @option={{model}} />
                                 </ModelSelect>
                                 {{#if this.payload.pickup.hasInvalidCoordinates}}
                                     <div class="leading-5 text-sm text-red-400 mt-2">
@@ -166,6 +166,7 @@
                                 </div>
                                 <ModelSelect
                                     @modelName="place"
+                                    @selectedItemComponent={{component "select-option/place" compact=true}}
                                     @selectedModel={{this.payload.dropoff}}
                                     @placeholder={{t "order.fields.select-dropoff"}}
                                     @triggerClass="form-select form-input"
@@ -177,7 +178,7 @@
                                     @permission="fleet-ops create order"
                                     as |model|
                                 >
-                                    {{model.address}}
+                                    <SelectOption::Place @option={{model}} />
                                 </ModelSelect>
                                 {{#if this.payload.dropoff.hasInvalidCoordinates}}
                                     <div class="leading-5 text-sm text-red-400 mt-2">
@@ -195,6 +196,7 @@
                                 </div>
                                 <ModelSelect
                                     @modelName="place"
+                                    @selectedItemComponent={{component "select-option/place" compact=true}}
                                     @selectedModel={{this.payload.return}}
                                     @placeholder={{t "order.fields.select-return"}}
                                     @triggerClass="form-select form-input"
@@ -206,7 +208,7 @@
                                     @permission="fleet-ops create order"
                                     as |model|
                                 >
-                                    {{model.address}}
+                                    <SelectOption::Place @option={{model}} />
                                 </ModelSelect>
                                 {{#if this.payload.return.hasInvalidCoordinates}}
                                     <div class="leading-5 text-sm text-red-400 mt-2">

package/addon/components/customer/pill.hbs

@@ -0,0 +1,24 @@
+<Resource::Pill
+    @resource={{(or @customer @resource)}}
+    @resourceType="customer"
+    @title={{@title}}
+    @titleFallback={{@titleFallback}}
+    @subtitle={{@subtitle}}
+    @showOnlineIndicator={{@showOnlineIndicator}}
+    @noPopover={{@noPopover}}
+    @popoverPlacement={{@popoverPlacement}}
+    @static={{@static}}
+    @onClick={{@onClick}}
+    @onView={{@onView}}
+    @anchorClass={{@anchorClass}}
+    @imageClass={{@imageClass}}
+    @imageWrapperClass={{@imageWrapperClass}}
+    @contentWrapperClass={{@contentWrapperClass}}
+    @titleClass={{@titleClass}}
+    @subtitleClass={{@subtitleClass}}
+    @useBlock={{(has-block)}}
+    ...attributes
+    as |resource|
+>
+    {{yield resource}}
+</Resource::Pill>

package/addon/components/customer/summary.hbs

@@ -0,0 +1 @@
+<Resource::Summary @resource={{(or @customer @resource)}} @resourceType="customer" @onView={{@onView}} @showView={{@showView}} @onClose={{@onClose}} @titleFallback={{@titleFallback}} ...attributes />

package/addon/components/device/details.hbs

@@ -111,7 +111,9 @@
                 </div>
                 <div class="field-info-container">
                     <div class="field-name">{{t "device.fields.warranty"}}</div>
-                    <div class="field-value">{{n-a (or @resource.warranty.name @resource.warranty_name)}}</div>
+                    <div class="field-value">
+                        <Warranty::Pill @warranty={{resource-relation @resource "warranty"}} @titleFallback={{n-a @resource.warranty_name}} />
+                    </div>
                 </div>
                 <div class="field-info-container sm:col-span-2">
                     <div class="field-name">{{t "device.fields.notes"}}</div>

package/addon/components/device/form.hbs

@@ -4,6 +4,7 @@
             <InputGroup @name={{t "device.fields.telematic"}}>
                 <ModelSelect
                     @modelName="telematic"
+                    @selectedItemComponent={{component "select-option/telematic" compact=true}}
                     @selectedModel={{@resource.telematic}}
                     @placeholder={{t "device.fields.telematic-placeholder"}}
                     @triggerClass="form-select form-input"
@@ -13,16 +14,7 @@
                     @disabled={{or (cannot-write @resource) this.isTelematicLocked}}
                     as |model|
                 >
-                    <div class="space-x-2 text-sm">
-                        <div class="inline-block align-top">
-                            <div class="hide-from-trigger h-1.5 w-full"></div>
-                            <Image src={{model.provider_descriptor.icon}} class="w-5 h-5" />
-                        </div>
-                        <div class="inline-block">
-                            <div class="font-semibold normalize-in-trigger">{{or model.name model.public_id}}</div>
-                            <div class="hide-from-trigger">{{n-a model.provider_descriptor.label (titleize model.provider)}}</div>
-                        </div>
-                    </div>
+                    <SelectOption::Telematic @option={{model}} />
                 </ModelSelect>
             </InputGroup>
 
@@ -189,6 +181,7 @@
             <InputGroup @name={{t "device.fields.warranty"}}>
                 <ModelSelect
                     @modelName="warranty"
+                    @selectedItemComponent={{component "select-option/warranty" compact=true}}
                     @selectedModel={{@resource.warranty}}
                     @placeholder={{t "device.fields.warranty-placeholder"}}
                     @triggerClass="form-select form-input"
@@ -199,9 +192,7 @@
                     @disabled={{cannot-write @resource}}
                     as |model|
                 >
-                    {{model.policy_number}}
-                    -
-                    {{model.provider}}
+                    <SelectOption::Warranty @option={{model}} />
                 </ModelSelect>
             </InputGroup>
         </div>

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-header.hbs

@@ -40,8 +40,8 @@
                         </span>
                     {{/if}}
                     {{#if this.attachedVehicle}}
-                        <span class="inline-flex max-w-[12rem] items-center gap-1 truncate rounded-md bg-gray-100 px-1.5 py-0.5 text-[11px] font-medium leading-4 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
-                            <FaIcon @icon="car" class="text-gray-400 dark:text-gray-300" />
+                        <span class="inline-flex max-w-[14rem] items-center gap-1 truncate rounded-md bg-gray-100 px-1.5 py-0.5 text-[11px] font-medium leading-4 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
+                            <FaIcon @icon="link" class="text-gray-400 dark:text-gray-300" />
                             <span class="truncate">{{this.attachedVehicle}}</span>
                         </span>
                     {{/if}}
@@ -65,4 +65,5 @@
             />
         </div>
     </div>
+    {{#if @resource.meta.telemetry}}<Device::Telemetry @resource={{@resource}} />{{/if}}
 </div>

package/addon/components/device/panel-header.js

@@ -37,11 +37,7 @@ export default class DevicePanelHeaderComponent extends Component {
 
     get attachedVehicle() {
         return (
-            get(this.resource, 'attached_to_name') ??
-            get(this.resource, 'attachable.displayName') ??
-            get(this.resource, 'attachable.display_name') ??
-            get(this.resource, 'attachable.name') ??
-            get(this.resource, 'attachable_uuid')
+            get(this.resource, 'attached_to_name') ?? get(this.resource, 'attachable.displayName') ?? get(this.resource, 'attachable.display_name') ?? get(this.resource, 'attachable.name')
         );
     }