@fleetbase/fleetops-engine 0.6.64 → 0.6.66

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

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

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

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

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

@@ -0,0 +1,24 @@
+<Resource::Pill
+    @resource={{(or @trackingNumber @resource)}}
+    @resourceType="tracking-number"
+    @title={{@title}}
+    @titleFallback={{@titleFallback}}
+    @subtitle={{@subtitle}}
+    @showOnlineIndicator={{@showOnlineIndicator}}
+    @noPopover={{@noPopover}}
+    @popoverPlacement={{@popoverPlacement}}
+    @static={{@static}}
+    @onClick={{@onClick}}
+    @onView={{@onView}}
+    @anchorClass={{@anchorClass}}
+    @imageClass={{@imageClass}}
+    @imageWrapperClass={{@imageWrapperClass}}
+    @contentWrapperClass={{@contentWrapperClass}}
+    @titleClass={{@titleClass}}
+    @subtitleClass={{@subtitleClass}}
+    @useBlock={{(has-block)}}
+    ...attributes
+    as |resource|
+>
+    {{yield resource}}
+</Resource::Pill>

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

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

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

@@ -0,0 +1,24 @@
+<Resource::Pill
+    @resource={{(or @trackingStatus @resource)}}
+    @resourceType="tracking-status"
+    @title={{@title}}
+    @titleFallback={{@titleFallback}}
+    @subtitle={{@subtitle}}
+    @showOnlineIndicator={{@showOnlineIndicator}}
+    @noPopover={{@noPopover}}
+    @popoverPlacement={{@popoverPlacement}}
+    @static={{@static}}
+    @onClick={{@onClick}}
+    @onView={{@onView}}
+    @anchorClass={{@anchorClass}}
+    @imageClass={{@imageClass}}
+    @imageWrapperClass={{@imageWrapperClass}}
+    @contentWrapperClass={{@contentWrapperClass}}
+    @titleClass={{@titleClass}}
+    @subtitleClass={{@subtitleClass}}
+    @useBlock={{(has-block)}}
+    ...attributes
+    as |resource|
+>
+    {{yield resource}}
+</Resource::Pill>

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

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

package/addon/components/trailer/card.hbs

@@ -0,0 +1,65 @@
+<Layout::Resource::Card class="fleetops-resource-card trailer-card" ...attributes as |Card|>
+    <Card.header class={{@headerClass}}>
+        <RegistryYield @registry="fleet-ops:component:trailer:card:header:start" as |RegistryComponent|>
+            <RegistryComponent @resource={{@resource}} />
+        </RegistryYield>
+        <div class="fleetops-card-title">
+            <div class="font-semibold flex-1 truncate">{{@resource.displayName}}</div>
+            <FaIcon @icon="circle" @size="xs" class="fleetops-card-title-indicator {{if @resource.online 'text-green-500' 'text-gray-400'}}" />
+        </div>
+        <div class="text-gray-400 dark:text-gray-500 text-sm w-full truncate">
+            {{#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>
+        {{#if (has-block "header")}}
+            {{yield to="header"}}
+        {{/if}}
+        <RegistryYield @registry="fleet-ops:component:trailer:card:header:end" as |RegistryComponent|>
+            <RegistryComponent @resource={{@resource}} />
+        </RegistryYield>
+    </Card.header>
+    <Card.body class="{{@bodyClass}} h-40 overflow-hidden">
+        <Image src={{resource-image @resource.photo_url "trailer"}} @fallbackSrc={{(placeholder-image "trailer")}} alt={{@resource.displayName}} class="fleetops-card-image fleetops-card-image--cover" />
+        {{#if (has-block "body")}}
+            {{yield to="body"}}
+        {{/if}}
+    </Card.body>
+    <Card.footer class={{@footerClass}}>
+        <RegistryYield @registry="fleet-ops:component:trailer:card:footer:start" as |RegistryComponent|>
+            <RegistryComponent @resource={{@resource}} />
+        </RegistryYield>
+        <div class="flex flex-row items-center justify-between w-full">
+            <Badge @status={{or @resource.status "available"}} @size="xs" @text={{t (concat "trailer.statuses." (or @resource.status "available"))}} />
+            <div class="flex flex-row items-center space-x-1">
+                <Button @icon="eye" @size="xs" @helpText={{t "common.view"}} @onClick={{fn this.trailerActions.transition.view @resource}} @permission="fleet-ops view trailer" />
+                <Button @icon="pencil" @size="xs" @helpText={{t "common.edit"}} @onClick={{fn this.trailerActions.transition.edit @resource}} @permission="fleet-ops update trailer" />
+                <Button @icon="trash" @size="xs" @type="danger" @helpText={{t "common.delete"}} @onClick={{fn this.trailerActions.delete @resource}} @permission="fleet-ops delete trailer" />
+            </div>
+        </div>
+        <RegistryYield @registry="fleet-ops:component:trailer:card:footer:end" as |RegistryComponent|>
+            <RegistryComponent @resource={{@resource}} />
+        </RegistryYield>
+        {{#if (has-block "footer")}}
+            {{yield to="footer"}}
+        {{/if}}
+        <div class="fleetops-card-meta-list">
+            <div class="fleetops-card-meta">
+                <FaIcon @icon="car" @prefix="fas" />
+                <span class="fleetops-card-meta-value">
+                    {{#if @resource.isAttached}}
+                        {{! The card itself is the click target, so the vehicle is a compact option row, not a pill. }}
+                        <SelectOption::Vehicle @option={{@resource.current_vehicle}} @title={{n-a @resource.current_vehicle_name}} @compact={{true}} />
+                    {{else}}
+                        {{t "trailer.attachment.no-vehicle"}}
+                    {{/if}}
+                </span>
+            </div>
+            <div class="fleetops-card-meta">
+                <FaIcon @icon="satellite-dish" @prefix="fas" />
+                <span class="fleetops-card-meta-value">{{t (concat "trailer.connectivity." (or @resource.connectivity_status "never_connected"))}}</span>
+            </div>
+            <div class="fleetops-card-meta">{{t "common.last-modified"}}: {{@resource.updatedAt}}</div>
+        </div>
+    </Card.footer>
+</Layout::Resource::Card>
+{{yield}}

package/addon/components/trailer/card.js

@@ -0,0 +1,22 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+
+export default class TrailerCardComponent extends Component {
+    @service trailerActions;
+    @service vehicleActions;
+
+    @action viewVehicle() {
+        const vehicle = this.args.resource?.current_vehicle;
+
+        if (!vehicle) {
+            return;
+        }
+
+        if (this.vehicleActions.panel?.view) {
+            return this.vehicleActions.panel.view(vehicle);
+        }
+
+        return this.vehicleActions.transition.view(vehicle);
+    }
+}

package/addon/components/trailer/details/connections.hbs

@@ -0,0 +1,57 @@
+<AttachmentList
+    @title={{t "trailer.tabs.connections"}}
+    @description={{t "trailer.connections.description"}}
+    @actionText={{if this.isAttached (t "trailer.actions.detach-vehicle") (t "trailer.actions.attach-vehicle")}}
+    @actionIcon={{if this.isAttached "unlink" "link"}}
+    @actionType={{if this.isAttached "danger" "primary"}}
+    @onAction={{if this.isAttached this.detachVehicle this.attachVehicle}}
+    @actionPermission={{if this.isAttached "fleet-ops detach-vehicle-for trailer" "fleet-ops attach-vehicle-for trailer"}}
+    @hideEmptyAction={{this.isAttached}}
+    @isLoading={{this.loadConnections.isRunning}}
+    @items={{this.connections}}
+    @emptyIcon="link-slash"
+    @emptyTitle={{t "trailer.empty.connections"}}
+    @emptyDescription={{t "trailer.empty.connections-description"}}
+    class="trailer-details-connections"
+>
+    <:item as |connection|>
+        <div class="fleetops-towing-entry {{if connection.isActive 'fleetops-towing-entry--active'}}">
+            <div class="fleetops-towing-entry-vehicle">
+                {{#if connection.vehicle}}
+                    <Vehicle::Pill @vehicle={{connection.vehicle}} @onClick={{fn this.viewVehicle connection.vehicle}} @noTooltip={{true}} />
+                {{else}}
+                    <span class="text-sm text-gray-400 dark:text-gray-500">{{t "trailer.attachment.no-vehicle"}}</span>
+                {{/if}}
+            </div>
+            <div class="fleetops-towing-entry-timeline">
+                <div class="fleetops-towing-entry-timeline-row">
+                    <FaIcon @icon="link" class="text-green-500 dark:text-green-400" />
+                    <span>{{t "trailer.connections.connected" date=(format-date-fns connection.connected_at "dd MMM yyyy, HH:mm")}}</span>
+                </div>
+                <div class="fleetops-towing-entry-timeline-row">
+                    {{#if connection.disconnected_at}}
+                        <FaIcon @icon="link-slash" class="text-gray-400 dark:text-gray-500" />
+                        <span>{{t "trailer.connections.disconnected" date=(format-date-fns connection.disconnected_at "dd MMM yyyy, HH:mm")}}</span>
+                    {{else}}
+                        <FaIcon @icon="circle" @size="2xs" class="text-green-500 dark:text-green-400 animate-pulse" />
+                        <span class="text-green-600 dark:text-green-400 font-medium">{{t "trailer.connections.still-attached"}}</span>
+                    {{/if}}
+                </div>
+                <div class="fleetops-attachment-list-item-meta">
+                    {{#if connection.position}}
+                        <span class="fleetops-attachment-list-item-meta-entry">{{t "trailer.attachment.position" position=connection.position}}</span>
+                    {{/if}}
+                    {{#if connection.duration}}
+                        <span class="fleetops-attachment-list-item-meta-entry"><FaIcon @icon="clock" class="mr-1" />{{connection.duration}}</span>
+                    {{/if}}
+                    {{#if connection.source}}
+                        <span class="fleetops-attachment-list-item-meta-entry">{{smart-humanize connection.source}}</span>
+                    {{/if}}
+                </div>
+            </div>
+        </div>
+    </:item>
+    <:itemActions as |connection|>
+        <Badge @status={{if connection.isActive "attached" "detached"}} @size="xs" @icon={{if connection.isActive "link" "link-slash"}} @text={{t (concat "trailer.attachment." (if connection.isActive "attached" "detached"))}} />
+    </:itemActions>
+</AttachmentList>

package/addon/components/trailer/details/connections.js

@@ -0,0 +1,59 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { task } from 'ember-concurrency';
+
+/**
+ * Effective-dated towing history for a trailer, newest first. The active
+ * connection is highlighted and can be ended from here.
+ */
+export default class TrailerDetailsConnectionsComponent extends Component {
+    @service store;
+    @service notifications;
+    @service trailerActions;
+    @service vehicleActions;
+    @tracked connections = [];
+
+    get trailer() {
+        return this.args.resource;
+    }
+
+    get isAttached() {
+        return this.trailer?.isAttached ?? this.trailer?.attachment_state === 'attached';
+    }
+
+    constructor() {
+        super(...arguments);
+        this.loadConnections.perform();
+    }
+
+    @task *loadConnections() {
+        try {
+            const trailer = yield this.store.queryRecord('trailer', { public_id: this.trailer.public_id ?? this.trailer.id, single: true, with: ['connections.vehicle'] });
+            this.connections = Array.from(trailer?.connections ?? []);
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+
+    @action viewVehicle(vehicle) {
+        if (!vehicle) {
+            return;
+        }
+
+        if (this.vehicleActions.panel?.view) {
+            return this.vehicleActions.panel.view(vehicle);
+        }
+
+        return this.vehicleActions.transition.view(vehicle);
+    }
+
+    @action attachVehicle() {
+        return this.trailerActions.attachVehicle(this.trailer, { callback: () => this.loadConnections.perform() });
+    }
+
+    @action detachVehicle() {
+        return this.trailerActions.detachVehicle(this.trailer, { callback: () => this.loadConnections.perform() });
+    }
+}

package/addon/components/trailer/details/equipment.hbs

@@ -0,0 +1,25 @@
+<AttachmentList
+    @title={{t "trailer.tabs.equipment"}}
+    @description={{t "trailer.equipment.description"}}
+    @actionText={{t "trailer.actions.attach-equipment"}}
+    @actionIcon="plus"
+    @onAction={{this.attach}}
+    @actionPermission="fleet-ops attach-equipment-for trailer"
+    @isLoading={{this.loadEquipment.isRunning}}
+    @items={{this.equipment}}
+    @emptyIcon="toolbox"
+    @emptyTitle={{t "trailer.empty.equipment"}}
+    @emptyDescription={{t "trailer.empty.equipment-description"}}
+    class="trailer-details-equipment"
+>
+    <:item as |item|>
+        <Equipment::Pill @equipment={{item}} @onClick={{fn this.view item}} />
+        {{#if item.status}}
+            <Badge @status={{item.status}} @size="xs" class="fleetops-attachment-list-item-badge" />
+        {{/if}}
+    </:item>
+    <:itemActions as |item|>
+        <Button @icon="eye" @size="xs" @helpText={{t "common.view"}} @onClick={{fn this.view item}} @permission="fleet-ops view equipment" />
+        <Button @icon="unlink" @size="xs" @type="danger" @helpText={{t "trailer.actions.detach-equipment"}} @onClick={{fn this.detach item}} @permission="fleet-ops detach-equipment-for trailer" />
+    </:itemActions>
+</AttachmentList>

package/addon/components/trailer/details/equipment.js

@@ -0,0 +1,52 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { task } from 'ember-concurrency';
+
+export default class TrailerDetailsEquipmentComponent extends Component {
+    @service store;
+    @service notifications;
+    @service equipmentActions;
+    @service trailerActions;
+    @tracked equipment = [];
+
+    get trailer() {
+        return this.args.resource;
+    }
+
+    constructor() {
+        super(...arguments);
+        this.loadEquipment.perform();
+    }
+
+    @task *loadEquipment() {
+        try {
+            const equipment = yield this.store.query('equipment', {
+                equipable_type: 'fleet-ops:trailer',
+                equipable: this.trailer.public_id ?? this.trailer.id,
+                sort: '-created_at',
+            });
+
+            this.equipment = Array.from(equipment ?? []);
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+
+    @action attach() {
+        return this.trailerActions.attachEquipment(this.trailer, { callback: () => this.loadEquipment.perform() });
+    }
+
+    @action detach(equipment) {
+        return this.trailerActions.detachEquipment(this.trailer, equipment, { callback: () => this.loadEquipment.perform() });
+    }
+
+    @action view(equipment) {
+        if (this.equipmentActions.panel?.view) {
+            return this.equipmentActions.panel.view(equipment);
+        }
+
+        return this.equipmentActions.transition.view(equipment);
+    }
+}

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

@@ -0,0 +1,47 @@
+<div class="trailer-details-maintenance-history p-4">
+    <div class="flex flex-row items-center justify-end mb-3">
+        <Button @icon="plus" @text={{t "trailer.actions.log-maintenance"}} @size="xs" @type="primary" @onClick={{this.logMaintenance}} @permission="fleet-ops create maintenance" />
+    </div>
+
+    {{#if this.loadMaintenanceHistory.isRunning}}
+        <div class="flex items-center justify-center py-10">
+            <Spinner />
+        </div>
+    {{else if this.maintenanceHistory.length}}
+        <div class="overflow-x-auto">
+            <table class="min-w-full text-xs">
+                <thead>
+                    <tr class="border-b border-gray-200 dark:border-gray-700">
+                        <th class="text-left py-2 pr-4 font-semibold text-gray-500 uppercase tracking-wide">{{t "trailer.maintenance.summary"}}</th>
+                        <th class="text-left py-2 pr-4 font-semibold text-gray-500 uppercase tracking-wide">{{t "common.type"}}</th>
+                        <th class="text-left py-2 pr-4 font-semibold text-gray-500 uppercase tracking-wide">{{t "trailer.maintenance.odometer"}}</th>
+                        <th class="text-left py-2 pr-4 font-semibold text-gray-500 uppercase tracking-wide">{{t "trailer.maintenance.total-cost"}}</th>
+                        <th class="text-left py-2 pr-4 font-semibold text-gray-500 uppercase tracking-wide">{{t "trailer.maintenance.date"}}</th>
+                        <th class="py-2"></th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {{#each this.maintenanceHistory as |record|}}
+                        <tr class="border-b border-gray-100 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-800">
+                            <td class="py-2 pr-4 font-medium">{{record.summary}}</td>
+                            <td class="py-2 pr-4 text-gray-500">{{n-a (smart-humanize record.type)}}</td>
+                            <td class="py-2 pr-4 text-gray-500">{{n-a record.odometer_reading}} {{record.odometer_unit}}</td>
+                            <td class="py-2 pr-4">{{#if record.total_cost}}{{format-currency record.total_cost record.currency}}{{else}}-{{/if}}</td>
+                            <td class="py-2 pr-4 text-gray-500">{{n-a (format-date-fns record.completed_at "dd MMM yyyy")}}</td>
+                            <td class="py-2 text-right">
+                                <Button @icon="eye" @size="xs" @helpText={{t "common.view"}} @onClick={{fn this.maintenanceActions.transition.view record}} />
+                            </td>
+                        </tr>
+                    {{/each}}
+                </tbody>
+            </table>
+        </div>
+    {{else}}
+        <div class="flex flex-col items-center justify-center py-10 text-gray-400 dark:text-gray-600">
+            <FaIcon @icon="wrench" @size="2x" class="mb-3" />
+            <p class="text-sm font-semibold text-gray-600 dark:text-gray-300">{{t "trailer.empty.maintenance"}}</p>
+            <p class="text-xs">{{t "trailer.empty.maintenance-description"}}</p>
+            <Button @text={{t "trailer.actions.log-maintenance"}} @icon="plus" @size="xs" @type="primary" class="mt-3" @onClick={{this.logMaintenance}} @permission="fleet-ops create maintenance" />
+        </div>
+    {{/if}}
+</div>

package/addon/components/trailer/details/maintenance-history.js

@@ -0,0 +1,40 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { task } from 'ember-concurrency';
+
+export default class TrailerDetailsMaintenanceHistoryComponent extends Component {
+    @service maintenanceActions;
+    @service notifications;
+    @service store;
+    @service trailerActions;
+    @tracked maintenanceHistory = [];
+
+    get trailer() {
+        return this.args.resource;
+    }
+
+    constructor() {
+        super(...arguments);
+        this.loadMaintenanceHistory.perform();
+    }
+
+    @task *loadMaintenanceHistory() {
+        try {
+            const records = yield this.store.query('maintenance', {
+                maintainable_uuid: this.trailer.id,
+                maintainable_type: 'trailer',
+                sort: '-created_at',
+            });
+
+            this.maintenanceHistory = Array.from(records ?? []);
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+
+    @action logMaintenance() {
+        return this.trailerActions.logMaintenance(this.trailer, {}, { refresh: false, callback: () => this.loadMaintenanceHistory.perform() });
+    }
+}

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

@@ -0,0 +1,45 @@
+<div class="trailer-details-schedules p-4">
+    <div class="flex flex-row items-center justify-end mb-3">
+        <Button @icon="plus" @text={{t "trailer.actions.schedule-maintenance"}} @size="xs" @type="primary" @onClick={{this.createSchedule}} @permission="fleet-ops create maintenance-schedule" />
+    </div>
+
+    {{#if this.loadSchedules.isRunning}}
+        <div class="flex items-center justify-center py-10">
+            <Spinner />
+        </div>
+    {{else if this.schedules.length}}
+        <div class="overflow-x-auto">
+            <table class="min-w-full text-xs">
+                <thead>
+                    <tr class="border-b border-gray-200 dark:border-gray-700">
+                        <th class="text-left py-2 pr-4 font-semibold text-gray-500 uppercase tracking-wide">{{t "common.name"}}</th>
+                        <th class="text-left py-2 pr-4 font-semibold text-gray-500 uppercase tracking-wide">{{t "trailer.maintenance.interval"}}</th>
+                        <th class="text-left py-2 pr-4 font-semibold text-gray-500 uppercase tracking-wide">{{t "trailer.maintenance.next-due"}}</th>
+                        <th class="text-left py-2 pr-4 font-semibold text-gray-500 uppercase tracking-wide">{{t "common.status"}}</th>
+                        <th class="py-2"></th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {{#each this.schedules as |schedule|}}
+                        <tr class="border-b border-gray-100 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-800">
+                            <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"><Badge @status={{schedule.status}} /></td>
+                            <td class="py-2 text-right">
+                                <Button @icon="eye" @size="xs" @helpText={{t "common.view"}} @onClick={{fn this.maintenanceScheduleActions.transition.view schedule}} />
+                            </td>
+                        </tr>
+                    {{/each}}
+                </tbody>
+            </table>
+        </div>
+    {{else}}
+        <div class="flex flex-col items-center justify-center py-10 text-gray-400 dark:text-gray-600">
+            <FaIcon @icon="calendar-check" @size="2x" class="mb-3" />
+            <p class="text-sm font-semibold text-gray-600 dark:text-gray-300">{{t "trailer.empty.schedules"}}</p>
+            <p class="text-xs">{{t "trailer.empty.schedules-description"}}</p>
+            <Button @text={{t "trailer.actions.schedule-maintenance"}} @icon="plus" @size="xs" @type="primary" class="mt-3" @onClick={{this.createSchedule}} @permission="fleet-ops create maintenance-schedule" />
+        </div>
+    {{/if}}
+</div>