@fleetbase/fleetops-engine 0.6.48 → 0.6.49

package/addon/components/driver/details.hbs

@@ -30,6 +30,10 @@
                 <div class="field-name">{{t "driver.fields.driver-license"}}</div>
                 <div class="field-value">{{n-a @resource.drivers_license_number}}</div>
             </div>
+            <div class="field-info-container">
+                <div class="field-name">{{t "driver.fields.license-expiry"}}</div>
+                <div class="field-value">{{n-a @resource.license_expiry}}</div>
+            </div>
             <div class="field-info-container">
                 <div class="field-name">{{t "resource.vendor"}}</div>
                 <div class="field-value">{{n-a @resource.vendor_name}}</div>
@@ -92,4 +96,4 @@
     >
         <MetadataViewer @metadata={{@resource.meta}} />
     </ContentPanel>
-</div>
+</div>

package/addon/components/driver/form.hbs

@@ -93,6 +93,16 @@
                 />
             </InputGroup>
 
+            <InputGroup @name={{t "driver.fields.license-expiry"}}>
+                <DatePicker
+                    @value={{@resource.license_expiry}}
+                    @onChange={{fn (mut @resource.license_expiry)}}
+                    @placeholder={{t "driver.fields.license-expiry"}}
+                    @disabled={{cannot-write @resource}}
+                    class="w-full form-input"
+                />
+            </InputGroup>
+
             <InputGroup @name={{t "driver.fields.vendor"}}>
                 <ModelSelect
                     @modelName="vendor"
@@ -221,4 +231,4 @@
     <ContentPanel @title={{t "common.metadata"}} @open={{true}} @wrapperClass="bordered-top">
         <MetadataEditor @value={{@resource.meta}} @onChange={{fn (mut @resource.meta)}} />
     </ContentPanel>
-</div>
+</div>

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

@@ -36,13 +36,13 @@
             @dropdownButtonIcon={{@itemDropdownButtonIcon}}
             @dropdownButtonIconPrefix={{@itemDropdownButtonIconPrefix}}
             @dropdownButtonText={{@itemDropdownButtonText}}
-            @dropdownButtonCalculatePosition={{@itemDropdownButtonCalculatePosition}}
+            @dropdownButtonCalculatePosition={{this.calculateDropdownItemPosition}}
             @dropdownButtonMenuLabel={{vehicle.displayName}}
             @dropdownButtonWrapperClass={{@itemDropdownButtonWrapperClass}}
             @dropdownButtonTriggerClass={{@itemDropdownButtonTriggerClass}}
             @registerDropdownButtonAPI={{@itemRegisterDropdownButtonAPI}}
-            @permission="fleet-ops view vehicle"
             @dropdownButtonRenderInPlace={{false}}
+            @permission="fleet-ops view vehicle"
         >{{vehicle.displayName}}</Layout::Sidebar::Item>
     {{/each}}
 </Layout::Sidebar::Panel>

package/addon/components/fleet-listing-panel.js

@@ -31,4 +31,14 @@ export default class FleetListingPanelComponent extends Component {
             this.args.onVehicleClicked(vehicle);
         }
     }
+
+    @action calculateDropdownItemPosition(trigger) {
+        let { top, left, width } = trigger.getBoundingClientRect();
+        let style = {
+            left: 11 + left + width,
+            top: top + 2,
+        };
+
+        return { style };
+    }
 }

package/addon/components/map/google-live-map.js

@@ -6,73 +6,7 @@ import { action } from '@ember/object';
 import { isArray } from '@ember/array';
 import { debug } from '@ember/debug';
 import { guidFor } from '@ember/object/internals';
-
-function buildDriverInfoWindowContent(driver) {
-    return `
-        <div class="fleetops-google-popover fleetops-google-popover--compact">
-            <div class="fleetops-google-popover__row">
-                <img src="${driver.photoUrl ?? ''}" alt="${driver.name ?? ''}" class="fleetops-google-popover__avatar" />
-                <div class="fleetops-google-popover__body">
-                    <div class="fleetops-google-popover__title">${driver.name ?? '-'}</div>
-                    <div class="fleetops-google-popover__meta">Phone: ${driver.phone ?? '-'}</div>
-                    <div class="fleetops-google-popover__meta">Vehicle: ${driver.vehicle_name ?? '-'}</div>
-                    <div class="fleetops-google-popover__meta">Status:
-                        <span class="${driver.online ? 'text-green-500' : 'text-red-400'}">${driver.online ? 'Online' : 'Offline'}</span>
-                    </div>
-                </div>
-            </div>
-        </div>`;
-}
-
-function buildDriverTooltipContent(driver) {
-    return `
-        <div class="fleetops-google-hover-tooltip__title">${driver.name ?? '-'}</div>
-        <div class="fleetops-google-hover-tooltip__meta ${driver.online ? 'text-green-400' : 'text-red-400'}">${driver.online ? 'Online' : 'Offline'}</div>
-    `;
-}
-
-function buildVehicleInfoWindowContent(vehicle) {
-    return `
-        <div class="fleetops-google-popover">
-            <div class="fleetops-google-popover__row">
-                <img src="${vehicle.photo_url ?? ''}" alt="${vehicle.display_name ?? ''}" class="fleetops-google-popover__vehicle" />
-                <div class="fleetops-google-popover__body">
-                    <div class="fleetops-google-popover__title">${vehicle.displayName ?? '-'}</div>
-                    <div class="fleetops-google-popover__meta">ID: ${vehicle.public_id ?? '-'}</div>
-                    <div class="fleetops-google-popover__meta">Serial: ${vehicle.serial_number ?? vehicle.vin ?? '-'}</div>
-                    <div class="fleetops-google-popover__meta">Driver: ${vehicle.driver_name ?? '-'}</div>
-                    <div class="fleetops-google-popover__meta">Status:
-                        <span class="${vehicle.online ? 'text-green-500' : 'text-red-400'}">${vehicle.online ? 'Online' : 'Offline'}</span>
-                    </div>
-                </div>
-            </div>
-        </div>`;
-}
-
-function buildVehicleTooltipContent(vehicle) {
-    return `
-        <div class="fleetops-google-hover-tooltip__title">${vehicle.displayName ?? '-'}</div>
-        <div class="fleetops-google-hover-tooltip__meta">ID: ${vehicle.public_id ?? '-'}</div>
-        <div class="fleetops-google-hover-tooltip__meta ${vehicle.online ? 'text-green-400' : 'text-red-400'}">${vehicle.online ? 'Online' : 'Offline'}</div>
-    `;
-}
-
-function buildPlaceInfoWindowContent(place) {
-    return `
-        <div class="fleetops-google-popover fleetops-google-popover--compact">
-            <div class="fleetops-google-popover__body">
-                <div class="fleetops-google-popover__title">${place.name ?? place.address ?? '-'}</div>
-                <div class="fleetops-google-popover__meta">${place.address ?? ''}</div>
-            </div>
-        </div>`;
-}
-
-function buildPlaceTooltipContent(place) {
-    return `
-        <div class="fleetops-google-hover-tooltip__title">${place.name ?? place.address ?? '-'}</div>
-        <div class="fleetops-google-hover-tooltip__meta">${place.address ?? ''}</div>
-    `;
-}
+import { buildDriverLiveMapContent, buildPlaceInfoWindowContent, buildPlaceTooltipContent, buildVehicleLiveMapContent } from '../../utils/live-map-card-content';
 
 export default class MapGoogleLiveMapComponent extends Component {
     @service mapManager;
@@ -100,6 +34,7 @@ export default class MapGoogleLiveMapComponent extends Component {
 
         this.map = map;
         this.mapManager.on('moveend', () => this.args.onViewportChanged?.());
+        this.mapManager.on('click', () => this._closeAllInfoWindows());
         this.mapManager.on('rightclick', (event) => this._showMapContextMenu(event));
         this.args.onLoad?.({ target: map });
         this.syncResources();
@@ -125,12 +60,12 @@ export default class MapGoogleLiveMapComponent extends Component {
             if (!marker) {
                 const createdMarker = await this.mapManager.addMarker(driver.id, coords.lat, coords.lng, {
                     iconUrl: driver.vehicle_avatar ?? '/engines-dist/images/driver-marker.png',
-                    iconSize: [24, 24],
+                    iconSize: [20, 20],
                     title: driver.name,
-                    tooltip: buildDriverTooltipContent(driver),
+                    tooltip: buildDriverLiveMapContent(driver),
                     tooltipOptions: { html: true },
                     rotationAngle: driver.heading,
-                    onClick: () => this.#openInfoWindow(`driver:${driver.id}`, buildDriverInfoWindowContent(driver), driver.id, () => this.args.onDriverClicked?.(driver)),
+                    onClick: () => this.#openInfoWindow(`driver:${driver.id}`, buildDriverLiveMapContent(driver, true), driver.id, () => this.args.onDriverClicked?.(driver)),
                     onRightClick: (event) => this._showDriverContextMenu(driver, event),
                 });
 
@@ -155,12 +90,12 @@ export default class MapGoogleLiveMapComponent extends Component {
             if (!marker) {
                 const createdMarker = await this.mapManager.addMarker(vehicle.id, coords.lat, coords.lng, {
                     iconUrl: vehicle.avatar_url ?? '/engines-dist/images/vehicle-marker.png',
-                    iconSize: [24, 24],
+                    iconSize: [20, 20],
                     title: vehicle.displayName,
-                    tooltip: buildVehicleTooltipContent(vehicle),
+                    tooltip: buildVehicleLiveMapContent(vehicle),
                     tooltipOptions: { html: true },
                     rotationAngle: vehicle.heading,
-                    onClick: () => this.#openInfoWindow(`vehicle:${vehicle.id}`, buildVehicleInfoWindowContent(vehicle), vehicle.id, () => this.args.onVehicleClicked?.(vehicle)),
+                    onClick: () => this.#openInfoWindow(`vehicle:${vehicle.id}`, buildVehicleLiveMapContent(vehicle, true), vehicle.id, () => this.args.onVehicleClicked?.(vehicle)),
                     onRightClick: (event) => this._showVehicleContextMenu(vehicle, event),
                 });
 
@@ -308,6 +243,10 @@ export default class MapGoogleLiveMapComponent extends Component {
         if (!infoWindow) {
             infoWindow = new google.maps.InfoWindow({ content });
             this._infoWindows.set(infoId, infoWindow);
+
+            infoWindow.addListener('domready', () => {
+                document.querySelector('[data-fleetops-google-popover-close]')?.addEventListener('click', () => infoWindow.close(), { once: true });
+            });
         } else {
             infoWindow.setContent(content);
         }

package/addon/components/map/leaflet-live-map.hbs

@@ -83,27 +83,94 @@
                         as |marker|
                     >
                         <marker.popup @maxWidth="500" @minWidth="225">
-                            <div class="flex flex-row">
-                                <div class="w-14">
-                                    <img src={{driver.photoUrl}} alt={{driver.name}} class="rounded-md w-12 h-12 shadow-sm" />
+                            <div class="w-[280px] max-w-[calc(100vw-2rem)] rounded-lg bg-gray-900 shadow-lg p-1.5 text-white">
+                                <div class="flex items-center gap-1.5 text-xs font-semibold mb-1.5">
+                                    <span class="inline-block w-2 h-2 rounded-full {{if driver.online 'bg-green-400' 'bg-red-500'}}"></span>
+                                    <span>{{driver.name}}</span>
+                                    <div class="status-badge {{if driver.status (dasherize driver.status) 'default'}}-status-badge status-badge-{{if driver.status (dasherize driver.status) 'default'}} shadow-none ml-auto">
+                                        <span class="rounded-full text-[9px] px-1.5 py-0.5">{{n-a driver.meta.status_label (smart-humanize driver.status)}}</span>
+                                    </div>
                                 </div>
-                                <div class="flex-1">
-                                    <div class="text-xs font-semibold">{{driver.name}}</div>
-                                    <div class="text-xs">{{t "common.phone"}}: {{n-a driver.phone}}</div>
-                                    <div class="text-xs">{{t "resource.vehicle"}}: {{n-a driver.vehicle_name}}</div>
-                                    <div class="text-xs">{{t "common.status"}}:
-                                        <span class="{{if driver.online 'text-green-500' 'text-red-400'}}">{{if driver.online "Online" "Offline"}}</span></div>
-                                    <div class="text-xs truncate">{{t "common.pos"}}: {{point-coordinates driver.location}}</div>
+                                <div class="grid grid-cols-2 gap-1">
+                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
+                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">ID</div>
+                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a driver.public_id driver.id}}</div>
+                                    </div>
+                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
+                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Phone</div>
+                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a driver.phone}}</div>
+                                    </div>
+                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
+                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Vehicle</div>
+                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a driver.vehicle_name}}</div>
+                                    </div>
+                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
+                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Email</div>
+                                        <div class="text-[11px] text-white leading-tight truncate min-w-0 w-full">{{n-a driver.email}}</div>
+                                    </div>
+                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
+                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Order</div>
+                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a driver.meta.current_order_reference}}</div>
+                                    </div>
+                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
+                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Speed</div>
+                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a driver.meta.speed_label}}</div>
+                                    </div>
+                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
+                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Heading</div>
+                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a driver.meta.heading_label}}</div>
+                                    </div>
+                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
+                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Location</div>
+                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a driver.meta.location_coordinates (point-coordinates driver.location)}}</div>
+                                    </div>
                                 </div>
                             </div>
                         </marker.popup>
                         <marker.tooltip @permanent={{false}} @sticky={{true}}>
-                            <div class="flex items-center space-x-1">
-                                <div class="text-xs font-semibold">{{driver.name}}</div>
-                                <div>•</div>
-                                <div class="text-xs {{if driver.online 'text-green-500' 'text-red-400'}}">{{if driver.online "Online" "Offline"}}</div>
+                            <div class="w-[280px] max-w-[calc(100vw-2rem)]">
+                                <div class="flex items-center gap-1.5 text-xs font-semibold mb-1.5">
+                                    <span class="inline-block w-2 h-2 rounded-full {{if driver.online 'bg-green-400' 'bg-red-500'}}"></span>
+                                    <span>{{driver.name}}</span>
+                                    <div class="status-badge {{if driver.status (dasherize driver.status) 'default'}}-status-badge status-badge-{{if driver.status (dasherize driver.status) 'default'}} shadow-none ml-auto">
+                                        <span class="rounded-full text-[9px] px-1.5 py-0.5">{{n-a driver.meta.status_label (smart-humanize driver.status)}}</span>
+                                    </div>
+                                </div>
+                                <div class="grid grid-cols-2 gap-1">
+                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
+                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">ID</div>
+                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a driver.public_id driver.id}}</div>
+                                    </div>
+                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
+                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Phone</div>
+                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a driver.phone}}</div>
+                                    </div>
+                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
+                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Vehicle</div>
+                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a driver.vehicle_name}}</div>
+                                    </div>
+                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
+                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Email</div>
+                                        <div class="text-[11px] text-white leading-tight truncate min-w-0 w-full">{{n-a driver.email}}</div>
+                                    </div>
+                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
+                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Order</div>
+                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a driver.meta.current_order_reference}}</div>
+                                    </div>
+                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
+                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Speed</div>
+                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a driver.meta.speed_label}}</div>
+                                    </div>
+                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
+                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Heading</div>
+                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a driver.meta.heading_label}}</div>
+                                    </div>
+                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
+                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Location</div>
+                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a driver.meta.location_coordinates (point-coordinates driver.location)}}</div>
+                                    </div>
+                                </div>
                             </div>
-                            <div class="text-xs truncate"><FaIcon @icon="location-dot" @size="xs" class="mr-0.5" />{{point-coordinates driver.location}}</div>
                         </marker.tooltip>
                     </layers.tracking-marker>
                 {{/each}}
@@ -121,29 +188,78 @@
                         as |marker|
                     >
                         <marker.popup @permanent={{false}} @sticky={{true}}>
-                            <div class="flex flex-row">
-                                <div class="w-14 mr-2">
-                                    <img src={{vehicle.photo_url}} alt={{vehicle.display_name}} class="rounded-md w-14 h-12 shadow-sm" />
+                            <div class="w-[280px] max-w-[calc(100vw-2rem)] rounded-lg bg-gray-900 shadow-lg p-1.5 text-white">
+                                <div class="flex items-center gap-1.5 text-xs font-semibold mb-1.5">
+                                    <span class="inline-block w-2 h-2 rounded-full {{if vehicle.online 'bg-green-400' 'bg-red-500'}}"></span>
+                                    <span>{{vehicle.displayName}}</span>
+                                    <div class="status-badge {{if vehicle.status (dasherize vehicle.status) 'default'}}-status-badge status-badge-{{if vehicle.status (dasherize vehicle.status) 'default'}} shadow-none ml-auto">
+                                        <span class="rounded-full text-[9px] px-1.5 py-0.5">{{n-a vehicle.meta.status_label}}</span>
+                                    </div>
                                 </div>
-                                <div class="flex-1">
-                                    <div class="text-xs font-semibold">{{vehicle.displayName}}</div>
-                                    <div class="text-xs">ID: {{n-a vehicle.public_id}}</div>
-                                    <div class="text-xs">Serial No: {{n-a vehicle.serial_number vehicle.vin vehicle.internal_id vehicle.id}}</div>
-                                    <div class="text-xs">Driver: {{n-a vehicle.driver_name}}</div>
-                                    <div class="text-xs">Status: <span class="{{if vehicle.online 'text-green-500' 'text-red-400'}}">{{if vehicle.online "Online" "Offline"}}</span></div>
-                                    <div class="text-xs truncate">Pos: {{point-coordinates vehicle.location}}</div>
+                                <div class="grid grid-cols-2 gap-1">
+                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
+                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Vehicle #</div>
+                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a vehicle.internal_id vehicle.public_id vehicle.plate_number vehicle.serial_number vehicle.vin}}</div>
+                                    </div>
+                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
+                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Driver</div>
+                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a vehicle.driver_name}}</div>
+                                    </div>
+                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
+                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Order</div>
+                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a vehicle.meta.current_order_reference}}</div>
+                                    </div>
+                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
+                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Speed</div>
+                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a vehicle.meta.speed_label}}</div>
+                                    </div>
+                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
+                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Heading</div>
+                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a vehicle.meta.heading_label}}</div>
+                                    </div>
+                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
+                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Location</div>
+                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a vehicle.meta.location_coordinates}}</div>
+                                    </div>
                                 </div>
                             </div>
                         </marker.popup>
                         <marker.tooltip @permanent={{false}} @sticky={{true}}>
-                            <div class="flex items-center space-x-1">
-                                <div class="text-xs font-semibold">{{vehicle.displayName}}</div>
-                                <div>•</div>
-                                <div class="text-xs {{if vehicle.online 'text-green-500' 'text-red-400'}}">{{if vehicle.online "Online" "Offline"}}</div>
+                            <div class="w-[280px] max-w-[calc(100vw-2rem)]">
+                                <div class="flex items-center gap-1.5 text-xs font-semibold mb-1.5">
+                                    <span class="inline-block w-2 h-2 rounded-full {{if vehicle.online 'bg-green-400' 'bg-red-500'}}"></span>
+                                    <span>{{vehicle.displayName}}</span>
+                                    <div class="status-badge {{if vehicle.status (dasherize vehicle.status) 'default'}}-status-badge status-badge-{{if vehicle.status (dasherize vehicle.status) 'default'}} shadow-none ml-auto">
+                                        <span class="rounded-full text-[9px] px-1.5 py-0.5">{{n-a vehicle.meta.status_label}}</span>
+                                    </div>
+                                </div>
+                                <div class="grid grid-cols-2 gap-1">
+                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
+                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Vehicle #</div>
+                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a vehicle.internal_id vehicle.public_id vehicle.plate_number vehicle.serial_number vehicle.vin}}</div>
+                                    </div>
+                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
+                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Driver</div>
+                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a vehicle.driver_name}}</div>
+                                    </div>
+                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
+                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Order</div>
+                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a vehicle.meta.current_order_reference}}</div>
+                                    </div>
+                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
+                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Speed</div>
+                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a vehicle.meta.speed_label}}</div>
+                                    </div>
+                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
+                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Heading</div>
+                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a vehicle.meta.heading_label}}</div>
+                                    </div>
+                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
+                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Location</div>
+                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a vehicle.meta.location_coordinates}}</div>
+                                    </div>
+                                </div>
                             </div>
-                            <div class="text-xs">ID: {{n-a vehicle.public_id}}</div>
-                            <div class="text-xs">Serial No: {{or vehicle.serial_number vehicle.vin vehicle.internal_id vehicle.id "-"}}</div>
-                            <div class="text-xs truncate"><FaIcon @icon="location-dot" @size="xs" class="mr-0.5" />{{point-coordinates vehicle.location}}</div>
                         </marker.tooltip>
                     </layers.tracking-marker>
                 {{/each}}
@@ -224,4 +340,4 @@
         @liveMap={{this}}
         @onDrawerReady={{this.setDrawerContext}}
     />
-{{/if}} --}}
+{{/if}} --}}

package/addon/components/orchestrator/phase-builder.hbs

@@ -130,6 +130,27 @@
                         </InputGroup>
                     {{/if}}
 
+                    {{#if this.shouldShowVehiclePacking}}
+                        <InputGroup @name={{t "orchestrator.vehicle-packing"}}>
+                            <div class="grid grid-cols-2 gap-1">
+                                {{#each this.vehiclePackingOptions as |opt|}}
+                                    <button
+                                        type="button"
+                                        class="flex items-center justify-center gap-1.5 px-2 py-1.5 rounded border text-xs transition-colors
+                                            {{if
+                                                (eq this.draftPhase.vehiclePacking opt.value)
+                                                'bg-indigo-50 dark:bg-indigo-900/30 border-indigo-400 dark:border-indigo-600 text-indigo-700 dark:text-indigo-300'
+                                                'border-gray-200 dark:border-gray-600 text-gray-600 dark:text-gray-400 hover:border-gray-300 dark:hover:border-gray-500'
+                                            }}"
+                                        {{on "click" (fn this.setDraftOption "vehiclePacking" opt.value)}}
+                                    >
+                                        {{opt.label}}
+                                    </button>
+                                {{/each}}
+                            </div>
+                        </InputGroup>
+                    {{/if}}
+
                     {{! Constraint toggles }}
                     <InputGroup @name={{t "orchestrator.constraints"}}>
                         <div class="space-y-1.5">

package/addon/components/orchestrator/phase-builder.js

@@ -51,6 +51,7 @@ export default class OrchestratorPhaseBuilderComponent extends Component {
             label: this.intl.t(`orchestrator.mode-${mode.replace(/_/g, '-')}`),
             engine: 'greedy',
             allocationStrategy: 'route_aware',
+            vehiclePacking: 'minimize_vehicles',
             orderStatuses: ['created'],
             balanceWorkload: false,
             respectSkills: true,
@@ -130,6 +131,7 @@ export default class OrchestratorPhaseBuilderComponent extends Component {
             ...this.draftPhase,
             engine,
             allocationStrategy: engine === 'capacity' ? 'capacity_only' : (this.draftPhase.allocationStrategy ?? 'route_aware'),
+            vehiclePacking: this.draftPhase.vehiclePacking ?? 'minimize_vehicles',
         };
     }
 
@@ -158,10 +160,21 @@ export default class OrchestratorPhaseBuilderComponent extends Component {
         ];
     }
 
+    get vehiclePackingOptions() {
+        return [
+            { value: 'minimize_vehicles', label: this.intl.t('orchestrator.vehicle-packing-minimize-vehicles') },
+            { value: 'balanced', label: this.intl.t('orchestrator.vehicle-packing-balanced') },
+        ];
+    }
+
     get shouldShowAllocationStrategy() {
         return this.draftPhase?.mode === 'assign_vehicles' && this.draftPhase?.engine === 'vroom';
     }
 
+    get shouldShowVehiclePacking() {
+        return this.shouldShowAllocationStrategy && this.draftPhase?.allocationStrategy === 'capacity_only';
+    }
+
     get shouldShowRouteOptions() {
         return this.draftPhase?.engine !== 'capacity' && this.draftPhase?.allocationStrategy !== 'capacity_only';
     }

package/addon/components/orchestrator-workbench.js

@@ -271,6 +271,7 @@ export default class OrchestratorWorkbenchComponent extends Component {
                 options: {
                     engine: phase.engine ?? 'greedy',
                     allocation_strategy: phase.allocationStrategy ?? 'route_aware',
+                    vehicle_packing: phase.vehiclePacking ?? 'minimize_vehicles',
                     balance_workload: phase.balanceWorkload ?? false,
                     respect_skills: phase.respectSkills ?? true,
                     respect_capacity: phase.respectCapacity ?? true,

package/addon/components/order/form.hbs

@@ -17,7 +17,7 @@
         <Order::Form::Details @resource={{@resource}} />
         <Order::Form::Route @resource={{@resource}} />
         <RegistryYield @registry="fleet-ops:component:order:form" as |RegistryComponent|>
-            <RegistryComponent @order={{@order}} />
+            <RegistryComponent @order={{@resource}} @resource={{@resource}} />
         </RegistryYield>
         <Order::Form::Payload @resource={{@resource}} />
         <Order::Form::ServiceRate @resource={{@resource}} />
@@ -25,4 +25,4 @@
         <Order::Form::Documents @resource={{@resource}} />
         <Order::Form::Metadata @resource={{@resource}} />
     {{/if}}
-</div>
+</div>

package/addon/components/widget/fleet-ops-key-metrics.hbs

@@ -1,19 +1,21 @@
-<div class="fleet-ops-key-metrics" ...attributes>
-    <div class="flex flex-col">
-        <div class="flex flex-row items-center justify-between px-4 py-2 border dark:border-gray-700 border-gray-200 dark:bg-gray-800 bg-gray-50 rounded-lg shadow-sm">
-            <span class="text-base font-bold text-black dark:text-gray-100">{{t "widget.key-metrics.title"}}</span>
-        </div>
+<div class="fleet-ops-key-metrics flex flex-col h-full" ...attributes>
+    <div class="flex flex-row items-center justify-between px-3 py-1.5 border dark:border-gray-700 border-gray-200 dark:bg-gray-800 bg-gray-50 rounded-t-md shadow-sm">
+        <span class="text-xs font-bold text-black dark:text-gray-100">{{t "widget.key-metrics.title"}}</span>
+        <span class="text-[9px] uppercase tracking-wide text-amber-500 font-bold">Legacy</span>
+    </div>
 
-        <div class="mt-4">
-            {{#if this.getDashboardMetrics.isRunning}}
-                <Spinner />
-            {{else}}
-                <div class="grid grid-cols-2 lg:grid-cols-12 gap-4">
-                    {{#each-in this.metrics as |title options|}}
-                        <Widget::Count @title={{smart-humanize title}} @options={{options}} class="lg:col-span-2 h-full" />
-                    {{/each-in}}
-                </div>
-            {{/if}}
-        </div>
+    <div class="flex-1 p-2.5 border border-t-0 dark:border-gray-700 border-gray-200 rounded-b-md bg-white dark:bg-gray-900 min-h-0">
+        {{#if this.getDashboardMetrics.isRunning}}
+            <div class="flex items-center justify-center h-full"><Spinner /></div>
+        {{else}}
+            <div class="grid grid-cols-2 lg:grid-cols-3 gap-1.5">
+                {{#each this.topMetrics as |entry|}}
+                    <div class="rounded-md border dark:border-gray-700 border-gray-200 dark:bg-gray-800 bg-gray-50 p-2 flex flex-col">
+                        <span class="text-[9px] uppercase tracking-wide text-gray-500 dark:text-gray-400 font-semibold truncate">{{smart-humanize entry.key}}</span>
+                        <span class="text-base font-bold text-black dark:text-gray-100 leading-tight mt-0.5 truncate">{{entry.formattedValue}}</span>
+                    </div>
+                {{/each}}
+            </div>
+        {{/if}}
     </div>
-</div>
+</div>

package/addon/components/widget/fleet-ops-key-metrics.js

@@ -2,6 +2,18 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { task } from 'ember-concurrency';
+import formatCurrency from '@fleetbase/ember-ui/utils/format-currency';
+import formatMeters from '@fleetbase/ember-ui/utils/format-meters';
+
+/** Subset shown in the compact legacy widget. Full 13 metrics still come back from
+ *  the API; users who want the rest should adopt the per-tile KPI widgets. */
+const TOP_KEYS = ['earnings', 'orders_completed', 'orders_in_progress', 'drivers_online', 'fuel_costs', 'total_distance_traveled'];
+
+const FORMATTERS = {
+    money: (v, currency) => formatCurrency(v ?? 0, currency || 'USD'),
+    meters: (v) => formatMeters(v ?? 0),
+    count: (v) => v ?? 0,
+};
 
 export default class WidgetFleetOpsKeyMetricsComponent extends Component {
     /**
@@ -89,4 +101,18 @@ export default class WidgetFleetOpsKeyMetricsComponent extends Component {
 
         return options;
     }
+
+    /**
+     * Pre-formatted top-N entries the compact template renders. Surfaces a fixed
+     * priority order rather than dumping every available metric — the per-tile
+     * KPI widgets cover the long tail for users who want everything.
+     */
+    get topMetrics() {
+        if (!this.metrics) return [];
+        return TOP_KEYS.filter((key) => this.metrics[key] !== undefined).map((key) => {
+            const { value, format } = this.metrics[key];
+            const formatter = FORMATTERS[format] ?? FORMATTERS.count;
+            return { key, formattedValue: formatter(value) };
+        });
+    }
 }

package/addon/components/widget/fuel-efficiency.hbs

@@ -0,0 +1,26 @@
+<div class="fleet-ops-widget fleet-ops-fuel-efficiency flex flex-col h-full {{@class}}" ...attributes>
+    <div class="flex items-center justify-between px-3 py-1.5 border dark:border-gray-700 border-gray-200 dark:bg-gray-800 bg-gray-50 rounded-t-md shadow-sm">
+        <span class="text-xs font-bold text-black dark:text-gray-100">{{t "widget.fuel-efficiency.title"}}</span>
+        <FaIcon @icon="gas-pump" class="text-gray-400" />
+    </div>
+
+    <div class="flex-1 flex flex-col p-2.5 border border-t-0 dark:border-gray-700 border-gray-200 rounded-b-md bg-white dark:bg-gray-900 min-h-0">
+        {{#if this.load.isRunning}}
+            <div class="flex items-center justify-center h-full"><Spinner /></div>
+        {{else if this.error}}
+            <div class="flex items-center justify-center h-full text-xs text-red-500">{{this.error}}</div>
+        {{else if this.data}}
+            <div class="flex items-baseline justify-between mb-1.5">
+                <span class="text-sm font-bold text-black dark:text-gray-100">
+                    {{format-currency this.data.summary.total_cost this.data.summary.currency}}
+                </span>
+                <span class="text-[10px] text-gray-500 dark:text-gray-400">
+                    {{format-currency this.data.summary.avg_cost_per_km this.data.summary.currency}}/km avg
+                </span>
+            </div>
+            <div class="flex-1 min-h-0">
+                <Chart @type="bar" @labels={{this.data.labels}} @datasets={{this.data.datasets}} @options={{this.chartOptions}} />
+            </div>
+        {{/if}}
+    </div>
+</div>