@fleetbase/fleetops-engine 0.6.65 → 0.6.66

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

@@ -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/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')
         );
     }
 

package/addon/components/device/panel-tabs/vehicle.hbs

@@ -40,11 +40,11 @@
                     <div class="mt-3 grid grid-cols-1 gap-2 text-xs sm:grid-cols-3">
                         <div>
                             <div class="font-semibold uppercase text-gray-400 dark:text-gray-500">{{t "resource.driver"}}</div>
-                            <div class="truncate text-gray-800 dark:text-gray-100">{{n-a this.vehicleDriverName}}</div>
+                            <div class="truncate text-gray-800 dark:text-gray-100"><Driver::Pill @driver={{resource-relation this.vehicle "driver"}} @titleFallback={{n-a this.vehicleDriverName}} @imageSize="20" @imageClass="w-5 h-5" @titleClass="text-xs" @subtitle={{null}} /></div>
                         </div>
                         <div>
                             <div class="font-semibold uppercase text-gray-400 dark:text-gray-500">{{t "device.attachment.attached-device"}}</div>
-                            <div class="truncate text-gray-800 dark:text-gray-100">{{n-a this.device.displayName this.device.name}}</div>
+                            <div class="truncate text-gray-800 dark:text-gray-100"><Device::Pill @device={{this.device}} @imageSize="20" @imageClass="w-5 h-5" @titleClass="text-xs" @subtitle={{null}} /></div>
                         </div>
                         <div>
                             <div class="font-semibold uppercase text-gray-400 dark:text-gray-500">{{t "device.attachment.last-seen"}}</div>

package/addon/components/device/pill.hbs

@@ -1,16 +1,24 @@
-{{#let (or @device @resource) as |resource|}}
-    <Pill
-        @resource={{resource}}
-        @imageSrc={{resource.photo_url}}
-        @subtitle={{or resource.device_id resource.serial_number resource.imei resource.public_id}}
-        @showOnlineIndicator={{true}}
-        @onClick={{@onClick}}
-        @anchorClass={{@anchorClass}}
-        @imageClass={{@imageClass}}
-        @imageWrapperClass={{@imageWrapperClass}}
-        @contentWrapperClass={{@contentWrapperClass}}
-        @titleClass={{@titleClass}}
-        @subtitleClass={{@subtitleClass}}
-        ...attributes
-    />
-{{/let}}
+<Resource::Pill
+    @resource={{(or @device @resource)}}
+    @resourceType="device"
+    @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/device/summary.hbs

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

package/addon/components/device/telemetry.hbs

@@ -0,0 +1,17 @@
+<div class="mt-2 space-y-1 text-xs" data-test-device-telemetry {{did-update this.resourceChanged @resource.id}}>
+    <p><strong>{{if this.stale "Position stale" "Position current"}}</strong> · {{this.ageLabel}}</p>
+    <p title={{@resource.meta.telemetry.position_at}}>Device position: {{this.positionTime}}</p>
+    <p title={{@resource.meta.telemetry.provider_at}}>Provider transmission: {{this.providerTime}}</p>
+    <details><summary>Telemetry timing (UTC)</summary>
+        <p>Device: {{n-a @resource.meta.telemetry.position_at}}</p>
+        <p>Provider: {{n-a @resource.meta.telemetry.provider_at}}</p>
+        <p>Received: {{n-a @resource.meta.telemetry.received_at}}</p>
+        <p>Processed: {{n-a @resource.meta.telemetry.processed_at}}</p>
+        <p>Source:
+            {{n-a @resource.meta.telemetry.source}}
+            · Queue delay:
+            {{n-a @resource.meta.telemetry.queue_delay_seconds}}s · Source delay:
+            {{n-a @resource.meta.telemetry.source_delay_seconds}}s</p>
+    </details>
+    {{#if this.connectionError}}<p role="status">Live updates interrupted. Displaying the last received position.</p>{{/if}}
+</div>

package/addon/components/device/telemetry.js

@@ -0,0 +1,117 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { registerDestructor } from '@ember/destroyable';
+import { task } from 'ember-concurrency';
+import { action, get } from '@ember/object';
+
+export default class DeviceTelemetryComponent extends Component {
+    @service socket;
+    @tracked clock = Date.now();
+    @tracked connectionError = false;
+    timer;
+    channel;
+    reconnect;
+    consumer;
+
+    constructor() {
+        super(...arguments);
+        this.watch.perform();
+        this.tick.perform();
+        registerDestructor(this, () => this.stop());
+    }
+
+    stop() {
+        clearTimeout(this.timer);
+        this.consumer?.close();
+        this.reconnect?.close();
+        this.channel?.unsubscribe()?.catch(() => {});
+    }
+
+    @action resourceChanged() {
+        this.watch.cancelAll();
+        this.watchReconnect.cancelAll();
+        this.consumer?.close();
+        this.reconnect?.close();
+        this.channel?.unsubscribe()?.catch(() => {});
+        this.watch.perform();
+        this.reload.perform();
+    }
+
+    get telemetry() {
+        return this.args.resource ? (get(this.args.resource, 'meta.telemetry') ?? {}) : {};
+    }
+
+    get ageSeconds() {
+        const time = Date.parse(this.telemetry.position_at);
+        return Number.isFinite(time) ? Math.max(0, Math.floor((this.clock - time) / 1000)) : null;
+    }
+
+    get stale() {
+        const threshold = this.telemetry.stale_after_seconds ?? (this.telemetry.ignition === true ? 120 : 600);
+        return this.ageSeconds === null || this.ageSeconds > threshold;
+    }
+
+    get ageLabel() {
+        return this.ageSeconds === null ? 'No valid position' : `${this.ageSeconds}s ago`;
+    }
+
+    get positionTime() {
+        return this.localTime(this.telemetry.position_at);
+    }
+
+    get providerTime() {
+        return this.localTime(this.telemetry.provider_at);
+    }
+
+    localTime(value) {
+        const date = new Date(value);
+        return Number.isFinite(date.getTime()) ? date.toLocaleString(undefined, { timeZoneName: 'short' }) : 'Unknown';
+    }
+
+    @task *tick() {
+        while (true) {
+            this.clock = Date.now();
+            yield new Promise((resolve) => {
+                this.timer = setTimeout(resolve, 15000);
+            });
+        }
+    }
+
+    @task({ drop: true }) *reload() {
+        try {
+            yield this.args.resource?.reload?.();
+            this.connectionError = false;
+        } catch {
+            this.connectionError = true;
+        }
+    }
+
+    @task *watch() {
+        const id = this.args.resource?.id ?? this.args.resource?.uuid;
+        if (!id) return;
+        try {
+            const socket = this.socket.instance();
+            this.channel = socket.subscribe(`device.${id}`);
+            this.consumer = this.channel.createConsumer();
+            this.reconnect = socket.listener('connect').createConsumer();
+            this.watchReconnect.perform();
+            if (this.channel.state !== 'subscribed') yield this.channel.subscribe();
+            while (true) {
+                const { value, done } = yield this.consumer.next();
+                if (done) break;
+                if (value?.event === 'device.telemetry_updated') yield this.reload.perform();
+            }
+        } catch {
+            this.connectionError = true;
+        }
+    }
+
+    @task *watchReconnect() {
+        while (true) {
+            const { done } = yield this.reconnect.next();
+            if (done) break;
+            yield this.reload.perform();
+        }
+    }
+}

package/addon/components/device-event/details.hbs

@@ -92,18 +92,9 @@
                 <div class="field-info-container">
                     <div class="field-name">Device</div>
                     <div class="field-value">
-                        {{#if this.deviceRouteModel}}
-                            <button
-                                type="button"
-                                class="text-blue-600 hover:text-blue-700 hover:underline dark:text-blue-300 dark:hover:text-blue-200"
-                                data-test-device-event-device-link
-                                {{on "click" this.openDevice}}
-                            >
-                                {{n-a this.deviceName}}
-                            </button>
-                        {{else}}
-                            {{n-a this.deviceName}}
-                        {{/if}}
+                        {{#let (resource-relation this.resource "device") as |device|}}
+                            <Device::Pill @device={{device}} @titleFallback={{n-a this.deviceName}} @onClick={{unless device (if this.deviceRouteModel this.openDevice)}} data-test-device-event-device-link />
+                        {{/let}}
                     </div>
                 </div>
                 <div class="field-info-container">
@@ -129,18 +120,9 @@
                 <div class="field-info-container">
                     <div class="field-name">Provider</div>
                     <div class="field-value">
-                        {{#if this.telematicRouteModel}}
-                            <button
-                                type="button"
-                                class="text-blue-600 hover:text-blue-700 hover:underline dark:text-blue-300 dark:hover:text-blue-200"
-                                data-test-device-event-telematic-link
-                                {{on "click" this.openTelematic}}
-                            >
-                                {{n-a this.providerLabel}}
-                            </button>
-                        {{else}}
-                            {{n-a this.providerLabel}}
-                        {{/if}}
+                        {{#let (resource-relation this.resource "telematic") as |telematic|}}
+                            <Telematic::Pill @telematic={{telematic}} @titleFallback={{n-a this.providerLabel}} @onClick={{unless telematic (if this.telematicRouteModel this.openTelematic)}} data-test-device-event-telematic-link />
+                        {{/let}}
                     </div>
                 </div>
                 <div class="field-info-container">

package/addon/components/device-event/pill.hbs

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

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

package/addon/components/driver/details.hbs

@@ -36,7 +36,15 @@
             </div>
             <div class="field-info-container">
                 <div class="field-name">{{t "resource.vendor"}}</div>
-                <div class="field-value">{{n-a @resource.vendor_name}}</div>
+                <div class="field-value">
+                    <Vendor::Pill @vendor={{resource-relation @resource "vendor"}} @titleFallback={{n-a @resource.vendor_name}} />
+                </div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">{{t "resource.vehicle"}}</div>
+                <div class="field-value">
+                    <Vehicle::Pill @vehicle={{resource-relation @resource "vehicle"}} @titleFallback={{n-a @resource.vehicle_name (t "driver.fields.no-vehicle-assigned")}} />
+                </div>
             </div>
             <div class="col-span-3"></div>
             <div class="field-info-container">

package/addon/components/driver/form.hbs

@@ -4,6 +4,7 @@
             <InputGroup @name={{t "driver.fields.user-account"}} @helpText={{t "driver.fields.user-account-help-text"}}>
                 <ModelSelect
                     @modelName="user"
+                    @selectedItemComponent={{component "select-option/user" compact=true}}
                     @selectedModel={{@resource.user}}
                     @placeholder={{t "driver.fields.select-user"}}
                     @query={{hash doesnt_have_driver=true can_be_driver=true}}
@@ -14,22 +15,7 @@
                     @permission="fleet-ops update-user-for driver"
                     as |model|
                 >
-                    <div class="flex flex-row">
-                        <div class="mr-2 w-6">
-                            <Image src={{resource-image model.avatar_url "contact"}} @fallbackSrc={{(placeholder-image "contact")}} alt={{model.name}} class="w-6 h-6 rounded-md" />
-                        </div>
-                        <div class="flex flex-col">
-                            <div class="font-semibold">{{model.name}}</div>
-                            <div class="text-xs flex flex-row items-center leading-4">
-                                <FaIcon @icon="envelope" @size="sm" class="mr-1 opacity-75" />
-                                <span>{{n-a model.email}}</span>
-                            </div>
-                            <div class="text-xs flex flex-row items-center leading-4">
-                                <FaIcon @icon="phone" @size="sm" class="mr-1 opacity-75" />
-                                <span>{{n-a model.phone}}</span>
-                            </div>
-                        </div>
-                    </div>
+                    <SelectOption::User @option={{model}} />
                 </ModelSelect>
             </InputGroup>
             {{#if @resource.user}}
@@ -106,6 +92,7 @@
             <InputGroup @name={{t "driver.fields.vendor"}}>
                 <ModelSelect
                     @modelName="vendor"
+                    @selectedItemComponent={{component "select-option/vendor" compact=true}}
                     @selectedModel={{@resource.vendor}}
                     @placeholder={{t "driver.fields.select-vendor"}}
                     @triggerClass="form-select form-input"
@@ -115,13 +102,14 @@
                     @disabled={{cannot-write @resource}}
                     as |model|
                 >
-                    {{model.name}}
+                    <SelectOption::Vendor @option={{model}} />
                 </ModelSelect>
             </InputGroup>
 
             <InputGroup @name={{t "resource.vehicle"}}>
                 <ModelSelect
                     @modelName="vehicle"
+                    @selectedItemComponent={{component "select-option/vehicle" compact=true}}
                     @selectedModel={{@resource.vehicle}}
                     @placeholder={{t "driver.fields.select-vehicle"}}
                     @triggerClass="form-select form-input"
@@ -132,7 +120,7 @@
                     @disabled={{cannot-write @resource}}
                     as |model|
                 >
-                    {{model.display_name}}
+                    <SelectOption::Vehicle @option={{model}} />
                 </ModelSelect>
             </InputGroup>