@fleetbase/fleetops-engine 0.6.65 → 0.6.66

package/addon/components/service-rate/details.hbs

@@ -8,7 +8,9 @@
 
             <div class="field-info-container">
                 <div class="field-name">{{t "service-rate.fields.service-order-label"}}</div>
-                <div class="field-value">{{n-a @resource.order_config.name}}</div>
+                <div class="field-value">
+                    <OrderConfig::Pill @orderConfig={{resource-relation @resource "order_config"}} @titleFallback={{n-a @resource.order_config.name}} />
+                </div>
             </div>
 
             <div class="field-info-container">
@@ -142,11 +144,11 @@
                                 <td>{{smart-humanize rateFee.geography_type}}</td>
                                 <td>
                                     {{#if (eq rateFee.geography_type "zone")}}
-                                        {{n-a rateFee.zone.name}}
+                                        <Zone::Pill @zone={{resource-relation rateFee "zone"}} @titleFallback={{n-a rateFee.zone.name}} @imageSize="20" @imageClass="w-5 h-5" @subtitle={{null}} />
                                     {{else if (eq rateFee.geography_type "fallback")}}
                                         Unmatched route distance
                                     {{else}}
-                                        {{n-a rateFee.service_area.name}}
+                                        <ServiceArea::Pill @serviceArea={{resource-relation rateFee "service_area"}} @titleFallback={{n-a rateFee.service_area.name}} @imageSize="20" @imageClass="w-5 h-5" @subtitle={{null}} />
                                     {{/if}}
                                 </td>
                                 <td>{{n-a rateFee.priority}}</td>
@@ -303,13 +305,17 @@
         <div class="grid grid-cols-1 lg:grid-cols-2 gap-2">
             <div class="field-info-container">
                 <div class="field-name">{{t "service-rate.fields.service-area-label"}}</div>
-                <div class="field-value">{{n-a @resource.serviceArea.name}}</div>
+                <div class="field-value">
+                    <ServiceArea::Pill @serviceArea={{resource-relation @resource "service_area"}} @titleFallback={{n-a @resource.service_area_name @resource.service_area.name}} />
+                </div>
             </div>
 
-            {{#if @resource.serviceArea}}
+            {{#if (or @resource.service_area_uuid @resource.zone_uuid)}}
                 <div class="field-info-container">
                     <div class="field-name">{{t "service-rate.fields.zone-label"}}</div>
-                    <div class="field-value">{{n-a @resource.zone.name}}</div>
+                    <div class="field-value">
+                        <Zone::Pill @zone={{resource-relation @resource "zone"}} @titleFallback={{n-a @resource.zone_name @resource.zone.name}} />
+                    </div>
                 </div>
             {{/if}}
         </div>

package/addon/components/service-rate/form.hbs

@@ -15,16 +15,14 @@
                     <PowerSelect
                         @options={{this.orderConfigActions.allOrderConfigs}}
                         @selected={{@resource.order_config}}
+                        @selectedItemComponent={{component "select-option/order-config" compact=true}}
                         @onChange={{this.selectOrderConfig}}
                         @placeholder={{t "service-rate.fields.select-order-type"}}
                         @triggerClass="form-select form-input"
                         @disabled={{cannot-write @resource}}
                         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>
@@ -265,13 +263,14 @@
                                                 <PowerSelect
                                                     @options={{this.zones}}
                                                     @selected={{rateFee.zone}}
+                                                    @selectedItemComponent={{component "select-option/zone" compact=true}}
                                                     @onChange={{fn this.selectRuleZone rateFee}}
                                                     @placeholder="Select zone"
                                                     @triggerClass="form-select form-input"
                                                     @disabled={{cannot-write @resource}}
                                                     as |zone|
                                                 >
-                                                    {{zone.name}}
+                                                    <SelectOption::Zone @option={{zone}} />
                                                 </PowerSelect>
                                             </div>
                                         {{else if (eq rateFee.geography_type "fallback")}}
@@ -281,13 +280,14 @@
                                                 <PowerSelect
                                                     @options={{this.serviceAreas}}
                                                     @selected={{rateFee.service_area}}
+                                                    @selectedItemComponent={{component "select-option/service-area" compact=true}}
                                                     @onChange={{fn this.selectRuleServiceArea rateFee}}
                                                     @placeholder="Select service area"
                                                     @triggerClass="form-select form-input"
                                                     @disabled={{cannot-write @resource}}
                                                     as |serviceArea|
                                                 >
-                                                    {{serviceArea.name}}
+                                                    <SelectOption::ServiceArea @option={{serviceArea}} />
                                                 </PowerSelect>
                                             </div>
                                         {{/if}}
@@ -637,6 +637,7 @@
         <InputGroup @name={{t "service-rate.fields.service-area-label"}} @helpText={{t "service-rate.fields.service-area-help-text"}}>
             <ModelSelect
                 @modelName="service-area"
+                @selectedItemComponent={{component "select-option/service-area" compact=true}}
                 @selectedModel={{@resource.serviceArea}}
                 @placeholder={{t "service-rate.fields.service-area-placeholder"}}
                 @triggerClass="form-select form-input"
@@ -648,7 +649,7 @@
                 @allowClear={{true}}
                 as |model|
             >
-                {{model.name}}
+                <SelectOption::ServiceArea @option={{model}} />
             </ModelSelect>
         </InputGroup>
 
@@ -656,6 +657,7 @@
             <InputGroup @name={{t "service-rate.fields.zone-label"}} @helpText={{t "service-rate.fields.zone-help-text"}} @wrapperClass="mt-2">
                 <ModelSelect
                     @modelName="zone"
+                    @selectedItemComponent={{component "select-option/zone" compact=true}}
                     @selectedModel={{@resource.zone}}
                     @query={{hash service_area_uuid=@resource.serviceArea.id}}
                     @placeholder={{t "service-rate.fields.zone-placeholder"}}
@@ -668,7 +670,7 @@
                     @allowClear={{true}}
                     as |model|
                 >
-                    {{model.name}}
+                    <SelectOption::Zone @option={{model}} />
                 </ModelSelect>
             </InputGroup>
         {{/if}}

package/addon/components/service-rate/pill.hbs

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

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

package/addon/components/service-rate-fee/pill.hbs

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

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

package/addon/components/service-rate-parcel-fee/pill.hbs

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

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

package/addon/components/table/cell/fleet-ops-option.hbs

@@ -0,0 +1,20 @@
+{{!
+    A table cell that shows an option's label rather than the value stored on
+    the record, so a Type column reads "DVIR" where the row holds "dvir".
+
+    The column names the list it draws from:
+
+        { valuePath: 'type', cellComponent: 'table/cell/fleet-ops-option', optionsKey: 'inspectionFormTypes' }
+
+    A value with no matching option is humanized rather than blanked, so a row
+    written before an option was retired is still legible.
+}}
+<div class="relative" aria-label={{or @value "-"}}>
+    <span class={{@column.cellClassNames}}>
+        {{#if @value}}
+            {{or (get-fleet-ops-option-label @column.optionsKey @value) (smart-humanize @value)}}
+        {{else}}
+            -
+        {{/if}}
+    </span>
+</div>

package/addon/components/telematic/details.hbs

@@ -1,3 +1,4 @@
+<Telematic::TelemetryStatus @resource={{@resource}} @provider={{@resource.provider_descriptor}} />
 <div class="flex flex-col gap-4 p-4 md:p-6" ...attributes>
     <section class="grid grid-cols-1 gap-3 lg:grid-cols-3">
         {{#each this.healthCards as |card|}}
@@ -77,7 +78,9 @@
                     <div class="text-gray-400 dark:text-gray-500">Integration ID</div>
                     <div class="mt-1 font-mono font-bold text-gray-900 dark:text-gray-100">{{n-a @resource.public_id}}</div>
                 </div>
-                {{#if @resource.provider_descriptor.supports_webhooks}}
+                {{#if @resource.provider_descriptor.metadata.telemetry.secure_webhooks}}
+                    <p class="text-xs">Use the live telemetry section to obtain the secure registration URL.</p>
+                {{else if @resource.provider_descriptor.supports_webhooks}}
                     <div class="rounded-md border border-gray-200 p-3 dark:border-gray-700 md:col-span-2">
                         <div class="mb-2 text-gray-400 dark:text-gray-500">Webhook URL</div>
                         {{#if this.hasWebhookUrl}}

package/addon/components/telematic/details.js

@@ -2,6 +2,7 @@ import Component from '@glimmer/component';
 
 export default class TelematicDetailsComponent extends Component {
     get webhookUrl() {
+        if (this.args.resource?.provider_descriptor?.metadata?.telemetry?.secure_webhooks) return null;
         const url = this.args.resource?.provider_descriptor?.webhook_url;
         const id = this.args.resource?.public_id;
 

package/addon/components/telematic/form.hbs

@@ -1,3 +1,4 @@
+<Telematic::TelemetryStatus @resource={{@resource}} @provider={{this.selectedProvider}} />
 <div class="flex min-h-0 flex-1 flex-col" ...attributes>
     <div class="min-h-0 flex-1 overflow-y-auto px-4 py-4 md:px-6">
         <div class="mx-auto flex w-full max-w-6xl flex-col gap-4">
@@ -251,7 +252,11 @@
             <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 no-input-group-padding text-xs">
                 <InputGroup @value={{@resource.name}} @name="Integration Name" />
 
-                {{#if this.selectedProvider.supports_webhooks}}
+                {{#if this.selectedProvider.metadata.telemetry.secure_webhooks}}
+
+                    <p class="text-xs">Use the live telemetry section to obtain the secure registration URL.</p>
+
+                {{else if this.selectedProvider.supports_webhooks}}
                     <InputGroup @name="Webhook URL" @wrapperClass="lg:col-span-2">
                         {{#if this.webhookUrl}}
                             <ClickToCopy @value={{this.webhookUrl}} class="w-full">

package/addon/components/telematic/form.js

@@ -144,6 +144,7 @@ export default class TelematicFormComponent extends Component {
     }
 
     get webhookUrl() {
+        if (this.selectedProvider?.metadata?.telemetry?.secure_webhooks) return null;
         const url = this.selectedProvider?.webhook_url;
         const id = this.args.resource?.public_id;
 

package/addon/components/telematic/pill.hbs

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

@@ -1,3 +1,4 @@
+<Telematic::TelemetryStatus @resource={{@resource}} @provider={{this.provider}} />
 <div class="flex min-h-0 flex-1 flex-col" ...attributes>
     <div class="min-h-0 flex-1 overflow-y-auto px-4 py-4 md:px-6">
         <div class="mx-auto flex w-full max-w-6xl flex-col gap-4">
@@ -100,7 +101,11 @@
                     <p class="text-xs text-gray-500 dark:text-gray-300">Provider-facing URL used for inbound telemetry when supported.</p>
                 </div>
 
-                {{#if this.provider.supports_webhooks}}
+                {{#if this.provider.metadata.telemetry.secure_webhooks}}
+
+                    <p class="text-xs">Use the live telemetry section to obtain the secure registration URL.</p>
+
+                {{else if this.provider.supports_webhooks}}
                     {{#if this.hasWebhookUrl}}
                         <ClickToCopy @value={{this.webhookUrl}} class="block w-full">
                             <Input @value={{this.webhookUrl}} class="form-input w-full" readonly />

package/addon/components/telematic/settings.js

@@ -19,6 +19,7 @@ export default class TelematicSettingsComponent extends Component {
     }
 
     get webhookUrl() {
+        if (this.provider?.metadata?.telemetry?.secure_webhooks) return null;
         const url = this.provider.webhook_url;
         const id = this.args.resource?.public_id;
 

package/addon/components/telematic/summary.hbs

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

package/addon/components/telematic/telemetry-status.hbs

@@ -0,0 +1,43 @@
+<div {{did-update this.resourceChanged @resource.id @resource.public_id this.provider.key this.supported}}>
+    {{#if this.supported}}
+        <section class="space-y-3 rounded-md border border-gray-200 p-3 dark:border-gray-700" data-test-telemetry-status>
+            <h3 class="text-sm font-bold">Live telemetry</h3>
+            {{#if this.error}}<p class="text-sm text-red-600" role="alert">{{this.error}}</p>{{/if}}
+            {{#if this.diagnostics}}
+                <dl class="grid grid-cols-2 gap-2 text-xs">
+                    <dt>Polling</dt><dd>{{if this.diagnostics.polling_enabled "Enabled" "Disabled"}}</dd>
+                    <dt>Position webhooks</dt><dd>{{if this.diagnostics.webhooks_enabled "Enabled" "Disabled"}} · {{smart-humanize this.diagnostics.webhook_state}}</dd>
+                    <dt>Last polling sweep</dt><dd>{{n-a this.diagnostics.last_poll.status}} · {{n-a this.diagnostics.last_poll.updated_at}}</dd>
+                    <dt>Units / pages / applied / failed</dt><dd>{{n-a this.diagnostics.last_poll.units}}
+                        /
+                        {{n-a this.diagnostics.last_poll.pages}}
+                        /
+                        {{n-a this.diagnostics.last_poll.applied}}
+                        /
+                        {{n-a this.diagnostics.last_poll.failed}}</dd>
+                    <dt>Last webhook received</dt><dd>{{n-a this.diagnostics.last_webhook.received_at}}</dd>
+                    <dt>Oldest pending delivery</dt><dd>{{n-a this.diagnostics.oldest_pending_at}}</dd>
+                    <dt>Latest queue / source delay (seconds)</dt><dd>{{n-a this.diagnostics.last_ingestion.queue_delay_seconds}}
+                        /
+                        {{n-a this.diagnostics.last_ingestion.source_delay_seconds}}</dd>
+                    <dt>Last polling error</dt><dd>{{n-a this.diagnostics.last_poll.error}}</dd>
+                </dl>
+            {{/if}}
+            {{#if this.supportsSecureWebhooks}}
+                {{#if this.registrationInstructions}}<p class="text-xs">{{this.registrationInstructions}}</p>{{/if}}
+                {{#if this.provisional}}<p class="text-xs">The payload adapter is provisional until a real delivery has been verified.</p>{{/if}}
+                <button type="button" class="btn btn-default btn-sm" disabled={{this.configure.isRunning}} {{on "click" this.reveal}}>Show registration URL</button>
+                {{#if this.webhookUrl}}
+                    <ClickToCopy @value={{this.webhookUrl}}><Input @value={{this.webhookUrl}} class="form-input w-full" readonly aria-label="Secure telemetry webhook URL" /></ClickToCopy>
+                    <p class="text-xs">This URL contains a secret. Rotating it immediately invalidates the previous URL and requires registration with the provider again.</p>
+                    <button type="button" class="btn btn-default btn-sm" disabled={{this.configure.isRunning}} {{on "click" this.rotate}}>Rotate secret and invalidate old URL</button>
+                {{/if}}
+            {{/if}}
+            {{#each this.diagnostics.recent_failures as |delivery|}}
+                <div class="text-xs"><span>{{delivery.received_at}} · {{delivery.error}}</span>
+                    {{#if (eq delivery.status "quarantined")}}<button type="button" class="btn btn-default btn-sm" {{on "click" (fn this.replay delivery.uuid)}}>Replay delivery</button>{{/if}}
+                </div>
+            {{/each}}
+        </section>
+    {{/if}}
+</div>

package/addon/components/telematic/telemetry-status.js

@@ -0,0 +1,95 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { task } from 'ember-concurrency';
+import { registerDestructor } from '@ember/destroyable';
+import { action } from '@ember/object';
+
+export default class TelematicTelemetryStatusComponent extends Component {
+    @service fetch;
+    @tracked diagnostics;
+    @tracked webhookUrl;
+    @tracked error;
+    timer;
+
+    constructor() {
+        super(...arguments);
+        if (this.supported) this.monitor.perform();
+        registerDestructor(this, () => clearTimeout(this.timer));
+    }
+
+    @action resourceChanged() {
+        this.monitor.cancelAll();
+        this.configure.cancelAll();
+        clearTimeout(this.timer);
+        this.webhookUrl = null;
+        this.diagnostics = null;
+        this.error = null;
+        if (this.supported) this.monitor.perform();
+    }
+
+    get provider() {
+        return this.args.provider ?? this.args.resource?.provider_descriptor;
+    }
+
+    get supported() {
+        return Boolean(this.id && this.provider?.metadata?.telemetry?.durable_ingestion);
+    }
+
+    get supportsSecureWebhooks() {
+        return this.provider?.metadata?.telemetry?.secure_webhooks === true;
+    }
+
+    get registrationInstructions() {
+        return this.provider?.metadata?.telemetry?.registration_instructions;
+    }
+
+    get provisional() {
+        return this.provider?.metadata?.telemetry?.contract_status === 'provisional';
+    }
+
+    get id() {
+        return this.args.resource?.public_id ?? this.args.resource?.id;
+    }
+
+    @task *monitor() {
+        while (true) {
+            try {
+                this.diagnostics = yield this.fetch.get(`telematics/${this.id}/telemetry-diagnostics`);
+                this.error = null;
+            } catch {
+                this.error = 'Unable to load telemetry diagnostics. Check that the telemetry migration is installed.';
+            }
+            yield new Promise((resolve) => {
+                this.timer = setTimeout(resolve, 15000);
+            });
+        }
+    }
+
+    @task *configure(rotate = false) {
+        try {
+            const result = yield this.fetch.post(`telematics/${this.id}/telemetry-webhook`, { rotate });
+            this.webhookUrl = result.url;
+            this.error = null;
+        } catch {
+            this.error = 'Unable to prepare the webhook URL. Verify the public HTTPS API URL and telemetry migration.';
+        }
+    }
+
+    @action reveal() {
+        this.configure.perform(false);
+    }
+
+    @action rotate() {
+        this.configure.perform(true);
+    }
+
+    @action async replay(id) {
+        try {
+            await this.fetch.post(`telematics/${this.id}/telemetry-deliveries/${id}/replay`);
+            this.diagnostics = await this.fetch.get(`telematics/${this.id}/telemetry-diagnostics`);
+        } catch {
+            this.error = 'Unable to queue this delivery for replay.';
+        }
+    }
+}

package/addon/components/tracking-number/pill.hbs

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

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

package/addon/components/tracking-status/pill.hbs

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

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

package/addon/components/trailer/card.hbs

@@ -47,11 +47,8 @@
                 <FaIcon @icon="car" @prefix="fas" />
                 <span class="fleetops-card-meta-value">
                     {{#if @resource.isAttached}}
-                        {{#if @resource.current_vehicle}}
-                            <a href="javascript:;" class="fleetops-card-meta-link" {{on "click" this.viewVehicle}}>{{n-a @resource.current_vehicle_name}}</a>
-                        {{else}}
-                            {{n-a @resource.current_vehicle_name}}
-                        {{/if}}
+                        {{! The card itself is the click target, so the vehicle is a compact option row, not a pill. }}
+                        <SelectOption::Vehicle @option={{@resource.current_vehicle}} @title={{n-a @resource.current_vehicle_name}} @compact={{true}} />
                     {{else}}
                         {{t "trailer.attachment.no-vehicle"}}
                     {{/if}}

package/addon/components/trailer/details.hbs

@@ -43,7 +43,9 @@
 
             <div class="field-info-container">
                 <div class="field-name">{{t "trailer.fields.category"}}</div>
-                <div class="field-value">{{n-a (or @resource.category.name @resource.category_name)}}</div>
+                <div class="field-value">
+                    <Category::Pill @category={{resource-relation @resource "category"}} @titleFallback={{n-a @resource.category_name}} />
+                </div>
             </div>
 
             <div class="field-info-container col-span-2">
@@ -101,7 +103,7 @@
                 <div class="field-name">{{t "trailer.fields.vehicle"}}</div>
                 <div class="field-value">
                     {{#if this.isAttached}}
-                        <a href="javascript:;" class="text-blue-600 dark:text-blue-400 hover:opacity-50" {{on "click" this.viewVehicle}}>{{n-a this.currentVehicleName}}</a>
+                        <Vehicle::Pill @vehicle={{resource-relation @resource "current_vehicle"}} @titleFallback={{n-a this.currentVehicleName}} @onClick={{this.viewVehicle}} />
                     {{else}}
                         <span class="text-gray-400 dark:text-gray-500">{{t "trailer.attachment.no-vehicle"}}</span>
                     {{/if}}
@@ -153,7 +155,7 @@
             <div class="field-info-container">
                 <div class="field-name">{{t "trailer.fields.coordinates"}}</div>
                 <div class="field-value">
-                    {{#if @resource.hasValidCoordinates}}
+                    {{#if this.hasValidCoordinates}}
                         {{point-coordinates @resource.location}}
                         <Button @icon="location-dot" @size="xs" @helpText={{t "trailer.actions.locate"}} @onClick={{this.locate}} class="ml-2" />
                     {{else}}
@@ -331,12 +333,16 @@
 
             <div class="field-info-container">
                 <div class="field-name">{{t "trailer.fields.vendor"}}</div>
-                <div class="field-value">{{n-a (or @resource.vendor.name @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 "trailer.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">

package/addon/components/trailer/details.js

@@ -11,6 +11,10 @@ export default class TrailerDetailsComponent extends Component {
         return this.args.resource;
     }
 
+    get hasValidCoordinates() {
+        return Boolean(this.trailer?.location && this.trailer.hasValidCoordinates);
+    }
+
     get isAttached() {
         return this.trailer?.isAttached ?? this.trailer?.attachment_state === 'attached';
     }