@fleetbase/fleetops-engine 0.6.65 → 0.6.66

package/addon/components/trailer/form.hbs

@@ -104,6 +104,7 @@
             <InputGroup @name={{t "trailer.fields.category"}} @helpText={{t "trailer.help.category"}}>
                 <ModelSelect
                     @modelName="category"
+                    @selectedItemComponent={{component "select-option/category" compact=true}}
                     @selectedModel={{@resource.category}}
                     @query={{hash for="trailer"}}
                     @placeholder={{t "trailer.placeholders.category"}}
@@ -115,7 +116,7 @@
                     @disabled={{cannot-write @resource}}
                     as |model|
                 >
-                    {{model.name}}
+                    <SelectOption::Category @option={{model}} />
                 </ModelSelect>
             </InputGroup>
 
@@ -353,6 +354,7 @@
             <InputGroup @name={{t "trailer.fields.vendor"}} @helpText={{t "trailer.help.vendor"}}>
                 <ModelSelect
                     @modelName="vendor"
+                    @selectedItemComponent={{component "select-option/vendor" compact=true}}
                     @selectedModel={{@resource.vendor}}
                     @placeholder={{t "trailer.placeholders.vendor"}}
                     @triggerClass="form-select form-input"
@@ -363,13 +365,14 @@
                     @disabled={{cannot-write @resource}}
                     as |model|
                 >
-                    {{model.name}}
+                    <SelectOption::Vendor @option={{model}} />
                 </ModelSelect>
             </InputGroup>
 
             <InputGroup @name={{t "trailer.fields.warranty"}} @helpText={{t "trailer.help.warranty"}}>
                 <ModelSelect
                     @modelName="warranty"
+                    @selectedItemComponent={{component "select-option/warranty" compact=true}}
                     @selectedModel={{@resource.warranty}}
                     @placeholder={{t "trailer.placeholders.warranty"}}
                     @triggerClass="form-select form-input"
@@ -380,7 +383,7 @@
                     @disabled={{cannot-write @resource}}
                     as |model|
                 >
-                    {{or model.name (concat model.policy_number " - " model.provider)}}
+                    <SelectOption::Warranty @option={{model}} />
                 </ModelSelect>
             </InputGroup>
 

package/addon/components/trailer/pill.hbs

@@ -1,21 +1,24 @@
-{{#let (or @trailer @resource) as |resource|}}
-    <Pill
-        @resource={{resource}}
-        @imageSrc={{resource.photo_url}}
-        @imageFallback={{(trailer-placeholder-image)}}
-        @showOnlineIndicator={{true}}
-        @noTooltip={{true}}
-        @onClick={{@onClick}}
-        @anchorClass={{@anchorClass}}
-        @imageClass={{@imageClass}}
-        @imageWrapperClass={{@imageWrapperClass}}
-        @contentWrapperClass="min-w-0 {{@contentWrapperClass}}"
-        ...attributes
-    >
-        <div class="text-sm truncate {{@titleClass}}">{{or resource.displayName resource.display_name resource.name resource.public_id}}</div>
-        <div class="text-xs text-gray-400 dark:text-gray-500 truncate {{@subtitleClass}}">
-            {{#if resource.type}}{{t (concat "trailer.types." resource.type)}}{{/if}}
-            {{#if (or resource.plate_number resource.vin resource.code)}}<span class="mx-1">·</span>{{or resource.plate_number resource.vin resource.code}}{{/if}}
-        </div>
-    </Pill>
-{{/let}}
+<Resource::Pill
+    @resource={{(or @trailer @resource)}}
+    @resourceType="trailer"
+    @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/trailer/summary.hbs

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

package/addon/components/vehicle/card.hbs

@@ -44,11 +44,8 @@
                 <FaIcon @icon="id-card" @prefix="fas" />
                 <span class="fleetops-card-meta-value">
                     {{#if this.driverName}}
-                        {{#if @resource.driver}}
-                            <a href="javascript:;" class="fleetops-card-meta-link" {{on "click" this.viewDriver}}>{{this.driverName}}</a>
-                        {{else}}
-                            {{this.driverName}}
-                        {{/if}}
+                        {{! The card itself is the click target, so the driver is a compact option row, not a pill. }}
+                        <SelectOption::Driver @option={{@resource.driver}} @title={{this.driverName}} @compact={{true}} />
                     {{else}}
                         {{t "common.no-driver-assigned"}}
                     {{/if}}
@@ -57,9 +54,8 @@
             <div class="fleetops-card-meta">
                 <FaIcon @icon="trailer" @prefix="fas" />
                 <span class="fleetops-card-meta-value">
-                    {{#each @resource.trailers as |trailer index|}}
-                        {{#if index}}, {{/if}}
-                        <a href="javascript:;" class="fleetops-card-meta-link" {{on "click" (fn this.viewTrailer trailer)}}>{{trailer.displayName}}</a>
+                    {{#each @resource.trailers as |trailer|}}
+                        <SelectOption::Trailer @option={{trailer}} @compact={{true}} />
                     {{else}}
                         {{t "vehicle.empty.trailers"}}
                     {{/each}}

package/addon/components/vehicle/details/inspections.hbs

@@ -0,0 +1,49 @@
+<div class="vehicle-details-inspections p-4">
+    {{#if this.loadInspections.isRunning}}
+        <div class="flex items-center justify-center py-10">
+            <Spinner />
+        </div>
+    {{else if this.inspections.length}}
+        <div class="inspection-history">
+            {{#each this.inspections as |inspection|}}
+                <button type="button" class="inspection-history__card" {{on "click" (fn this.inspectionSubmissionActions.transition.view inspection)}}>
+                    <div class="inspection-history__head">
+                        <span class="inspection-history__form"><SelectOption::InspectionForm @option={{inspection.form}} @title={{n-a (or inspection.form.name inspection.form_name)}} @compact={{true}} /></span>
+                        {{! A draft has no result yet; an empty badge was just a coloured dot. }}
+                        {{#if inspection.result}}
+                            <Badge @status={{if (eq inspection.result "failed") "failed" "passed"}}>{{smart-humanize inspection.result}}</Badge>
+                        {{/if}}
+                        <Badge @status={{inspection.status}}>{{smart-humanize inspection.status}}</Badge>
+                    </div>
+
+                    <div class="inspection-history__meta">
+                        <span class="inspection-history__when">
+                            <FaIcon @icon="clock" @size="xs" class="inspection-history__meta-icon" />
+                            {{n-a inspection.submittedAt}}
+                        </span>
+                        {{#if inspection.failed_items}}
+                            <span class="inspection-history__failed">
+                                <FaIcon @icon="triangle-exclamation" @size="xs" class="inspection-history__meta-icon" />
+                                {{t "inspection.record.failed-count" count=inspection.failed_items}}
+                            </span>
+                        {{/if}}
+                        {{#if inspection.odometer}}
+                            <span class="inspection-history__odometer">
+                                <FaIcon @icon="gauge" @size="xs" class="inspection-history__meta-icon" />
+                                {{format-number inspection.odometer}}
+                            </span>
+                        {{/if}}
+                    </div>
+
+                    <div class="inspection-history__id">{{inspection.public_id}}</div>
+                </button>
+            {{/each}}
+        </div>
+    {{else}}
+        <div class="flex flex-col items-center justify-center py-10 text-gray-400 dark:text-gray-600">
+            <FaIcon @icon="clipboard-check" @size="2x" class="mb-3" />
+            <p class="text-sm font-semibold text-gray-600 dark:text-gray-300">{{t "vehicle.empty.inspections"}}</p>
+            <p class="text-xs">{{t "vehicle.empty.inspections-description"}}</p>
+        </div>
+    {{/if}}
+</div>

package/addon/components/vehicle/details/inspections.js

@@ -0,0 +1,44 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { task } from 'ember-concurrency';
+
+/**
+ * A vehicle's inspection history, newest first.
+ *
+ * The same submissions the Inspections screen lists, narrowed to this truck:
+ * what was filed against it, what failed, and a way into the record. Filing an
+ * inspection is a driver's job — through the app or a public link — so nothing
+ * is created from here.
+ */
+export default class VehicleDetailsInspectionsComponent extends Component {
+    @service inspectionSubmissionActions;
+    @service notifications;
+    @service store;
+    @tracked inspections = [];
+
+    get vehicle() {
+        return this.args.resource ?? this.args.vehicle;
+    }
+
+    constructor() {
+        super(...arguments);
+        this.loadInspections.perform();
+    }
+
+    @task *loadInspections() {
+        try {
+            // `vehicle` is neither a column nor searchable on this model, so it
+            // is dropped silently; `vehicle_uuid` is fillable and is what the
+            // index filter actually matches on.
+            const inspections = yield this.store.query('inspection-submission', {
+                vehicle_uuid: this.vehicle.id,
+                sort: '-created_at',
+            });
+
+            this.inspections = Array.from(inspections ?? []);
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+}

package/addon/components/vehicle/details/maintenance-history.hbs

@@ -1,5 +1,5 @@
 <div class="vehicle-details-maintenance-history p-4">
-    {{#if this.maintenanceHistory.isRunning}}
+    {{#if this.loadMaintenanceHistory.isRunning}}
         <div class="flex items-center justify-center py-10">
             <Spinner />
         </div>

package/addon/components/vehicle/details/schedules.hbs

@@ -1,5 +1,5 @@
 <div class="vehicle-details-schedules p-4">
-    {{#if this.schedules.isRunning}}
+    {{#if this.loadSchedules.isRunning}}
         <div class="flex items-center justify-center py-10">
             <Spinner />
         </div>
@@ -21,7 +21,7 @@
                             <td class="py-2 pr-4 font-medium">{{schedule.name}}</td>
                             <td class="py-2 pr-4 text-gray-500">{{schedule.interval_value}} {{schedule.interval_unit}}</td>
                             <td class="py-2 pr-4 text-gray-500">{{n-a (format-date-fns schedule.next_due_date "dd MMM yyyy")}}</td>
-                            <td class="py-2 pr-4"><StatusBadge @status={{schedule.status}} /></td>
+                            <td class="py-2 pr-4"><Badge @status={{schedule.status}}>{{smart-humanize schedule.status}}</Badge></td>
                             <td class="py-2">
                                 <Button @icon="eye" @size="xs" @onClick={{fn this.maintenanceScheduleActions.transition.view schedule}} />
                             </td>

package/addon/components/vehicle/details/work-orders.hbs

@@ -22,7 +22,7 @@
                             <td class="py-2 pr-4 font-mono uppercase">{{workOrder.code}}</td>
                             <td class="py-2 pr-4 font-medium">{{workOrder.subject}}</td>
                             <td class="py-2 pr-4 text-gray-500">{{humanize workOrder.priority}}</td>
-                            <td class="py-2 pr-4"><StatusBadge @status={{workOrder.status}} /></td>
+                            <td class="py-2 pr-4"><Badge @status={{workOrder.status}}>{{smart-humanize workOrder.status}}</Badge></td>
                             <td class="py-2 pr-4 text-gray-500">{{n-a (format-date-fns workOrder.due_at "dd MMM yyyy")}}</td>
                             <td class="py-2">
                                 <Button @icon="eye" @size="xs" @onClick={{fn this.workOrderActions.transition.view workOrder}} />

package/addon/components/vehicle/details.hbs

@@ -75,7 +75,24 @@
             <div class="field-info-container">
                 <div class="field-name">{{t "vehicle.fields.driver-assigned"}}</div>
                 <div class="field-value">
-                    {{n-a (or @resource.driver.name @resource.driver_name)}}
+                    <Driver::Pill @driver={{resource-relation @resource "driver"}} @titleFallback={{n-a @resource.driver_name (t "common.no-driver-assigned")}} />
+                </div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "resource.trailer"}}</div>
+                <div class="field-value">
+                    {{#let (resource-relation @resource "trailers") as |trailers|}}
+                        {{#if trailers.length}}
+                            <div class="flex flex-col gap-1">
+                                {{#each trailers as |trailer|}}
+                                    <Trailer::Pill @trailer={{trailer}} />
+                                {{/each}}
+                            </div>
+                        {{else}}
+                            {{n-a null}}
+                        {{/if}}
+                    {{/let}}
                 </div>
             </div>
 

package/addon/components/vehicle/form.hbs

@@ -83,6 +83,7 @@
             <InputGroup @name={{t "vehicle.fields.driver-assigned"}}>
                 <ModelSelect
                     @modelName="driver"
+                    @selectedItemComponent={{component "select-option/driver" compact=true}}
                     @selectedModel={{@resource.driver}}
                     @placeholder={{t "vehicle.fields.select-driver"}}
                     @triggerClass="form-select form-input"
@@ -92,7 +93,7 @@
                     @permission="fleet-ops assign-driver-for vehicle"
                     as |model|
                 >
-                    {{model.name}}
+                    <SelectOption::Driver @option={{model}} />
                 </ModelSelect>
             </InputGroup>
 

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

@@ -17,14 +17,13 @@
             <div class="flex flex-col">
                 <h1 class="text-gray-900 dark:text-white font-semibold text-2xl">{{@resource.displayName}}</h1>
                 <div class="-mt-1">
-                    {{#if @resource.driver}}
+                    {{#if this.driverName}}
                         <div class="flex flex-row items-center">
-                            <a href="javascript:;" class="text-sm dark:text-blue-400 text-blue-600 hover:opacity-50">{{@resource.driver.name}}</a>
+                            <span class="text-sm dark:text-gray-400 text-gray-700">{{this.driverName}}</span>
                         </div>
                     {{else}}
                         <div class="flex flex-row items-center">
                             <span class="text-sm dark:text-gray-500 text-gray-700 mr-3">{{t "common.no-driver-assigned"}}</span>
-                            {{!-- <Button @icon="plus" @size="xs" @helpText={{t "vehicle.actions.assign-driver"}} /> --}}
                         </div>
                     {{/if}}
                 </div>
@@ -46,4 +45,4 @@
             </Layout::Resource::Panel::HeaderActions>
         </div>
     </div>
-</div>
+</div>

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

@@ -1,3 +1,10 @@
 import Component from '@glimmer/component';
+import relationValue from '../../utils/relation-value';
 
-export default class VehiclePanelHeaderComponent extends Component {}
+export default class VehiclePanelHeaderComponent extends Component {
+    get driverName() {
+        const driver = relationValue(this.args.resource, 'driver');
+
+        return driver?.name || this.args.resource?.driver_name;
+    }
+}

package/addon/components/vehicle/pill.hbs

@@ -1,33 +1,24 @@
-<Pill
-    @this.resource={{this.resource}}
-    @imageSrc={{resource-image this.resource.photo_url "vehicle"}}
-    @imageFallback={{(placeholder-image "vehicle")}}
-    @showOnlineIndicator={{if this.resource true false}}
-    @noTooltip={{not this.resource}}
+<Resource::Pill
+    @resource={{(or @vehicle @resource)}}
+    @resourceType="vehicle"
+    @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|
 >
-    <:default>
-        <div class="text-sm">{{or this.resource.name this.resource.yearMakeModel @titleFallback "No vehicle"}}</div>
-        <div class="text-xs text-gray-400 dark:text-gray-500">{{or this.resource.plate_number this.resource.vin this.resource.serial_number this.resource.call_sign "-"}}</div>
-    </:default>
-    <:tooltip>
-        <div>
-            <div class="text-xs font-semibold">{{this.resource.name this.resource.yearMakeModel}}</div>
-            <div class="text-xs">{{t "resource.driver"}}: {{n-a this.resource.driver_name}}</div>
-            <div class="text-xs">
-                <span>{{t "common.status"}}:</span>
-                <span class="{{if this.resource.online 'text-green-500' 'text-red-400'}}">
-                    {{if this.resource.online (t "common.online") (t "common.offline")}}
-                </span>
-            </div>
-            <div class="text-xs truncate">Pos: {{point-coordinates this.resource.location}}</div>
-        </div>
-    </:tooltip>
-</Pill>
+    {{yield resource}}
+</Resource::Pill>

package/addon/components/vehicle/summary.hbs

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

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

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

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

package/addon/components/vendor/form.hbs

@@ -109,6 +109,7 @@
                     </div>
                     <ModelSelect
                         @modelName="place"
+                        @selectedItemComponent={{component "select-option/place" compact=true}}
                         @selectedModel={{@resource.place}}
                         @placeholder={{t "common.select-address"}}
                         @triggerClass="form-select form-input"
@@ -118,10 +119,7 @@
                         @disabled={{cannot-write @resource}}
                         as |model|
                     >
-                        <div class="flex items-center flex-row justify-between">
-                            <div class="truncate flex-1">{{n-a model.address}}</div>
-                            <Badge @hideStatusDot={{true}} @status="info">{{model.public_id}}</Badge>
-                        </div>
+                        <SelectOption::Place @option={{model}} />
                     </ModelSelect>
                 </InputGroup>
                 <InputGroup @name={{t "common.country"}}>

package/addon/components/vendor/personnel-manager.hbs

@@ -33,6 +33,7 @@
                         <InputGroup @name="Contact" @wrapperClass="mb-0i">
                             <ModelSelect
                                 @modelName="contact"
+                                @selectedItemComponent={{component "select-option/contact" compact=true}}
                                 @selectedModel={{this.selectedContact}}
                                 @placeholder="Select existing customer contact"
                                 @query={{hash type="customer"}}
@@ -42,15 +43,7 @@
                                 @onChange={{this.selectContact}}
                                 as |model|
                             >
-                                <div class="flex flex-row items-center">
-                                    <div class="mr-2 w-6">
-                                        <Image src={{resource-image model.photo_url "contact"}} @fallbackSrc={{(placeholder-image "contact")}} alt={{model.name}} class="h-6 w-6 rounded-md" />
-                                    </div>
-                                    <div class="min-w-0">
-                                        <div class="truncate font-semibold">{{model.name}}</div>
-                                        <div class="truncate text-xs text-gray-500">{{n-a model.email}}</div>
-                                    </div>
-                                </div>
+                                <SelectOption::Contact @option={{model}} />
                             </ModelSelect>
                         </InputGroup>
 

package/addon/components/vendor/personnel-tab.hbs

@@ -0,0 +1 @@
+<Vendor::PersonnelManager @vendor={{@resource}} ...attributes />

package/addon/components/vendor/personnel-tab.js

@@ -0,0 +1,4 @@
+import Component from '@glimmer/component';
+
+/** The vendor details panel's Personnel tab: the personnel manager for `@resource`. */
+export default class VendorPersonnelTabComponent extends Component {}

package/addon/components/vendor/pill.hbs

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

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

package/addon/components/warranty/details.hbs

@@ -26,7 +26,9 @@
 
             <div class="field-info-container">
                 <div class="field-name">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">

package/addon/components/warranty/form.hbs

@@ -12,6 +12,7 @@
             <InputGroup @name="Vendor">
                 <ModelSelect
                     @modelName="vendor"
+                    @selectedItemComponent={{component "select-option/vendor" compact=true}}
                     @selectedModel={{@resource.vendor}}
                     @placeholder="Select Vendor"
                     @triggerClass="form-select form-input"
@@ -22,7 +23,7 @@
                     @disabled={{cannot-write @resource}}
                     as |model|
                 >
-                    {{model.name}}
+                    <SelectOption::Vendor @option={{model}} />
                 </ModelSelect>
             </InputGroup>
 

package/addon/components/warranty/pill.hbs

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

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

package/addon/components/waypoint/pill.hbs

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

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

package/addon/components/widget/radar.hbs

@@ -0,0 +1,28 @@
+<div class="fleet-ops-widget fleet-ops-kpi-tile fleet-ops-kpi-tile-pop {{this.accentClass}} relative flex flex-col h-full rounded-md border shadow-sm overflow-hidden" data-test-radar-widget ...attributes>
+    <div class="flex items-center justify-between px-2.5 pt-2 relative z-10">
+        <span class="text-[10px] uppercase tracking-wider text-gray-500 dark:text-gray-400 font-bold truncate">{{t "widget.radar.title"}}</span>
+        <FaIcon @icon="satellite-dish" class="kpi-tile-icon text-gray-400 dark:text-gray-500 text-[11px]" />
+    </div>
+    <div class="flex-1 flex flex-col px-2.5 pt-1 pb-2 min-h-0 relative z-10">
+        {{#if this.load.isRunning}}
+            <div class="flex-1 flex items-center justify-center"><Spinner /></div>
+        {{else if this.error}}
+            <div class="flex-1 flex items-center justify-center text-[10px] text-red-500 dark:text-red-400">{{this.error}}</div>
+        {{else}}
+            <div class="flex items-baseline gap-1.5">
+                <span class="text-2xl font-bold leading-none {{this.valueClass}}" data-test-radar-widget-open>{{this.stats.open}}</span>
+                <span class="text-[10px] text-gray-500 dark:text-gray-400">{{t "widget.radar.open"}}</span>
+                {{#if this.stats.overdue}}
+                    <Badge @status="error" @text={{concat this.stats.overdue " " (t "widget.radar.overdue")}} @hideIcon={{true}} @disableHumanize={{true}} @wrapperClass="text-[9px] px-1 py-0 font-bold" data-test-radar-widget-overdue />
+                {{/if}}
+            </div>
+            <div class="mt-auto flex items-center justify-between text-[10px] text-gray-500 dark:text-gray-400">
+                <span data-test-radar-widget-snoozed>{{this.stats.snoozed}} {{t "widget.radar.snoozed"}}</span>
+                <LinkTo @route="management.index" class="inline-flex items-center gap-1 font-semibold text-blue-600 hover:text-blue-700 dark:text-blue-300 dark:hover:text-blue-200" data-test-radar-widget-link>
+                    {{t "widget.radar.open-radar"}}
+                    <FaIcon @icon="arrow-right" class="text-[9px]" />
+                </LinkTo>
+            </div>
+        {{/if}}
+    </div>
+</div>