@fleetbase/fleetops-engine 0.6.37 → 0.6.39

package/addon/components/maintenance/details.hbs

@@ -1,23 +1,27 @@
-<div class="details-wrapper" ...attributes>
-    <ContentPanel @title="Details" @open={{true}} @wrapperClass="bordered-top">
-        <div class="grid grid-cols-1 lg:grid-cols-3 gap-2">
-            <div class="field-info-container col-span-3">
-                <div class="field-name">Summary</div>
-                <div class="field-value">{{n-a @resource.summary}}</div>
-            </div>
+<div class="next-content-panel-wrapper" ...attributes>
+
+    {{! ===== OVERVIEW ===== }}
+    <ContentPanel @title="Overview" @open={{true}} @wrapperClass="bordered-top">
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 text-xs dark:text-gray-100">
 
+            {{! — Identity & Classification — }}
+            <div class="col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-1">
+                Identity & Classification
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">ID</div>
+                <div class="field-value">{{n-a @resource.public_id}}</div>
+            </div>
             <div class="field-info-container">
                 <div class="field-name">Type</div>
-                <div class="field-value">{{smart-humanize @resource.type}}</div>
+                <div class="field-value">{{n-a (smart-humanize @resource.type)}}</div>
             </div>
-
             <div class="field-info-container">
                 <div class="field-name">Status</div>
                 <div class="field-value">
                     <Badge @status={{@resource.status}}>{{smart-humanize @resource.status}}</Badge>
                 </div>
             </div>
-
             <div class="field-info-container">
                 <div class="field-name">Priority</div>
                 <div class="field-value">
@@ -33,91 +37,150 @@
                 </div>
             </div>
 
-            <div class="field-info-container">
-                <div class="field-name">Work Order</div>
-                <div class="field-value">{{n-a @resource.work_order_subject}}</div>
+            {{! — Asset & Assignment — }}
+            <div class="col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-3">
+                Asset & Assignment
             </div>
-
             <div class="field-info-container">
-                <div class="field-name">Maintainable</div>
-                <div class="field-value">{{n-a @resource.maintainable_name}}</div>
+                <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>
-
             <div class="field-info-container">
                 <div class="field-name">Performed By</div>
-                <div class="field-value">{{n-a @resource.performed_by_name}}</div>
+                <div class="field-value">{{n-a (or @resource.performed_by.displayName @resource.performed_by.name @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>
+            {{/if}}
 
+            {{! — Timeline — }}
+            <div class="col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-3">
+                Timeline
+            </div>
             <div class="field-info-container">
                 <div class="field-name">Scheduled At</div>
-                <div class="field-value">{{format-date @resource.scheduled_at}}</div>
+                <div class="field-value">{{n-a (format-date-fns @resource.scheduled_at "dd MMM yyyy, HH:mm")}}</div>
             </div>
-
             <div class="field-info-container">
                 <div class="field-name">Started At</div>
-                <div class="field-value">{{format-date @resource.started_at}}</div>
+                <div class="field-value">{{n-a (format-date-fns @resource.started_at "dd MMM yyyy, HH:mm")}}</div>
             </div>
-
             <div class="field-info-container">
                 <div class="field-name">Completed At</div>
-                <div class="field-value">{{format-date @resource.completed_at}}</div>
+                <div class="field-value">{{n-a (format-date-fns @resource.completed_at "dd MMM yyyy, HH:mm")}}</div>
             </div>
+            {{#if @resource.is_overdue}}
+                <div class="field-info-container">
+                    <div class="field-name">Overdue</div>
+                    <div class="field-value"><Badge @status="danger">Overdue</Badge></div>
+                </div>
+            {{else if @resource.days_until_due}}
+                <div class="field-info-container">
+                    <div class="field-name">Days Until Due</div>
+                    <div class="field-value">{{@resource.days_until_due}} days</div>
+                </div>
+            {{/if}}
 
+            {{! — Readings — }}
+            <div class="col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-3">
+                Readings
+            </div>
             <div class="field-info-container">
                 <div class="field-name">Odometer</div>
                 <div class="field-value">{{n-a @resource.odometer}}</div>
             </div>
-
             <div class="field-info-container">
                 <div class="field-name">Engine Hours</div>
                 <div class="field-value">{{n-a @resource.engine_hours}}</div>
             </div>
-
             <div class="field-info-container">
                 <div class="field-name">Duration</div>
-                <div class="field-value">{{n-a @resource.duration_hours}} hours</div>
-            </div>
-
-            <div class="field-info-container">
-                <div class="field-name">Labor Cost</div>
-                <div class="field-value">{{format-currency @resource.labor_cost}}</div>
-            </div>
-
-            <div class="field-info-container">
-                <div class="field-name">Parts Cost</div>
-                <div class="field-value">{{format-currency @resource.parts_cost}}</div>
-            </div>
-
-            <div class="field-info-container">
-                <div class="field-name">Tax</div>
-                <div class="field-value">{{format-currency @resource.tax}}</div>
-            </div>
-
-            <div class="field-info-container">
-                <div class="field-name">Total Cost</div>
-                <div class="field-value"><strong>{{format-currency @resource.total_cost}}</strong></div>
+                <div class="field-value">{{n-a @resource.duration_hours}} hrs</div>
             </div>
 
-            {{#if @resource.is_overdue}}
-                <div class="field-info-container">
-                    <div class="field-name">Overdue Status</div>
-                    <div class="field-value">
-                        <Badge @status="danger">Overdue</Badge>
-                    </div>
+            {{! — Summary & Notes — }}
+            {{#if @resource.summary}}
+                <div class="col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-3">
+                    Summary
                 </div>
-            {{else if @resource.days_until_due}}
-                <div class="field-info-container">
-                    <div class="field-name">Days Until Due</div>
-                    <div class="field-value">{{@resource.days_until_due}} days</div>
+                <div class="field-info-container col-span-2">
+                    <div class="field-value whitespace-pre-wrap">{{@resource.summary}}</div>
                 </div>
             {{/if}}
+            {{#if @resource.notes}}
+                <div class="col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-3">
+                    Notes
+                </div>
+                <div class="field-info-container col-span-2">
+                    <div class="field-value whitespace-pre-wrap">{{@resource.notes}}</div>
+                </div>
+            {{/if}}
+        </div>
+    </ContentPanel>
 
-            <div class="field-info-container col-span-3">
-                <div class="field-name">Notes</div>
-                <div class="field-value">{{n-a @resource.notes}}</div>
+    {{! ===== PARTS & SERVICES (invoice-style line items + totals) ===== }}
+    <ContentPanel @title="Parts & Services" @open={{true}} @wrapperClass="bordered-top" @panelBodyWrapperClass="px-0i">
+        {{#if @resource.line_items.length}}
+            <table class="w-full text-xs">
+                <colgroup>
+                    <col class="w-[45%]" />
+                    <col class="w-[10%]" />
+                    <col class="w-[20%]" />
+                    <col class="w-[25%]" />
+                </colgroup>
+                <thead>
+                    <tr class="border-b border-gray-200 dark:border-gray-700">
+                        <th class="text-left text-[10px] uppercase tracking-wide text-gray-400 dark:text-gray-500 font-semibold pb-1 px-4">Description</th>
+                        <th class="text-right text-[10px] uppercase tracking-wide text-gray-400 dark:text-gray-500 font-semibold pb-1 px-2">Qty</th>
+                        <th class="text-right text-[10px] uppercase tracking-wide text-gray-400 dark:text-gray-500 font-semibold pb-1 px-2">Unit Cost</th>
+                        <th class="text-right text-[10px] uppercase tracking-wide text-gray-400 dark:text-gray-500 font-semibold pb-1 px-4">Total</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {{#each @resource.line_items as |item|}}
+                        <tr class="border-b border-gray-100 dark:border-gray-800">
+                            <td class="py-1.5 px-4 text-gray-700 dark:text-gray-200">{{n-a item.description}}</td>
+                            <td class="py-1.5 px-2 text-right text-gray-500 dark:text-gray-400">{{n-a item.quantity}}</td>
+                            <td class="py-1.5 px-2 text-right text-gray-500 dark:text-gray-400">
+                                {{format-currency item.unit_cost (or item.currency @resource.currency)}}
+                            </td>
+                            <td class="py-1.5 px-4 text-right text-gray-700 dark:text-gray-200 font-medium">
+                                {{format-currency (mult item.quantity item.unit_cost) (or item.currency @resource.currency)}}
+                            </td>
+                        </tr>
+                    {{/each}}
+                </tbody>
+            </table>
+        {{else}}
+            <div class="px-4 py-3 text-xs text-gray-400 dark:text-gray-500 italic">No line items recorded.</div>
+        {{/if}}
+
+        {{! Totals }}
+        <div class="border-t border-gray-200 dark:border-gray-700 pt-2 mt-1 space-y-1 text-xs px-4 pb-3">
+            <div class="flex justify-between text-gray-500 dark:text-gray-400">
+                <span>Labour</span>
+                <span>{{format-currency @resource.labor_cost @resource.currency}}</span>
+            </div>
+            <div class="flex justify-between text-gray-500 dark:text-gray-400">
+                <span>Parts</span>
+                <span>{{format-currency @resource.parts_cost @resource.currency}}</span>
+            </div>
+            <div class="flex justify-between text-gray-500 dark:text-gray-400">
+                <span>Tax</span>
+                <span>{{format-currency @resource.tax @resource.currency}}</span>
+            </div>
+            <div class="flex justify-between font-semibold text-gray-800 dark:text-gray-100 border-t border-gray-200 dark:border-gray-700 pt-1 mt-1">
+                <span>Total</span>
+                <span>{{format-currency @resource.total_cost @resource.currency}}</span>
             </div>
         </div>
     </ContentPanel>
 
+    {{! ===== CUSTOM FIELDS ===== }}
     <CustomField::Yield @subject={{@resource}} @viewMode={{true}} @wrapperClass="bordered-top" />
-</div>
+
+    <Spacer @height="200px" />
+</div>

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>