@fleetbase/fleetops-engine 0.6.64 → 0.6.66

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

@@ -1,21 +1,21 @@
 <div class="flex flex-col gap-3 p-3" ...attributes>
     <div class="flex items-start justify-between gap-3">
         <div class="min-w-0">
-            <h2 class="text-base font-bold text-gray-900 dark:text-gray-100">Vehicle Attachment</h2>
-            <p class="mt-0.5 text-xs text-gray-500 dark:text-gray-300">Fleet context for telemetry from this device.</p>
+            <h2 class="text-base font-bold text-gray-900 dark:text-gray-100">{{t "device.attachment.title"}}</h2>
+            <p class="mt-0.5 text-xs text-gray-500 dark:text-gray-300">{{t "device.attachment.description"}}</p>
         </div>
         <div class="flex flex-wrap items-center justify-end gap-2">
             {{#if this.hasVehicle}}
                 {{#if this.canOpenVehicle}}
-                    <Button @icon="eye" @text="Open Vehicle" @size="xs" @onClick={{this.openVehicle}} />
+                    <Button @icon="eye" @text={{t "device.attachment.open"}} @size="xs" @onClick={{this.openVehicle}} />
                 {{/if}}
                 {{#if this.canLocateVehicle}}
-                    <Button @icon="location-dot" @text="Locate" @size="xs" @onClick={{this.locateVehicle}} />
+                    <Button @icon="location-dot" @text={{t "device.attachment.locate"}} @size="xs" @onClick={{this.locateVehicle}} />
                 {{/if}}
-                <Button @icon="shuffle" @text="Change Vehicle" @size="xs" @onClick={{this.attachToVehicle}} />
-                <Button @icon="unlink" @text="Detach" @size="xs" @type="danger" @onClick={{this.detachFromVehicle}} />
+                <Button @icon="shuffle" @text={{t "device.attachment.change"}} @size="xs" @onClick={{this.attachToVehicle}} />
+                <Button @icon="unlink" @text={{t "device.attachment.detach"}} @size="xs" @type="danger" @onClick={{this.detachFromVehicle}} />
             {{else}}
-                <Button @icon="link" @text="Attach Vehicle" @size="xs" @onClick={{this.attachToVehicle}} />
+                <Button @icon="link" @text={{t "device.actions.attach-to-asset"}} @size="xs" @onClick={{this.attachToVehicle}} />
             {{/if}}
         </div>
     </div>
@@ -39,15 +39,15 @@
                     <div class="mt-1 text-xs text-gray-500 dark:text-gray-300">{{n-a this.vehicleSubtitle}}</div>
                     <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">Driver</div>
-                            <div class="truncate text-gray-800 dark:text-gray-100">{{n-a this.vehicleDriverName}}</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"><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">Attached Device</div>
-                            <div class="truncate text-gray-800 dark:text-gray-100">{{n-a this.device.displayName this.device.name}}</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"><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">Device Last Seen</div>
+                            <div class="font-semibold uppercase text-gray-400 dark:text-gray-500">{{t "device.attachment.last-seen"}}</div>
                             <div class="truncate text-gray-800 dark:text-gray-100">{{n-a (format-date-fns this.device.last_online_at "dd MMM yyyy, HH:mm")}}</div>
                         </div>
                     </div>
@@ -58,9 +58,9 @@
         <Telematic::TabEmptyState
             @tone="warning"
             @icon="link-slash"
-            @title="No vehicle attached"
-            @message="Attach this device to a vehicle so telemetry has fleet context."
-            @primaryText="Attach Vehicle"
+            @title={{t "device.attachment.none-title"}}
+            @message={{t "device.attachment.none-message"}}
+            @primaryText={{t "device.actions.attach-to-asset"}}
             @primaryIcon="link"
             @primaryAction={{this.attachToVehicle}}
         />

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

@@ -7,6 +7,7 @@ export default class DevicePanelTabsVehicleComponent extends Component {
     @service hostRouter;
     @service mapManager;
     @service vehicleActions;
+    @service trailerActions;
 
     get device() {
         return this.args.resource ?? this.args.model;
@@ -16,6 +17,10 @@ export default class DevicePanelTabsVehicleComponent extends Component {
         return this.device?.attachable;
     }
 
+    get isTrailer() {
+        return `${this.device?.attachable_type ?? ''}`.toLowerCase().includes('trailer');
+    }
+
     get vehicleName() {
         return this.device?.attached_to_name ?? this.vehicle?.displayName ?? this.vehicle?.display_name ?? this.vehicle?.name;
     }
@@ -58,6 +63,9 @@ export default class DevicePanelTabsVehicleComponent extends Component {
 
     @action openVehicle() {
         if (this.vehicle?.id) {
+            if (this.isTrailer) {
+                return this.trailerActions.transition.view(this.vehicle);
+            }
             return this.vehicleActions.panel?.view
                 ? this.vehicleActions.panel.view(this.vehicle)
                 : this.hostRouter.transitionTo('console.fleet-ops.management.vehicles.index.details', this.vehicle);

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/card.hbs

@@ -1,11 +1,11 @@
-<Layout::Resource::Card ...attributes as |Card|>
+<Layout::Resource::Card class="fleetops-resource-card driver-card" ...attributes as |Card|>
     <Card.header class="{{@headerClass}}">
         <RegistryYield @registry="fleet-ops:component:driver:card:header:start" as |RegistryComponent|>
             <RegistryComponent @order={{@resource}} @resource={{@resource}} />
         </RegistryYield>
-        <div class="flex items-center w-full min-w-0">
+        <div class="fleetops-card-title">
             <div class="font-semibold flex-1 truncate" data-test-driver-name>{{or @resource.name @resource.display_name}}</div>
-            <FaIcon @icon="circle" @size="xs" class="ml-2 flex-none {{if @resource.online 'text-green-500' 'text-gray-400'}}" data-test-driver-online-indicator />
+            <FaIcon @icon="circle" @size="xs" class="fleetops-card-title-indicator {{if @resource.online 'text-green-500' 'text-gray-400'}}" data-test-driver-online-indicator />
         </div>
         <div class="text-gray-400 dark:text-gray-500 text-sm w-full truncate">{{n-a @resource.phone @resource.public_id}}</div>
         {{#if (has-block "header")}}
@@ -16,7 +16,7 @@
         </RegistryYield>
     </Card.header>
     <Card.body class="{{@bodyClass}} h-40 overflow-hidden">
-        <Image src={{avatar-url @resource.photo_url}} @fallbackSrc={{this.fallbackImage}} class="block w-full h-full object-cover rounded-none" data-test-driver-photo />
+        <Image src={{resource-image @resource.photo_url "driver"}} @fallbackSrc={{(placeholder-image "driver")}} alt={{or @resource.name @resource.display_name}} class="fleetops-card-image fleetops-card-image--cover" data-test-driver-photo />
         {{#if (has-block "body")}}
             {{yield to="body"}}
         {{/if}}
@@ -26,11 +26,11 @@
             <RegistryComponent @order={{@resource}} @resource={{@resource}} />
         </RegistryYield>
         <div class="flex flex-row items-center justify-between w-full">
-            <Badge @status={{or this.statusValue "default"}} @size="xs" data-test-driver-status-badge>{{this.statusLabel}}</Badge>
+            <Badge @status={{or this.statusValue "default"}} @text={{this.statusLabel}} @size="xs" data-test-driver-status-badge />
             <div class="flex flex-row items-center space-x-1">
-                <Button @icon="eye" @size="xs" @onClick={{fn this.driverActions.transition.view @resource}} />
-                <Button @icon="pencil" @size="xs" @onClick={{fn this.driverActions.transition.edit @resource}} />
-                <Button @icon="trash" @size="xs" @type="danger" @onClick={{fn this.driverActions.delete @resource}} />
+                <Button @icon="eye" @size="xs" @helpText={{t "common.view"}} @onClick={{fn this.driverActions.transition.view @resource}} @permission="fleet-ops view driver" />
+                <Button @icon="pencil" @size="xs" @helpText={{t "common.edit"}} @onClick={{fn this.driverActions.transition.edit @resource}} @permission="fleet-ops update driver" />
+                <Button @icon="trash" @size="xs" @type="danger" @helpText={{t "common.delete"}} @onClick={{fn this.driverActions.delete @resource}} @permission="fleet-ops delete driver" />
             </div>
         </div>
         <RegistryYield @registry="fleet-ops:component:driver:card:footer:end" as |RegistryComponent|>
@@ -39,11 +39,22 @@
         {{#if (has-block "footer")}}
             {{yield to="footer"}}
         {{/if}}
-        <div class="mt-1.5 w-full">
-            <div class="text-gray-400 dark:text-gray-500 text-xs truncate">
-                <FaIcon @icon="car" @prefix="fas" class="mr-1" />{{n-a this.assignedVehicleLabel}}
+        <div class="fleetops-card-meta-list">
+            <div class="fleetops-card-meta">
+                <FaIcon @icon="car" @prefix="fas" />
+                <span class="fleetops-card-meta-value">
+                    {{#if this.assignedVehicleLabel}}
+                        {{#if this.hasVehicle}}
+                            <a href="javascript:;" class="fleetops-card-meta-link" {{on "click" this.viewVehicle}}>{{this.assignedVehicleLabel}}</a>
+                        {{else}}
+                            {{this.assignedVehicleLabel}}
+                        {{/if}}
+                    {{else}}
+                        {{t "common.no-vehicle-assigned"}}
+                    {{/if}}
+                </span>
             </div>
-            <div class="text-gray-400 dark:text-gray-500 text-xs">Last Modified: {{@resource.updatedAt}}</div>
+            <div class="fleetops-card-meta">{{t "common.last-modified"}}: {{@resource.updatedAt}}</div>
         </div>
     </Card.footer>
-</Layout::Resource::Card>
+</Layout::Resource::Card>

package/addon/components/driver/card.js

@@ -1,19 +1,15 @@
 import Component from '@glimmer/component';
 import { inject as service } from '@ember/service';
-import { get } from '@ember/object';
-import config from 'ember-get-config';
+import { action, get } from '@ember/object';
 
 export default class DriverCardComponent extends Component {
     @service driverActions;
+    @service vehicleActions;
 
     get resource() {
         return this.args.resource;
     }
 
-    get fallbackImage() {
-        return config?.defaultValues?.driverImage;
-    }
-
     get statusValue() {
         return get(this.resource, 'status') ?? '';
     }
@@ -27,4 +23,22 @@ export default class DriverCardComponent extends Component {
 
         return get(driver, 'vehicle_assigned.display_name') ?? get(driver, 'vehicle.display_name') ?? get(driver, 'vehicle_name');
     }
+
+    get hasVehicle() {
+        return Boolean(get(this.resource, 'vehicle_uuid') ?? get(this.resource, 'vehicle_assigned') ?? get(this.resource, 'vehicle'));
+    }
+
+    @action async viewVehicle() {
+        const vehicle = (await get(this.resource, 'vehicle')) ?? get(this.resource, 'vehicle_assigned');
+
+        if (!vehicle) {
+            return;
+        }
+
+        if (this.vehicleActions.panel?.view) {
+            return this.vehicleActions.panel.view(vehicle);
+        }
+
+        return this.vehicleActions.transition.view(vehicle);
+    }
 }

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={{model.avatar_url}} @fallbackSrc={{config "defaultValues.userImage"}} 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}}
@@ -52,8 +38,8 @@
         <div class="flex flex-row space-x-3 mb-3">
             <div class="flex items-center justify-start rounded-full">
                 <Image
-                    src={{@resource.photo_url}}
-                    @fallbackSrc={{config "defaultValues.driverImage"}}
+                    src={{resource-image @resource.photo_url "driver"}}
+                    @fallbackSrc={{(placeholder-image "driver")}}
                     alt={{@resource.name}}
                     height="48"
                     width="48"
@@ -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>
 

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

@@ -3,8 +3,8 @@
         <div class="flex flex-row space-x-3">
             <div class="flex items-start justify-start rounded-full">
                 <Image
-                    src={{@resource.photo_url}}
-                    @fallbackSrc={{config "defaultValues.driverImage"}}
+                    src={{resource-image @resource.photo_url "driver"}}
+                    @fallbackSrc={{(placeholder-image "driver")}}
                     alt={{@resource.name}}
                     height="48"
                     width="48"
@@ -17,14 +17,13 @@
             <div class="flex flex-col">
                 <h1 class="text-gray-900 dark:text-white font-semibold text-2xl">{{@resource.name}}</h1>
                 <div class="-mt-1">
-                    {{#if @resource.vehicle}}
+                    {{#if this.vehicleName}}
                         <div class="flex flex-row items-center">
-                            <a href="javascript:;" class="text-sm dark:text-blue-400 text-blue-600 hover:opacity-50">{{@resource.vehicle.displayName}}</a>
+                            <span class="text-sm dark:text-gray-400 text-gray-700">{{this.vehicleName}}</span>
                         </div>
                     {{else}}
                         <div class="flex flex-row items-center">
                             <span class="text-sm dark:text-gray-500 text-gray-700 mr-3">{{t "driver.fields.no-vehicle-assigned"}}</span>
-                            {{!-- <Button @icon="plus" @size="xs" @helpText={{t "driver.actions.assign-vehicle"}} /> --}}
                         </div>
                     {{/if}}
                 </div>
@@ -44,4 +43,4 @@
             />
         </div>
     </div>
-</div>
+</div>

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

@@ -1,3 +1,10 @@
 import Component from '@glimmer/component';
+import relationValue from '../../utils/relation-value';
 
-export default class DriverPanelHeaderComponent extends Component {}
+export default class DriverPanelHeaderComponent extends Component {
+    get vehicleName() {
+        const vehicle = relationValue(this.args.resource, 'vehicle');
+
+        return vehicle?.displayName || vehicle?.display_name || vehicle?.name || this.args.resource?.vehicle_name || vehicle?.plate_number;
+    }
+}

package/addon/components/driver/pill.hbs

@@ -1,16 +1,24 @@
-<Pill
-    @resource={{this.resource}}
-    @imageSrc={{avatar-url this.resource.photo_url}}
-    @titleFallback={{or @titleFallback "No driver"}}
-    @subtitle={{n-a this.resource.phone (if this.resource "No phone" "-")}}
-    @fallbackImageType="driverImage"
-    @showOnlineIndicator={{if this.resource true false}}
+<Resource::Pill
+    @resource={{(or @driver @resource)}}
+    @resourceType="driver"
+    @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/driver/summary.hbs

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