@fleetbase/fleetops-engine 0.6.47 → 0.6.48

package/addon/components/order/kanban-card.hbs

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

package/addon/components/order-list-overlay/order.hbs

@@ -26,10 +26,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/order-progress-card.hbs

@@ -16,11 +16,26 @@
     <div class="order-progress-card-progress">
         <OrderProgressBar
             @order={{this.order}}
-            @progress={{this.order.tracker_data.progress_percentage}}
-            @firstWaypointCompleted={{this.order.tracker_data.first_waypoint_completed}}
-            @lastWaypointCompleted={{this.order.tracker_data.last_waypoint_completed}}
+            @progress={{this.order.tracker_data.progress.percentage}}
+            @firstWaypointCompleted={{gt this.order.tracker_data.progress.completed_stops 0}}
+            @lastWaypointCompleted={{eq this.order.tracker_data.progress.percentage 100}}
         />
     </div>
+    {{#if this.order.tracker_data.insights.is_location_stale}}
+        <div class="flex px-1 mt-1">
+            <Badge @status="warning" @hideStatusDot={{true}}>Stale GPS</Badge>
+        </div>
+    {{else if this.order.tracker_data.fallback_provider}}
+        <div class="flex px-1 mt-1">
+            <Badge @status="warning" @hideStatusDot={{true}}>Fallback ETA</Badge>
+        </div>
+    {{else if this.order.tracker_data.confidence}}
+        {{#unless (eq this.order.tracker_data.confidence "high")}}
+            <div class="flex px-1 mt-1">
+                <Badge @status="warning" @hideStatusDot={{true}}>Low ETA Confidence</Badge>
+            </div>
+        {{/unless}}
+    {{/if}}
     <div class="order-progress-card-details">
         <div class="order-progress-card-details-address start">
             {{#if this.order.payload.isMultiDrop}}
@@ -41,11 +56,11 @@
         <div class="grid grid-cols-2 gap-2 mt-1 px-1">
             <div class="flex flex-col text-xs">
                 <div class="font-semibold">{{t "order.fields.current-eta"}}:</div>
-                <div class="">{{format-duration this.order.tracker_data.current_destination_eta}}</div>
+                <div class="">{{format-duration this.order.tracker_data.eta.active_stop_seconds}}</div>
             </div>
             <div class="flex flex-col text-xs">
                 <div class="font-semibold">{{t "order.fields.ect"}}:</div>
-                <div class="">{{n-a this.order.tracker_data.estimated_completion_time_formatted}}</div>
+                <div class="">{{n-a this.order.tracker_data.eta.completion_at}}</div>
             </div>
             <div class="flex flex-col text-xs">
                 <div class="font-semibold">{{t "order.fields.driver"}}:</div>
@@ -57,7 +72,7 @@
             </div>
             <div class="flex flex-col text-xs">
                 <div class="font-semibold">{{t "order.fields.current-destination"}}:</div>
-                <div class="truncate">{{n-a this.order.tracker_data.current_destination.address}}</div>
+                <div class="truncate">{{n-a this.order.tracker_data.active_stop.address}}</div>
             </div>
         </div>
     </div>

package/addon/components/order-tracking-lookup.hbs

@@ -90,27 +90,27 @@
                                     <div class="order-progress-card-progress">
                                         <OrderProgressBar
                                             @order={{this.order}}
-                                            @progress={{this.order.tracker_data.progress_percentage}}
-                                            @firstWaypointCompleted={{this.order.tracker_data.first_waypoint_completed}}
-                                            @lastWaypointCompleted={{this.order.tracker_data.last_waypoint_completed}}
+                                            @progress={{this.order.tracker_data.progress.percentage}}
+                                            @firstWaypointCompleted={{gt this.order.tracker_data.progress.completed_stops 0}}
+                                            @lastWaypointCompleted={{eq this.order.tracker_data.progress.percentage 100}}
                                         />
                                     </div>
                                     <div class="grid grid-cols-2 gap-2 mt-1 px-1">
                                         <div class="flex flex-col text-xs">
                                             <div class="font-semibold">Current ETA:</div>
-                                            <div class="">{{format-duration this.order.tracker_data.current_destination_eta}}</div>
+                                            <div class="">{{format-duration this.order.tracker_data.eta.active_stop_seconds}}</div>
                                         </div>
                                         <div class="flex flex-col text-xs">
                                             <div class="font-semibold">ECT:</div>
-                                            <div class="">{{n-a this.order.tracker_data.estimated_completion_time_formatted}}</div>
+                                            <div class="">{{n-a this.order.tracker_data.eta.completion_at}}</div>
                                         </div>
                                         <div class="col-span-2 flex flex-col text-xs">
                                             <div class="font-semibold">Current Destination:</div>
-                                            <div class="truncate">{{n-a this.order.tracker_data.current_destination.address}}</div>
+                                            <div class="truncate">{{n-a this.order.tracker_data.active_stop.address}}</div>
                                         </div>
                                         <div class="col-span-2 flex flex-col text-xs">
                                             <div class="font-semibold">Next Destination:</div>
-                                            <div class="truncate">{{n-a this.order.tracker_data.next_destination.address}}</div>
+                                            <div class="truncate">{{n-a this.order.tracker_data.next_stop.address}}</div>
                                         </div>
                                     </div>
                                 </div>

package/addon/components/order-tracking-lookup.js

@@ -50,7 +50,7 @@ export default class OrderTrackingLookupComponent extends Component {
         try {
             this.order = yield this.fetch.get('fleet-ops/lookup', { tracking: this.trackingNumber }, { normalizeToEmberData: true, normalizeModelType: 'order' });
             this.urlSearchParams.addParamToCurrentUrl('order', this.order.tracking);
-            const driverCurrentLocation = this.order.get('tracker_data.driver_current_location');
+            const driverCurrentLocation = this.order.get('tracker_data.driver.location');
             if (driverCurrentLocation) {
                 this.latitude = driverCurrentLocation.coordinates[1];
                 this.longitude = driverCurrentLocation.coordinates[0];

package/addon/components/route-list.hbs

@@ -2,10 +2,29 @@
     {{#if this.firstStop}}
         <div class="order-route-stop {{@routeStopClass}}">
             <div class="order-route-stop-index {{@routeStopIndexClass}}">
-                <div class="index-count fleetops-route-stop-badge" style={{this.firstStop.badgeStyle}}>{{this.firstStop.label}}</div>
+                <div
+                    class="index-count fleetops-route-stop-badge {{if this.firstStop.active 'fleetops-route-stop-badge--active'}}"
+                    style={{this.firstStop.badgeStyle}}
+                >{{this.firstStop.label}}</div>
             </div>
             <div class="order-route-location {{@routeLocationClass}} dark:text-gray-100">
-                <DisplayPlace @place={{this.firstStop.place}} @eta={{get @eta this.firstStop.place.id}} @waypointActions={{@waypointActions}} />
+                <div class="mb-2 flex flex-wrap items-center gap-1.5">
+                    {{#if this.firstStop.place.status_code}}
+                        <Badge @status={{this.firstStop.place.status_code}} />
+                    {{/if}}
+                    {{#if this.firstStop.completed}}
+                        <Badge @status="success" @hideStatusDot={{true}}>Completed</Badge>
+                    {{else if this.firstStop.active}}
+                        <Badge @status="indigo" @hideStatusDot={{true}}>Current Stop</Badge>
+                    {{/if}}
+                    {{#if this.firstStop.etaSeconds}}
+                        <Badge @status="pending" @hideStatusDot={{true}}><span class="font-bold">ETA:</span> {{format-duration this.firstStop.etaSeconds}}</Badge>
+                    {{/if}}
+                    {{#if this.firstStop.etaAt}}
+                        <Badge @status="pending" @hideStatusDot={{true}}>{{format-date-fns this.firstStop.etaAt "d MMM HH:mm"}}</Badge>
+                    {{/if}}
+                </div>
+                <DisplayPlace @place={{this.firstStop.place}} @waypointActions={{@waypointActions}} @hideBadges={{true}} />
             </div>
         </div>
     {{/if}}
@@ -24,10 +43,26 @@
             {{#each this.middleStops as |stop|}}
                 <div class="order-route-stop {{@routeStopClass}}">
                     <div class="order-route-stop-index {{@routeStopIndexClass}}">
-                        <div class="index-count fleetops-route-stop-badge" style={{stop.badgeStyle}}>{{stop.label}}</div>
+                        <div class="index-count fleetops-route-stop-badge {{if stop.active 'fleetops-route-stop-badge--active'}}" style={{stop.badgeStyle}}>{{stop.label}}</div>
                     </div>
                     <div class="order-route-location {{@routeLocationClass}} dark:text-gray-100">
-                        <DisplayPlace @place={{stop.place}} @eta={{get @eta stop.place.id}} @waypointActions={{@waypointActions}} />
+                        <div class="mb-2 flex flex-wrap items-center gap-1.5">
+                            {{#if stop.place.status_code}}
+                                <Badge @status={{stop.place.status_code}} />
+                            {{/if}}
+                            {{#if stop.completed}}
+                                <Badge @status="success" @hideStatusDot={{true}}>Completed</Badge>
+                            {{else if stop.active}}
+                                <Badge @status="indigo" @hideStatusDot={{true}}>Current Stop</Badge>
+                            {{/if}}
+                            {{#if stop.etaSeconds}}
+                                <Badge @status="pending" @hideStatusDot={{true}}><span class="font-bold">ETA:</span> {{format-duration stop.etaSeconds}}</Badge>
+                            {{/if}}
+                            {{#if stop.etaAt}}
+                                <Badge @status="pending" @hideStatusDot={{true}}>{{format-date-fns stop.etaAt "d MMM HH:mm"}}</Badge>
+                            {{/if}}
+                        </div>
+                        <DisplayPlace @place={{stop.place}} @waypointActions={{@waypointActions}} @hideBadges={{true}} />
                     </div>
                 </div>
             {{/each}}
@@ -36,10 +71,26 @@
         {{#each this.middleStops as |stop|}}
             <div class="order-route-stop {{@routeStopClass}}">
                 <div class="order-route-stop-index {{@routeStopIndexClass}}">
-                    <div class="index-count fleetops-route-stop-badge" style={{stop.badgeStyle}}>{{stop.label}}</div>
+                    <div class="index-count fleetops-route-stop-badge {{if stop.active 'fleetops-route-stop-badge--active'}}" style={{stop.badgeStyle}}>{{stop.label}}</div>
                 </div>
                 <div class="order-route-location {{@routeLocationClass}} dark:text-gray-100">
-                    <DisplayPlace @place={{stop.place}} @eta={{get @eta stop.place.id}} @waypointActions={{@waypointActions}} />
+                    <div class="mb-2 flex flex-wrap items-center gap-1.5">
+                        {{#if stop.place.status_code}}
+                            <Badge @status={{stop.place.status_code}} />
+                        {{/if}}
+                        {{#if stop.completed}}
+                            <Badge @status="success" @hideStatusDot={{true}}>Completed</Badge>
+                        {{else if stop.active}}
+                            <Badge @status="indigo" @hideStatusDot={{true}}>Current Stop</Badge>
+                        {{/if}}
+                        {{#if stop.etaSeconds}}
+                            <Badge @status="pending" @hideStatusDot={{true}}><span class="font-bold">ETA:</span> {{format-duration stop.etaSeconds}}</Badge>
+                        {{/if}}
+                        {{#if stop.etaAt}}
+                            <Badge @status="pending" @hideStatusDot={{true}}>{{format-date-fns stop.etaAt "d MMM HH:mm"}}</Badge>
+                        {{/if}}
+                    </div>
+                    <DisplayPlace @place={{stop.place}} @waypointActions={{@waypointActions}} @hideBadges={{true}} />
                 </div>
             </div>
         {{/each}}
@@ -48,10 +99,29 @@
     {{#if this.lastStop}}
         <div class="order-route-stop {{@routeStopClass}}">
             <div class="order-route-stop-index {{@routeStopIndexClass}}">
-                <div class="index-count fleetops-route-stop-badge" style={{this.lastStop.badgeStyle}}>{{this.lastStop.label}}</div>
+                <div
+                    class="index-count fleetops-route-stop-badge {{if this.lastStop.active 'fleetops-route-stop-badge--active'}}"
+                    style={{this.lastStop.badgeStyle}}
+                >{{this.lastStop.label}}</div>
             </div>
             <div class="order-route-location {{@routeLocationClass}} dark:text-gray-100">
-                <DisplayPlace @place={{this.lastStop.place}} @eta={{get @eta this.lastStop.place.id}} @waypointActions={{@waypointActions}} />
+                <div class="mb-2 flex flex-wrap items-center gap-1.5">
+                    {{#if this.lastStop.place.status_code}}
+                        <Badge @status={{this.lastStop.place.status_code}} />
+                    {{/if}}
+                    {{#if this.lastStop.completed}}
+                        <Badge @status="success" @hideStatusDot={{true}}>Completed</Badge>
+                    {{else if this.lastStop.active}}
+                        <Badge @status="indigo" @hideStatusDot={{true}}>Current Stop</Badge>
+                    {{/if}}
+                    {{#if this.lastStop.etaSeconds}}
+                        <Badge @status="pending" @hideStatusDot={{true}}><span class="font-bold">ETA:</span> {{format-duration this.lastStop.etaSeconds}}</Badge>
+                    {{/if}}
+                    {{#if this.lastStop.etaAt}}
+                        <Badge @status="pending" @hideStatusDot={{true}}>{{format-date-fns this.lastStop.etaAt "d MMM HH:mm"}}</Badge>
+                    {{/if}}
+                </div>
+                <DisplayPlace @place={{this.lastStop.place}} @waypointActions={{@waypointActions}} @hideBadges={{true}} />
             </div>
         </div>
     {{/if}}

package/addon/components/route-list.js

@@ -16,12 +16,22 @@ export default class RouteListComponent extends Component {
     get routeStops() {
         const routePoints = buildRoutePointsFromPayload(this.args.order?.payload);
 
-        return routePoints.map((routePoint) => ({
-            routePoint,
-            place: routePoint.place,
-            badgeStyle: this.badgeStyleForStop(routePoint),
-            ...describeRoutePoint(routePoint, this.routeColor),
-        }));
+        return routePoints
+            .map((routePoint) => ({
+                routePoint,
+                place: routePoint.place,
+                badgeStyle: this.badgeStyleForStop(routePoint),
+                trackingStop: this.trackingStopFor(routePoint.place),
+                routeLeg: this.routeLegFor(routePoint.place),
+                ...describeRoutePoint(routePoint, this.routeColor),
+            }))
+            .map((stop) => ({
+                ...stop,
+                etaSeconds: stop.routeLeg?.eta_seconds ?? stop.routeLeg?.duration_in_traffic_s ?? stop.routeLeg?.duration_s ?? this.legacyEtaFor(stop.place),
+                etaAt: stop.routeLeg?.eta_at,
+                completed: Boolean(stop.trackingStop?.completed),
+                active: this.matchesStop(stop.trackingStop, this.args.order?.tracker_data?.active_stop),
+            }));
     }
 
     get firstStop() {
@@ -52,6 +62,38 @@ export default class RouteListComponent extends Component {
         return `background-color: ${markerColor}; color: ${textColor};`;
     }
 
+    trackingStopFor(place) {
+        const stops = this.args.order?.tracker_data?.stops ?? [];
+
+        return stops.find((stop) => this.matchesPlace(stop, place)) ?? null;
+    }
+
+    routeLegFor(place) {
+        const legs = this.args.order?.tracker_data?.route?.legs ?? [];
+
+        return legs.find((leg) => this.matchesPlace(leg.stop, place)) ?? null;
+    }
+
+    legacyEtaFor(place) {
+        return this.args.eta?.[place?.id] ?? this.args.eta?.[place?.uuid] ?? this.args.eta?.[place?.public_id] ?? null;
+    }
+
+    matchesPlace(stop, place) {
+        if (!stop || !place) {
+            return false;
+        }
+
+        return stop.uuid === place.uuid || stop.public_id === place.public_id || stop.id === place.id;
+    }
+
+    matchesStop(stop, activeStop) {
+        if (!stop || !activeStop) {
+            return false;
+        }
+
+        return stop.uuid === activeStop.uuid || stop.public_id === activeStop.public_id;
+    }
+
     @action toggleWaypointsCollapse() {
         this.isWaypointsCollapsed = !this.isWaypointsCollapsed;
     }

package/addon/components/tracking-stop-progress.hbs

@@ -0,0 +1,45 @@
+<div class="tracking-stop-progress" ...attributes>
+    <div class="tracking-stop-progress__header">
+        <div class="tracking-stop-progress__title">Between Stops</div>
+        <div class="tracking-stop-progress__count">
+            <span class="font-semibold text-gray-800 dark:text-gray-100">{{this.completedCount}}</span>
+            /
+            {{this.totalCount}}
+            stops
+        </div>
+    </div>
+
+    <div class="tracking-stop-progress__scroller">
+        <div class="tracking-stop-progress__rail">
+            {{#each this.stops as |stop|}}
+                <div class="tracking-stop-progress__stop">
+                    <div class="tracking-stop-progress__line">
+                        {{#unless stop.isFirst}}
+                            <div class="tracking-stop-progress__connector"></div>
+                        {{/unless}}
+
+                        <div
+                            class="tracking-stop-progress__dot
+                                {{if stop.completed 'tracking-stop-progress__dot--done'}}
+                                {{if stop.active 'tracking-stop-progress__dot--active'}}
+                                {{if stop.pending 'tracking-stop-progress__dot--pending'}}"
+                            title={{stop.title}}
+                        >
+                            {{stop.label}}
+                        </div>
+                        <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
+                            <InputInfo class="max-w-xs">
+                                <div class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">{{stop.title}}</div>
+                                <DisplayPlace @place={{stop.place}} @addressClass="mt-1 text-xs leading-4 text-gray-900 dark:text-gray-100 not-italic" @hideBadges={{true}} />
+                            </InputInfo>
+                        </Attach::Tooltip>
+
+                        {{#unless stop.isLast}}
+                            <div class="tracking-stop-progress__connector"></div>
+                        {{/unless}}
+                    </div>
+                </div>
+            {{/each}}
+        </div>
+    </div>
+</div>

package/addon/components/tracking-stop-progress.js

@@ -0,0 +1,79 @@
+import Component from '@glimmer/component';
+
+export default class TrackingStopProgressComponent extends Component {
+    get stops() {
+        const stops = this.args.stops ?? [];
+        const activeStop = this.args.activeStop;
+
+        return stops.map((stop, index) => {
+            const isActive = this.matches(stop, activeStop);
+            const completed = Boolean(stop.completed);
+
+            return {
+                ...stop,
+                index: index + 1,
+                isFirst: index === 0,
+                isLast: index === stops.length - 1,
+                label: this.labelFor(stop, index),
+                title: this.titleFor(stop, index),
+                locationLabel: this.locationLabelFor(stop, index),
+                place: this.placeFor(stop),
+                completed,
+                active: isActive,
+                pending: !completed && !isActive,
+            };
+        });
+    }
+
+    get completedCount() {
+        return this.stops.filter((stop) => stop.completed).length;
+    }
+
+    get totalCount() {
+        return this.stops.length;
+    }
+
+    labelFor(stop, index) {
+        if (stop.type === 'pickup') {
+            return 'P';
+        }
+
+        if (stop.type === 'dropoff') {
+            return 'D';
+        }
+
+        return String(index + 1);
+    }
+
+    titleFor(stop, index) {
+        if (stop.type === 'pickup') {
+            return 'Pickup';
+        }
+
+        if (stop.type === 'dropoff') {
+            return 'Dropoff';
+        }
+
+        return `Stop ${index + 1}`;
+    }
+
+    locationLabelFor(stop, index) {
+        return stop.city || stop.name || stop.address || this.titleFor(stop, index);
+    }
+
+    placeFor(stop) {
+        return {
+            ...stop,
+            street1: stop.street1 || stop.address || stop.name,
+            country_name: stop.country_name || stop.country,
+        };
+    }
+
+    matches(stop, activeStop) {
+        if (!stop || !activeStop) {
+            return false;
+        }
+
+        return stop.uuid === activeStop.uuid || stop.public_id === activeStop.public_id;
+    }
+}

package/addon/controllers/settings/routing.js

@@ -1,6 +1,7 @@
 import Controller from '@ember/controller';
 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 SettingsRoutingController extends Controller {
@@ -12,6 +13,19 @@ export default class SettingsRoutingController extends Controller {
     @tracked displayEngine = 'osrm';
     @tracked optimizationEngine = 'osrm';
     @tracked routingUnit = 'km';
+    @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' },
+    ];
     @tracked routingUnitOptions = [
         { label: 'Kilometers', value: 'km' },
         { label: 'Miles', value: 'mi' },
@@ -39,6 +53,8 @@ export default class SettingsRoutingController extends Controller {
                 optimization_engine: this.optimizationEngine,
                 unit: this.routingUnit,
             });
+            const trackingSettings = this.trackingSettingsPayload;
+            yield this.fetch.post('fleet-ops/settings/tracking-settings', trackingSettings);
             yield this.performAdditionalSaveTasks();
             // Save in local memory too
             this.currentUser.setOption('routing', {
@@ -47,7 +63,8 @@ export default class SettingsRoutingController extends Controller {
                 routing_optimization_engine: this.optimizationEngine,
                 unit: this.routingUnit,
             });
-            this.notifications.success('Routing setting saved.');
+            this.currentUser.setOption('tracking', trackingSettings);
+            this.notifications.success('Routing and tracking settings saved.');
         } catch (error) {
             this.notifications.serverError(error);
         }
@@ -64,11 +81,91 @@ export default class SettingsRoutingController extends Controller {
             this.displayEngine = display_engine ?? router ?? 'osrm';
             this.optimizationEngine = optimization_engine ?? display_engine ?? router ?? 'osrm';
             this.routingUnit = unit;
+            const trackingSettings = yield this.fetch.get('fleet-ops/settings/tracking-settings');
+            this.trackingProvider = trackingSettings.provider ?? 'google_routes';
+            this.trackingFallbacks = this.normalizeFallbacks(trackingSettings.fallbacks);
+            this.trackingTrafficEnabled = trackingSettings.traffic_enabled ?? true;
+            this.trackingCacheTtlSeconds = trackingSettings.cache_ttl_seconds ?? 60;
+            this.trackingRouteCacheTtlSeconds = trackingSettings.route_cache_ttl_seconds ?? 600;
+            this.trackingStaleLocationThresholdSeconds = trackingSettings.stale_location_threshold_seconds ?? 300;
+            this.trackingDefaultVehicleSpeedKph = trackingSettings.default_vehicle_speed_kph ?? 35;
+            this.trackingProviderOptions = this.normalizeProviderOptions(trackingSettings.providers ?? this.trackingProviderOptions);
         } catch (error) {
             this.notifications.serverError(error);
         }
     }
 
+    get selectedTrackingFallbackOptions() {
+        const selected = new Set(this.normalizeFallbacks(this.trackingFallbacks));
+
+        return this.trackingProviderOptions.filter((option) => selected.has(this.optionValue(option)));
+    }
+
+    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);
+    }
+
+    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;
+    }
+
     registerSaveTask(key, task) {
         if (!key || typeof task?.perform !== 'function') {
             return;

package/addon/helpers/format-duration.js

@@ -0,0 +1,38 @@
+import { helper } from '@ember/component/helper';
+
+export function formatDurationValue(seconds) {
+    const value = Number(seconds);
+
+    if (!Number.isFinite(value)) {
+        return '0s';
+    }
+
+    const totalSeconds = Math.max(0, Math.ceil(value));
+    const days = Math.floor(totalSeconds / 86400);
+    const hours = Math.floor((totalSeconds % 86400) / 3600);
+    const minutes = Math.floor((totalSeconds % 3600) / 60);
+    const remainingSeconds = totalSeconds % 60;
+    const parts = [];
+
+    if (days) {
+        parts.push(`${days}d`);
+    }
+
+    if (hours) {
+        parts.push(`${hours}h`);
+    }
+
+    if (!days && minutes) {
+        parts.push(`${minutes}m`);
+    }
+
+    if (!days && !hours && parts.length < 2 && remainingSeconds) {
+        parts.push(`${remainingSeconds}s`);
+    }
+
+    return parts.length ? parts.join(' ') : '0s';
+}
+
+export default helper(function formatDuration([seconds]) {
+    return formatDurationValue(seconds);
+});