@fleetbase/fleetops-engine 0.6.47 → 0.6.49

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/map/order-list-overlay/order.hbs

@@ -27,10 +27,25 @@
             <div class="order-listing-row-progress">
                 <OrderProgressBar
                     @order={{@order}}
-                    @progress={{@order.tracker_data.progress_percentage}}
-                    @firstWaypointCompleted={{@order.tracker_data.first_waypoint_completed}}
-                    @lastWaypointCompleted={{@order.tracker_data.last_waypoint_completed}}
+                    @progress={{@order.tracker_data.progress.percentage}}
+                    @firstWaypointCompleted={{gt @order.tracker_data.progress.completed_stops 0}}
+                    @lastWaypointCompleted={{eq @order.tracker_data.progress.percentage 100}}
                 />
+                {{#if @order.tracker_data.insights.is_location_stale}}
+                    <div class="flex mt-1">
+                        <Badge @status="warning" @hideStatusDot={{true}}>Stale GPS</Badge>
+                    </div>
+                {{else if @order.tracker_data.fallback_provider}}
+                    <div class="flex mt-1">
+                        <Badge @status="warning" @hideStatusDot={{true}}>Fallback ETA</Badge>
+                    </div>
+                {{else if @order.tracker_data.confidence}}
+                    {{#unless (eq @order.tracker_data.confidence "high")}}
+                        <div class="flex mt-1">
+                            <Badge @status="warning" @hideStatusDot={{true}}>Low ETA Confidence</Badge>
+                        </div>
+                    {{/unless}}
+                {{/if}}
             </div>
             <div class="order-listing-row-body">
                 <div class="order-listing-row-body-address start">

package/addon/components/map/toolbar.hbs

@@ -42,8 +42,8 @@
             <button type="button" id="map-toolbar-view-orders-button" class="toolbar-button relative {{if unauthorized 'unauthorized'}}" {{on "click" this.orderListOverlay.toggle}}>
                 <div class="active-orders-count absolute top-0 right-0 -mr-2.5 -mt-1">
                     <div class="relative flex w-5 h-5 rounded-full">
-                        <div class="absolute inset-0 rounded-full w-5 h-5 text-xs bg-blue-500 opacity-75 {{if this.activeOrderCount 'animate-ping'}}"></div>
-                        <div class="relative inline-flex items-center justify-center rounded-full w-5 h-5 text-xs bg-blue-500 text-white z-10">{{this.activeOrderCount}}</div>
+                        <div class="absolute inset-0 rounded-full w-5 h-5 text-xs bg-blue-500 opacity-75 {{if this.displayedActiveOrderCount 'animate-ping'}}"></div>
+                        <div class="relative inline-flex items-center justify-center rounded-full w-5 h-5 text-xs bg-blue-500 text-white z-10">{{this.displayedActiveOrderCount}}</div>
                     </div>
                 </div>
                 <FaIcon @icon="layer-group" />

package/addon/components/map/toolbar.js

@@ -38,10 +38,18 @@ export default class MapToolbarComponent extends Component {
         return this.mapManager.zoomOut?.();
     }
 
+    get displayedActiveOrderCount() {
+        if (this.orderListOverlay.isOpen && this.orderListOverlay.loaded) {
+            return this.orderListOverlay.activeOrdersCount;
+        }
+
+        return this.activeOrderCount;
+    }
+
     @task *getActiveOrderCount() {
         try {
-            const count = yield this.fetch.get('fleet-ops/metrics', { discover: ['orders_in_progress'] });
-            this.activeOrderCount = count.orders_in_progress;
+            const count = yield this.fetch.get('fleet-ops/metrics', { discover: ['active_live_orders'] });
+            this.activeOrderCount = count.active_live_orders;
             return count;
         } catch (err) {
             debug('Failed to get active order count: ' + err.message);

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

@@ -109,6 +109,48 @@
                         />
                     </InputGroup>
 
+                    {{#if this.shouldShowAllocationStrategy}}
+                        <InputGroup @name={{t "orchestrator.allocation-strategy"}}>
+                            <div class="grid grid-cols-2 gap-1">
+                                {{#each this.allocationStrategyOptions 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.allocationStrategy 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 "allocationStrategy" opt.value)}}
+                                    >
+                                        {{opt.label}}
+                                    </button>
+                                {{/each}}
+                            </div>
+                        </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">
@@ -124,10 +166,12 @@
                                 <span class="text-xs text-gray-600 dark:text-gray-400">{{t "orchestrator.balance-workload"}}</span>
                                 <Toggle @isToggled={{this.draftPhase.balanceWorkload}} @onToggle={{fn this.setDraftOption "balanceWorkload"}} />
                             </div>
-                            <div class="flex items-center justify-between">
-                                <span class="text-xs text-gray-600 dark:text-gray-400">{{t "orchestrator.return-to-depot"}}</span>
-                                <Toggle @isToggled={{this.draftPhase.returnToDepot}} @onToggle={{fn this.setDraftOption "returnToDepot"}} />
-                            </div>
+                            {{#if this.shouldShowRouteOptions}}
+                                <div class="flex items-center justify-between">
+                                    <span class="text-xs text-gray-600 dark:text-gray-400">{{t "orchestrator.return-to-depot"}}</span>
+                                    <Toggle @isToggled={{this.draftPhase.returnToDepot}} @onToggle={{fn this.setDraftOption "returnToDepot"}} />
+                                </div>
+                            {{/if}}
                             <div class="flex items-center justify-between">
                                 <span class="text-xs text-gray-600 dark:text-gray-400">{{t "orchestrator.auto-commit"}}</span>
                                 <Toggle @isToggled={{this.draftPhase.autoCommit}} @onToggle={{fn this.setDraftOption "autoCommit"}} />
@@ -159,4 +203,4 @@
         </div>
     {{/if}}
 
-</div>
+</div>

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

@@ -50,6 +50,8 @@ export default class OrchestratorPhaseBuilderComponent extends Component {
             mode,
             label: this.intl.t(`orchestrator.mode-${mode.replace(/_/g, '-')}`),
             engine: 'greedy',
+            allocationStrategy: 'route_aware',
+            vehiclePacking: 'minimize_vehicles',
             orderStatuses: ['created'],
             balanceWorkload: false,
             respectSkills: true,
@@ -125,7 +127,12 @@ export default class OrchestratorPhaseBuilderComponent extends Component {
     }
 
     @action setDraftEngine(engine) {
-        this.draftPhase = { ...this.draftPhase, engine };
+        this.draftPhase = {
+            ...this.draftPhase,
+            engine,
+            allocationStrategy: engine === 'capacity' ? 'capacity_only' : (this.draftPhase.allocationStrategy ?? 'route_aware'),
+            vehiclePacking: this.draftPhase.vehiclePacking ?? 'minimize_vehicles',
+        };
     }
 
     @action toggleDraftOrderStatus(status) {
@@ -146,6 +153,32 @@ export default class OrchestratorPhaseBuilderComponent extends Component {
         return this.editingIndex !== null && this.draftPhase !== null;
     }
 
+    get allocationStrategyOptions() {
+        return [
+            { value: 'route_aware', label: this.intl.t('orchestrator.allocation-strategy-route-aware') },
+            { value: 'capacity_only', label: this.intl.t('orchestrator.allocation-strategy-capacity-only') },
+        ];
+    }
+
+    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';
+    }
+
     modeLabel(mode) {
         return this.modeOptions.find((m) => m.value === mode)?.label ?? mode;
     }

package/addon/components/orchestrator/resource-panel.hbs

@@ -187,6 +187,15 @@
                                     <Badge @status={{vehicle.status}}>{{smart-humanize vehicle.status}}</Badge>
                                 {{/if}}
                             </div>
+                            {{! Position }}
+                            <div
+                                class="flex items-center gap-1 text-xs truncate
+                                    {{if (this.hasPosition vehicle) 'text-green-500 dark:text-green-300' 'text-amber-600 dark:text-amber-300'}}"
+                                title={{if (this.hasPosition vehicle) (point-coordinates vehicle.location) (t "orchestrator.no-position")}}
+                            >
+                                <FaIcon @icon="location-dot" @size="xs" class="w-3 flex-shrink-0" />
+                                <span class="truncate">{{#if (this.hasPosition vehicle)}}{{point-coordinates vehicle.location}}{{else}}{{t "orchestrator.no-position"}}{{/if}}</span>
+                            </div>
                             {{! Assigned driver }}
                             <div class="flex items-center gap-1 text-xs text-gray-500 dark:text-gray-400">
                                 <FaIcon @icon="id-card-alt" @size="xs" class="w-3 flex-shrink-0" />
@@ -245,6 +254,15 @@
                         {{! All fields — always shown, "-" when absent }}
                         <div class="flex-1 min-w-0 space-y-0.5">
                             <div class="text-xs font-semibold truncate dark:text-white">{{or driver.name "-"}}</div>
+                            {{! Position }}
+                            <div
+                                class="flex items-center gap-1 text-xs truncate
+                                    {{if (this.hasPosition driver) 'text-green-500 dark:text-green-300' 'text-amber-600 dark:text-amber-300'}}"
+                                title={{if (this.hasPosition driver) (point-coordinates driver.location) (t "orchestrator.no-position")}}
+                            >
+                                <FaIcon @icon="location-dot" @size="xs" class="w-3 flex-shrink-0" />
+                                <span class="truncate">{{#if (this.hasPosition driver)}}{{point-coordinates driver.location}}{{else}}{{t "orchestrator.no-position"}}{{/if}}</span>
+                            </div>
                             {{! Vehicle }}
                             <div class="flex items-center gap-1 text-xs text-gray-500 dark:text-gray-400">
                                 <FaIcon @icon="truck" @size="xs" class="w-3 flex-shrink-0" />
@@ -298,4 +316,4 @@
         </div>
     {{/if}}
 
-</div>
+</div>

package/addon/components/orchestrator/resource-panel.js

@@ -99,6 +99,10 @@ export default class OrchestratorResourcePanelComponent extends Component {
         return [...(this.args.selectedDriverIds ?? new Set())];
     }
 
+    @action hasPosition(resource) {
+        return resource?.hasInvalidCoordinates === false;
+    }
+
     @action clearAllSelections() {
         this.args.onClearVehicles?.();
         this.args.onClearDrivers?.();

package/addon/components/orchestrator-workbench.js

@@ -68,7 +68,7 @@ export default class OrchestratorWorkbenchComponent extends Component {
 
     /**
      * User-composed list of phases to execute in sequence.
-     * Each phase: { id, mode, label, engine, orderStatuses, balanceWorkload,
+     * Each phase: { id, mode, label, engine, allocationStrategy, orderStatuses, balanceWorkload,
      *               respectSkills, respectCapacity, returnToDepot, autoCommit }
      */
     @tracked phases = [];
@@ -270,6 +270,8 @@ export default class OrchestratorWorkbenchComponent extends Component {
                 order_statuses: phase.orderStatuses ?? ['created'],
                 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,
@@ -399,6 +401,7 @@ export default class OrchestratorWorkbenchComponent extends Component {
             mode: 'allocate',
             label: 'Allocate',
             engine: 'greedy',
+            allocationStrategy: 'route_aware',
             orderStatuses: ['created'],
             balanceWorkload: false,
             respectSkills: true,

package/addon/components/order/details/purchase-rate.hbs

@@ -1,38 +1,35 @@
 {{#if @resource.purchase_rate}}
-    <ContentPanel @title={{t "order.fields.purchase-rate-panel-title"}} @isLoading={{@isLoading}} @open={{true}} @wrapperClass="bordered-top" @panelBodyWrapperClass="px-0i">
-        <div class="order-view-purchase-rate-table-wrapper next-table-wrapper no-scroll h-auto table-fluid rounded-b-md">
-            <table id="order-view-purchase-rate-table" class="table table-fixed flex-1">
+    <ContentPanel @title={{t "order.fields.purchase-rate-panel-title"}} @isLoading={{@isLoading}} @open={{true}} @wrapperClass="bordered-top">
+        <div class="overflow-x-auto">
+            <table class="w-full text-xs">
                 <thead>
-                    <tr>
-                        <th class="text-left">{{t "order.fields.breakdown"}}</th>
-                        <th>
-                            <div class="flex flex-row items-center justify-end">{{@resource.purchase_rate.service_quote.currency}}</div>
-                        </th>
+                    <tr class="border-b border-gray-200 dark:border-gray-700 text-[11px] uppercase tracking-wide text-gray-500 font-semibold">
+                        <th class="py-2 pr-2 text-left">{{t "order.fields.breakdown"}}</th>
+                        <th class="py-2 pl-2 text-right w-32">{{@resource.purchase_rate.service_quote.currency}}</th>
                     </tr>
                 </thead>
                 <tbody>
                     {{#each @resource.purchase_rate.service_quote.items as |item|}}
-                        <tr>
-                            <td>
-                                <span class="font-semibold">{{smart-humanize item.details}}</span>
+                        <tr class="border-b border-gray-100 dark:border-gray-800 last:border-0">
+                            <td class="py-1 pr-2 text-gray-700 dark:text-gray-300">
+                                {{smart-humanize item.details}}
                             </td>
-                            <td>
-                                <div class="flex flex-row items-center justify-end">{{format-currency item.amount @resource.purchase_rate.service_quote.currency}}</div>
+                            <td class="py-1 pl-2 text-right font-medium text-gray-700 dark:text-gray-300 whitespace-nowrap">
+                                {{format-currency item.amount @resource.purchase_rate.service_quote.currency}}
                             </td>
                         </tr>
                     {{/each}}
-                    <tr class="border-b-0">
-                        <td class="border-b-0">
-                            <span class="font-semibold">{{t "common.total"}}</span>
+                </tbody>
+                <tfoot class="border-t border-gray-200 dark:border-gray-700">
+                    <tr class="text-xs">
+                        <td class="pt-2 pb-1 pr-2 text-right text-[11px] uppercase tracking-wide font-bold text-gray-800 dark:text-gray-100">
+                            {{t "common.total"}}
                         </td>
-                        <td class="border-b-0">
-                            <div class="flex flex-row items-center justify-end">{{format-currency
-                                    @resource.purchase_rate.service_quote.amount
-                                    @resource.purchase_rate.service_quote.currency
-                                }}</div>
+                        <td class="pt-2 pb-1 pl-2 text-right font-bold text-gray-800 dark:text-gray-100 whitespace-nowrap">
+                            {{format-currency @resource.purchase_rate.service_quote.amount @resource.purchase_rate.service_quote.currency}}
                         </td>
                     </tr>
-                </tbody>
+                </tfoot>
             </table>
         </div>
     </ContentPanel>

package/addon/components/order/details/route.hbs

@@ -1,4 +1,29 @@
 <ContentPanel @title={{t "order.fields.route-panel-title"}} @open={{true}} @actionButtons={{this.actionButtons}} @wrapperClass="bordered-top">
+    {{#if this.hasRouteSummaryLine}}
+        <div class="mb-3 flex items-center justify-between gap-3 text-xs">
+            <div class="font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">All Stops - {{this.routeStopsCount}}</div>
+            <div class="flex min-w-0 items-center gap-2 font-semibold text-gray-700 dark:text-gray-200">
+                <span>
+                    {{#if this.hasTrackingDistance}}
+                        {{format-meters this.trackerData.route.distance_m}}
+                    {{else}}
+                        -
+                    {{/if}}
+                </span>
+                <span class="text-gray-300 dark:text-gray-600">-</span>
+                <span>
+                    {{#if this.trackingDurationSeconds}}
+                        {{format-duration this.trackingDurationSeconds}}
+                    {{else if this.hasCompletionEta}}
+                        {{format-date-fns this.trackerData.eta.completion_at "d MMM HH:mm"}}
+                    {{else}}
+                        -
+                    {{/if}}
+                </span>
+            </div>
+        </div>
+    {{/if}}
+
     {{#if @resource.hasIntermediateWaypoints}}
         <div>
             <RouteList @order={{@resource}} @eta={{@resource.eta}} @waypointActions={{hash viewWaypointLabel=(hash label=(t "order.fields.get-label") fn=this.viewWaypointLabel)}} />
@@ -19,4 +44,4 @@
             </div>
         </div>
     {{/if}}
-</ContentPanel>
+</ContentPanel>