@fleetbase/fleetops-engine 0.6.38 → 0.6.39

package/addon/components/part/form.js

@@ -1,10 +1,24 @@
 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';
 
+/**
+ * Maps a user-facing polymorphic type string to the Ember Data model name
+ * used by ModelSelect.
+ */
+const TYPE_TO_MODEL = {
+    'fleet-ops:vehicle': 'vehicle',
+    'fleet-ops:equipment': 'equipment',
+};
+
 export default class PartFormComponent extends Component {
-    /**
-     * Part type options
-     */
+    @service fetch;
+    @service currentUser;
+    @service notifications;
+
+    /** Part type options. */
     partTypeOptions = [
         'filter',
         'tire',
@@ -24,21 +38,74 @@ export default class PartFormComponent extends Component {
         'other',
     ];
 
+    /** Status options for parts. */
+    statusOptions = ['in_stock', 'low_stock', 'out_of_stock', 'discontinued', 'on_order'];
+
     /**
-     * Status options for parts
+     * Polymorphic asset type options — the asset this part is compatible with.
+     * Each entry has a `value` (stored on the model) and a `label` (displayed in the UI).
      */
-    statusOptions = ['in_stock', 'low_stock', 'out_of_stock', 'discontinued', 'on_order'];
+    assetTypeOptions = [
+        { value: 'fleet-ops:vehicle', label: 'Vehicle' },
+        { value: 'fleet-ops:equipment', label: 'Equipment' },
+    ];
+
+    /** Derived Ember Data model name for the currently selected asset type. */
+    @tracked assetModelName = null;
+
+    /** The currently selected asset type option object (drives the PowerSelect trigger label). */
+    @tracked selectedAssetType = null;
+
+    constructor(owner, args) {
+        super(owner, args);
+        const { resource } = args;
+        if (resource?.asset_type) {
+            this.assetModelName = TYPE_TO_MODEL[resource.asset_type] ?? null;
+            this.selectedAssetType = this.assetTypeOptions.find((o) => o.value === resource.asset_type) ?? null;
+        }
+    }
+
+    /**
+     * Handles a change to the asset type selector. Resets the asset
+     * relationship so a stale association is not persisted.
+     */
+    @action onAssetTypeChange(option) {
+        this.selectedAssetType = option;
+        this.args.resource.asset_type = option.value;
+        this.args.resource.asset_uuid = null;
+        this.args.resource.asset = null;
+        this.assetModelName = TYPE_TO_MODEL[option.value] ?? null;
+    }
+
+    /** Assigns the selected asset model to the resource. */
+    @action assignAsset(model) {
+        this.args.resource.asset = model;
+        this.args.resource.asset_uuid = model?.id ?? null;
+    }
 
     /**
-     * Task to handle photo upload
+     * Handles photo upload using the Fleetbase fetch service upload pattern.
      */
     @task *handlePhotoUpload(file) {
         try {
-            const response = yield file.upload(this.args.resource);
-            this.args.resource.photo_uuid = response.uuid;
-            this.args.resource.photo_url = response.url;
-        } catch (error) {
-            console.error('Photo upload failed:', error);
+            yield this.fetch.uploadFile.perform(
+                file,
+                {
+                    path: `uploads/${this.currentUser.companyId}/parts/${this.args.resource.id}`,
+                    subject_uuid: this.args.resource.id,
+                    subject_type: 'fleet-ops:part',
+                    type: 'part_photo',
+                },
+                (uploadedFile) => {
+                    this.args.resource.setProperties({
+                        photo_uuid: uploadedFile.id,
+                        photo_url: uploadedFile.url,
+                        photo: uploadedFile,
+                    });
+                }
+            );
+        } catch (err) {
+            this.notifications.error('Unable to upload photo: ' + err.message);
         }
     }
 }

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

@@ -0,0 +1,36 @@
+<div class="px-4 py-2">
+    <div class="flex flex-1 flex-row items-start justify-between">
+        <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.placeholderImage"}}
+                    alt={{@resource.name}}
+                    height="48"
+                    width="48"
+                    class="h-14 w-14 rounded-full shadow-sm"
+                />
+            </div>
+            <div class="flex flex-col">
+                <div class="flex flex-row items-center space-x-2">
+                    <h1 class="text-gray-900 dark:text-white font-semibold text-lg">{{@resource.name}}</h1>
+                    <Badge @status={{@resource.status}}>{{smart-humanize @resource.status}}</Badge>
+                </div>
+                <div class="text-xs text-gray-400 dark:text-gray-500">{{smart-humanize @resource.type}}</div>
+                <div class="text-xs text-gray-400 dark:text-gray-500">{{n-a @resource.part_number}}</div>
+            </div>
+        </div>
+        <div class="next-view-header-right">
+            <Layout::Resource::Panel::HeaderActions
+                @resource={{@resource}}
+                @saveTask={{@saveTask}}
+                @saveOptions={{@saveOptions}}
+                @saveDisabled={{@saveDisabled}}
+                @pojoResource={{@pojoResource}}
+                @authSchema={{@authSchema}}
+                @actionButtons={{@actionButtons}}
+                @onPressCancel={{@onPressCancel}}
+            />
+        </div>
+    </div>
+</div>

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

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

package/addon/components/place/form.hbs

@@ -17,13 +17,7 @@
                     {{result.address}}
                 </AutocompleteInput>
             </InputGroup>
-            <InputGroup
-                @name={{t "place.fields.street-2"}}
-                @autocomplete="nope"
-                @value={{@resource.street2}}
-                @wrapperClass="col-span-3"
-                @disabled={{cannot-write @resource}}
-            />
+            <InputGroup @name={{t "place.fields.street-2"}} @autocomplete="nope" @value={{@resource.street2}} @wrapperClass="col-span-3" @disabled={{cannot-write @resource}} />
             <InputGroup @name={{t "place.fields.neighborhood"}} @autocomplete="nope" @value={{@resource.neighborhood}} @disabled={{cannot-write @resource}} />
             <InputGroup @name={{t "place.fields.building"}} @autocomplete="nope" @value={{@resource.building}} @disabled={{cannot-write @resource}} />
             <InputGroup @name={{t "place.fields.security-access-code"}} @autocomplete="nope" @value={{@resource.security_access_code}} @disabled={{cannot-write @resource}} />

package/addon/components/sensor/details.hbs

@@ -1,7 +1,7 @@
 <div class="details-wrapper" ...attributes>
     <ContentPanel @title="Identity" @open={{true}} @wrapperClass="bordered-top">
         <div class="grid grid-cols-1 lg:grid-cols-3 gap-2">
-            <div class="field-info-container ">
+            <div class="field-info-container">
                 <div class="field-name">Name</div>
                 <div class="field-value">{{n-a @resource.name}}</div>
             </div>

package/addon/components/sensor/form.hbs

@@ -15,7 +15,7 @@
                 >
                     <div class="space-x-2 text-sm">
                         <div class="inline-block align-top">
-                            <div class="hide-from-trigger h-1.5 w-full" />
+                            <div class="hide-from-trigger h-1.5 w-full"></div>
                             <Image src={{model.provider_descriptor.icon}} class="w-5 h-5" />
                         </div>
                         <div class="inline-block">
@@ -64,7 +64,7 @@
             <InputGroup @name="Serial Number" @value={{@resource.serial_number}} @wrapperClass="col-span-2" disabled={{cannot-write @resource}} />
             <InputGroup @name="Internal ID" @value={{@resource.internal_id}} disabled={{cannot-write @resource}} />
             <InputGroup @name="Unit" @value={{@resource.unit}} disabled={{cannot-write @resource}} />
-            <InputGroup @name="Type" @wrapperClass="col-span-2"> 
+            <InputGroup @name="Type" @wrapperClass="col-span-2">
                 <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                     <PowerSelect
                         @options={{get-fleet-ops-options "sensorTypes"}}
@@ -149,7 +149,9 @@
                     @disabled={{cannot-write @resource}}
                     as |model|
                 >
-                    {{model.policy_number}} - {{model.provider}}
+                    {{model.policy_number}}
+                    -
+                    {{model.provider}}
                 </ModelSelect>
             </InputGroup>
         </div>

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

@@ -2,7 +2,14 @@
     <div class="flex flex-1 flex-row items-start justify-between">
         <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.placeholderImage"}} alt={{@resource.displayName}} height="48" width="48" class="h-14 w-14 rounded-full shadow-sm" />
+                <Image
+                    src={{@resource.photo_url}}
+                    @fallbackSrc={{config "defaultValues.placeholderImage"}}
+                    alt={{@resource.displayName}}
+                    height="48"
+                    width="48"
+                    class="h-14 w-14 rounded-full shadow-sm"
+                />
                 <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
                     <InputInfo @text={{@resource.displayName}} />
                 </Attach::Tooltip>

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

@@ -1,12 +1,7 @@
 <div class="form-wrapper" ...attributes>
     <ContentPanel @title={{t "service-area.fields.details"}} @open={{true}} @wrapperClass="bordered-top">
         <div class="space-y-2">
-            <InputGroup
-                @value={{@resource.name}}
-                @name={{t "modals.service-area-form.name"}}
-                @helpText={{t "modals.service-area-form.name-text"}}
-                @required={{true}}
-            />
+            <InputGroup @value={{@resource.name}} @name={{t "modals.service-area-form.name"}} @helpText={{t "modals.service-area-form.name-text"}} @required={{true}} />
             <InputGroup @name={{t "modals.service-area-form.type"}} @helpText={{t "modals.service-area-form.type-text"}}>
                 <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                     <PowerSelect

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

@@ -29,11 +29,7 @@
                 </div>
             </InputGroup>
 
-            <InputGroup
-                @name={{t "service-rate.fields.base-fee-label"}}
-                @helpText={{t "service-rate.fields.base-fee-help-text"}}
-                @required={{true}}
-            >
+            <InputGroup @name={{t "service-rate.fields.base-fee-label"}} @helpText={{t "service-rate.fields.base-fee-help-text"}} @required={{true}}>
                 <MoneyInput
                     class="w-full"
                     @value={{@resource.base_fee}}
@@ -44,11 +40,7 @@
                 />
             </InputGroup>
 
-            <InputGroup
-                @name={{t "service-rate.fields.rate-calculation-label"}}
-                @helpText={{t "service-rate.fields.rate-calculation-help-text"}}
-                @required={{true}}
-            >
+            <InputGroup @name={{t "service-rate.fields.rate-calculation-label"}} @helpText={{t "service-rate.fields.rate-calculation-help-text"}} @required={{true}}>
                 <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                     <PowerSelect
                         @options={{get-fleet-ops-options "serviceRateCalculationMethods"}}
@@ -97,11 +89,7 @@
     {{#if @resource.isFixedRate}}
         <ContentPanel @title={{t "service-rate.fields.fixed-meter"}} @open={{true}} @wrapperClass="bordered-top" @panelBodyWrapperClass="px-0i">
             <div class="px-2 mb-3">
-                <InfoBlock
-                    class="mb-2"
-                    @text={{t "service-rate.fields.fixed-meter-text"}}
-                    @exampleText={{t "service-rate.fields.fixed-meter-example-text"}}
-                />
+                <InfoBlock class="mb-2" @text={{t "service-rate.fields.fixed-meter-text"}} @exampleText={{t "service-rate.fields.fixed-meter-example-text"}} />
                 <div class="grid grid-cols-1 lg:grid-cols-2 gap-2">
                     <InputGroup
                         @name={{t "service-rate.fields.maximum-distance"}}
@@ -163,11 +151,7 @@
     {{else if @resource.isPerDrop}}
         <ContentPanel @title={{t "service-rate.fields.per-drop-off-title"}} @open={{true}} @wrapperClass="bordered-top" @panelBodyWrapperClass="px-0i">
             <div class="px-2 mb-3">
-                <InfoBlock
-                    class="mb-3"
-                    @text={{t "service-rate.fields.per-drop-off-text"}}
-                    @exampleText={{t "service-rate.fields.per-drop-off-example-text"}}
-                />
+                <InfoBlock class="mb-3" @text={{t "service-rate.fields.per-drop-off-text"}} @exampleText={{t "service-rate.fields.per-drop-off-example-text"}} />
 
                 <div>
                     <Button
@@ -227,26 +211,14 @@
         </ContentPanel>
     {{else if @resource.isPerMeter}}
         <ContentPanel @title={{t "service-rate.fields.per-meter"}} @open={{true}} @wrapperClass="bordered-top">
-            <InfoBlock
-                class="mb-5"
-                @text={{t "service-rate.fields.per-meter-text"}}
-                @exampleText={{t "service-rate.fields.per-meter-example-text"}}
-            />
+            <InfoBlock class="mb-5" @text={{t "service-rate.fields.per-meter-text"}} @exampleText={{t "service-rate.fields.per-meter-example-text"}} />
 
             <div class="grid grid-cols-2 gap-2">
-                <InputGroup
-                    @name={{t "service-rate.fields.per-meter-rate-fee"}}
-                    @helpText={{t "service-rate.fields.per-meter-rate-fee-help-text"}}
-                    @required={{true}}
-                >
+                <InputGroup @name={{t "service-rate.fields.per-meter-rate-fee"}} @helpText={{t "service-rate.fields.per-meter-rate-fee-help-text"}} @required={{true}}>
                     <MoneyInput class="w-full" @currency={{@resource.currency}} @value={{@resource.per_meter_flat_rate_fee}} disabled={{cannot-write @resource}} />
                 </InputGroup>
 
-                <InputGroup
-                    @name={{t "service-rate.fields.distance-unit"}}
-                    @helpText={{t "service-rate.fields.distance-unit-help-text"}}
-                    @required={{true}}
-                >
+                <InputGroup @name={{t "service-rate.fields.distance-unit"}} @helpText={{t "service-rate.fields.distance-unit-help-text"}} @required={{true}}>
                     <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                         <PowerSelect
                             @options={{get-fleet-ops-options "distanceUnits"}}
@@ -302,11 +274,7 @@
                 </div>
             </InfoBlock>
 
-            <InputGroup
-                @name={{t "service-rate.fields.algorithm-label"}}
-                @helpText={{t "service-rate.fields.algorithm-help-text"}}
-                @required={{true}}
-            >
+            <InputGroup @name={{t "service-rate.fields.algorithm-label"}} @helpText={{t "service-rate.fields.algorithm-help-text"}} @required={{true}}>
                 <Textarea
                     @value={{@resource.algorithm}}
                     placeholder={{t "service-rate.fields.algorithm-placeholder"}}
@@ -425,11 +393,7 @@
 
         {{#if @resource.has_cod_fee}}
             <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 mt-2">
-                <InputGroup
-                    @name={{t "service-rate.fields.calculation-method-label"}}
-                    @helpText={{t "service-rate.fields.calculation-method-help-text"}}
-                    @required={{true}}
-                >
+                <InputGroup @name={{t "service-rate.fields.calculation-method-label"}} @helpText={{t "service-rate.fields.calculation-method-help-text"}} @required={{true}}>
                     <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                         <PowerSelect
                             @options={{get-fleet-ops-options "serviceRateCodCalculationMethods"}}
@@ -449,11 +413,7 @@
                 </InputGroup>
 
                 {{#if @resource.hasCodFlatFee}}
-                    <InputGroup
-                        @name={{t "service-rate.fields.delivery-flat-fee"}}
-                        @helpText={{t "service-rate.fields.delivery-flat-fee-help-text"}}
-                        @required={{true}}
-                    >
+                    <InputGroup @name={{t "service-rate.fields.delivery-flat-fee"}} @helpText={{t "service-rate.fields.delivery-flat-fee-help-text"}} @required={{true}}>
                         <MoneyInput class="w-full" @currency={{@resource.currency}} @value={{@resource.cod_flat_fee}} disabled={{cannot-write @resource}} />
                     </InputGroup>
                 {{else if @resource.hasCodPercentageFee}}
@@ -501,11 +461,7 @@
                     @required={{true}}
                 />
 
-                <InputGroup
-                    @name={{t "service-rate.fields.peak-hours-fee-label"}}
-                    @helpText={{t "service-rate.fields.peak-hours-fee-help-text"}}
-                    @required={{true}}
-                >
+                <InputGroup @name={{t "service-rate.fields.peak-hours-fee-label"}} @helpText={{t "service-rate.fields.peak-hours-fee-help-text"}} @required={{true}}>
                     <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                         <PowerSelect
                             @options={{get-fleet-ops-options "serviceRatePeakHourCalculationMethods"}}
@@ -525,11 +481,7 @@
                 </InputGroup>
 
                 {{#if @resource.hasPeakHoursFlatFee}}
-                    <InputGroup
-                        @name={{t "service-rate.fields.flat-fee-label"}}
-                        @helpText={{t "service-rate.fields.flat-fee-help-text"}}
-                        @required={{true}}
-                    >
+                    <InputGroup @name={{t "service-rate.fields.flat-fee-label"}} @helpText={{t "service-rate.fields.flat-fee-help-text"}} @required={{true}}>
                         <MoneyInput class="w-full" @currency={{@resource.currency}} @value={{@resource.peak_hours_flat_fee}} disabled={{cannot-write @resource}} />
                     </InputGroup>
                 {{else if @resource.hasPeakHoursPercentageFee}}

package/addon/components/telematic/form.hbs

@@ -14,7 +14,7 @@
                     >
                         <div class="space-x-2 text-sm">
                             <div class="inline-block align-top">
-                                <div class="hide-from-trigger h-1.5 w-full" />
+                                <div class="hide-from-trigger h-1.5 w-full"></div>
                                 <Image src={{provider.icon}} class="w-5 h-5" />
                             </div>
                             <div class="inline-block">
@@ -49,7 +49,11 @@
                 <InputGroup @value={{@resource.name}} @name="Integration Name" />
 
                 {{#if this.selectedProvider.supports_webhooks}}
-                    <InputGroup @name="Webhook URL" @helpText={{concat "Configure the URL in your " this.selectedProvider.label " dashboard to receive real-time updates."}} @wrapperClass="col-span-2">
+                    <InputGroup
+                        @name="Webhook URL"
+                        @helpText={{concat "Configure the URL in your " this.selectedProvider.label " dashboard to receive real-time updates."}}
+                        @wrapperClass="col-span-2"
+                    >
                         <ClickToCopy @value={{this.selectedProvider.webhook_url}} class="w-full">
                             <Input @value={{this.selectedProvider.webhook_url}} class="form-input w-full" readonly />
                         </ClickToCopy>

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

@@ -0,0 +1,42 @@
+<div class="vehicle-details-maintenance-history p-4">
+    {{#if this.maintenanceHistory.isRunning}}
+        <div class="flex items-center justify-center py-10">
+            <Spinner />
+        </div>
+    {{else}}
+        {{#if this.maintenanceHistory.length}}
+            <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">Summary</th>
+                        <th class="text-left py-2 pr-4 font-semibold text-gray-500 uppercase tracking-wide">Type</th>
+                        <th class="text-left py-2 pr-4 font-semibold text-gray-500 uppercase tracking-wide">Odometer</th>
+                        <th class="text-left py-2 pr-4 font-semibold text-gray-500 uppercase tracking-wide">Total Cost</th>
+                        <th class="text-left py-2 pr-4 font-semibold text-gray-500 uppercase tracking-wide">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">{{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">{{format-currency record.total_cost record.currency}}</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">
+                                <Button @icon="eye" @size="xs" @onClick={{fn this.maintenanceActions.transition.view record}} />
+                            </td>
+                        </tr>
+                    {{/each}}
+                </tbody>
+            </table>
+        {{else}}
+            <div class="flex flex-col items-center justify-center py-10 text-gray-400 dark:text-gray-600">
+                <FaIcon @icon="history" @size="2x" class="mb-3" />
+                <p class="text-sm">No maintenance history for this vehicle.</p>
+                <Button @text="Log Maintenance" @icon="plus" @size="xs" @type="primary" class="mt-3" @onClick={{fn this.maintenanceActions.modal.create (hash maintainable=@vehicle)}} />
+            </div>
+        {{/if}}
+    {{/if}}
+</div>

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

@@ -0,0 +1,32 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { task } from 'ember-concurrency';
+
+export default class VehicleDetailsMaintenanceHistoryComponent extends Component {
+    @service maintenanceActions;
+    @service notifications;
+    @service store;
+    @tracked maintenanceHistory = [];
+
+    get resourceId() {
+        return this.args.resource.id ?? this.args.vehicle.id;
+    }
+
+    constructor() {
+        super(...arguments);
+        this.loadMaintenanceHistory.perform();
+    }
+
+    @task *loadMaintenanceHistory() {
+        try {
+            this.maintenanceHistory = yield this.store.query('maintenance', {
+                maintainable_uuid: this.resourceId,
+                maintainable_type: 'vehicle',
+                sort: '-created_at',
+            });
+        } catch (err) {
+            this.notifications.serverError(err);
+        }
+    }
+}

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

@@ -0,0 +1,40 @@
+<div class="vehicle-details-schedules p-4">
+    {{#if this.schedules.isRunning}}
+        <div class="flex items-center justify-center py-10">
+            <Spinner />
+        </div>
+    {{else}}
+        {{#if this.schedules.length}}
+            <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">Name</th>
+                        <th class="text-left py-2 pr-4 font-semibold text-gray-500 uppercase tracking-wide">Interval</th>
+                        <th class="text-left py-2 pr-4 font-semibold text-gray-500 uppercase tracking-wide">Next Due</th>
+                        <th class="text-left py-2 pr-4 font-semibold text-gray-500 uppercase tracking-wide">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"><StatusBadge @status={{schedule.status}} /></td>
+                            <td class="py-2">
+                                <Button @icon="eye" @size="xs" @onClick={{fn this.maintenanceScheduleActions.transition.view schedule}} />
+                            </td>
+                        </tr>
+                    {{/each}}
+                </tbody>
+            </table>
+        {{else}}
+            <div class="flex flex-col items-center justify-center py-10 text-gray-400 dark:text-gray-600">
+                <FaIcon @icon="calendar-alt" @size="2x" class="mb-3" />
+                <p class="text-sm">No maintenance schedules for this vehicle.</p>
+                <Button @text="Add Schedule" @icon="plus" @size="xs" @type="primary" class="mt-3" @onClick={{fn this.maintenanceScheduleActions.modal.create (hash subject=@vehicle)}} />
+            </div>
+        {{/if}}
+    {{/if}}
+</div>

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

@@ -0,0 +1,32 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { task } from 'ember-concurrency';
+
+export default class VehicleDetailsSchedulesComponent extends Component {
+    @service maintenanceScheduleActions;
+    @service notifications;
+    @service store;
+    @tracked schedules = [];
+
+    get resourceId() {
+        return this.args.resource.id ?? this.args.vehicle.id;
+    }
+
+    constructor() {
+        super(...arguments);
+        this.loadSchedules.perform();
+    }
+
+    @task *loadSchedules() {
+        try {
+            this.schedules = yield this.store.query('maintenance-schedule', {
+                subject_uuid: this.resourceId,
+                subject_type: 'vehicle',
+                sort: '-created_at',
+            });
+        } catch (err) {
+            this.notifications.serverError(err);
+        }
+    }
+}

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

@@ -0,0 +1,42 @@
+<div class="vehicle-details-work-orders p-4">
+    {{#if this.loadWorkOrders.isRunning}}
+        <div class="flex items-center justify-center py-10">
+            <Spinner />
+        </div>
+    {{else}}
+        {{#if this.workOrders.length}}
+            <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">Code</th>
+                        <th class="text-left py-2 pr-4 font-semibold text-gray-500 uppercase tracking-wide">Subject</th>
+                        <th class="text-left py-2 pr-4 font-semibold text-gray-500 uppercase tracking-wide">Priority</th>
+                        <th class="text-left py-2 pr-4 font-semibold text-gray-500 uppercase tracking-wide">Status</th>
+                        <th class="text-left py-2 pr-4 font-semibold text-gray-500 uppercase tracking-wide">Due</th>
+                        <th class="py-2"></th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {{#each this.workOrders as |workOrder|}}
+                        <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-mono uppercase">{{workOrder.code}}</td>
+                            <td class="py-2 pr-4 font-medium">{{workOrder.subject}}</td>
+                            <td class="py-2 pr-4 text-gray-500">{{humanize workOrder.priority}}</td>
+                            <td class="py-2 pr-4"><StatusBadge @status={{workOrder.status}} /></td>
+                            <td class="py-2 pr-4 text-gray-500">{{n-a (format-date-fns workOrder.due_at "dd MMM yyyy")}}</td>
+                            <td class="py-2">
+                                <Button @icon="eye" @size="xs" @onClick={{fn this.workOrderActions.transition.view workOrder}} />
+                            </td>
+                        </tr>
+                    {{/each}}
+                </tbody>
+            </table>
+        {{else}}
+            <div class="flex flex-col items-center justify-center py-10 text-gray-400 dark:text-gray-600">
+                <FaIcon @icon="clipboard-list" @size="2x" class="mb-3" />
+                <p class="text-sm">No work orders for this vehicle.</p>
+                <Button @text="Create Work Order" @icon="plus" @size="xs" @type="primary" class="mt-3" @onClick={{fn this.workOrderActions.modal.create (hash target=@vehicle)}} />
+            </div>
+        {{/if}}
+    {{/if}}
+</div>

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

@@ -0,0 +1,32 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { task } from 'ember-concurrency';
+
+export default class VehicleDetailsWorkOrdersComponent extends Component {
+    @service workOrderActions;
+    @service notifications;
+    @service store;
+    @tracked workOrders = [];
+
+    get resourceId() {
+        return this.args.resource.id ?? this.args.vehicle.id;
+    }
+
+    constructor() {
+        super(...arguments);
+        this.loadWorkOrders.perform();
+    }
+
+    @task *loadWorkOrders() {
+        try {
+            this.workOrders = yield this.store.query('work-order', {
+                target_uuid: this.resourceId,
+                target_type: 'vehicle',
+                sort: '-created_at',
+            });
+        } catch (err) {
+            this.notifications.serverError(err);
+        }
+    }
+}