@fleetbase/fleetops-engine 0.6.64 → 0.6.66

package/addon/components/inspection-submission/form.hbs

@@ -0,0 +1,114 @@
+{{!
+    An inspection being filled in, in the console.
+
+    The record's own details stay in a content panel, like every other
+    resource form in the console. Only the selected form's field groups are
+    rendered differently, as an `inspection-sheet` — the same sheet a public
+    link renders, so the two cannot drift.
+}}
+<div class="inspection-submission-form" ...attributes>
+    <ContentPanel @title={{t "inspection.record.details"}} @open={{true}} @wrapperClass="bordered-top">
+        <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 no-input-group-padding text-xs">
+            <InputGroup @name={{t "inspection.record.form"}}>
+                <ModelSelect
+                    @modelName="inspection-form"
+                    @selectedItemComponent={{component "select-option/inspection-form" compact=true}}
+                    @selectedModel={{@resource.form}}
+                    @query={{hash status="published"}}
+                    @placeholder={{t "inspection.record.select-form"}}
+                    @triggerClass="form-select form-input"
+                    @infiniteScroll={{false}}
+                    @renderInPlace={{true}}
+                    @onChange={{this.assignForm}}
+                    @disabled={{cannot-write @resource}}
+                    as |form|
+                >
+                    <SelectOption::InspectionForm @option={{form}} />
+                </ModelSelect>
+            </InputGroup>
+            <InputGroup @name={{t "inspection.record.status"}}>
+                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                    <PowerSelect
+                        @options={{get-fleet-ops-options "inspectionSubmissionStatuses"}}
+                        @selected={{find-by "value" @resource.status (get-fleet-ops-options "inspectionSubmissionStatuses")}}
+                        @onChange={{this.setStatus}}
+                        @triggerClass="form-select form-input"
+                        @disabled={{cannot-write @resource}}
+                        as |option|
+                    >
+                        <div class="text-sm">
+                            <div class="font-semibold normalize-in-trigger">{{option.label}}</div>
+                            <div class="hide-from-trigger">{{option.description}}</div>
+                        </div>
+                    </PowerSelect>
+                </div>
+            </InputGroup>
+            <InputGroup @name={{t "inspection.record.vehicle"}}>
+                <ModelSelect
+                    @modelName="vehicle"
+                    @selectedItemComponent={{component "select-option/vehicle" compact=true}}
+                    @selectedModel={{@resource.vehicle}}
+                    @placeholder={{t "inspection.record.select-vehicle"}}
+                    @triggerClass="form-select form-input"
+                    @infiniteScroll={{false}}
+                    @renderInPlace={{true}}
+                    @onChange={{this.assignVehicle}}
+                    @disabled={{cannot-write @resource}}
+                    as |vehicle|
+                >
+                    <SelectOption::Vehicle @option={{vehicle}} />
+                </ModelSelect>
+            </InputGroup>
+            <InputGroup @name={{t "inspection.record.driver"}}>
+                <ModelSelect
+                    @modelName="driver"
+                    @selectedItemComponent={{component "select-option/driver" compact=true}}
+                    @selectedModel={{@resource.driver}}
+                    @placeholder={{t "inspection.record.select-driver"}}
+                    @triggerClass="form-select form-input"
+                    @infiniteScroll={{false}}
+                    @renderInPlace={{true}}
+                    @onChange={{this.assignDriver}}
+                    @disabled={{cannot-write @resource}}
+                    as |driver|
+                >
+                    <SelectOption::Driver @option={{driver}} />
+                </ModelSelect>
+            </InputGroup>
+            <InputGroup @name={{t "inspection.record.odometer"}}>
+                <input type="number" inputmode="decimal" class="w-full form-input" placeholder={{t "inspection.record.odometer-placeholder"}} disabled={{cannot-write @resource}} {{sync-value @resource.odometer}} {{on "input" this.setOdometer}} />
+            </InputGroup>
+            <InputGroup @name={{t "inspection.record.engine-hours"}}>
+                <input type="number" inputmode="decimal" class="w-full form-input" placeholder={{t "inspection.record.engine-hours-placeholder"}} disabled={{cannot-write @resource}} {{sync-value @resource.engine_hours}} {{on "input" this.setEngineHours}} />
+            </InputGroup>
+        </div>
+    </ContentPanel>
+
+    <div class="inspection-sheet-inset">
+        {{#if this.load.isRunning}}
+            <div class="inspection-sheet">
+                <div class="inspection-sheet__body">
+                    <div class="p-6 flex items-center justify-center">
+                        <Spinner @loadingMessage={{t "inspection.record.loading-form"}} class="text-sm dark:text-gray-100 flex items-center space-x-2" />
+                    </div>
+                </div>
+            </div>
+        {{else if this.hasStructure}}
+            <InspectionSheet @groups={{this.groups}} @values={{this.values}} @subject={{@resource}} @onChange={{this.setValue}} @disabled={{cannot-write @resource}} />
+        {{else}}
+            <div class="inspection-sheet">
+                <div class="inspection-sheet__body">
+                    <div class="inspection-group__empty px-4">
+                        {{#if @resource.form}}{{t "inspection.record.form-has-no-fields"}}{{else}}{{t "inspection.record.choose-a-form"}}{{/if}}
+                    </div>
+                </div>
+            </div>
+        {{/if}}
+    </div>
+
+    <ContentPanel @title={{t "inspection.record.metadata"}} @open={{false}} @wrapperClass="bordered-top">
+        <MetadataEditor @value={{@resource.meta}} @onChange={{fn (mut @resource.meta)}} />
+    </ContentPanel>
+
+    <CustomField::Yield @subject={{@resource}} @wrapperClass="bordered-top" />
+</div>

package/addon/components/inspection-submission/form.js

@@ -0,0 +1,129 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { next } from '@ember/runloop';
+import { task } from 'ember-concurrency';
+import { flattenFields } from '../../utils/inspection-form-structure';
+import { answerRows, seedAnswers } from '../../utils/inspection-answers';
+
+const STATUS_OPTIONS = ['draft', 'submitted', 'needs_review', 'resolved'];
+
+/**
+ * An inspection being filled in.
+ *
+ * The details of the inspection come first, then the selected form's field
+ * groups as an `inspection-sheet` — the same sheet a public link renders, so
+ * the two cannot drift. The answers live here, keyed by field uuid, and are
+ * handed up through `@onAnswersChange` as the rows the server accepts — the
+ * same `custom_field_values` body the driver API takes, so the console, a
+ * link and the app all write the same thing and the item results are derived
+ * from the pass-fail answers among them.
+ *
+ * Nothing writes to `@resource` during render: the structure and the stored
+ * answers are loaded in tasks, and every value change arrives from an event.
+ */
+export default class InspectionSubmissionFormComponent extends Component {
+    @service inspectionFormActions;
+    @service inspectionSubmissionActions;
+    @service notifications;
+
+    @tracked groups = [];
+    @tracked values = {};
+
+    statusOptions = STATUS_OPTIONS;
+
+    constructor() {
+        super(...arguments);
+        next(() => {
+            if (this.isDestroying || this.isDestroyed) {
+                return;
+            }
+
+            this.load.perform(this.args.resource?.form);
+        });
+    }
+
+    get fields() {
+        return flattenFields(this.groups);
+    }
+
+    get hasStructure() {
+        return this.fields.length > 0;
+    }
+
+    @task *load(form) {
+        this.groups = [];
+
+        if (!form?.id) {
+            return;
+        }
+
+        try {
+            const groups = yield this.inspectionFormActions.loadStructure(form);
+            const stored = this.args.resource?.id && !this.args.resource?.isNew ? yield this.inspectionSubmissionActions.loadAnswers(this.args.resource) : {};
+
+            this.groups = groups;
+            this.values = seedAnswers(groups, stored);
+            this.announce();
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+
+    /** The answers, as the server accepts them. */
+    get rows() {
+        return answerRows(this.fields, this.values);
+    }
+
+    announce() {
+        if (typeof this.args.onAnswersChange === 'function') {
+            this.args.onAnswersChange(this.rows);
+        }
+    }
+
+    @action setValue(value, field) {
+        this.values = { ...this.values, [field.uuid]: value };
+
+        // A meter field marked as the odometer keeps the submission's own
+        // odometer column in step, so the vehicle's reading follows the
+        // inspection without the inspector typing it twice.
+        if (field.type === 'number' && field.meta?.role === 'odometer' && value !== null && value !== '') {
+            this.args.resource.odometer = Number(value);
+        }
+
+        this.announce();
+    }
+
+    @action assignForm(form) {
+        this.args.resource.form = form;
+        // The relationship is what the save sends; the column is kept in step
+        // with the form's own uuid, never the id the console addresses it by.
+        this.args.resource.inspection_form_uuid = form?.uuid ?? form?.id ?? null;
+        this.args.resource.type = form?.type || this.args.resource.type || 'dvir';
+
+        return this.load.perform(form);
+    }
+
+    @action assignVehicle(vehicle) {
+        this.args.resource.vehicle = vehicle;
+    }
+
+    @action assignDriver(driver) {
+        this.args.resource.driver = driver;
+    }
+
+    @action setStatus(option) {
+        this.args.resource.status = option?.value ?? null;
+    }
+
+    @action setOdometer(event) {
+        const value = event.target.value;
+        this.args.resource.odometer = value === '' ? null : Number(value);
+    }
+
+    @action setEngineHours(event) {
+        const value = event.target.value;
+        this.args.resource.engine_hours = value === '' ? null : Number(value);
+    }
+}

package/addon/components/inspection-submission/photos.hbs

@@ -0,0 +1,20 @@
+<div class="next-content-panel-wrapper" ...attributes>
+    <ContentPanel @title={{t "inspection.record.photos"}} @open={{true}} @wrapperClass="bordered-top">
+        {{#if this.load.isRunning}}
+            <div class="p-6 flex items-center justify-center">
+                <Spinner @loadingMessage={{t "inspection.record.loading-photos"}} class="text-sm dark:text-gray-100 flex items-center space-x-2" />
+            </div>
+        {{else}}
+            <ModelMultiFileUpload
+                @type={{this.photoType}}
+                @subject={{@resource}}
+                @files={{this.files}}
+                @path={{concat "uploads/inspections/" @resource.id}}
+                @uploadParams={{hash subject_type="fleet-ops:inspection-submission"}}
+                @acceptedFileTypes="image/jpeg,image/png,image/gif,image/webp"
+                @onUploaded={{this.addFile}}
+            />
+        {{/if}}
+    </ContentPanel>
+    <Spacer @height="200px" />
+</div>

package/addon/components/inspection-submission/photos.js

@@ -0,0 +1,57 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { debug } from '@ember/debug';
+import { next } from '@ember/runloop';
+import { task } from 'ember-concurrency';
+
+const PHOTO_TYPE = 'inspection_photo';
+
+/**
+ * The Photos tab of an inspection record.
+ *
+ * Every photo filed against the submission — the ones the driver sent with a
+ * failed pass-fail answer, stored by `InspectionFileStore`, and the ones added
+ * here — is a platform file whose subject is the submission, so one query
+ * finds them all and `ModelMultiFileUpload` adds to the same pile.
+ */
+export default class InspectionSubmissionPhotosComponent extends Component {
+    @service store;
+
+    @tracked files = [];
+
+    photoType = PHOTO_TYPE;
+
+    constructor() {
+        super(...arguments);
+        next(() => {
+            if (this.isDestroying || this.isDestroyed) {
+                return;
+            }
+
+            this.load.perform();
+        });
+    }
+
+    @task *load() {
+        const submission = this.args.resource;
+        // Files are filed against the submission's uuid, which is what the
+        // internal resource answers beside the id the console addresses it by.
+        const subjectUuid = submission?.uuid ?? submission?.id;
+        if (!subjectUuid) {
+            return;
+        }
+
+        try {
+            const files = yield this.store.query('file', { subject_uuid: subjectUuid, type: PHOTO_TYPE, limit: -1 });
+            this.files = files.toArray();
+        } catch (error) {
+            debug('Unable to load inspection photos: ' + error.message);
+        }
+    }
+
+    @action addFile(file) {
+        this.files = [...this.files, file];
+    }
+}

package/addon/components/inspection-submission/pill.hbs

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

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

package/addon/components/integrated-vendor/pill.hbs

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

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

package/addon/components/issue/details.hbs

@@ -138,6 +138,18 @@
                 </div>
             </section>
 
+            {{! Only when there is one: most issues were never raised from an inspection. }}
+            {{#if this.inspections.length}}
+                <section class="issue-detail-side-card">
+                    <div class="issue-detail-section-title">{{t "inspection.record.linked-inspections" count=this.inspections.length}}</div>
+                    <div class="issue-detail-resource-stack">
+                        {{#each this.inspections as |inspection|}}
+                            <InspectionSubmission::Pill @submission={{inspection}} @onClick={{this.viewInspection}} />
+                        {{/each}}
+                    </div>
+                </section>
+            {{/if}}
+
             <section class="issue-detail-side-card">
                 <div class="issue-detail-section-title">{{t "order.card.linked-order"}}</div>
                 {{#if this.order}}

package/addon/components/issue/details.js

@@ -1,11 +1,43 @@
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
+import { debug } from '@ember/debug';
+import { task } from 'ember-concurrency';
 import { formatDistanceStrict, isValid } from 'date-fns';
 
 export default class IssueDetailsComponent extends Component {
     @service hostRouter;
     @service issueActions;
+    @service store;
+    @service inspectionSubmissionActions;
+    @tracked inspections = [];
+
+    constructor() {
+        super(...arguments);
+        this.loadInspections.perform();
+    }
+
+    /**
+     * An inspection that failed raises an issue and names it; the issue never
+     * looked back, so what caused it was invisible from the issue. Looked up
+     * rather than read from meta, so an inspection attached by hand shows too.
+     */
+    @task *loadInspections() {
+        const id = this.args.resource?.uuid ?? this.args.resource?.id;
+        if (!id) {
+            return;
+        }
+
+        try {
+            const inspections = yield this.store.query('inspection-submission', { issue_uuid: id, sort: '-created_at' });
+            this.inspections = Array.from(inspections ?? []);
+        } catch (error) {
+            // Supplementary to the issue: a failed lookup should not put an error
+            // in front of someone who opened the issue to read it.
+            debug(`Could not load the inspections linked to issue ${id}: ${error.message}`);
+        }
+    }
 
     get resource() {
         return this.args.resource;
@@ -146,4 +178,8 @@ export default class IssueDetailsComponent extends Component {
     @action viewDriver() {
         return this.issueActions.viewDriver(this.resource);
     }
+
+    @action viewInspection(submission) {
+        return this.inspectionSubmissionActions.transition.view(submission);
+    }
 }

package/addon/components/issue/form.hbs

@@ -5,6 +5,7 @@
             <InputGroup @name={{t "issue.fields.reported-by"}}>
                 <ModelSelect
                     @modelName="user"
+                    @selectedItemComponent={{component "select-option/user" compact=true}}
                     @selectedModel={{@resource.reporter}}
                     @placeholder={{t "issue.fields.select-reporter"}}
                     @triggerClass="form-select form-input"
@@ -15,13 +16,14 @@
                     @disabled={{cannot-write @resource}}
                     as |model|
                 >
-                    {{model.name}}
+                    <SelectOption::User @option={{model}} />
                 </ModelSelect>
             </InputGroup>
 
             <InputGroup @name={{t "issue.fields.assigned-to"}}>
                 <ModelSelect
                     @modelName="user"
+                    @selectedItemComponent={{component "select-option/user" compact=true}}
                     @selectedModel={{@resource.assignee}}
                     @placeholder={{t "issue.fields.select-assign"}}
                     @triggerClass="form-select form-input"
@@ -33,13 +35,14 @@
                     @disabled={{cannot-write @resource}}
                     as |model|
                 >
-                    {{model.name}}
+                    <SelectOption::User @option={{model}} />
                 </ModelSelect>
             </InputGroup>
 
             <InputGroup @name={{t "resource.driver"}}>
                 <ModelSelect
                     @modelName="driver"
+                    @selectedItemComponent={{component "select-option/driver" compact=true}}
                     @selectedModel={{@resource.driver}}
                     @placeholder={{t "common.select-field" field=(t "resource.driver")}}
                     @triggerClass="form-select form-input"
@@ -50,13 +53,14 @@
                     @disabled={{cannot-write @resource}}
                     as |model|
                 >
-                    {{model.name}}
+                    <SelectOption::Driver @option={{model}} />
                 </ModelSelect>
             </InputGroup>
 
             <InputGroup @name={{t "resource.vehicle"}}>
                 <ModelSelect
                     @modelName="vehicle"
+                    @selectedItemComponent={{component "select-option/vehicle" compact=true}}
                     @selectedModel={{@resource.vehicle}}
                     @placeholder={{t "common.select-field" field=(t "resource.vehicle")}}
                     @triggerClass="form-select form-input"
@@ -67,13 +71,14 @@
                     @disabled={{cannot-write @resource}}
                     as |model|
                 >
-                    {{model.displayName}}
+                    <SelectOption::Vehicle @option={{model}} />
                 </ModelSelect>
             </InputGroup>
 
             <InputGroup @name={{t "resource.order"}}>
                 <ModelSelect
                     @modelName="order"
+                    @selectedItemComponent={{component "select-option/order" compact=true}}
                     @selectedModel={{@resource.order}}
                     @placeholder={{t "common.select-field" field=(t "resource.order")}}
                     @triggerClass="form-select form-input"
@@ -84,7 +89,7 @@
                     @disabled={{cannot-write @resource}}
                     as |model|
                 >
-                    {{or model.tracking model.public_id}}
+                    <SelectOption::Order @option={{model}} />
                 </ModelSelect>
             </InputGroup>
 

package/addon/components/issue/pill.hbs

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

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

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

@@ -135,13 +135,17 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
 
     get resourcesItems() {
         return this.withRegistryItems('management', [
-            this.createHubItem('Resources Hub', 'layer-group', 'management.index', 'fleet-ops list driver', 'fleet-ops see driver', [
+            this.createHubItem(this.intl.t('menu.radar'), 'satellite-dish', 'management.index', 'fleet-ops list driver', 'fleet-ops see driver', [
+                'radar',
+                'needs attention',
                 'resources hub',
-                'resource dashboard',
-                'resource readiness',
+                'triage',
+                'handover',
+                'shift changes',
             ]),
             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'),
@@ -159,6 +163,14 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
                 'service readiness',
                 'maintenance control panel',
             ]),
+            this.createItem('menu.inspection-forms', 'clipboard-check', 'maintenance.inspection-forms', 'fleet-ops list inspection-form', 'fleet-ops see inspection-form', [
+                'dvir',
+                'checklist',
+            ]),
+            this.createItem('menu.inspections', 'list-check', 'maintenance.inspection-submissions', 'fleet-ops list inspection-submission', 'fleet-ops see inspection-submission', [
+                'dvir',
+                'defects',
+            ]),
             this.createItem('menu.schedules', 'calendar-alt', 'maintenance.schedules', 'fleet-ops list maintenance-schedule', 'fleet-ops see maintenance-schedule'),
             this.createItem('menu.work-orders', 'clipboard-list', 'maintenance.work-orders', 'fleet-ops list work-order', 'fleet-ops see work-order'),
             this.createItem('menu.maintenances', 'history', 'maintenance.maintenances', 'fleet-ops list maintenance', 'fleet-ops see maintenance'),
@@ -346,13 +358,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/details.hbs

@@ -43,16 +43,22 @@
             </div>
             <div class="field-info-container">
                 <div class="field-name">Maintainable Asset</div>
-                <div class="field-value">{{n-a (or @resource.maintainable.displayName @resource.maintainable.name @resource.maintainable_name)}}</div>
+                <div class="field-value">
+                    <MaintenanceSubject::Pill @maintenanceSubject={{resource-relation @resource "maintainable"}} @titleFallback={{n-a @resource.maintainable_name}} />
+                </div>
             </div>
             <div class="field-info-container">
                 <div class="field-name">Performed By</div>
-                <div class="field-value">{{n-a (or @resource.performed_by.displayName @resource.performed_by.name @resource.performed_by_name)}}</div>
+                <div class="field-value">
+                    <Facilitator::Pill @facilitator={{resource-relation @resource "performed_by"}} @titleFallback={{n-a @resource.performed_by_name}} />
+                </div>
             </div>
             {{#if (or @resource.work_order_uuid @resource.work_order_subject)}}
                 <div class="field-info-container">
                     <div class="field-name">Linked Work Order</div>
-                    <div class="field-value">{{n-a @resource.work_order_subject}}</div>
+                    <div class="field-value">
+                        <WorkOrder::Pill @workOrder={{resource-relation @resource "work_order"}} @titleFallback={{n-a @resource.work_order_subject}} />
+                    </div>
                 </div>
             {{/if}}