@fleetbase/fleetops-engine 0.6.38 → 0.6.40

package/addon/components/fleet-panel/vehicle-listing.hbs

@@ -3,12 +3,7 @@
         <div class="mb-3 flex items-center justify-between">
             <div class="flex items-center">
                 <div class="fleet-vehicle-listing-search">
-                    <Input
-                        @type="text"
-                        {{on "input" this.onInput}}
-                        placeholder={{t "fleet-panel.vehicle-listing.search-vehicle"}}
-                        class="w-64 form-input form-input-sm"
-                    />
+                    <Input @type="text" {{on "input" this.onInput}} placeholder={{t "fleet-panel.vehicle-listing.search-vehicle"}} class="w-64 form-input form-input-sm" />
                 </div>
                 {{#if this.search.isRunning}}
                     <div class="mx-2">

package/addon/components/fuel-report/form.hbs

@@ -77,11 +77,7 @@
                     @disabled={{cannot-write @resource}}
                 />
             </InputGroup>
-            <InputGroup
-                @name={{t "fuel-report.fields.fuel-volume"}}
-                @helpText={{t "fuel-report.fields.select-volume-help-text"}}
-                @wrapperClass="w-full"
-            >
+            <InputGroup @name={{t "fuel-report.fields.fuel-volume"}} @helpText={{t "fuel-report.fields.select-volume-help-text"}} @wrapperClass="w-full">
                 <UnitInput
                     class="w-full"
                     @measurement="volume"

package/addon/components/layout/fleet-ops-sidebar.hbs

@@ -104,8 +104,9 @@
                 }}
             {{else}}
                 <Layout::Sidebar::Item
-                    @onClick={{menuItem.onClick}}
-                    @route={{concat this.routePrefix menuItem.route}}
+                    @onClick={{if menuItem._virtual (fn this.universe.transitionMenuItem (concat this.routePrefix "virtual") menuItem) menuItem.onClick}}
+                    @menuItem={{menuItem}}
+                    @route={{if menuItem._virtual null (concat this.routePrefix menuItem.route)}}
                     @icon={{menuItem.icon}}
                     @iconComponent={{menuItem.iconComponent}}
                     @iconComponentOptions={{menuItem.iconComponentOptions}}
@@ -135,44 +136,48 @@
                 >{{if menuItem.intl (t menuItem.intl) menuItem.title}}</Layout::Sidebar::Item>
             {{/if}}
         {{/each}}
-        {{#if (eq menuPanel.routePrefix "settings")}}
-            {{#each this.universeSettingsMenuItems as |menuItem|}}
-                {{#if menuItem.renderComponentInPlace}}
-                    {{component menuItem.component}}
-                {{else}}
-                    <Layout::Sidebar::Item
-                        @onClick={{fn this.universe.transitionMenuItem (concat this.routePrefix "virtual") menuItem}}
-                        @menuItem={{menuItem}}
-                        @icon={{menuItem.icon}}
-                        @iconComponent={{menuItem.iconComponent}}
-                        @iconComponentOptions={{menuItem.iconComponentOptions}}
-                        @iconSize={{menuItem.iconSize}}
-                        @iconPrefix={{menuItem.iconPrefix}}
-                        @iconClass={{menuItem.iconClass}}
-                        @rightSideComponent={{menuItem.rightSideComponent}}
-                        @rightSideComponentContext={{menuItem.rightSideComponentContext}}
-                        @rightSideStatus={{menuItem.rightSideStatus}}
-                        @rightSideStatusText={{menuItem.rightSideStatusText}}
-                        @hideRightSideStatusDot={{menuItem.hideRightSideStatusDot}}
-                        @rightSideStatusClass={{menuItem.rightSideStatusClass}}
-                        @disableRightSideStatusHumanize={{menuItem.disableRightSideStatusHumanize}}
-                        @dropdownButton={{menuItem.dropdownButton}}
-                        @dropdownButtonActions={{menuItem.dropdownButtonActions}}
-                        @dropdownButtonIcon={{menuItem.dropdownButtonIcon}}
-                        @dropdownButtonIconPrefix={{menuItem.dropdownButtonIconPrefix}}
-                        @dropdownButtonText={{menuItem.dropdownButtonText}}
-                        @dropdownButtonCalculatePosition={{menuItem.dropdownButtonCalculatePosition}}
-                        @dropdownButtonRenderInPlace={{menuItem.dropdownButtonRenderInPlace}}
-                        @dropdownButtonMenuLabel={{menuItem.dropdownButtonMenuLabel}}
-                        @dropdownButtonWrapperClass={{menuItem.dropdownButtonWrapperClass}}
-                        @dropdownButtonTriggerClass={{menuItem.dropdownButtonTriggerClass}}
-                        @registerDropdownButtonAPI={{menuItem.registerDropdownButtonAPI}}
-                        @permission={{menuItem.permission}}
-                        @visible={{menuItem.visible}}
-                    >{{if menuItem.intl (t menuItem.intl) menuItem.title}}</Layout::Sidebar::Item>
+        {{!-- {{#let (array "operations" "management" "connectivity" "maintenance" "analytics" "settings") as |sectionsToRender|}}
+            {{#each sectionsToRender as |section|}}
+                {{#if (eq menuPanel.routePrefix section)}}
+                    {{#each (get this (concat "universe" (capitalize section) "MenuItems")) as |menuItem|}}
+                        {{#if menuItem.renderComponentInPlace}}
+                            {{component menuItem.component}}
+                        {{else}}
+                            <Layout::Sidebar::Item
+                                @onClick={{fn this.universe.transitionMenuItem (concat this.routePrefix "virtual") menuItem}}
+                                @menuItem={{menuItem}}
+                                @icon={{menuItem.icon}}
+                                @iconComponent={{menuItem.iconComponent}}
+                                @iconComponentOptions={{menuItem.iconComponentOptions}}
+                                @iconSize={{menuItem.iconSize}}
+                                @iconPrefix={{menuItem.iconPrefix}}
+                                @iconClass={{menuItem.iconClass}}
+                                @rightSideComponent={{menuItem.rightSideComponent}}
+                                @rightSideComponentContext={{menuItem.rightSideComponentContext}}
+                                @rightSideStatus={{menuItem.rightSideStatus}}
+                                @rightSideStatusText={{menuItem.rightSideStatusText}}
+                                @hideRightSideStatusDot={{menuItem.hideRightSideStatusDot}}
+                                @rightSideStatusClass={{menuItem.rightSideStatusClass}}
+                                @disableRightSideStatusHumanize={{menuItem.disableRightSideStatusHumanize}}
+                                @dropdownButton={{menuItem.dropdownButton}}
+                                @dropdownButtonActions={{menuItem.dropdownButtonActions}}
+                                @dropdownButtonIcon={{menuItem.dropdownButtonIcon}}
+                                @dropdownButtonIconPrefix={{menuItem.dropdownButtonIconPrefix}}
+                                @dropdownButtonText={{menuItem.dropdownButtonText}}
+                                @dropdownButtonCalculatePosition={{menuItem.dropdownButtonCalculatePosition}}
+                                @dropdownButtonRenderInPlace={{menuItem.dropdownButtonRenderInPlace}}
+                                @dropdownButtonMenuLabel={{menuItem.dropdownButtonMenuLabel}}
+                                @dropdownButtonWrapperClass={{menuItem.dropdownButtonWrapperClass}}
+                                @dropdownButtonTriggerClass={{menuItem.dropdownButtonTriggerClass}}
+                                @registerDropdownButtonAPI={{menuItem.registerDropdownButtonAPI}}
+                                @permission={{menuItem.permission}}
+                                @visible={{menuItem.visible}}
+                            >{{if menuItem.intl (t menuItem.intl) menuItem.title}}</Layout::Sidebar::Item>
+                        {{/if}}
+                    {{/each}}
                 {{/if}}
             {{/each}}
-        {{/if}}
+        {{/let}} --}}
     </Layout::Sidebar::Panel>
 {{/each}}
 {{#each this.universeMenuPanels as |menuPanel|}}

package/addon/components/layout/fleet-ops-sidebar.js

@@ -15,6 +15,11 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
     @tracked routePrefix = 'console.fleet-ops.';
     @tracked menuPanels = [];
     @tracked universeMenuItems = [];
+    @tracked universeOperationsMenuItems = [];
+    @tracked universeManagementMenuItems = [];
+    @tracked universeConnectivityMenuItems = [];
+    @tracked universeMaintenanceMenuItems = [];
+    @tracked universeAnalyticsMenuItems = [];
     @tracked universeSettingsMenuItems = [];
     @tracked universeMenuPanels = [];
 
@@ -28,6 +33,11 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
         const registeredMenuItems = this.menuService.getMenuItems('engine:fleet-ops');
         this.universeMenuPanels = this.menuService.getMenuPanels('engine:fleet-ops');
         this.universeMenuItems = registeredMenuItems.filter((menuItem) => menuItem.section === undefined);
+        this.universeOperationsMenuItems = registeredMenuItems.filter((menuItem) => menuItem.section === 'operations');
+        this.universeManagementMenuItems = registeredMenuItems.filter((menuItem) => menuItem.section === 'management');
+        this.universeMaintenanceMenuItems = registeredMenuItems.filter((menuItem) => menuItem.section === 'maintenance');
+        this.universeConnectivityMenuItems = registeredMenuItems.filter((menuItem) => menuItem.section === 'connectivity');
+        this.universeAnalyticsMenuItems = registeredMenuItems.filter((menuItem) => menuItem.section === 'analytics');
         this.universeSettingsMenuItems = registeredMenuItems.filter((menuItem) => menuItem.section === 'settings');
     }
 
@@ -35,6 +45,7 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
     createMenuPanels() {
         const operationsItems = [
             {
+                priority: 0,
                 intl: 'menu.dashboard',
                 title: this.intl.t('menu.dashboard'),
                 icon: 'home',
@@ -43,14 +54,16 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
                 visible: this.abilities.can('fleet-ops see order'),
             },
             {
-                intl: 'menu.service-rates',
-                title: this.intl.t('menu.service-rates'),
-                icon: 'file-invoice-dollar',
-                route: 'operations.service-rates',
-                permission: 'fleet-ops list service-rate',
-                visible: this.abilities.can('fleet-ops see service-rate'),
+                priority: 1,
+                intl: 'menu.orchestrator',
+                title: this.intl.t('menu.orchestrator'),
+                icon: 'circle-nodes',
+                route: 'operations.orchestrator',
+                permission: 'fleet-ops list order',
+                visible: this.abilities.can('fleet-ops see order'),
             },
             {
+                priority: 2,
                 intl: 'menu.scheduler',
                 title: this.intl.t('menu.scheduler'),
                 icon: 'calendar-day',
@@ -59,6 +72,7 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
                 visible: this.abilities.can('fleet-ops see order'),
             },
             {
+                priority: 3,
                 intl: 'menu.order-config',
                 title: this.intl.t('menu.order-config'),
                 icon: 'diagram-project',
@@ -66,10 +80,21 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
                 permission: 'fleet-ops list order-config',
                 visible: this.abilities.can('fleet-ops see order-config'),
             },
-        ];
+            {
+                priority: 4,
+                intl: 'menu.service-rates',
+                title: this.intl.t('menu.service-rates'),
+                icon: 'file-invoice-dollar',
+                route: 'operations.service-rates',
+                permission: 'fleet-ops list service-rate',
+                visible: this.abilities.can('fleet-ops see service-rate'),
+            },
+            ...(this.universeOperationsMenuItems ?? []).map((item) => ({ ...item, _virtual: true })),
+        ].sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0));
 
         const resourcesItems = [
             {
+                priority: 0,
                 intl: 'menu.drivers',
                 title: this.intl.t('menu.drivers'),
                 icon: 'id-card',
@@ -80,6 +105,7 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
                 visible: this.abilities.can('fleet-ops see driver'),
             },
             {
+                priority: 1,
                 intl: 'menu.vehicles',
                 title: this.intl.t('menu.vehicles'),
                 icon: 'truck',
@@ -88,6 +114,7 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
                 visible: this.abilities.can('fleet-ops see vehicle'),
             },
             {
+                priority: 2,
                 intl: 'menu.fleets',
                 title: this.intl.t('menu.fleets'),
                 icon: 'user-group',
@@ -98,6 +125,7 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
                 visible: this.abilities.can('fleet-ops see fleet'),
             },
             {
+                priority: 3,
                 intl: 'menu.vendors',
                 title: this.intl.t('menu.vendors'),
                 icon: 'warehouse',
@@ -106,6 +134,7 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
                 visible: this.abilities.can('fleet-ops see vendor'),
             },
             {
+                priority: 4,
                 intl: 'menu.contacts',
                 title: this.intl.t('menu.contacts'),
                 icon: 'address-book',
@@ -114,6 +143,7 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
                 visible: this.abilities.can('fleet-ops see contact'),
             },
             {
+                priority: 5,
                 intl: 'menu.places',
                 title: this.intl.t('menu.places'),
                 icon: 'location-dot',
@@ -122,6 +152,7 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
                 visible: this.abilities.can('fleet-ops see place'),
             },
             {
+                priority: 6,
                 intl: 'menu.fuel-reports',
                 title: this.intl.t('menu.fuel-reports'),
                 icon: 'gas-pump',
@@ -130,6 +161,7 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
                 visible: this.abilities.can('fleet-ops see fuel-report'),
             },
             {
+                priority: 7,
                 intl: 'menu.issues',
                 title: this.intl.t('menu.issues'),
                 icon: 'triangle-exclamation',
@@ -137,10 +169,12 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
                 permission: 'fleet-ops list issue',
                 visible: this.abilities.can('fleet-ops see issue'),
             },
-        ];
+            ...(this.universeManagementMenuItems ?? []).map((item) => ({ ...item, _virtual: true })),
+        ].sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0));
 
         const connectivityItems = [
             {
+                priority: 0,
                 intl: 'menu.telematics',
                 title: this.intl.t('menu.telematics'),
                 icon: 'satellite-dish',
@@ -149,6 +183,7 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
                 visible: this.abilities.can('fleet-ops see telematic'),
             },
             {
+                priority: 1,
                 intl: 'menu.devices',
                 title: this.intl.t('menu.devices'),
                 icon: 'hard-drive',
@@ -157,6 +192,7 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
                 visible: this.abilities.can('fleet-ops see device'),
             },
             {
+                priority: 2,
                 intl: 'menu.sensors',
                 title: this.intl.t('menu.sensors'),
                 icon: 'temperature-full',
@@ -165,6 +201,7 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
                 visible: this.abilities.can('fleet-ops see sensor'),
             },
             {
+                priority: 3,
                 intl: 'menu.events',
                 title: this.intl.t('menu.events'),
                 icon: 'stream',
@@ -172,18 +209,21 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
                 permission: 'fleet-ops list device-event',
                 visible: this.abilities.can('fleet-ops see device-event'),
             },
-            // {
-            //     intl: 'menu.tracking',
-            //     title: this.intl.t('menu.tracking'),
-            //     icon: 'map-marked-alt',
-            //     route: 'connectivity.tracking',
-            //     permission: 'fleet-ops list device',
-            //     visible: this.abilities.can('fleet-ops see device'),
-            // },
-        ];
+            ...(this.universeConnectivityMenuItems ?? []).map((item) => ({ ...item, _virtual: true })),
+        ].sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0));
 
         const maintenanceItems = [
             {
+                priority: 0,
+                intl: 'menu.schedules',
+                title: this.intl.t('menu.schedules'),
+                icon: 'calendar-alt',
+                route: 'maintenance.schedules',
+                permission: 'fleet-ops list maintenance-schedule',
+                visible: this.abilities.can('fleet-ops see maintenance-schedule'),
+            },
+            {
+                priority: 1,
                 intl: 'menu.work-orders',
                 title: this.intl.t('menu.work-orders'),
                 icon: 'clipboard-list',
@@ -192,6 +232,16 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
                 visible: this.abilities.can('fleet-ops see work-order'),
             },
             {
+                priority: 2,
+                intl: 'menu.maintenances',
+                title: this.intl.t('menu.maintenances'),
+                icon: 'history',
+                route: 'maintenance.maintenances',
+                permission: 'fleet-ops list maintenance',
+                visible: this.abilities.can('fleet-ops see maintenance'),
+            },
+            {
+                priority: 3,
                 intl: 'menu.equipment',
                 title: this.intl.t('menu.equipment'),
                 icon: 'trailer',
@@ -200,6 +250,7 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
                 visible: this.abilities.can('fleet-ops see equipment'),
             },
             {
+                priority: 4,
                 intl: 'menu.parts',
                 title: this.intl.t('menu.parts'),
                 icon: 'cog',
@@ -207,10 +258,12 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
                 permission: 'fleet-ops list part',
                 visible: this.abilities.can('fleet-ops see part'),
             },
-        ];
+            ...(this.universeMaintenanceMenuItems ?? []).map((item) => ({ ...item, _virtual: true })),
+        ].sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0));
 
         const analyticsItems = [
             {
+                priority: 0,
                 intl: 'menu.reports',
                 title: this.intl.t('menu.reports'),
                 icon: 'file-import',
@@ -218,10 +271,12 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
                 permission: 'iam list report',
                 visible: this.abilities.can('fleet-ops see report'),
             },
-        ];
+            ...(this.universeAnalyticsMenuItems ?? []).map((item) => ({ ...item, _virtual: true })),
+        ].sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0));
 
         const settingsItems = [
             {
+                priority: 0,
                 intl: 'menu.navigator-app',
                 title: this.intl.t('menu.navigator-app'),
                 icon: 'location-arrow',
@@ -230,6 +285,7 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
                 visible: this.abilities.can('fleet-ops see navigator-settings'),
             },
             {
+                priority: 1,
                 intl: 'menu.payments',
                 title: this.intl.t('menu.payments'),
                 icon: 'cash-register',
@@ -238,6 +294,7 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
                 visible: this.abilities.can('fleet-ops see payments'),
             },
             {
+                priority: 2,
                 intl: 'menu.notifications',
                 title: this.intl.t('menu.notifications'),
                 icon: 'bell',
@@ -246,6 +303,7 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
                 visible: this.abilities.can('fleet-ops see notification-settings'),
             },
             {
+                priority: 3,
                 intl: 'menu.routing',
                 title: this.intl.t('menu.routing'),
                 icon: 'route',
@@ -254,6 +312,25 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
                 visible: this.abilities.can('fleet-ops see routing-settings'),
             },
             {
+                priority: 4,
+                intl: 'menu.orchestrator',
+                title: this.intl.t('menu.orchestrator'),
+                icon: 'circle-nodes',
+                route: 'settings.orchestrator',
+                permission: 'fleet-ops view routing-settings',
+                visible: this.abilities.can('fleet-ops see routing-settings'),
+            },
+            {
+                priority: 5,
+                intl: 'menu.scheduling',
+                title: this.intl.t('menu.scheduling'),
+                icon: 'calendar-days',
+                route: 'settings.scheduling',
+                permission: 'fleet-ops view scheduling-settings',
+                visible: this.abilities.can('fleet-ops see scheduling-settings'),
+            },
+            {
+                priority: 6,
                 intl: 'menu.custom-fields',
                 title: this.intl.t('menu.custom-fields'),
                 icon: 'rectangle-list',
@@ -262,6 +339,7 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
                 visible: this.abilities.can('fleet-ops see custom-field'),
             },
             {
+                priority: 7,
                 intl: 'menu.avatars',
                 title: this.intl.t('menu.avatars'),
                 icon: 'icons',
@@ -269,7 +347,8 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
                 permission: 'fleet-ops view avatar',
                 visible: this.abilities.can('fleet-ops see avatar'),
             },
-        ];
+            ...(this.universeSettingsMenuItems ?? []).map((item) => ({ ...item, _virtual: true })),
+        ].sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0));
 
         const createPanel = (intl, routePrefix, items = [], options = {}) => ({
             intl,
@@ -289,10 +368,10 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
                 open: this.appCache.get('fleet-ops:sidebar:management:open', true),
                 onToggle: (open) => this.appCache.set('fleet-ops:sidebar:management:open', open),
             }),
-            // createPanel('menu.maintenance', 'maintenance', maintenanceItems, {
-            //     open: this.appCache.get('fleet-ops:sidebar:maintenance:open', false),
-            //     onToggle: (open) => this.appCache.set('fleet-ops:sidebar:maintenance:open', open),
-            // }),
+            createPanel('menu.maintenance', 'maintenance', maintenanceItems, {
+                open: this.appCache.get('fleet-ops:sidebar:maintenance:open', false),
+                onToggle: (open) => this.appCache.set('fleet-ops:sidebar:maintenance:open', open),
+            }),
             createPanel('menu.connectivity', 'connectivity', connectivityItems, {
                 open: this.appCache.get('fleet-ops:sidebar:connectivity:open', false),
                 onToggle: (open) => this.appCache.set('fleet-ops:sidebar:connectivity:open', open),

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

@@ -0,0 +1,176 @@
+{{! ===== COST PANEL — invoice-style line items ===== }}
+<ContentPanel @title="Costs" @open={{true}} @wrapperClass="bordered-top">
+
+    {{! ── Currency selector (single, shared by all money fields) ── }}
+    <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 lg:gap-2 no-input-group-padding text-xs mb-2">
+        <InputGroup @name="Currency">
+            <CurrencySelect @currency={{@resource.currency}} @onCurrencyChange={{fn (mut @resource.currency)}} @triggerClass="w-full form-select" @disabled={{this.isDisabled}} />
+        </InputGroup>
+    </div>
+
+    {{! ── Labour & Tax inputs (always editable on the form) ── }}
+    <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 lg:gap-2 no-input-group-padding text-xs mb-4">
+        <InputGroup @name="Labour Cost">
+            <MoneyInput class="w-full" @value={{@resource.labor_cost}} @currency={{this.currency}} @onChange={{fn (mut @resource.labor_cost)}} @disabled={{this.isDisabled}} />
+        </InputGroup>
+        <InputGroup @name="Tax">
+            <MoneyInput class="w-full" @value={{@resource.tax}} @currency={{this.currency}} @onChange={{fn (mut @resource.tax)}} @disabled={{this.isDisabled}} />
+        </InputGroup>
+    </div>
+
+    {{! ── Line items table ── }}
+    <div class="text-[11px] uppercase tracking-wide text-gray-500 dark:text-gray-400 font-semibold mb-2">
+        Parts &amp; Services
+    </div>
+
+    <table class="w-full text-xs border-collapse mb-2 table-fixed">
+        <colgroup>
+            <col class="w-[45%]" />
+            <col class="w-[10%]" />
+            <col class="w-[20%]" />
+            <col class="w-[15%]" />
+            {{#unless this.isDisabled}}
+                <col class="w-[10%]" />
+            {{/unless}}
+        </colgroup>
+        <thead>
+            <tr class="border-b border-gray-200 dark:border-gray-700 text-gray-500 dark:text-gray-400 text-left">
+                <th class="pb-1 pr-2 font-medium">Description</th>
+                <th class="pb-1 pr-2 font-medium text-right">Qty</th>
+                <th class="pb-1 pr-2 font-medium text-right">Unit Cost</th>
+                <th class="pb-1 pr-2 font-medium text-right">Total</th>
+                {{#unless this.isDisabled}}
+                    <th class="pb-1"></th>
+                {{/unless}}
+            </tr>
+        </thead>
+        <tbody>
+            {{#each this.lineItems as |item index|}}
+                {{#if (eq this.editingIndex index)}}
+                    {{! ── Inline edit row ── }}
+                    <tr class="border-b border-gray-100 dark:border-gray-800">
+                        <td class="py-1 pr-2">
+                            <Input @value={{this.draftDescription}} class="form-input w-full text-xs" placeholder="Description" />
+                        </td>
+                        <td class="py-1 pr-2">
+                            <Input @value={{this.draftQuantity}} @type="number" class="form-input w-full text-xs text-right" min="0" />
+                        </td>
+                        <td class="py-1 pr-2">
+                            <MoneyInput class="w-full" @value={{this.draftUnitCost}} @currency={{this.currency}} @onChange={{this.setDraftUnitCost}} />
+                        </td>
+                        <td class="py-1 pr-2 text-right text-gray-500 dark:text-gray-400">
+                            {{format-currency this.draftLineTotal this.currency}}
+                        </td>
+                        <td class="py-1">
+                            <div class="flex items-center space-x-1">
+                                <Button @size="xs" @type="primary" @onClick={{this.saveEdit}} class="px-2 py-0.5">
+                                    Save
+                                </Button>
+                                <Button @size="xs" @type="default" @onClick={{this.cancelEdit}} class="px-2 py-0.5">
+                                    Cancel
+                                </Button>
+                            </div>
+                        </td>
+                    </tr>
+                {{else}}
+                    {{! ── Read row ── }}
+                    <tr class="border-b border-gray-100 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-800/40 group">
+                        <td class="py-1.5 pr-2 text-gray-800 dark:text-gray-200 truncate">{{item.description}}</td>
+                        <td class="py-1.5 pr-2 text-right text-gray-600 dark:text-gray-400">{{item.quantity}}</td>
+                        <td class="py-1.5 pr-2 text-right text-gray-600 dark:text-gray-400">
+                            {{format-currency (this._toCents item.unit_cost) this.currency}}
+                        </td>
+                        <td class="py-1.5 pr-2 text-right font-medium text-gray-800 dark:text-gray-200">
+                            {{format-currency (this.lineTotal item) this.currency}}
+                        </td>
+                        {{#unless this.isDisabled}}
+                            <td class="py-1.5">
+                                <div class="flex items-center space-x-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                                    <button
+                                        type="button"
+                                        class="text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition-colors"
+                                        title="Edit"
+                                        {{on "click" (fn this.startEdit index)}}
+                                    >
+                                        <FaIcon @icon="pencil" @size="xs" />
+                                    </button>
+                                    <button
+                                        type="button"
+                                        class="text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition-colors"
+                                        title="Remove"
+                                        {{on "click" (fn this.removeLineItem index)}}
+                                    >
+                                        <FaIcon @icon="trash" @size="xs" />
+                                    </button>
+                                </div>
+                            </td>
+                        {{/unless}}
+                    </tr>
+                {{/if}}
+            {{/each}}
+
+            {{! ── Add new item row ── }}
+            {{#if this.isAddingItem}}
+                <tr class="border-b border-gray-100 dark:border-gray-800">
+                    <td class="py-1 pr-2">
+                        <Input @value={{this.draftDescription}} class="form-input w-full text-xs" placeholder="Description" />
+                    </td>
+                    <td class="py-1 pr-2">
+                        <Input @value={{this.draftQuantity}} @type="number" class="form-input w-full text-xs text-right" min="0" />
+                    </td>
+                    <td class="py-1 pr-2">
+                        <MoneyInput class="w-full" @value={{this.draftUnitCost}} @currency={{this.currency}} @onChange={{this.setDraftUnitCost}} />
+                    </td>
+                    <td class="py-1 pr-2 text-right text-gray-500 dark:text-gray-400">
+                        {{format-currency this.draftLineTotal this.currency}}
+                    </td>
+                    <td class="py-1">
+                        <div class="flex items-center space-x-1">
+                            <Button @size="xs" @type="primary" @onClick={{this.addLineItem}} class="px-2 py-0.5">
+                                Add
+                            </Button>
+                            <Button @size="xs" @type="default" @onClick={{this.cancelAdd}} class="px-2 py-0.5">
+                                Cancel
+                            </Button>
+                        </div>
+                    </td>
+                </tr>
+            {{/if}}
+        </tbody>
+    </table>
+
+    {{! ── Add item button ── }}
+    {{#unless this.isDisabled}}
+        {{#unless this.isAddingItem}}
+            <button
+                type="button"
+                class="flex items-center space-x-1 text-xs text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300 font-medium mb-3 transition-colors"
+                {{on "click" this.showAddRow}}
+            >
+                <FaIcon @icon="plus" @size="xs" />
+                <span>Add line item</span>
+            </button>
+        {{/unless}}
+    {{/unless}}
+
+    {{! ── Totals summary ── }}
+    <div class="border-t border-gray-200 dark:border-gray-700 pt-2 mt-1 space-y-1 text-xs">
+        <div class="flex justify-between text-gray-500 dark:text-gray-400">
+            <span>Labour</span>
+            <span>{{format-currency this.laborCost this.currency}}</span>
+        </div>
+        <div class="flex justify-between text-gray-500 dark:text-gray-400">
+            <span>Parts</span>
+            <span>{{format-currency this.partsCost this.currency}}</span>
+        </div>
+        <div class="flex justify-between text-gray-500 dark:text-gray-400">
+            <span>Tax</span>
+            <span>{{format-currency this.tax this.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 this.totalCost this.currency}}</span>
+        </div>
+    </div>
+
+</ContentPanel>