@fleetbase/fleetops-engine 0.6.63 → 0.6.65

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

@@ -16,7 +16,7 @@
                 >
                     <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" />
+                            <Image src={{resource-image model.avatar_url "contact"}} @fallbackSrc={{(placeholder-image "contact")}} alt={{model.name}} class="w-6 h-6 rounded-md" />
                         </div>
                         <div class="flex flex-col">
                             <div class="font-semibold">{{model.name}}</div>
@@ -52,8 +52,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"

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"

package/addon/components/driver/pill.hbs

@@ -1,9 +1,9 @@
 <Pill
     @resource={{this.resource}}
-    @imageSrc={{avatar-url this.resource.photo_url}}
+    @imageSrc={{resource-image this.resource.photo_url "driver"}}
     @titleFallback={{or @titleFallback "No driver"}}
     @subtitle={{n-a this.resource.phone (if this.resource "No phone" "-")}}
-    @fallbackImageType="driverImage"
+    @imageFallback={{(placeholder-image "driver")}}
     @showOnlineIndicator={{if this.resource true false}}
     @onClick={{@onClick}}
     @anchorClass={{@anchorClass}}

package/addon/components/equipment/form.js

@@ -11,20 +11,24 @@ import { task } from 'ember-concurrency';
 const TYPE_TO_MODEL = {
     'fleet-ops:vehicle': 'vehicle',
     'fleet-ops:driver': 'driver',
+    'fleet-ops:trailer': 'trailer',
     'Fleetbase\\FleetOps\\Models\\Vehicle': 'vehicle',
     'Fleetbase\\FleetOps\\Models\\Driver': 'driver',
+    'Fleetbase\\FleetOps\\Models\\Trailer': 'trailer',
     'fleet-ops:equipment': 'equipment',
 };
 
 const TYPE_TO_OPTION_VALUE = {
     'Fleetbase\\FleetOps\\Models\\Vehicle': 'fleet-ops:vehicle',
     'Fleetbase\\FleetOps\\Models\\Driver': 'fleet-ops:driver',
+    'Fleetbase\\FleetOps\\Models\\Trailer': 'fleet-ops:trailer',
 };
 
 export default class EquipmentFormComponent extends Component {
     @service fetch;
     @service currentUser;
     @service notifications;
+    @service intl;
 
     /** Equipment type options. */
     equipmentTypeOptions = ['ppe', 'refrigeration_unit', 'tool', 'liftgate', 'ramp', 'container', 'pallet_jack', 'forklift', 'safety_equipment', 'communication_device', 'other'];
@@ -36,10 +40,13 @@ export default class EquipmentFormComponent extends Component {
      * Polymorphic equipable type options — the asset this equipment is attached to.
      * Each entry has a `value` (stored on the model) and a `label` (displayed in the UI).
      */
-    equipableTypeOptions = [
-        { value: 'fleet-ops:vehicle', label: 'Vehicle' },
-        { value: 'fleet-ops:driver', label: 'Driver' },
-    ];
+    get equipableTypeOptions() {
+        return [
+            { value: 'fleet-ops:vehicle', label: this.intl.t('resource.vehicle') },
+            { value: 'fleet-ops:trailer', label: this.intl.t('resource.trailer') },
+            { value: 'fleet-ops:driver', label: this.intl.t('resource.driver') },
+        ];
+    }
 
     /** Derived Ember Data model name for the currently selected equipable type. */
     @tracked equipableModelName = null;

package/addon/components/equipment/pill.hbs

@@ -0,0 +1,20 @@
+{{#let (or @equipment @resource) as |resource|}}
+    <Pill
+        @resource={{resource}}
+        @imageSrc={{resource.photo_url}}
+        @fallbackImageType="placeholderImage"
+        @noTooltip={{true}}
+        @onClick={{@onClick}}
+        @anchorClass={{@anchorClass}}
+        @imageClass={{@imageClass}}
+        @imageWrapperClass={{@imageWrapperClass}}
+        @contentWrapperClass="min-w-0 {{@contentWrapperClass}}"
+        ...attributes
+    >
+        <div class="text-sm truncate {{@titleClass}}">{{or resource.name resource.public_id}}</div>
+        <div class="text-xs text-gray-400 dark:text-gray-500 truncate {{@subtitleClass}}">
+            {{#if resource.type}}{{smart-humanize resource.type}}{{/if}}
+            {{#if (or resource.serial_number resource.code)}}<span class="mx-1">·</span>{{or resource.serial_number resource.code}}{{/if}}
+        </div>
+    </Pill>
+{{/let}}

package/addon/components/equipment/pill.js

@@ -0,0 +1,3 @@
+import Component from '@glimmer/component';
+
+export default class EquipmentPillComponent extends Component {}

package/addon/components/filter/multi-model.hbs

@@ -0,0 +1,19 @@
+<div class="filter-multi-model flex flex-row items-center" ...attributes>
+    <ModelSelectMultiple
+        @modelName={{@filter.model}}
+        @query={{@filter.query}}
+        @optionLabel={{or @filter.modelNamePath "name"}}
+        @selectedModel={{this.selectedModels}}
+        @placeholder={{@placeholder}}
+        @triggerClass="form-select form-input form-input-sm flex-1"
+        @infiniteScroll={{false}}
+        @renderInPlace={{true}}
+        @onChange={{this.onChange}}
+        as |model|
+    >
+        {{get model (or @filter.modelNamePath "name")}}
+    </ModelSelectMultiple>
+    <button type="button" class="clear-button" disabled={{not this.selectedModels.length}} aria-label={{t "common.clear"}} {{on "click" this.clear}}>
+        <FaIcon @icon="times" />
+    </button>
+</div>

package/addon/components/filter/multi-model.js

@@ -0,0 +1,90 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { isArray } from '@ember/array';
+import { task } from 'ember-concurrency';
+
+/**
+ * Table filter that selects several records of one model (drivers, trailers,
+ * devices). The filter value travels as a comma-separated list of ids so it
+ * survives the URL round trip; the matching records are re-fetched on init so
+ * the chips show names rather than ids after a reload.
+ */
+export default class FilterMultiModelComponent extends Component {
+    @service store;
+    @tracked selectedModels = [];
+
+    constructor() {
+        super(...arguments);
+        this.restoreSelection.perform(this.args.value);
+    }
+
+    get modelName() {
+        return this.args.filter?.model;
+    }
+
+    parseIds(value) {
+        if (isArray(value)) {
+            return value.filter(Boolean);
+        }
+
+        if (typeof value === 'string' && value.trim()) {
+            return value
+                .split(',')
+                .map((id) => id.trim())
+                .filter(Boolean);
+        }
+
+        return [];
+    }
+
+    @task *restoreSelection(value) {
+        const ids = this.parseIds(value);
+
+        if (!ids.length || !this.modelName) {
+            this.selectedModels = [];
+            return;
+        }
+
+        const records = [];
+
+        for (const id of ids) {
+            try {
+                records.push(this.store.peekRecord(this.modelName, id) ?? (yield this.store.findRecord(this.modelName, id)));
+            } catch {
+                // An id that no longer resolves simply drops out of the chips.
+            }
+        }
+
+        this.selectedModels = records.filter(Boolean);
+    }
+
+    @action onChange(selection) {
+        const { onChange, onClear, filter } = this.args;
+        const models = isArray(selection) ? selection : [];
+
+        this.selectedModels = models;
+
+        if (!models.length) {
+            if (typeof onClear === 'function') {
+                onClear(filter);
+            }
+            return;
+        }
+
+        if (typeof onChange === 'function') {
+            onChange(filter, models.map((model) => model.id).join(','));
+        }
+    }
+
+    @action clear() {
+        const { onClear, filter } = this.args;
+
+        this.selectedModels = [];
+
+        if (typeof onClear === 'function') {
+            onClear(filter);
+        }
+    }
+}

package/addon/components/fleet/driver-listing.hbs

@@ -59,7 +59,7 @@
                                 <div class="flex flex-row items-start">
                                     <div class="mr-2">
                                         <div class="relative">
-                                            <Image src={{driver.photo_url}} alt={{driver.name}} class="w-5 h-5 rounded-md" @fallbackSrc={{config "defaultValues.driverImage"}} />
+                                            <Image src={{resource-image driver.photo_url "driver"}} alt={{driver.name}} class="w-5 h-5 rounded-md" @fallbackSrc={{(placeholder-image "driver")}} />
                                             <FaIcon @icon="circle" class="absolute right-0 top-0 -mr-1 -mt-1 {{if driver.online 'text-green-500' 'text-yellow-200'}}" />
                                         </div>
                                     </div>

package/addon/components/fleet/vehicle-listing.hbs

@@ -59,7 +59,7 @@
                                 <div class="flex flex-row items-start">
                                     <div class="mr-2">
                                         <div class="relative">
-                                            <Image src={{vehicle.photo_url}} alt={{vehicle.name}} class="w-5 h-5 rounded-md" @fallbackSrc={{config "defaultValues.vehicleImage"}} />
+                                            <Image src={{resource-image vehicle.photo_url "vehicle"}} alt={{vehicle.name}} class="w-5 h-5 rounded-md" @fallbackSrc={{(placeholder-image "vehicle")}} />
                                             <FaIcon @icon="circle" class="absolute right-0 top-0 -mr-1 -mt-1 {{if vehicle.online 'text-green-500' 'text-yellow-200'}}" />
                                         </div>
                                     </div>

package/addon/components/fleet-panel/driver-listing.hbs

@@ -57,7 +57,7 @@
                                 <div class="flex flex-row items-start">
                                     <div class="mr-2">
                                         <div class="relative">
-                                            <Image src={{driver.photo_url}} alt={{driver.name}} class="w-5 h-5 rounded-md" @fallbackSrc={{config "defaultValues.driverImage"}} />
+                                            <Image src={{resource-image driver.photo_url "driver"}} alt={{driver.name}} class="w-5 h-5 rounded-md" @fallbackSrc={{(placeholder-image "driver")}} />
                                             <FaIcon @icon="circle" class="absolute right-0 top-0 -mr-1 -mt-1 {{if driver.online 'text-green-500' 'text-yellow-200'}}" />
                                         </div>
                                     </div>

package/addon/components/fleet-panel/vehicle-listing.hbs

@@ -57,7 +57,7 @@
                                 <div class="flex flex-row items-start">
                                     <div class="mr-2">
                                         <div class="relative">
-                                            <Image src={{vehicle.photo_url}} alt={{vehicle.name}} class="w-5 h-5 rounded-md" @fallbackSrc={{config "defaultValues.vehicleImage"}} />
+                                            <Image src={{resource-image vehicle.photo_url "vehicle"}} alt={{vehicle.name}} class="w-5 h-5 rounded-md" @fallbackSrc={{(placeholder-image "vehicle")}} />
                                             <FaIcon @icon="circle" class="absolute right-0 top-0 -mr-1 -mt-1 {{if vehicle.online 'text-green-500' 'text-yellow-200'}}" />
                                         </div>
                                     </div>

package/addon/components/layout/fleet-ops-sidebar.js

@@ -142,6 +142,7 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
             ]),
             this.createItem('menu.drivers', 'id-card', 'management.drivers', 'fleet-ops list driver', 'fleet-ops see driver', ['driver', 'online drivers']),
             this.createItem('menu.vehicles', 'truck', 'management.vehicles', 'fleet-ops list vehicle', 'fleet-ops see vehicle', ['vehicle', 'track vehicles', 'online vehicles']),
+            this.createItem('menu.trailers', 'trailer', 'management.trailers', 'fleet-ops list trailer', 'fleet-ops see trailer', ['trailer', 'towed asset', 'reefer', 'flatbed']),
             this.createItem('menu.fleets', 'user-group', 'management.fleets', 'fleet-ops list fleet', 'fleet-ops see fleet', ['fleet', 'teams']),
             this.createItem('menu.vendors', 'warehouse', 'management.vendors', 'fleet-ops list vendor', 'fleet-ops see vendor'),
             this.createItem('menu.contacts', 'address-book', 'management.contacts', 'fleet-ops list contact', 'fleet-ops see contact'),
@@ -346,13 +347,14 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
             'management.index': 0,
             'management.drivers': 1,
             'management.vehicles': 2,
-            'management.fleets': 3,
-            'management.vendors': 4,
-            'management.contacts': 5,
-            'management.places': 6,
-            'management.fuel-reports': 7,
-            'management.fuel-transactions': 8,
-            'management.issues': 9,
+            'management.trailers': 3,
+            'management.fleets': 4,
+            'management.vendors': 5,
+            'management.contacts': 6,
+            'management.places': 7,
+            'management.fuel-reports': 8,
+            'management.fuel-transactions': 9,
+            'management.issues': 10,
             'maintenance.index': 0,
             'maintenance.schedules': 1,
             'maintenance.work-orders': 2,

package/addon/components/maintenance/form.js

@@ -1,12 +1,14 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
 
 /**
  * Maps a polymorphic type value to the Ember Data model name used by ModelSelect.
  */
 const TYPE_TO_MODEL = {
     'fleet-ops:vehicle': 'vehicle',
+    'fleet-ops:trailer': 'trailer',
     'fleet-ops:driver': 'driver',
     'fleet-ops:equipment': 'equipment',
     'fleet-ops:vendor': 'vendor',
@@ -20,9 +22,11 @@ const TYPE_TO_MODEL = {
  */
 const MAINTAINABLE_MODEL_TO_TYPE = {
     'maintenance-subject-vehicle': 'fleet-ops:vehicle',
+    'maintenance-subject-trailer': 'fleet-ops:trailer',
     'maintenance-subject-equipment': 'fleet-ops:equipment',
     // Fall-through for raw models passed from vehicle-actions.js
     vehicle: 'fleet-ops:vehicle',
+    trailer: 'fleet-ops:trailer',
     equipment: 'fleet-ops:equipment',
 };
 
@@ -40,6 +44,7 @@ const PERFORMED_BY_MODEL_TO_TYPE = {
 };
 
 export default class MaintenanceFormComponent extends Component {
+    @service intl;
     /** Maintenance type options — the category of maintenance activity. */
     maintenanceTypeOptions = ['preventive', 'corrective', 'predictive', 'routine', 'emergency', 'inspection', 'repair', 'replacement', 'calibration'];
 
@@ -54,10 +59,13 @@ export default class MaintenanceFormComponent extends Component {
      * Uses label/value objects so the PowerSelect trigger shows a human-readable
      * label instead of the raw model type string.
      */
-    maintainableTypeOptions = [
-        { value: 'fleet-ops:vehicle', label: 'Vehicle' },
-        { value: 'fleet-ops:equipment', label: 'Equipment' },
-    ];
+    get maintainableTypeOptions() {
+        return [
+            { value: 'fleet-ops:vehicle', label: this.intl.t('resource.vehicle') },
+            { value: 'fleet-ops:trailer', label: this.intl.t('resource.trailer') },
+            { value: 'fleet-ops:equipment', label: this.intl.t('resource.equipment') },
+        ];
+    }
 
     /**
      * Polymorphic performed-by type options — who carried out the maintenance.

package/addon/components/maintenance-schedule/form.js

@@ -2,12 +2,14 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { isArray } from '@ember/array';
 import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
 
 /**
  * Maps a polymorphic type string to the Ember Data model name used by ModelSelect.
  */
 const TYPE_TO_MODEL = {
     'fleet-ops:vehicle': 'vehicle',
+    'fleet-ops:trailer': 'trailer',
     'fleet-ops:equipment': 'equipment',
     'fleet-ops:vendor': 'vendor',
     'fleet-ops:contact': 'contact',
@@ -21,9 +23,11 @@ const TYPE_TO_MODEL = {
  */
 const MODEL_TO_TYPE = {
     'maintenance-subject-vehicle': 'fleet-ops:vehicle',
+    'maintenance-subject-trailer': 'fleet-ops:trailer',
     'maintenance-subject-equipment': 'fleet-ops:equipment',
     // Fall-through for raw vehicle/equipment models passed from vehicle-actions.js
     vehicle: 'fleet-ops:vehicle',
+    trailer: 'fleet-ops:trailer',
     equipment: 'fleet-ops:equipment',
     vendor: 'fleet-ops:vendor',
     contact: 'fleet-ops:contact',
@@ -44,11 +48,6 @@ const ASSIGNEE_MODEL_TO_TYPE = {
     driver: 'fleet-ops:driver',
 };
 
-const SUBJECT_TYPE_OPTIONS = [
-    { label: 'Vehicle', value: 'fleet-ops:vehicle' },
-    { label: 'Equipment', value: 'fleet-ops:equipment' },
-];
-
 const ASSIGNEE_TYPE_OPTIONS = [
     { label: 'Vendor', value: 'fleet-ops:vendor' },
     { label: 'Contact', value: 'fleet-ops:contact' },
@@ -62,6 +61,7 @@ const INTERVAL_METHOD_OPTIONS = [
 ];
 
 export default class MaintenanceScheduleFormComponent extends Component {
+    @service intl;
     @tracked selectedSubjectType = null;
     @tracked selectedAssigneeType = null;
     @tracked subjectModelName = null;
@@ -70,7 +70,13 @@ export default class MaintenanceScheduleFormComponent extends Component {
     @tracked reminderOffsets = [];
     @tracked newReminderOffset = '';
 
-    subjectTypeOptions = SUBJECT_TYPE_OPTIONS;
+    get subjectTypeOptions() {
+        return [
+            { label: this.intl.t('resource.vehicle'), value: 'fleet-ops:vehicle' },
+            { label: this.intl.t('resource.trailer'), value: 'fleet-ops:trailer' },
+            { label: this.intl.t('resource.equipment'), value: 'fleet-ops:equipment' },
+        ];
+    }
     assigneeTypeOptions = ASSIGNEE_TYPE_OPTIONS;
     intervalMethodOptions = INTERVAL_METHOD_OPTIONS;
 
@@ -103,7 +109,7 @@ export default class MaintenanceScheduleFormComponent extends Component {
                 const modelName = subject.constructor?.modelName ?? subject.modelName;
                 const typeValue = MODEL_TO_TYPE[modelName] ?? null;
                 if (typeValue) {
-                    this.selectedSubjectType = SUBJECT_TYPE_OPTIONS.find((o) => o.value === typeValue) ?? null;
+                    this.selectedSubjectType = this.subjectTypeOptions.find((o) => o.value === typeValue) ?? null;
                     this.subjectModelName = TYPE_TO_MODEL[typeValue] ?? null;
                 }
             }

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

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

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

@@ -75,8 +75,8 @@
                         <div class="resource-assigned">
                             <div class="resource-assigned-photo">
                                 <Image
-                                    src={{avatar-url @order.customer.photo_url}}
-                                    @fallbackSrc={{config "defaultValues.contactImage"}}
+                                    src={{resource-image @order.customer.photo_url "customer"}}
+                                    @fallbackSrc={{(placeholder-image "customer")}}
                                     width="32"
                                     height="32"
                                     class="w-8 h-8 rounded-lg shadow-sm mr-2"
@@ -94,8 +94,8 @@
                         <div class="resource-assigned">
                             <div class="resource-assigned-photo">
                                 <Image
-                                    src={{avatar-url @order.driver_assigned.photo_url}}
-                                    @fallbackSrc={{config "defaultValues.driverImage"}}
+                                    src={{resource-image @order.driver_assigned.photo_url "driver"}}
+                                    @fallbackSrc={{(placeholder-image "driver")}}
                                     width="32"
                                     height="32"
                                     class="w-8 h-8 rounded-lg shadow-sm mr-2"