@fleetbase/fleetops-engine 0.6.38 → 0.6.40

package/addon/components/maintenance/form.hbs

@@ -1,10 +1,18 @@
-<div class="form-wrapper" ...attributes>
-    <ContentPanel @title="Maintenance Details" @open={{true}} @wrapperClass="bordered-top">
+<div class="maintenance-form" ...attributes>
+
+    {{! ===== IDENTIFICATION ===== }}
+    <ContentPanel @title="Identification" @open={{true}} @wrapperClass="bordered-top">
         <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 lg:gap-2 no-input-group-padding text-xs">
+            <div class="col-span-1 lg:col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-1">
+                Maintenance Details
+            </div>
             <InputGroup @name="Summary" @wrapperClass="col-span-2">
-                <Input @value={{@resource.summary}} @type="text" class="w-full form-input" placeholder="Summary" disabled={{cannot-write @resource}} />
+                <Input @value={{@resource.summary}} @type="text" class="w-full form-input" placeholder="Brief summary of the maintenance activity" disabled={{cannot-write @resource}} />
             </InputGroup>
 
+            <div class="col-span-1 lg:col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-3">
+                Type, Status & Priority
+            </div>
             <InputGroup @name="Type">
                 <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                     <PowerSelect
@@ -20,7 +28,6 @@
                     </PowerSelect>
                 </div>
             </InputGroup>
-
             <InputGroup @name="Status">
                 <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                     <PowerSelect
@@ -36,7 +43,6 @@
                     </PowerSelect>
                 </div>
             </InputGroup>
-
             <InputGroup @name="Priority">
                 <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                     <PowerSelect
@@ -52,123 +58,177 @@
                     </PowerSelect>
                 </div>
             </InputGroup>
+        </div>
+    </ContentPanel>
 
-            <InputGroup @name="Work Order">
+    {{! ===== ASSET & WORK ORDER ===== }}
+    <ContentPanel @title="Asset & Work Order" @open={{true}} @wrapperClass="bordered-top">
+        <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 lg:gap-2 no-input-group-padding text-xs">
+            <div class="col-span-1 lg:col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-1">
+                Maintainable Asset
+            </div>
+            <InputGroup @name="Asset Type">
+                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                    <PowerSelect
+                        @options={{this.maintainableTypeOptions}}
+                        @selected={{this.selectedMaintainableType}}
+                        @onChange={{this.onMaintainableTypeChange}}
+                        @placeholder="Select asset type (Vehicle, Equipment…)"
+                        @triggerClass="form-select form-input"
+                        @disabled={{cannot-write @resource}}
+                        as |option|
+                    >
+                        {{option.label}}
+                    </PowerSelect>
+                </div>
+            </InputGroup>
+            {{#if this.maintainableModelName}}
+                <InputGroup @name="Asset">
+                    <ModelSelect
+                        @modelName={{this.maintainableModelName}}
+                        @selectedModel={{@resource.maintainable}}
+                        @placeholder="Select asset"
+                        @triggerClass="form-select form-input"
+                        @infiniteScroll={{false}}
+                        @renderInPlace={{true}}
+                        @onChange={{this.assignMaintainable}}
+                        @disabled={{cannot-write @resource}}
+                        as |model|
+                    >
+                        {{or model.name model.public_id}}
+                    </ModelSelect>
+                </InputGroup>
+            {{/if}}
+
+            <div class="col-span-1 lg:col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-3">
+                Performed By
+            </div>
+            <InputGroup @name="Performed By Type">
+                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                    <PowerSelect
+                        @options={{this.performedByTypeOptions}}
+                        @selected={{this.selectedPerformedByType}}
+                        @onChange={{this.onPerformedByTypeChange}}
+                        @placeholder="Select performer type (Vendor, Driver, User…)"
+                        @triggerClass="form-select form-input"
+                        @disabled={{cannot-write @resource}}
+                        as |option|
+                    >
+                        {{option.label}}
+                    </PowerSelect>
+                </div>
+            </InputGroup>
+            {{#if this.performedByModelName}}
+                <InputGroup @name="Performed By">
+                    <ModelSelect
+                        @modelName={{this.performedByModelName}}
+                        @selectedModel={{@resource.performed_by}}
+                        @placeholder="Select performer"
+                        @triggerClass="form-select form-input"
+                        @infiniteScroll={{false}}
+                        @renderInPlace={{true}}
+                        @onChange={{this.assignPerformedBy}}
+                        @disabled={{cannot-write @resource}}
+                        as |model|
+                    >
+                        {{or model.name model.public_id}}
+                    </ModelSelect>
+                </InputGroup>
+            {{/if}}
+
+            <div class="col-span-1 lg:col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-3">
+                Linked Work Order
+            </div>
+            <InputGroup @name="Work Order" @wrapperClass="col-span-2">
                 <ModelSelect
                     @modelName="work-order"
-                    @selectedModel={{@resource.workOrder}}
-                    @placeholder="Select Work Order"
+                    @selectedModel={{@resource.work_order}}
+                    @placeholder="Link to a Work Order (optional)"
                     @triggerClass="form-select form-input"
                     @infiniteScroll={{false}}
                     @renderInPlace={{true}}
-                    @onChange={{fn (mut @resource.workOrder)}}
+                    @onChange={{fn (mut @resource.work_order)}}
                     @onChangeId={{fn (mut @resource.work_order_uuid)}}
                     @disabled={{cannot-write @resource}}
                     as |model|
                 >
-                    {{model.code}} - {{model.subject}}
+                    {{or model.subject model.code model.public_id}}
                 </ModelSelect>
             </InputGroup>
+        </div>
+    </ContentPanel>
 
+    {{! ===== SCHEDULING & READINGS ===== }}
+    <ContentPanel @title="Scheduling & Readings" @open={{true}} @wrapperClass="bordered-top">
+        <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 lg:gap-2 no-input-group-padding text-xs">
+            <div class="col-span-1 lg:col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-1">
+                Dates
+            </div>
             <InputGroup @name="Scheduled At">
                 <DatePicker
-                    @value={{@resource.scheduled_at}}
+                    @value={{or (format-date-fns @resource.scheduled_at "dd-MM-yyyy") null}}
                     @onChange={{fn (mut @resource.scheduled_at)}}
-                    @placeholder="Select Scheduled Date"
-                    @disabled={{cannot-write @resource}}
-                    class="w-full form-input"
+                    @placeholder="DD-MM-YYYY"
+                    class="filter-date-input w-full flex-1"
                 />
             </InputGroup>
-
             <InputGroup @name="Started At">
                 <DatePicker
-                    @value={{@resource.started_at}}
+                    @value={{or (format-date-fns @resource.started_at "dd-MM-yyyy") null}}
                     @onChange={{fn (mut @resource.started_at)}}
-                    @placeholder="Select Start Date"
-                    @disabled={{cannot-write @resource}}
-                    class="w-full form-input"
+                    @placeholder="DD-MM-YYYY"
+                    class="filter-date-input w-full flex-1"
                 />
             </InputGroup>
-
             <InputGroup @name="Completed At">
                 <DatePicker
-                    @value={{@resource.completed_at}}
+                    @value={{or (format-date-fns @resource.completed_at "dd-MM-yyyy") null}}
                     @onChange={{fn (mut @resource.completed_at)}}
-                    @placeholder="Select Completion Date"
-                    @disabled={{cannot-write @resource}}
-                    class="w-full form-input"
+                    @placeholder="DD-MM-YYYY"
+                    class="filter-date-input w-full flex-1"
                 />
             </InputGroup>
 
-            <InputGroup @name="Odometer" @type="number">
-                <Input @value={{@resource.odometer}} @type="number" class="w-full form-input" placeholder="Odometer" disabled={{cannot-write @resource}} />
+            <div class="col-span-1 lg:col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-3">
+                Asset Readings at Service
+            </div>
+            <InputGroup @name="Odometer (km)">
+                <Input @value={{@resource.odometer}} @type="number" class="w-full form-input" placeholder="Odometer reading at service" disabled={{cannot-write @resource}} />
             </InputGroup>
-
-            <InputGroup @name="Engine Hours" @type="number">
-                <Input @value={{@resource.engine_hours}} @type="number" class="w-full form-input" placeholder="Engine Hours" disabled={{cannot-write @resource}} />
-            </InputGroup>
-
-            <InputGroup @name="Labor Cost">
-                <MoneyInput
-                    class="w-full"
-                    @value={{@resource.labor_cost}}
-                    @currency={{or @resource.currency "USD"}}
-                    @canSelectCurrency={{true}}
-                    @onCurrencyChange={{fn (mut @resource.currency)}}
-                    @disabled={{cannot-write @resource}}
-                />
-            </InputGroup>
-
-            <InputGroup @name="Parts Cost">
-                <MoneyInput
-                    class="w-full"
-                    @value={{@resource.parts_cost}}
-                    @currency={{or @resource.currency "USD"}}
-                    @canSelectCurrency={{true}}
-                    @disabled={{cannot-write @resource}}
-                />
+            <InputGroup @name="Engine Hours">
+                <Input @value={{@resource.engine_hours}} @type="number" class="w-full form-input" placeholder="Engine hours at service" disabled={{cannot-write @resource}} />
             </InputGroup>
+        </div>
+    </ContentPanel>
 
-            <InputGroup @name="Tax">
-                <MoneyInput
-                    class="w-full"
-                    @value={{@resource.tax}}
-                    @currency={{or @resource.currency "USD"}}
-                    @canSelectCurrency={{true}}
-                    @disabled={{cannot-write @resource}}
-                />
-            </InputGroup>
+    {{! ===== COSTS ===== }}
+    <Maintenance::CostPanel @resource={{@resource}} @disabled={{cannot-write @resource}} />
 
-            <InputGroup @name="Total Cost">
-                <MoneyInput
-                    class="w-full"
-                    @value={{@resource.total_cost}}
-                    @currency={{or @resource.currency "USD"}}
-                    @canSelectCurrency={{true}}
-                    @disabled={{cannot-write @resource}}
-                />
-            </InputGroup>
-
-            <InputGroup @name="Notes" @wrapperClass="col-span-2">
+    {{! ===== NOTES ===== }}
+    <ContentPanel @title="Notes" @open={{true}} @wrapperClass="bordered-top">
+        <div class="grid grid-cols-1 gap-2 no-input-group-padding text-xs">
+            <InputGroup @name="Notes">
                 <Textarea
                     @value={{@resource.notes}}
                     aria-label="Notes"
                     class="w-full form-input"
                     disabled={{cannot-write @resource}}
-                    placeholder="Notes"
-                    rows={{5}}
+                    placeholder="Additional notes about this maintenance activity"
+                    rows={{4}}
                 />
             </InputGroup>
-
-            <RegistryYield @registry="fleet-ops:component:maintenance:form:details" as |RegistryComponent|>
-                <RegistryComponent @resource={{@resource}} @controller={{@controller}} @permission={{get-write-permission @resource}} />
-            </RegistryYield>
         </div>
     </ContentPanel>
 
+    {{! ===== REGISTRY & METADATA ===== }}
+    <RegistryYield @registry="fleet-ops:component:maintenance:form:details" as |RegistryComponent|>
+        <RegistryComponent @resource={{@resource}} @controller={{@controller}} @permission={{get-write-permission @resource}} />
+    </RegistryYield>
     <CustomField::Yield @subject={{@resource}} @wrapperClass="bordered-top" />
-
     <RegistryYield @registry="fleet-ops:component:maintenance:form" as |RegistryComponent|>
         <RegistryComponent @resource={{@resource}} @controller={{@controller}} @permission={{get-write-permission @resource}} />
     </RegistryYield>
-</div>
+    <ContentPanel @title="Metadata" @open={{false}} @wrapperClass="bordered-top">
+        <MetadataEditor @value={{@resource.meta}} @onChange={{fn (mut @resource.meta)}} />
+    </ContentPanel>
+</div>

package/addon/components/maintenance/form.js

@@ -1,18 +1,143 @@
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+/**
+ * Maps a polymorphic type value to the Ember Data model name used by ModelSelect.
+ */
+const TYPE_TO_MODEL = {
+    'fleet-ops:vehicle': 'vehicle',
+    'fleet-ops:driver': 'driver',
+    'fleet-ops:equipment': 'equipment',
+    'fleet-ops:vendor': 'vendor',
+    'Auth:User': 'user',
+};
+
+/**
+ * Maps a concrete Ember Data model name back to the backend polymorphic type string.
+ * Used to restore the type selector when editing an existing record that has a
+ * loaded @belongsTo('maintenance-subject', {polymorphic: true}) relationship.
+ */
+const MAINTAINABLE_MODEL_TO_TYPE = {
+    'maintenance-subject-vehicle': 'fleet-ops:vehicle',
+    'maintenance-subject-equipment': 'fleet-ops:equipment',
+    // Fall-through for raw models passed from vehicle-actions.js
+    vehicle: 'fleet-ops:vehicle',
+    equipment: 'fleet-ops:equipment',
+};
+
+/**
+ * Maps a concrete Ember Data model name back to the backend polymorphic type string
+ * for the performed_by relationship.
+ */
+const PERFORMED_BY_MODEL_TO_TYPE = {
+    'facilitator-vendor': 'fleet-ops:vendor',
+    'facilitator-contact': 'fleet-ops:contact',
+    'facilitator-integrated-vendor': 'fleet-ops:vendor',
+    vendor: 'fleet-ops:vendor',
+    driver: 'fleet-ops:driver',
+    user: 'Auth:User',
+};
 
 export default class MaintenanceFormComponent extends Component {
+    /** Maintenance type options — the category of maintenance activity. */
+    maintenanceTypeOptions = ['preventive', 'corrective', 'predictive', 'routine', 'emergency', 'inspection', 'repair', 'replacement', 'calibration'];
+
+    /** Status options for a maintenance record. */
+    statusOptions = ['scheduled', 'in_progress', 'completed', 'cancelled', 'on_hold'];
+
+    /** Priority options for a maintenance record. */
+    priorityOptions = ['low', 'medium', 'high', 'critical'];
+
     /**
-     * Maintenance type options
+     * Polymorphic maintainable type options — the asset being maintained.
+     * Uses label/value objects so the PowerSelect trigger shows a human-readable
+     * label instead of the raw model type string.
      */
-    maintenanceTypeOptions = ['preventive', 'corrective', 'predictive', 'routine', 'emergency', 'inspection', 'repair', 'replacement', 'calibration'];
+    maintainableTypeOptions = [
+        { value: 'fleet-ops:vehicle', label: 'Vehicle' },
+        { value: 'fleet-ops:equipment', label: 'Equipment' },
+    ];
 
     /**
-     * Status options for maintenance
+     * Polymorphic performed-by type options — who carried out the maintenance.
+     * Uses label/value objects so the PowerSelect trigger shows a human-readable
+     * label instead of the raw model type string.
      */
-    statusOptions = ['scheduled', 'in_progress', 'completed', 'cancelled', 'on_hold'];
+    performedByTypeOptions = [
+        { value: 'fleet-ops:vendor', label: 'Vendor' },
+        { value: 'fleet-ops:driver', label: 'Driver' },
+        { value: 'Auth:User', label: 'User' },
+    ];
+
+    /** The currently selected maintainable type option object. */
+    @tracked selectedMaintainableType = null;
+
+    /** The currently selected performed-by type option object. */
+    @tracked selectedPerformedByType = null;
+
+    /** Derived Ember Data model name for the currently selected maintainable type. */
+    @tracked maintainableModelName = null;
+
+    /** Derived Ember Data model name for the currently selected performed-by type. */
+    @tracked performedByModelName = null;
+
+    constructor(owner, args) {
+        super(owner, args);
+        const { resource } = args;
+        // Restore maintainable type selection from the polymorphic relationship.
+        // When editing an existing record, resource.maintainable is a loaded MaintenanceSubject model.
+        // When creating from vehicle-actions.js, resource.maintainable may be a raw vehicle/equipment model.
+        const maintainable = resource?.maintainable;
+        if (maintainable) {
+            const modelName = maintainable.constructor?.modelName ?? maintainable.modelName;
+            const typeValue = MAINTAINABLE_MODEL_TO_TYPE[modelName] ?? null;
+            if (typeValue) {
+                this.selectedMaintainableType = this.maintainableTypeOptions.find((o) => o.value === typeValue) ?? null;
+                this.maintainableModelName = TYPE_TO_MODEL[typeValue] ?? null;
+            }
+        }
+        // Restore performed_by type selection from the polymorphic relationship.
+        const performedBy = resource?.performed_by;
+        if (performedBy) {
+            const modelName = performedBy.constructor?.modelName ?? performedBy.modelName;
+            const typeValue = PERFORMED_BY_MODEL_TO_TYPE[modelName] ?? null;
+            if (typeValue) {
+                this.selectedPerformedByType = this.performedByTypeOptions.find((o) => o.value === typeValue) ?? null;
+                this.performedByModelName = TYPE_TO_MODEL[typeValue] ?? null;
+            }
+        }
+    }
 
     /**
-     * Priority options
+     * Handles a change to the maintainable type selector. Resets the
+     * maintainable relationship so a stale association is not persisted.
      */
-    priorityOptions = ['low', 'medium', 'high', 'critical'];
+    @action onMaintainableTypeChange(option) {
+        this.selectedMaintainableType = option;
+        // Clear the maintainable relationship — user must re-select the asset
+        this.args.resource.maintainable = null;
+        this.maintainableModelName = TYPE_TO_MODEL[option?.value] ?? null;
+    }
+
+    /** Assigns the selected maintainable model to the resource. */
+    @action assignMaintainable(model) {
+        this.args.resource.maintainable = model;
+    }
+
+    /**
+     * Handles a change to the performed-by type selector. Resets the
+     * performed-by relationship so a stale association is not persisted.
+     */
+    @action onPerformedByTypeChange(option) {
+        this.selectedPerformedByType = option;
+        // Clear the performed_by relationship — user must re-select
+        this.args.resource.performed_by = null;
+        this.performedByModelName = TYPE_TO_MODEL[option?.value] ?? null;
+    }
+
+    /** Assigns the selected performer model to the resource. */
+    @action assignPerformedBy(model) {
+        this.args.resource.performed_by = model;
+    }
 }

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

@@ -0,0 +1,31 @@
+<div class="px-4 py-2">
+    <div class="flex flex-1 flex-row items-start justify-between">
+        <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">{{n-a @resource.summary}}</h1>
+                <Badge @status={{@resource.status}}>{{smart-humanize @resource.status}}</Badge>
+            </div>
+            <div class="flex flex-row space-x-3 mt-1">
+                <div class="text-xs text-gray-400 dark:text-gray-500">{{smart-humanize @resource.type}}</div>
+                {{#if @resource.priority}}
+                    <div class="text-xs text-gray-400 dark:text-gray-500">{{t "column.priority"}}: {{smart-humanize @resource.priority}}</div>
+                {{/if}}
+                {{#if @resource.scheduled_at}}
+                    <div class="text-xs text-gray-400 dark:text-gray-500">{{t "column.scheduled-at"}}: {{format-date @resource.scheduled_at}}</div>
+                {{/if}}
+            </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/maintenance/panel-header.js

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