@fleetbase/fleetops-engine 0.6.46 → 0.6.48

package/addon/components/admin/routing-settings.hbs

@@ -3,9 +3,80 @@
         Configure system-wide routing engine defaults here. Organizations can optionally override these values from their own routing settings.
     </InfoBlock>
 
+    <ContentPanel @title="Tracking Defaults" @open={{true}} @wrapperClass="bordered-classic">
+        <InputGroup @name="Default Tracking Provider" @helpText="Default provider for organization-level tracking intelligence unless an organization overrides it.">
+            <Select
+                class="w-full"
+                @value={{this.trackingProvider}}
+                @options={{this.trackingProviderOptions}}
+                @optionLabel="label"
+                @optionValue="value"
+                @placeholder="Select default tracking provider"
+                @onSelect={{fn (mut this.trackingProvider)}}
+            />
+        </InputGroup>
+        <InputGroup @name="Default Fallback Providers" @helpText="Providers used when the selected tracking provider is unavailable.">
+            <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                <PowerSelectMultiple
+                    @searchEnabled={{true}}
+                    @options={{this.trackingProviderOptions}}
+                    @selected={{this.selectedTrackingFallbackOptions}}
+                    @onChange={{this.setTrackingFallbacks}}
+                    @placeholder="Select default fallback providers"
+                    @triggerClass="form-select form-input form-input-sm flex-1"
+                    as |provider|
+                >
+                    {{provider.label}}
+                </PowerSelectMultiple>
+            </div>
+        </InputGroup>
+        <div class="flex justify-end">
+            <Button
+                @type="default"
+                @size="xs"
+                @icon={{if this.showTrackingAdvancedSettings "chevron-up" "chevron-down"}}
+                @text="Advanced Settings"
+                @onClick={{this.toggleTrackingAdvancedSettings}}
+            />
+        </div>
+        {{#if this.showTrackingAdvancedSettings}}
+            <div class="mt-4 space-y-4 rounded-md border border-gray-200 bg-gray-50 p-3 dark:border-gray-700 dark:bg-gray-800">
+                <InputGroup @name="Traffic-Aware ETA" @helpText="Use traffic-aware provider calculations when supported.">
+                    <Toggle @isToggled={{this.trackingTrafficEnabled}} @onToggle={{fn (mut this.trackingTrafficEnabled)}} />
+                </InputGroup>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <InputGroup @name="Summary Cache TTL">
+                        <Input @type="number" @value={{this.trackingCacheTtlSeconds}} min="15" max="300" class="form-input w-full" />
+                    </InputGroup>
+                    <InputGroup @name="Route Cache TTL">
+                        <Input @type="number" @value={{this.trackingRouteCacheTtlSeconds}} min="60" max="1800" class="form-input w-full" />
+                    </InputGroup>
+                    <InputGroup @name="Stale Location Threshold">
+                        <Input @type="number" @value={{this.trackingStaleLocationThresholdSeconds}} min="30" max="3600" class="form-input w-full" />
+                    </InputGroup>
+                    <InputGroup @name="Fallback Speed">
+                        <Input @type="number" @value={{this.trackingDefaultVehicleSpeedKph}} min="1" max="160" class="form-input w-full" />
+                    </InputGroup>
+                </div>
+            </div>
+        {{/if}}
+    </ContentPanel>
+
     <RegistryYield @registry="fleet-ops:component:admin:routing-settings" as |RegistryComponent|>
         <div>
             <RegistryComponent />
         </div>
     </RegistryYield>
 </div>
+
+<EmberWormhole @to="next-view-section-subheader-actions">
+    <Button
+        @type="primary"
+        @size="sm"
+        @icon="save"
+        @text="Save Changes"
+        @onClick={{perform this.saveSettings}}
+        @isLoading={{or this.saveSettings.isRunning this.loadSettings.isRunning}}
+        @disabled={{this.saveSettings.isRunning}}
+    />
+</EmberWormhole>

package/addon/components/admin/routing-settings.js

@@ -0,0 +1,124 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { task } from 'ember-concurrency';
+
+export default class AdminRoutingSettingsComponent extends Component {
+    @service fetch;
+    @service notifications;
+    @tracked trackingProvider = 'google_routes';
+    @tracked trackingFallbacks = ['osrm', 'calculated'];
+    @tracked trackingTrafficEnabled = true;
+    @tracked trackingCacheTtlSeconds = 60;
+    @tracked trackingRouteCacheTtlSeconds = 600;
+    @tracked trackingStaleLocationThresholdSeconds = 300;
+    @tracked trackingDefaultVehicleSpeedKph = 35;
+    @tracked showTrackingAdvancedSettings = false;
+    @tracked trackingProviderOptions = [
+        { value: 'google_routes', label: 'Google Routes' },
+        { value: 'osrm', label: 'OSRM' },
+        { value: 'calculated', label: 'Calculated' },
+    ];
+
+    constructor() {
+        super(...arguments);
+        this.loadSettings.perform();
+    }
+
+    @task *loadSettings() {
+        try {
+            const settings = yield this.fetch.get('fleet-ops/settings/admin-tracking-settings');
+            this.trackingProvider = settings.provider ?? 'google_routes';
+            this.trackingFallbacks = this.normalizeFallbacks(settings.fallbacks);
+            this.trackingTrafficEnabled = settings.traffic_enabled ?? true;
+            this.trackingCacheTtlSeconds = settings.cache_ttl_seconds ?? 60;
+            this.trackingRouteCacheTtlSeconds = settings.route_cache_ttl_seconds ?? 600;
+            this.trackingStaleLocationThresholdSeconds = settings.stale_location_threshold_seconds ?? 300;
+            this.trackingDefaultVehicleSpeedKph = settings.default_vehicle_speed_kph ?? 35;
+            this.trackingProviderOptions = this.normalizeProviderOptions(settings.providers ?? this.trackingProviderOptions);
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+
+    @task *saveSettings() {
+        try {
+            yield this.fetch.post('fleet-ops/settings/admin-tracking-settings', this.trackingSettingsPayload);
+            this.notifications.success('Tracking defaults saved.');
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+
+    get trackingSettingsPayload() {
+        return {
+            provider: this.trackingProvider,
+            fallbacks: this.normalizeFallbacks(this.trackingFallbacks),
+            traffic_enabled: this.trackingTrafficEnabled,
+            cache_ttl_seconds: Number(this.trackingCacheTtlSeconds) || 60,
+            route_cache_ttl_seconds: Number(this.trackingRouteCacheTtlSeconds) || 600,
+            stale_location_threshold_seconds: Number(this.trackingStaleLocationThresholdSeconds) || 300,
+            default_vehicle_speed_kph: Number(this.trackingDefaultVehicleSpeedKph) || 35,
+        };
+    }
+
+    normalizeFallbacks(fallbacks) {
+        if (Array.isArray(fallbacks)) {
+            return fallbacks
+                .map((fallback) => this.optionValue(fallback))
+                .map((fallback) => String(fallback).trim())
+                .filter(Boolean);
+        }
+
+        return String(fallbacks ?? '')
+            .split(',')
+            .map((fallback) => fallback.trim())
+            .filter(Boolean);
+    }
+
+    get selectedTrackingFallbackOptions() {
+        const selected = new Set(this.normalizeFallbacks(this.trackingFallbacks));
+
+        return this.trackingProviderOptions.filter((option) => selected.has(this.optionValue(option)));
+    }
+
+    normalizeProviderOptions(options = []) {
+        return options.map((option) => {
+            const value = this.optionValue(option);
+            const label = option?.label ?? option?.name ?? this.providerLabel(value);
+
+            return {
+                ...option,
+                key: option?.key ?? value,
+                name: option?.name ?? label,
+                value,
+                label,
+            };
+        });
+    }
+
+    providerLabel(value) {
+        if (value === 'osrm') {
+            return 'OSRM';
+        }
+
+        return String(value ?? '')
+            .replace(/[_-]+/g, ' ')
+            .replace(/\s+/g, ' ')
+            .trim()
+            .replace(/\b\w/g, (character) => character.toUpperCase());
+    }
+
+    optionValue(option) {
+        return typeof option === 'object' && option !== null ? (option.value ?? option.key) : option;
+    }
+
+    @action setTrackingFallbacks(options) {
+        this.trackingFallbacks = this.normalizeFallbacks(options);
+    }
+
+    @action toggleTrackingAdvancedSettings() {
+        this.showTrackingAdvancedSettings = !this.showTrackingAdvancedSettings;
+    }
+}

package/addon/components/customer/orders.js

@@ -138,7 +138,7 @@ export default class CustomerOrdersComponent extends Component {
         // start loading order tracking activity
         order.loadTrackingActivity();
         this.urlSearchParams.addParamToCurrentUrl('order', order.public_id);
-        const driverCurrentLocation = order.get('tracker_data.driver_current_location');
+        const driverCurrentLocation = order.get('tracker_data.driver.location');
         if (driverCurrentLocation) {
             this.latitude = driverCurrentLocation.coordinates[1];
             this.longitude = driverCurrentLocation.coordinates[0];

package/addon/components/display-place.hbs

@@ -10,7 +10,7 @@
             </span>
         </div>
     {{else}}
-        {{#if (and @waypointActions (not @hideBadges))}}
+        {{#if @waypointActions}}
             <div class="flex flex-row item-center space-x-2 {{if (or this.place.status_code @eta) 'mb-2'}}">
                 {{#unless @hideBadges}}
                     {{#if this.place.status_code}}

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,27 @@
                         />
                     </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}}
+
                     {{! Constraint toggles }}
                     <InputGroup @name={{t "orchestrator.constraints"}}>
                         <div class="space-y-1.5">
@@ -124,10 +145,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 +182,4 @@
         </div>
     {{/if}}
 
-</div>
+</div>

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

@@ -50,6 +50,7 @@ export default class OrchestratorPhaseBuilderComponent extends Component {
             mode,
             label: this.intl.t(`orchestrator.mode-${mode.replace(/_/g, '-')}`),
             engine: 'greedy',
+            allocationStrategy: 'route_aware',
             orderStatuses: ['created'],
             balanceWorkload: false,
             respectSkills: true,
@@ -125,7 +126,11 @@ 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'),
+        };
     }
 
     @action toggleDraftOrderStatus(status) {
@@ -146,6 +151,21 @@ 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 shouldShowAllocationStrategy() {
+        return this.draftPhase?.mode === 'assign_vehicles' && this.draftPhase?.engine === 'vroom';
+    }
+
+    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,7 @@ export default class OrchestratorWorkbenchComponent extends Component {
                 order_statuses: phase.orderStatuses ?? ['created'],
                 options: {
                     engine: phase.engine ?? 'greedy',
+                    allocation_strategy: phase.allocationStrategy ?? 'route_aware',
                     balance_workload: phase.balanceWorkload ?? false,
                     respect_skills: phase.respectSkills ?? true,
                     respect_capacity: phase.respectCapacity ?? true,
@@ -399,6 +400,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>

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

@@ -4,6 +4,7 @@ import { action } from '@ember/object';
 import { debug } from '@ember/debug';
 import { task } from 'ember-concurrency';
 import { applyOptimizedIntermediateWaypoints, buildRouteOptimizationInput, canOptimizeIntermediateWaypoints } from '../../../utils/order-route-editing';
+import { buildRoutePointsFromPayload } from '../../../utils/route-visualization';
 
 export default class OrderDetailsRouteComponent extends Component {
     @service orderActions;
@@ -15,6 +16,11 @@ export default class OrderDetailsRouteComponent extends Component {
     @service hostRouter;
     @service intl;
 
+    constructor() {
+        super(...arguments);
+        this.loadTrackerData.perform();
+    }
+
     get actionButtons() {
         return [
             this.showOptimizationSelect
@@ -56,6 +62,50 @@ export default class OrderDetailsRouteComponent extends Component {
         return this.routeOptimization.availableEngines.length > 1;
     }
 
+    get trackerData() {
+        return this.args.resource?.tracker_data;
+    }
+
+    get hasTrackingRouteSummary() {
+        return Boolean(this.trackerData?.route || this.trackerData?.eta);
+    }
+
+    get hasTrackingDistance() {
+        return this.trackerData?.route?.distance_m !== null && this.trackerData?.route?.distance_m !== undefined;
+    }
+
+    get hasCompletionEta() {
+        return Boolean(this.trackerData?.eta?.completion_at);
+    }
+
+    get routeStopsCount() {
+        return buildRoutePointsFromPayload(this.args.resource?.payload).length;
+    }
+
+    get hasTrackingDuration() {
+        return this.trackerData?.route?.duration_in_traffic_s !== null && this.trackerData?.route?.duration_in_traffic_s !== undefined;
+    }
+
+    get trackingDurationSeconds() {
+        return this.trackerData?.route?.duration_in_traffic_s ?? this.trackerData?.route?.duration_s;
+    }
+
+    get hasRouteSummaryLine() {
+        return this.hasTrackingRouteSummary || this.routeStopsCount > 0;
+    }
+
+    @task *loadTrackerData() {
+        if (!this.args.resource || this.args.resource.tracker_data || typeof this.args.resource.loadTrackerData !== 'function') {
+            return;
+        }
+
+        try {
+            yield this.args.resource.loadTrackerData();
+        } catch (err) {
+            debug('Failed to load order tracker data for route: ' + err.message);
+        }
+    }
+
     @task *optimizeRouteWithService(service) {
         const order = this.args.resource;
         const optimizationInput = buildRouteOptimizationInput(order);