@fleetbase/fleetops-engine 0.6.64 → 0.6.66

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'),

package/addon/components/map/leaflet-live-map.hbs

@@ -229,6 +229,32 @@
                                         <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Driver</div>
                                         <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a vehicle.driver_name}}</div>
                                     </div>
+                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
+                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">{{t "resource.trailers"}}</div>
+                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">
+                                            {{#each vehicle.trailers as |trailer|}}
+                                                <div class="flex items-center gap-1 min-w-0">
+                                                    <span class="inline-block w-1.5 h-1.5 rounded-full shrink-0 {{if trailer.online 'bg-green-400' 'bg-gray-500'}}"></span>
+                                                    <span class="truncate">{{or trailer.displayName trailer.display_name trailer.name trailer.public_id}}</span>
+                                                </div>
+                                            {{else}}
+                                                -
+                                            {{/each}}
+                                        </div>
+                                    </div>
+                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
+                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">{{t "resource.devices"}}</div>
+                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">
+                                            {{#each vehicle.devices as |device|}}
+                                                <div class="flex items-center gap-1 min-w-0">
+                                                    <span class="inline-block w-1.5 h-1.5 rounded-full shrink-0 {{if device.online 'bg-green-400' 'bg-gray-500'}}"></span>
+                                                    <span class="truncate">{{or device.displayName device.display_name device.name device.device_id device.public_id}}</span>
+                                                </div>
+                                            {{else}}
+                                                -
+                                            {{/each}}
+                                        </div>
+                                    </div>
                                     <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
                                         <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Order</div>
                                         <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a vehicle.meta.current_order_reference}}</div>
@@ -276,6 +302,32 @@
                                         <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Driver</div>
                                         <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a vehicle.driver_name}}</div>
                                     </div>
+                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
+                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">{{t "resource.trailers"}}</div>
+                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">
+                                            {{#each vehicle.trailers as |trailer|}}
+                                                <div class="flex items-center gap-1 min-w-0">
+                                                    <span class="inline-block w-1.5 h-1.5 rounded-full shrink-0 {{if trailer.online 'bg-green-400' 'bg-gray-500'}}"></span>
+                                                    <span class="truncate">{{or trailer.displayName trailer.display_name trailer.name trailer.public_id}}</span>
+                                                </div>
+                                            {{else}}
+                                                -
+                                            {{/each}}
+                                        </div>
+                                    </div>
+                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
+                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">{{t "resource.devices"}}</div>
+                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">
+                                            {{#each vehicle.devices as |device|}}
+                                                <div class="flex items-center gap-1 min-w-0">
+                                                    <span class="inline-block w-1.5 h-1.5 rounded-full shrink-0 {{if device.online 'bg-green-400' 'bg-gray-500'}}"></span>
+                                                    <span class="truncate">{{or device.displayName device.display_name device.name device.device_id device.public_id}}</span>
+                                                </div>
+                                            {{else}}
+                                                -
+                                            {{/each}}
+                                        </div>
+                                    </div>
                                     <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
                                         <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Order</div>
                                         <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a vehicle.meta.current_order_reference}}</div>

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

@@ -75,8 +75,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"
@@ -94,8 +94,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/modals/add-driver-shift.hbs

@@ -8,6 +8,7 @@
                     <label>{{t "resource.driver"}}</label>
                     <ModelSelect
                         @modelName="driver"
+                        @selectedItemComponent={{component "select-option/driver" compact=true}}
                         @selectedModel={{this.selectedDriver}}
                         @placeholder={{t "scheduler.select-driver"}}
                         @triggerClass="form-select form-input"
@@ -16,7 +17,7 @@
                         @onChange={{this.selectDriver}}
                         as |driver|
                     >
-                        {{driver.name}}
+                        <SelectOption::Driver @option={{driver}} />
                     </ModelSelect>
                 </div>
             {{/if}}

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

@@ -3,6 +3,7 @@
         <InputGroup @name={{t "modals.assign-driver.select-driver"}}>
             <ModelSelect
                 @modelName="driver"
+                @selectedItemComponent={{component "select-option/driver" compact=true}}
                 @selectedModel={{@options.order.driver_assigned}}
                 @placeholder={{t "modals.assign-driver.select-assign"}}
                 @triggerClass="form-select form-input"
@@ -11,22 +12,7 @@
                 @onChange={{fn (mut @options.order.driver_assigned)}}
                 as |model|
             >
-                <div class="flex items-center">
-                    <div class="w-7">
-                        <FaIcon @icon="id-card-alt" />
-                    </div>
-                    <div class="flex-1 flex flex-row truncate">
-                        <span class="uppercase mr-2">{{model.name}}</span>
-                        <span class="uppercase">{{model.phone}}</span>
-                    </div>
-                    {{#if @options.order.facilitator}}
-                        <div class="px-1 ml-2 leading-5 bg-green-400 rounded shadow">
-                            <span class="text-xs text-green-900">
-                                {{@options.order.facilitator.name}}
-                            </span>
-                        </div>
-                    {{/if}}
-                </div>
+                <SelectOption::Driver @option={{model}} />
             </ModelSelect>
         </InputGroup>
     </div>

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

@@ -3,6 +3,7 @@
         <InputGroup @name={{t "common.select-field" field=(t "resource.device")}} @value={{@options.selectedDevice}}>
             <ModelSelect
                 @modelName="device"
+                @selectedItemComponent={{component "select-option/device" compact=true}}
                 @selectedModel={{@options.selectedDevice}}
                 @query={{hash attachment_state="unattached"}}
                 @placeholder={{t "common.select-field" field=(t "resource.device")}}
@@ -12,7 +13,7 @@
                 @onChange={{fn (mut @options.selectedDevice)}}
                 as |model|
             >
-                <Device::Pill @device={{model}} />
+                <SelectOption::Device @option={{model}} />
             </ModelSelect>
         </InputGroup>
     </div>

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

@@ -0,0 +1,20 @@
+<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"
+                @selectedItemComponent={{component "select-option/equipment" compact=true}}
+                @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|
+            >
+                <SelectOption::Equipment @option={{equipment}} />
+            </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,37 @@
 <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}}
+                @selectedItemComponent={{if (resource-component "select-option" @options.selectedAssetType.model) (component (resource-component "select-option" @options.selectedAssetType.model) compact=true)}}
+                @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}} />
+                {{#let (resource-component "select-option" @options.selectedAssetType.model) as |selectOption|}}
+                    {{#if selectOption}}
+                        {{component selectOption option=asset}}
+                    {{else}}
+                        {{or asset.displayName asset.name asset.public_id}}
+                    {{/if}}
+                {{/let}}
             </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,31 @@
+<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"
+                @selectedItemComponent={{component "select-option/vehicle" compact=true}}
+                @selectedModel={{@options.selectedVehicle}}
+                @placeholder={{t "trailer.placeholders.vehicle"}}
+                @triggerClass="form-select form-input"
+                @infiniteScroll={{true}}
+                @renderInPlace={{true}}
+                @onChange={{fn (mut @options.selectedVehicle)}}
+                as |vehicle|
+            >
+                <SelectOption::Vehicle @option={{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/bulk-assign-driver.hbs

@@ -3,6 +3,7 @@
         <InputGroup @name={{t "common.select-field" field=(t "resource.driver")}} @helpText={{t "fleet-ops.operations.orders.index.bulk-assign-driver-helptext"}}>
             <ModelSelect
                 @modelName="driver"
+                @selectedItemComponent={{component "select-option/driver" compact=true}}
                 @selectedModel={{options.driverAssigned}}
                 @query={{options.driversQuery}}
                 @placeholder={{t "order.fields.assign-driver-placeholder"}}
@@ -14,15 +15,7 @@
                 @onChange={{options.selectDriver}}
                 as |model|
             >
-                <div class="flex items-center">
-                    <div class="w-7 flex-grow-0 flex-shrink-0">
-                        <FaIcon @icon="id-card-alt" />
-                    </div>
-                    <div class="flex-1 flex flex-row truncate">
-                        <span class="uppercase mr-2">{{model.name}}</span>
-                        <span class="uppercase">{{model.phone}}</span>
-                    </div>
-                </div>
+                <SelectOption::Driver @option={{model}} />
             </ModelSelect>
         </InputGroup>
         <InputGroup>

package/addon/components/modals/bulk-assign-orders.hbs

@@ -27,6 +27,7 @@
                 <label>{{t "resource.driver"}}</label>
                 <ModelSelect
                     @modelName="driver"
+                    @selectedItemComponent={{component "select-option/driver" compact=true}}
                     @selectedModel={{@options.driver}}
                     @placeholder={{t "scheduler.select-driver"}}
                     @triggerClass="form-select form-input"
@@ -36,15 +37,7 @@
                     @onChange={{fn (mut @options.driver)}}
                     as |driver|
                 >
-                    <div class="flex items-center">
-                        <div class="w-7 flex-shrink-0">
-                            <FaIcon @icon="id-card-alt" />
-                        </div>
-                        <div class="flex-1 flex flex-row truncate">
-                            <span class="uppercase mr-2">{{driver.name}}</span>
-                            <span class="uppercase text-gray-400">{{driver.phone}}</span>
-                        </div>
-                    </div>
+                    <SelectOption::Driver @option={{driver}} />
                 </ModelSelect>
             </div>
 

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-assign-order.hbs

@@ -5,6 +5,7 @@
                 <ModelSelect
                     class="listbox-lg"
                     @modelName="order"
+                    @selectedItemComponent={{component "select-option/order" compact=true}}
                     @selectedModel={{@options.selectedOrder}}
                     @placeholder={{t "modals.driver-assign-order.assign-order"}}
                     @triggerClass="form-select form-input"
@@ -14,12 +15,7 @@
                     @onChange={{@options.selectOrder}}
                     as |order|
                 >
-                    <Order::Card
-                        @order={{order}}
-                        @variant="selection"
-                        @showMeta={{true}}
-                        @interactive={{false}}
-                    />
+                    <SelectOption::Order @option={{order}} />
                 </ModelSelect>
             </InputGroup>
         </div>

package/addon/components/modals/driver-assign-vehicle.hbs

@@ -4,24 +4,16 @@
             <InputGroup @name={{t "modals.driver-assign-vehicle.vehicle"}} @value={{@options.driver.vehicle_uuid}}>
                 <ModelSelect
                     @modelName="vehicle"
-                    @selectedModel={{@options.driver.vehicle_uuid}}
+                    @selectedItemComponent={{component "select-option/vehicle" compact=true}}
+                    @selectedModel={{this.selectedVehicle}}
                     @placeholder={{t "modals.driver-assign-vehicle.assign-vehicle"}}
                     @triggerClass="form-select form-input"
                     @infiniteScroll={{false}}
                     @renderInPlace={{true}}
-                    @onChange={{fn (mut @options.driver.vehicle)}}
-                    @onChangeId={{fn (mut @options.driver.vehicle_uuid)}}
+                    @onChange={{this.selectVehicle}}
                     as |model|
                 >
-                    <Vehicle::Pill
-                        @vehicle={{model}}
-                        @anchorClass="w-full"
-                        @imageWrapperClass="w-8 h-8"
-                        @imageClass="w-8 h-8"
-                        @contentWrapperClass="min-w-0"
-                        @titleClass="truncate"
-                        @subtitleClass="truncate"
-                    />
+                    <SelectOption::Vehicle @option={{model}} />
                 </ModelSelect>
             </InputGroup>
         </div>

package/addon/components/modals/driver-assign-vehicle.js

@@ -0,0 +1,30 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action, set } from '@ember/object';
+
+/**
+ * Picks the vehicle for a driver.
+ *
+ * The select is handed the chosen vehicle record, not its uuid. ModelSelect
+ * only resolves a uuid into a record when it is first rendered; a uuid that
+ * arrives later is shown as-is, which is why a picked vehicle used to read
+ * "-" in the trigger. The driver still receives both the vehicle and its uuid,
+ * which is what the confirm handlers read.
+ */
+export default class ModalsDriverAssignVehicleComponent extends Component {
+    @tracked vehicle = null;
+
+    get selectedVehicle() {
+        return this.vehicle ?? this.args.options?.driver?.vehicle_uuid ?? null;
+    }
+
+    @action selectVehicle(vehicle) {
+        this.vehicle = vehicle;
+
+        const driver = this.args.options?.driver;
+        if (driver) {
+            set(driver, 'vehicle', vehicle);
+            set(driver, 'vehicle_uuid', vehicle?.id ?? null);
+        }
+    }
+}

package/addon/components/modals/driver-assign-vendor.hbs

@@ -4,6 +4,7 @@
             <InputGroup @name={{t "modals.driver-assign-vendor.vendor"}} @value={{@options.driver.vendor_uuid}}>
                 <ModelSelect
                     @modelName="vendor"
+                    @selectedItemComponent={{component "select-option/vendor" compact=true}}
                     @selectedModel={{@options.driver.vendor_uuid}}
                     @placeholder={{t "modals.driver-assign-vendor.vendor"}}
                     @triggerClass="form-select form-input"
@@ -13,7 +14,7 @@
                     @onChangeId={{fn (mut @options.driver.vendor_uuid)}}
                     as |model|
                 >
-                    {{model.name}}
+                    <SelectOption::Vendor @option={{model}} />
                 </ModelSelect>
             </InputGroup>
         </div>