@fleetbase/fleetops-engine 0.6.65 → 0.6.66

package/addon/components/maintenance/form.hbs

@@ -74,6 +74,7 @@
                         @selected={{this.selectedMaintainableType}}
                         @onChange={{this.onMaintainableTypeChange}}
                         @placeholder="Select asset type (Vehicle, Equipment…)"
+                        @allowClear={{true}}
                         @triggerClass="form-select form-input"
                         @disabled={{cannot-write @resource}}
                         as |option|
@@ -86,8 +87,10 @@
                 <InputGroup @name="Asset">
                     <ModelSelect
                         @modelName={{this.maintainableModelName}}
+                        @selectedItemComponent={{if (resource-component "select-option" this.maintainableModelName) (component (resource-component "select-option" this.maintainableModelName) compact=true)}}
                         @selectedModel={{@resource.maintainable}}
                         @placeholder="Select asset"
+                        @allowClear={{true}}
                         @triggerClass="form-select form-input"
                         @infiniteScroll={{false}}
                         @renderInPlace={{true}}
@@ -95,7 +98,13 @@
                         @disabled={{cannot-write @resource}}
                         as |model|
                     >
-                        {{or model.name model.public_id}}
+                        {{#let (resource-component "select-option" this.maintainableModelName) as |selectOption|}}
+                            {{#if selectOption}}
+                                {{component selectOption option=model}}
+                            {{else}}
+                                {{or model.displayName model.name model.public_id}}
+                            {{/if}}
+                        {{/let}}
                     </ModelSelect>
                 </InputGroup>
             {{/if}}
@@ -110,6 +119,7 @@
                         @selected={{this.selectedPerformedByType}}
                         @onChange={{this.onPerformedByTypeChange}}
                         @placeholder="Select performer type (Vendor, Driver, User…)"
+                        @allowClear={{true}}
                         @triggerClass="form-select form-input"
                         @disabled={{cannot-write @resource}}
                         as |option|
@@ -122,8 +132,10 @@
                 <InputGroup @name="Performed By">
                     <ModelSelect
                         @modelName={{this.performedByModelName}}
+                        @selectedItemComponent={{if (resource-component "select-option" this.performedByModelName) (component (resource-component "select-option" this.performedByModelName) compact=true)}}
                         @selectedModel={{@resource.performed_by}}
                         @placeholder="Select performer"
+                        @allowClear={{true}}
                         @triggerClass="form-select form-input"
                         @infiniteScroll={{false}}
                         @renderInPlace={{true}}
@@ -131,7 +143,13 @@
                         @disabled={{cannot-write @resource}}
                         as |model|
                     >
-                        {{or model.name model.public_id}}
+                        {{#let (resource-component "select-option" this.performedByModelName) as |selectOption|}}
+                            {{#if selectOption}}
+                                {{component selectOption option=model}}
+                            {{else}}
+                                {{or model.displayName model.name model.public_id}}
+                            {{/if}}
+                        {{/let}}
                     </ModelSelect>
                 </InputGroup>
             {{/if}}
@@ -142,6 +160,7 @@
             <InputGroup @name="Work Order" @wrapperClass="col-span-2">
                 <ModelSelect
                     @modelName="work-order"
+                    @selectedItemComponent={{component "select-option/work-order" compact=true}}
                     @selectedModel={{@resource.work_order}}
                     @placeholder="Link to a Work Order (optional)"
                     @triggerClass="form-select form-input"
@@ -152,7 +171,7 @@
                     @disabled={{cannot-write @resource}}
                     as |model|
                 >
-                    {{or model.subject model.code model.public_id}}
+                    <SelectOption::WorkOrder @option={{model}} />
                 </ModelSelect>
             </InputGroup>
         </div>

package/addon/components/maintenance/form.js

@@ -122,7 +122,7 @@ export default class MaintenanceFormComponent extends Component {
      * maintainable relationship so a stale association is not persisted.
      */
     @action onMaintainableTypeChange(option) {
-        this.selectedMaintainableType = option;
+        this.selectedMaintainableType = option ?? null;
         // Clear the maintainable relationship — user must re-select the asset
         this.args.resource.maintainable = null;
         this.maintainableModelName = TYPE_TO_MODEL[option?.value] ?? null;
@@ -130,7 +130,7 @@ export default class MaintenanceFormComponent extends Component {
 
     /** Assigns the selected maintainable model to the resource. */
     @action assignMaintainable(model) {
-        this.args.resource.maintainable = model;
+        this.args.resource.maintainable = model ?? null;
     }
 
     /**
@@ -138,7 +138,7 @@ export default class MaintenanceFormComponent extends Component {
      * performed-by relationship so a stale association is not persisted.
      */
     @action onPerformedByTypeChange(option) {
-        this.selectedPerformedByType = option;
+        this.selectedPerformedByType = option ?? null;
         // Clear the performed_by relationship — user must re-select
         this.args.resource.performed_by = null;
         this.performedByModelName = TYPE_TO_MODEL[option?.value] ?? null;
@@ -146,6 +146,6 @@ export default class MaintenanceFormComponent extends Component {
 
     /** Assigns the selected performer model to the resource. */
     @action assignPerformedBy(model) {
-        this.args.resource.performed_by = model;
+        this.args.resource.performed_by = model ?? null;
     }
 }

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

@@ -1,21 +1,23 @@
-<div class="px-4 py-2">
-    <div class="flex flex-1 flex-row items-start justify-between">
-        <div class="flex flex-col">
-            <div class="flex flex-row items-center space-x-2">
-                <h1 class="text-gray-900 dark:text-white font-semibold text-lg">{{n-a @resource.summary}}</h1>
-                <Badge @status={{@resource.status}}>{{smart-humanize @resource.status}}</Badge>
+<div class="px-4 py-2" ...attributes>
+    <div class="flex flex-1 flex-row items-start justify-between gap-3">
+        <div class="flex min-w-0 flex-1 flex-col">
+            <div class="flex min-w-0 flex-row items-center gap-2">
+                <h1 class="truncate text-lg font-semibold text-gray-900 dark:text-white" title={{@resource.summary}}>{{n-a @resource.summary}}</h1>
+                <Badge @status={{@resource.status}} class="flex-shrink-0">{{smart-humanize @resource.status}}</Badge>
             </div>
-            <div class="flex flex-row space-x-3 mt-1">
-                <div class="text-xs text-gray-400 dark:text-gray-500">{{smart-humanize @resource.type}}</div>
+            <div class="mt-1 flex min-w-0 flex-row flex-wrap items-center gap-x-3 gap-y-0.5 text-xs text-gray-400 dark:text-gray-500">
+                {{#if @resource.type}}
+                    <span class="truncate">{{smart-humanize @resource.type}}</span>
+                {{/if}}
                 {{#if @resource.priority}}
-                    <div class="text-xs text-gray-400 dark:text-gray-500">{{t "column.priority"}}: {{smart-humanize @resource.priority}}</div>
+                    <span class="truncate">{{t "column.priority"}}: {{smart-humanize @resource.priority}}</span>
                 {{/if}}
                 {{#if @resource.scheduled_at}}
-                    <div class="text-xs text-gray-400 dark:text-gray-500">{{t "column.scheduled-at"}}: {{format-date @resource.scheduled_at}}</div>
+                    <span class="truncate">{{t "column.scheduled-at"}}: {{format-date @resource.scheduled_at}}</span>
                 {{/if}}
             </div>
         </div>
-        <div class="next-view-header-right">
+        <div class="next-view-header-right flex-shrink-0 whitespace-nowrap">
             <Layout::Resource::Panel::HeaderActions
                 @resource={{@resource}}
                 @saveTask={{@saveTask}}
@@ -28,4 +30,4 @@
             />
         </div>
     </div>
-</div>
+</div>

package/addon/components/maintenance/pill.hbs

@@ -0,0 +1,24 @@
+<Resource::Pill
+    @resource={{(or @maintenance @resource)}}
+    @resourceType="maintenance"
+    @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/maintenance/summary.hbs

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

package/addon/components/maintenance-schedule/details.hbs

@@ -33,12 +33,16 @@
             </div>
             <div class="field-info-container">
                 <div class="field-name">Asset</div>
-                <div class="field-value">{{n-a (or @resource.subject.displayName @resource.subject.name @resource.subject_name)}}</div>
+                <div class="field-value">
+                    <MaintenanceSubject::Pill @maintenanceSubject={{resource-relation @resource "subject"}} @titleFallback={{n-a @resource.subject_name}} />
+                </div>
             </div>
-            {{#if (or @resource.default_assignee.displayName @resource.default_assignee.name)}}
+            {{#if (or @resource.default_assignee @resource.default_assignee_name)}}
                 <div class="field-info-container">
                     <div class="field-name">Default Assignee</div>
-                    <div class="field-value">{{n-a (or @resource.default_assignee.displayName @resource.default_assignee.name)}}</div>
+                    <div class="field-value">
+                        <Facilitator::Pill @facilitator={{resource-relation @resource "default_assignee"}} @titleFallback={{n-a @resource.default_assignee_name}} />
+                    </div>
                 </div>
             {{/if}}
             <div class="field-info-container">

package/addon/components/maintenance-schedule/form.hbs

@@ -57,6 +57,7 @@
                         @selected={{this.selectedSubjectType}}
                         @onChange={{this.onSubjectTypeChange}}
                         @placeholder="Select Asset Type"
+                        @allowClear={{true}}
                         @triggerClass="form-select form-input"
                         @disabled={{cannot-write @resource}}
                         as |option|
@@ -70,8 +71,10 @@
                 <InputGroup @name="Asset">
                     <ModelSelect
                         @modelName={{this.subjectModelName}}
+                        @selectedItemComponent={{if (resource-component "select-option" this.subjectModelName) (component (resource-component "select-option" this.subjectModelName) compact=true)}}
                         @selectedModel={{@resource.subject}}
                         @placeholder="Select Asset"
+                        @allowClear={{true}}
                         @triggerClass="form-select form-input"
                         @infiniteScroll={{false}}
                         @renderInPlace={{true}}
@@ -79,7 +82,13 @@
                         @disabled={{cannot-write @resource}}
                         as |model|
                     >
-                        {{or model.displayName model.name model.public_id}}
+                        {{#let (resource-component "select-option" this.subjectModelName) as |selectOption|}}
+                            {{#if selectOption}}
+                                {{component selectOption option=model}}
+                            {{else}}
+                                {{or model.displayName model.name model.public_id}}
+                            {{/if}}
+                        {{/let}}
                     </ModelSelect>
                 </InputGroup>
             {{/if}}
@@ -207,6 +216,7 @@
                         @selected={{this.selectedAssigneeType}}
                         @onChange={{this.onAssigneeTypeChange}}
                         @placeholder="Select Assignee Type"
+                        @allowClear={{true}}
                         @triggerClass="form-select form-input"
                         @disabled={{cannot-write @resource}}
                         as |option|
@@ -220,8 +230,10 @@
                 <InputGroup @name="Default Assignee" @wrapperClass="col-span-2">
                     <ModelSelect
                         @modelName={{this.assigneeModelName}}
+                        @selectedItemComponent={{if (resource-component "select-option" this.assigneeModelName) (component (resource-component "select-option" this.assigneeModelName) compact=true)}}
                         @selectedModel={{@resource.default_assignee}}
                         @placeholder="Select Default Assignee"
+                        @allowClear={{true}}
                         @triggerClass="form-select form-input"
                         @infiniteScroll={{false}}
                         @renderInPlace={{true}}
@@ -229,7 +241,13 @@
                         @disabled={{cannot-write @resource}}
                         as |model|
                     >
-                        {{or model.displayName model.name model.public_id}}
+                        {{#let (resource-component "select-option" this.assigneeModelName) as |selectOption|}}
+                            {{#if selectOption}}
+                                {{component selectOption option=model}}
+                            {{else}}
+                                {{or model.displayName model.name model.public_id}}
+                            {{/if}}
+                        {{/let}}
                     </ModelSelect>
                 </InputGroup>
             {{/if}}

package/addon/components/maintenance-schedule/form.js

@@ -141,25 +141,25 @@ export default class MaintenanceScheduleFormComponent extends Component {
     }
 
     @action onSubjectTypeChange(option) {
-        this.selectedSubjectType = option;
+        this.selectedSubjectType = option ?? null;
         // Clear the subject relationship — user must re-select the asset
         this.args.resource.subject = null;
-        this.subjectModelName = TYPE_TO_MODEL[option.value] ?? null;
+        this.subjectModelName = TYPE_TO_MODEL[option?.value] ?? null;
     }
 
     @action assignSubject(model) {
-        this.args.resource.subject = model;
+        this.args.resource.subject = model ?? null;
     }
 
     @action onAssigneeTypeChange(option) {
-        this.selectedAssigneeType = option;
+        this.selectedAssigneeType = option ?? null;
         // Clear the default_assignee relationship — user must re-select
         this.args.resource.default_assignee = null;
-        this.assigneeModelName = TYPE_TO_MODEL[option.value] ?? null;
+        this.assigneeModelName = TYPE_TO_MODEL[option?.value] ?? null;
     }
 
     @action assignDefaultAssignee(model) {
-        this.args.resource.default_assignee = model;
+        this.args.resource.default_assignee = model ?? null;
     }
 
     @action addReminderOffset(value) {

package/addon/components/maintenance-schedule/pill.hbs

@@ -0,0 +1,24 @@
+<Resource::Pill
+    @resource={{(or @maintenanceSchedule @resource)}}
+    @resourceType="maintenance-schedule"
+    @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/maintenance-schedule/summary.hbs

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

package/addon/components/maintenance-schedule/work-orders.hbs

@@ -0,0 +1,39 @@
+<div class="schedule-work-orders-tab p-4" ...attributes>
+    {{#if this.load.isRunning}}
+        <div class="flex items-center justify-center py-12"><Spinner /></div>
+    {{else if this.workOrders.length}}
+        <div class="space-y-2">
+            {{#each this.workOrders as |workOrder|}}
+                <button
+                    type="button"
+                    class="flex w-full items-start justify-between rounded-lg border border-gray-200 bg-white px-2 py-2 text-left text-sm dark:border-gray-700 dark:bg-gray-800"
+                    {{on "click" (fn this.view workOrder)}}
+                >
+                    <div class="flex items-center gap-3">
+                        <FaIcon @icon="wrench" class="text-gray-400" />
+                        <div>
+                            <div class="font-medium text-gray-900 dark:text-white">{{or workOrder.subject workOrder.code workOrder.public_id}}</div>
+                            <div class="text-xs text-gray-500 dark:text-gray-400">
+                                {{workOrder.public_id}}
+                                {{#if workOrder.opened_at}}
+                                    &bull; Opened
+                                    {{format-date workOrder.opened_at "dd MMM yyyy"}}
+                                {{/if}}
+                            </div>
+                        </div>
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <Badge @status={{workOrder.status}} @label={{smart-humanize workOrder.status}} />
+                        <Badge @status={{workOrder.priority}} @label={{smart-humanize workOrder.priority}} />
+                    </div>
+                </button>
+            {{/each}}
+        </div>
+    {{else}}
+        <div class="flex flex-col items-center justify-center py-12 text-center text-gray-500 dark:text-gray-400">
+            <FaIcon @icon="clipboard-list" class="mb-3 text-3xl text-gray-300 dark:text-gray-600" />
+            <p class="text-sm font-medium">No work orders yet</p>
+            <p class="mt-1 text-xs">Work orders will appear here when this schedule triggers.</p>
+        </div>
+    {{/if}}
+</div>

package/addon/components/maintenance-schedule/work-orders.js

@@ -0,0 +1,37 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { task } from 'ember-concurrency';
+
+/**
+ * The work orders a maintenance schedule has raised, for the schedule's
+ * context panel. The details route loads the same list in its own route.
+ */
+export default class MaintenanceScheduleWorkOrdersComponent extends Component {
+    @service store;
+    @service workOrderActions;
+    @tracked workOrders = [];
+
+    constructor() {
+        super(...arguments);
+        this.load.perform();
+    }
+
+    get schedule() {
+        return this.args.resource ?? this.args.model;
+    }
+
+    @task *load() {
+        if (!this.schedule?.id) {
+            return;
+        }
+
+        const workOrders = yield this.store.query('work-order', { schedule_uuid: this.schedule.id });
+        this.workOrders = workOrders?.toArray?.() ?? [...(workOrders ?? [])];
+    }
+
+    @action view(workOrder) {
+        return this.workOrderActions.panel.view(workOrder);
+    }
+}

package/addon/components/maintenance-subject/pill.hbs

@@ -0,0 +1,24 @@
+<Resource::Pill
+    @resource={{(or @maintenanceSubject @resource)}}
+    @resourceType="maintenance-subject"
+    @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/maintenance-subject/summary.hbs

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

package/addon/components/manifest/pill.hbs

@@ -0,0 +1,24 @@
+<Resource::Pill
+    @resource={{(or @manifest @resource)}}
+    @resourceType="manifest"
+    @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/manifest/summary.hbs

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

package/addon/components/manifest-stop/pill.hbs

@@ -0,0 +1,24 @@
+<Resource::Pill
+    @resource={{(or @manifestStop @resource)}}
+    @resourceType="manifest-stop"
+    @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/manifest-stop/summary.hbs

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

package/addon/components/map/drawer/device-event-listing.hbs

@@ -3,6 +3,7 @@
         <div>
             <ModelSelect
                 @modelName="telematic"
+                @selectedItemComponent={{component "select-option/telematic" compact=true}}
                 @selectedModel={{this.telematic}}
                 @placeholder="Filter by Telematic"
                 @triggerClass="form-select form-input form-input-sm w-48"
@@ -11,22 +12,14 @@
                 @onChange={{this.onTelematicSelected}}
                 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>
         </div>
 
         <div>
             <ModelSelect
                 @modelName="device"
+                @selectedItemComponent={{component "select-option/device" compact=true}}
                 @selectedModel={{this.device}}
                 @placeholder="Filter by Device"
                 @triggerClass="form-select form-input form-input-sm w-48"
@@ -35,10 +28,7 @@
                 @onChange={{this.onDeviceSelected}}
                 as |model|
             >
-                <div class="text-sm">
-                    <div class="font-semibold normalize-in-trigger">{{model.name}}</div>
-                    <div class="hide-from-trigger">{{n-a model.serial_number}}</div>
-                </div>
+                <SelectOption::Device @option={{model}} />
             </ModelSelect>
         </div>
 

package/addon/components/map/drawer/device-event-listing.js

@@ -2,6 +2,7 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
+import relationValue from '../../../utils/relation-value';
 import { task } from 'ember-concurrency';
 import { isArray } from '@ember/array';
 import { startOfWeek, endOfWeek, format } from 'date-fns';
@@ -38,7 +39,8 @@ export default class MapDrawerDeviceEventListingComponent extends Component {
             {
                 label: 'Device',
                 valuePath: 'device.displayName',
-                cellComponent: 'table/cell/anchor',
+                cellComponent: 'cell/device-identity',
+                resourcePath: (event) => relationValue(event, 'device'),
                 action: this.deviceActions.panel.view,
                 permission: 'fleet-ops view device',
                 resizable: true,

package/addon/components/map/drawer/driver-listing.js

@@ -2,6 +2,8 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
+import { buildIdentityStub } from '../../../utils/identity-cell-resource';
+import relationValue from '../../../utils/relation-value';
 import calculateMapDrawerDropdownPosition from '../../../utils/map-drawer-dropdown-position';
 
 export default class MapDrawerDriverListingComponent extends Component {
@@ -35,7 +37,7 @@ export default class MapDrawerDriverListingComponent extends Component {
                 valuePath: 'name',
                 photoPath: 'photo_url',
                 width: '100px',
-                cellComponent: 'cell/driver-name',
+                cellComponent: 'cell/driver-identity',
                 onClick: this.view,
             },
             {
@@ -49,7 +51,9 @@ export default class MapDrawerDriverListingComponent extends Component {
                 label: this.intl.t('column.current-job'),
                 valuePath: 'current_job_id',
                 width: '80px',
-                cellComponent: 'table/cell/anchor',
+                cellComponent: 'cell/order-identity',
+                resourcePath: (driver) =>
+                    relationValue(driver, 'current_job') ?? buildIdentityStub(driver, { type: 'order', nameKey: 'current_job_id', load: () => driver.get('current_job') }),
                 onClick: this.job,
             },
             {

package/addon/components/map/drawer/position-listing.hbs

@@ -8,26 +8,12 @@
                     @onChange={{this.onResourceSelected}}
                     @searchEnabled={{true}}
                     @searchField="trackableSearchText"
+                    @selectedItemComponent={{component "select-option/trackable" compact=true}}
                     @placeholder={{t "common.select-field" field="trackable"}}
                     @triggerClass="form-select form-input form-input-sm w-48"
                     as |option|
                 >
-                    <div class="flex flex-row items-start space-x-2">
-                        <div class="inline-block">
-                            {{#if (eq option.modelName "driver")}}
-                                <Image src={{option.resource.photo_url}} @fallbackSrc={{config "defaultValues.driverAvatar"}} class="w-4 h-4" />
-                            {{else}}
-                                <Image src={{option.resource.avatar_url}} @fallbackSrc={{config "defaultValues.vehicleAvatar"}} class="w-4 h-4" />
-                            {{/if}}
-                        </div>
-                        <div class="inline-block text-sm truncate">
-                            <div class="font-semibold text-sm normalize-in-trigger">{{option.primaryLabel}}</div>
-                            <div class="hide-from-trigger text-xs">{{option.secondaryLabel}}</div>
-                            {{#if option.deviceLabel}}
-                                <div class="hide-from-trigger text-xs text-gray-500 dark:text-gray-400 truncate">{{option.deviceLabel}}</div>
-                            {{/if}}
-                        </div>
-                    </div>
+                    <SelectOption::Trackable @option={{option}} />
                 </PowerSelect>
             </div>
         </div>

package/addon/components/map/drawer/vehicle-listing.js

@@ -35,9 +35,8 @@ export default class MapDrawerVehicleListingComponent extends Component {
                 valuePath: 'display_name',
                 photoPath: 'photo_url',
                 width: '100px',
-                cellComponent: 'table/cell/vehicle-name',
+                cellComponent: 'cell/vehicle-identity',
                 onClick: this.view,
-                showOnlineIndicator: true,
             },
             {
                 label: this.intl.t('column.location'),