@fleetbase/fleetops-engine 0.6.38 → 0.6.40

package/addon/components/maintenance/cost-panel.js

@@ -0,0 +1,241 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { isArray } from '@ember/array';
+import numbersOnly from '@fleetbase/ember-core/utils/numbers-only';
+
+/**
+ * `Maintenance::CostPanel`
+ *
+ * Renders an invoice-style line items editor for a maintenance record.
+ *
+ * Line items are stored in the `line_items` JSON column on the maintenance
+ * record (`@attr('raw')`). Mutations are purely in-memory — the array is
+ * written back onto `@resource.line_items` and the parent form's normal
+ * save flow persists everything together in a single request. This means
+ * the component works correctly for both new (unsaved) and existing records.
+ *
+ * All monetary values (unit_cost, labor_cost, tax, parts_cost, total_cost)
+ * are stored as **cents** (integers) on the backend via the Money::class cast
+ * and surfaced as strings by `@attr('string')` on the Ember model. The
+ * `numbersOnly()` utility strips any non-digit characters and `parseInt`
+ * converts to a safe integer before arithmetic.
+ *
+ * The `MoneyInput` component handles the cents ↔ display conversion:
+ *   - `@value` receives cents (e.g. 1000 = $10.00)
+ *   - `@onChange` emits cents (e.g. 1000 = $10.00)
+ *
+ * Usage:
+ *   <Maintenance::CostPanel @resource={{this.maintenance}} @disabled={{cannot-write this.maintenance}} />
+ */
+export default class MaintenanceCostPanelComponent extends Component {
+    @service notifications;
+    @service intl;
+
+    /** Whether the "Add line item" row is currently visible */
+    @tracked isAddingItem = false;
+
+    /** Tracks which line item index is currently being edited (null = none) */
+    @tracked editingIndex = null;
+
+    /**
+     * Draft values for the add/edit form row.
+     * `draftUnitCost` is stored in **cents** (integer) to match the backend
+     * Money::class cast and the MoneyInput component's expected input/output format.
+     */
+    @tracked draftDescription = '';
+    @tracked draftQuantity = 1;
+    @tracked draftUnitCost = 0;
+
+    // ─── Helpers ─────────────────────────────────────────────────────────────
+
+    /**
+     * Safely parse a monetary string attribute (cents stored as string) to int.
+     */
+    @action _toCents(value) {
+        if (value === null || value === undefined || value === '') return 0;
+        const parsed = parseInt(numbersOnly(String(value)), 10);
+        return isNaN(parsed) ? 0 : parsed;
+    }
+
+    // ─── Computed getters ─────────────────────────────────────────────────────
+
+    get lineItems() {
+        return isArray(this.args.resource?.line_items) ? this.args.resource.line_items : [];
+    }
+
+    get currency() {
+        return this.args.resource?.currency ?? 'USD';
+    }
+
+    get laborCost() {
+        return this._toCents(this.args.resource?.labor_cost);
+    }
+
+    get tax() {
+        return this._toCents(this.args.resource?.tax);
+    }
+
+    get partsCost() {
+        return this.lineItems.reduce((sum, item) => {
+            const qty = parseInt(item.quantity, 10) || 0;
+            const cost = this._toCents(item.unit_cost);
+            return sum + qty * cost;
+        }, 0);
+    }
+
+    get totalCost() {
+        return this.laborCost + this.partsCost + this.tax;
+    }
+
+    /**
+     * Live preview of the draft line total (in cents).
+     * Displayed via `format-currency` which also expects cents.
+     */
+    get draftLineTotal() {
+        return (parseInt(this.draftQuantity, 10) || 0) * this._toCents(this.draftUnitCost);
+    }
+
+    get isDisabled() {
+        return this.args.disabled ?? false;
+    }
+
+    // ─── Draft unit cost setter ───────────────────────────────────────────────
+
+    /**
+     * Called by MoneyInput's `@onChange`. The value is already in cents.
+     */
+    @action
+    setDraftUnitCost(cents) {
+        this.draftUnitCost = cents ?? 0;
+    }
+
+    // ─── Line item helpers ────────────────────────────────────────────────────
+
+    /**
+     * Returns the line total for a single item (quantity × unit_cost).
+     * Both values are in cents, so the result is also in cents.
+     * Used in the template as (this.lineTotal item).
+     */
+    @action
+    lineTotal(item) {
+        const qty = parseInt(item?.quantity, 10) || 0;
+        const cost = this._toCents(item?.unit_cost);
+        return qty * cost;
+    }
+
+    /**
+     * Write a new copy of the line items array back onto the resource so
+     * Ember Data tracks the change and includes it in the next save().
+     */
+    _commitItems(items) {
+        this.args.resource.set('line_items', [...items]);
+        // Recompute parts_cost and total_cost locally so the summary updates
+        // immediately without waiting for a server round-trip.
+        const partsCost = items.reduce((sum, item) => {
+            return sum + (parseInt(item.quantity, 10) || 0) * this._toCents(item.unit_cost);
+        }, 0);
+        this.args.resource.set('parts_cost', String(partsCost));
+        this.args.resource.set('total_cost', String(this.laborCost + partsCost + this.tax));
+    }
+
+    // ─── Add item ────────────────────────────────────────────────────────────
+
+    @action
+    showAddRow() {
+        this.isAddingItem = true;
+        this.editingIndex = null;
+        this._resetDraft();
+    }
+
+    @action
+    cancelAdd() {
+        this.isAddingItem = false;
+        this._resetDraft();
+    }
+
+    @action
+    addLineItem() {
+        if (!this.draftDescription?.trim()) {
+            this.notifications.warning('Please enter a description for the line item.');
+            return;
+        }
+
+        const newItem = {
+            description: this.draftDescription.trim(),
+            quantity: parseInt(this.draftQuantity, 10) || 1,
+            unit_cost: this.draftUnitCost,
+            currency: this.currency,
+        };
+
+        this._commitItems([...this.lineItems, newItem]);
+        this.isAddingItem = false;
+        this._resetDraft();
+    }
+
+    // ─── Edit item ───────────────────────────────────────────────────────────
+
+    @action
+    startEdit(index) {
+        const item = this.lineItems[index];
+        if (!item) return;
+        this.editingIndex = index;
+        this.isAddingItem = false;
+        this.draftDescription = item.description ?? '';
+        this.draftQuantity = item.quantity ?? 1;
+        // unit_cost from the record is already in cents
+        this.draftUnitCost = this._toCents(item.unit_cost);
+    }
+
+    @action
+    cancelEdit() {
+        this.editingIndex = null;
+        this._resetDraft();
+    }
+
+    @action
+    saveEdit() {
+        if (!this.draftDescription?.trim()) {
+            this.notifications.warning('Please enter a description for the line item.');
+            return;
+        }
+
+        const index = this.editingIndex;
+        const updatedItems = this.lineItems.map((item, i) => {
+            if (i !== index) return item;
+            return {
+                ...item,
+                description: this.draftDescription.trim(),
+                quantity: parseInt(this.draftQuantity, 10) || 1,
+                unit_cost: this.draftUnitCost,
+                currency: this.currency,
+            };
+        });
+
+        this._commitItems(updatedItems);
+        this.editingIndex = null;
+        this._resetDraft();
+    }
+
+    // ─── Remove item ─────────────────────────────────────────────────────────
+
+    @action
+    removeLineItem(index) {
+        const updatedItems = this.lineItems.filter((_, i) => i !== index);
+        this._commitItems(updatedItems);
+        // If we were editing this item, close the edit row
+        if (this.editingIndex === index) {
+            this.editingIndex = null;
+            this._resetDraft();
+        }
+    }
+
+    // ─── Private helpers ─────────────────────────────────────────────────────
+
+    _resetDraft() {
+        this.draftDescription = '';
+        this.draftQuantity = 1;
+        this.draftUnitCost = 0;
+    }
+}

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>