@fleetbase/fleetops-engine 0.6.71 → 0.6.72

package/addon/components/widget/live-fleet.js

@@ -9,6 +9,7 @@ import { renderCompleted, waitForInsertedAndSized } from '@fleetbase/ember-ui/ut
 import LeafletTrackingMarkerComponent from '../leaflet-tracking-marker';
 import ensureLeafletDrawEditNamespace from '../../utils/leaflet-draw-namespace-guard';
 import { DEFAULT_LEAFLET_TILE_ATTRIBUTION } from '../../utils/leaflet-tile-url';
+import { FIT_VEHICLES_MAX_ZOOM, positionedBounds } from '../../utils/map-default-view';
 
 const DEFAULT_CENTER = [1.31, 103.85];
 const DEFAULT_ZOOM = 11;
@@ -56,6 +57,8 @@ export default class WidgetLiveFleetComponent extends Component {
     #map = null;
     #mapSetPromise = null;
     #resolveMapSet = null;
+    /** Fit to the vehicles only on the first load, never on the periodic reconcile. */
+    #fittedToVehicles = false;
 
     constructor() {
         super(...arguments);
@@ -152,15 +155,57 @@ export default class WidgetLiveFleetComponent extends Component {
         return this.drivers.length + this.vehicles.length;
     }
 
-    /** Center on the first available marker (driver, then vehicle), else default. */
-    get center() {
+    /**
+     * Bounds around the positioned vehicles when the company chose "Fit to my
+     * vehicles" (Settings > Map), else null.
+     */
+    get vehicleBounds() {
+        if (!this.mapSettings.fitMapToVehicles) return null;
+        return positionedBounds(this.vehicles.map((vehicle) => ({ location: [vehicle.lat, vehicle.lng] })));
+    }
+
+    /**
+     * Where the map opens, in order: the positioned vehicles (when fitting is
+     * on), the company's default centre, the first positioned marker, the
+     * centre of the company's country, the hardcoded default.
+     */
+    get initialView() {
+        const bounds = this.vehicleBounds;
+        if (bounds) {
+            const [[south, west], [north, east]] = bounds;
+            return { center: [(south + north) / 2, (west + east) / 2], zoom: DEFAULT_ZOOM, bounds };
+        }
+
+        const defaultCenter = this.mapSettings.defaultMapCenter;
+        if (defaultCenter) return { center: [defaultCenter.latitude, defaultCenter.longitude], zoom: defaultCenter.zoom };
+
         const first = this.drivers[0] ?? this.vehicles[0];
-        if (first?.lat && first?.lng) return [first.lat, first.lng];
-        return DEFAULT_CENTER;
+        if (first?.lat && first?.lng) return { center: [first.lat, first.lng], zoom: DEFAULT_ZOOM };
+
+        const countryCenter = this.mapSettings.companyCountryCenter;
+        if (countryCenter) return { center: [countryCenter.latitude, countryCenter.longitude], zoom: countryCenter.zoom };
+
+        return { center: DEFAULT_CENTER, zoom: DEFAULT_ZOOM };
+    }
+
+    get center() {
+        return this.initialView.center;
     }
 
     get zoom() {
-        return DEFAULT_ZOOM;
+        return this.initialView.zoom;
+    }
+
+    /** Frame the positioned vehicles once, after the first data load. */
+    fitToVehicles(map) {
+        if (this.#fittedToVehicles) return false;
+
+        const bounds = this.vehicleBounds;
+        if (!bounds || typeof map?.fitBounds !== 'function') return false;
+
+        map.fitBounds(bounds, { padding: [30, 30], maxZoom: FIT_VEHICLES_MAX_ZOOM });
+        this.#fittedToVehicles = true;
+        return true;
     }
 
     statusColor(status) {
@@ -182,9 +227,12 @@ export default class WidgetLiveFleetComponent extends Component {
             // container before we add markers. Without this, markers added to a
             // not-yet-sized map silently no-op (the data arrives, count chip ticks
             // up, but nothing paints).
-            yield this.ensureInteractive();
+            const map = yield this.ensureInteractive();
             this.data = yield this.fetch.get('fleet-ops/analytics/live-fleet');
             this.error = null;
+            // The fit choice lives in the company's map settings, loaded in the constructor.
+            yield this.mapSettings.load();
+            this.fitToVehicles(map);
         } catch (e) {
             this.error = e?.message ?? 'Failed to load live fleet';
         }

package/addon/components/widget/proof-of-delivery.hbs

@@ -0,0 +1,49 @@
+<div class="fleet-ops-widget fleet-ops-proof-of-delivery flex flex-col h-full {{@class}}" data-test-proof-of-delivery-widget ...attributes>
+    <div class="flex items-center justify-between px-3 py-1.5 border dark:border-gray-700 border-gray-200 dark:bg-gray-800 bg-gray-50 rounded-t-md shadow-sm">
+        <span class="text-xs font-bold text-black dark:text-gray-100">{{t "widget.proof-of-delivery.title"}}</span>
+        <FaIcon @icon="camera" class="text-gray-400" />
+    </div>
+
+    <div class="flex-1 p-2 border border-t-0 dark:border-gray-700 border-gray-200 rounded-b-md bg-white dark:bg-gray-900 overflow-auto min-h-0">
+        {{#if this.load.isRunning}}
+            <div class="flex items-center justify-center h-full"><Spinner /></div>
+        {{else if this.error}}
+            <div class="flex items-center justify-center h-full text-xs text-red-500">{{this.error}}</div>
+        {{else if this.photos.length}}
+            <div class="grid grid-cols-3 gap-2">
+                {{#each this.photos as |proof|}}
+                    <div class="min-w-0" data-test-proof-of-delivery-photo={{proof.id}}>
+                        <button
+                            type="button"
+                            class="block w-full aspect-square rounded-md overflow-hidden border dark:border-gray-700 border-gray-200 bg-gray-100 dark:bg-gray-800 hover:opacity-90"
+                            title={{or proof.remarks (t "widget.proof-of-delivery.open-photo")}}
+                            aria-label={{t "widget.proof-of-delivery.open-photo"}}
+                            {{on "click" (fn this.openPhoto proof)}}
+                        >
+                            <img src={{proof.url}} alt={{or proof.remarks (t "widget.proof-of-delivery.title")}} loading="lazy" class="w-full h-full object-cover" />
+                        </button>
+                        <div class="mt-0.5 leading-tight">
+                            {{#if proof.order_id}}
+                                <LinkTo
+                                    @route={{this.orderRoute}}
+                                    @model={{proof.order_id}}
+                                    class="block text-[10px] font-semibold text-blue-600 hover:text-blue-700 dark:text-blue-300 dark:hover:text-blue-200 truncate"
+                                    title={{proof.customer_name}}
+                                    data-test-proof-of-delivery-order
+                                >{{proof.order_id}}</LinkTo>
+                            {{/if}}
+                            {{#if proof.timeAgo}}
+                                <div class="text-[9px] text-gray-500 dark:text-gray-400 truncate">{{proof.timeAgo}}</div>
+                            {{/if}}
+                        </div>
+                    </div>
+                {{/each}}
+            </div>
+        {{else}}
+            <div class="flex flex-col items-center justify-center h-full text-center text-gray-500 dark:text-gray-400" data-test-proof-of-delivery-empty>
+                <FaIcon @icon="camera" class="text-lg mb-1 text-gray-300 dark:text-gray-600" />
+                <div class="text-[11px]">{{t "widget.proof-of-delivery.empty"}}</div>
+            </div>
+        {{/if}}
+    </div>
+</div>

package/addon/components/widget/proof-of-delivery.js

@@ -0,0 +1,62 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { getOwner } from '@ember/application';
+import { task } from 'ember-concurrency';
+import { formatDistanceToNowStrict, isValid } from 'date-fns';
+import config from '../../config/environment';
+
+/**
+ * The latest proof of delivery photos across the fleet, each linking to its order.
+ */
+export default class WidgetProofOfDeliveryComponent extends Component {
+    static widgetId = 'fleet-ops-proof-of-delivery-widget';
+    static limit = 12;
+
+    @service fetch;
+
+    @tracked proofs = [];
+    @tracked error = null;
+
+    constructor() {
+        super(...arguments);
+        this.load.perform();
+    }
+
+    get photos() {
+        return (this.proofs ?? [])
+            .filter((proof) => proof?.url)
+            .map((proof) => ({
+                ...proof,
+                timeAgo: this.timeAgo(proof.captured_at),
+            }));
+    }
+
+    get orderRoute() {
+        // Dashboard widgets render under the host owner, outside the engine's routing context.
+        return getOwner(this).mountPoint ? 'operations.orders.index.details' : `${config.mountedEngineRoutePrefix}.operations.orders.index.details`;
+    }
+
+    timeAgo(capturedAt) {
+        const date = capturedAt ? new Date(capturedAt) : null;
+
+        return date && isValid(date) ? formatDistanceToNowStrict(date, { addSuffix: true }) : null;
+    }
+
+    @action openPhoto(proof) {
+        if (proof?.url) {
+            window.open(proof.url, '_blank', 'noopener,noreferrer');
+        }
+    }
+
+    @task({ restartable: true }) *load() {
+        this.error = null;
+        try {
+            const response = yield this.fetch.get('fleet-ops/proofs/recent', { limit: WidgetProofOfDeliveryComponent.limit });
+            this.proofs = response?.proofs ?? [];
+        } catch (err) {
+            this.error = err?.message ?? 'Failed to load';
+        }
+    }
+}

package/addon/components/work-order/form.hbs

@@ -175,7 +175,7 @@
             </div>
             <InputGroup @name="Opened At">
                 <DatePicker
-                    @value={{or (format-date-fns @resource.opened_at "dd-MM-yyyy") null}}
+                    @value={{or (format-date-fns @resource.opened_at "yyyy-MM-dd") null}}
                     @onChange={{fn (mut @resource.opened_at)}}
                     @placeholder="DD-MM-YYYY"
                     class="filter-date-input w-full flex-1"
@@ -183,7 +183,7 @@
             </InputGroup>
             <InputGroup @name="Due At">
                 <DatePicker
-                    @value={{or (format-date-fns @resource.due_at "dd-MM-yyyy") null}}
+                    @value={{or (format-date-fns @resource.due_at "yyyy-MM-dd") null}}
                     @onChange={{fn (mut @resource.due_at)}}
                     @placeholder="DD-MM-YYYY"
                     class="filter-date-input w-full flex-1"
@@ -191,7 +191,7 @@
             </InputGroup>
             <InputGroup @name="Closed At">
                 <DatePicker
-                    @value={{or (format-date-fns @resource.closed_at "dd-MM-yyyy") null}}
+                    @value={{or (format-date-fns @resource.closed_at "yyyy-MM-dd") null}}
                     @onChange={{fn (mut @resource.closed_at)}}
                     @placeholder="DD-MM-YYYY"
                     class="filter-date-input w-full flex-1"

package/addon/controllers/operations/orders/index/details.js

@@ -1,4 +1,5 @@
 import Controller, { inject as controller } from '@ember/controller';
+import { getOwner } from '@ember/application';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
@@ -78,6 +79,9 @@ export default class OperationsOrdersIndexDetailsController extends Controller {
         return [
             {
                 route: 'operations.orders.index.details.index',
+                // Pass the order explicitly: without it the link's href is generated from whatever
+                // transition is in flight, and leaving for a shallower route throws in the router.
+                model: this.model?.public_id,
                 label: 'Overview',
                 icon: 'folder-open',
             },
@@ -219,10 +223,22 @@ export default class OperationsOrdersIndexDetailsController extends Controller {
     }
 
     @task *refresh() {
+        yield this.refreshDetails();
+    }
+
+    /**
+     * Reload only the order details route. A bare `hostRouter.refresh()` re-runs every route
+     * from the application down (console, the engine's application `beforeModel`, the orders
+     * list), so a socket event during navigation leaves a slow refresh in flight.
+     */
+    async refreshDetails() {
         try {
-            yield this.hostRouter.refresh();
+            await getOwner(this).lookup('route:operations.orders.index.details').refresh();
         } catch (error) {
-            return error;
+            // A refresh superseded by a newer transition is expected, not an error.
+            if (error?.name !== 'TransitionAborted') {
+                throw error;
+            }
         }
     }
 
@@ -246,7 +262,7 @@ export default class OperationsOrdersIndexDetailsController extends Controller {
             this.model,
             async (_msg, { reloadable }) => {
                 if (reloadable) {
-                    await this.hostRouter.refresh();
+                    await this.refreshDetails();
                 }
             },
             { debounceMs: 250 }

package/addon/controllers/operations/scheduler/index.js

@@ -4,6 +4,7 @@ import { inject as service } from '@ember/service';
 import { action, computed } from '@ember/object';
 import { isNone } from '@ember/utils';
 import { isValid as isValidDate } from 'date-fns';
+import { later } from '@ember/runloop';
 import { task } from 'ember-concurrency';
 import isObject from '@fleetbase/ember-core/utils/is-object';
 import isJson from '@fleetbase/ember-core/utils/is-json';
@@ -11,6 +12,9 @@ import createFullCalendarEventFromOrder from '../../../utils/create-full-calenda
 import createFullCalendarEventFromScheduleItem from '../../../utils/create-full-calendar-event-from-schedule-item';
 import toCalendarDate from '../../../utils/to-calendar-date';
 
+// The ember-core socket service subscribes ~300 ms after listen() is called.
+const SOCKET_SUBSCRIBE_SETTLE_MS = 500;
+
 /**
  * OperationsSchedulerIndexController
  *
@@ -722,28 +726,55 @@ export default class OperationsSchedulerIndexController extends Controller {
     // Real-Time Socket Subscriptions
     // -------------------------------------------------------------------------
 
+    // Names of the socket channels this board opened, so teardown closes only those
+    // and leaves every other subscription (chat, notifications, ...) alone.
+    _socketChannelNames = new Set();
+
     @action async subscribeToRealTimeUpdates() {
-        const orgId = this.currentUser?.companyId ?? this.currentUser?.company?.id;
-        if (!orgId) return;
-        await this.socket.listen(`company.${orgId}.orders`, (payload) => this._handleOrderSocketEvent(payload));
-        this.drivers.forEach(async (driver) => {
-            await this.socket.listen(`driver.${driver.id}`, (payload) => this._handleDriverSocketEvent(payload));
-        });
+        const drivers = this.drivers ?? [];
+        await Promise.all(
+            drivers.map((driver) => {
+                if (!driver?.id) return;
+                const channelName = `driver.${driver.id}`;
+                if (this._socketChannelNames.has(channelName)) return;
+                this._socketChannelNames.add(channelName);
+                return this.socket.listen(channelName, (payload) => this._handleDriverSocketEvent(payload));
+            })
+        );
     }
 
     @action unsubscribeFromRealTimeUpdates() {
-        if (this.socket && typeof this.socket.closeChannels === 'function') {
-            this.socket.closeChannels();
+        const names = this._socketChannelNames;
+        this._socketChannelNames = new Set();
+        if (!this.socket || names.size === 0) return;
+
+        if (typeof this.socket.closeChannel === 'function') {
+            names.forEach((name) => this.socket.closeChannel(name));
+            return;
         }
+
+        const remaining = this._closeOpenedChannels(names);
+        if (remaining.size === 0) return;
+
+        // The socket service subscribes after a short delay, so a channel requested just before
+        // teardown may not exist yet: sweep once more after that delay.
+        later(this, () => this._closeOpenedChannels(remaining), SOCKET_SUBSCRIBE_SETTLE_MS);
     }
 
-    _handleOrderSocketEvent({ data } = {}) {
-        if (!data?.id) return;
-        try {
-            this.store.pushPayload('order', { order: data });
-        } catch {
-            /* ignore */
+    /**
+     * Close the socket's channels with the given names, except any the board has opened again
+     * since. Returns the names that had no channel yet.
+     */
+    _closeOpenedChannels(names) {
+        const remaining = new Set([...names].filter((name) => !this._socketChannelNames.has(name)));
+        const channels = Array.isArray(this.socket.channels) ? this.socket.channels : [];
+        for (const channel of channels) {
+            if (!names.has(channel?.name) || this._socketChannelNames.has(channel.name)) continue;
+            remaining.delete(channel.name);
+            channel.close();
         }
+
+        return remaining;
     }
 
     _handleDriverSocketEvent({ event, data } = {}) {

package/addon/controllers/settings/index.js

@@ -28,6 +28,12 @@ export default class SettingsIndexController extends Controller {
             description: 'Keep commerce, metadata, and visual conventions aligned.',
             links: [
                 { label: 'Payments', route: 'settings.payments', icon: 'cash-register', description: 'Payment setup for operational commerce workflows.' },
+                {
+                    label: 'Tracking Page',
+                    route: 'settings.tracking-page',
+                    icon: 'magnifying-glass-location',
+                    description: 'The page your customers use to follow deliveries: address, branding and how they verify.',
+                },
                 {
                     label: 'Telematics',
                     route: 'settings.telematics',

package/addon/controllers/settings/map.js

@@ -4,6 +4,7 @@ import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
 import { task } from 'ember-concurrency';
 import MAP_PROVIDER_OPTIONS from '../../utils/map-provider-options';
+import { isLatitude, isLongitude, isZoom, toCoordinate } from '../../utils/map-default-view';
 
 export default class SettingsMapController extends Controller {
     @service fetch;
@@ -11,6 +12,7 @@ export default class SettingsMapController extends Controller {
     @service intl;
     @service mapManager;
     @service mapSettings;
+    @service location;
 
     /**
      * Available map provider options for the provider selector.
@@ -39,6 +41,21 @@ export default class SettingsMapController extends Controller {
     @tracked showGoogleMapsTrafficLayer = false;
     @tracked showGoogleMapsTransitLayer = false;
 
+    /**
+     * The company's default live map view. Latitude and longitude are both
+     * set or both null; zoom is optional.
+     */
+    @tracked defaultMapLatitude = null;
+    @tracked defaultMapLongitude = null;
+    @tracked defaultMapZoom = null;
+    @tracked fitMapToVehicles = false;
+
+    /**
+     * Bumped to re-create the coordinates input, which only reads its value
+     * when it is constructed (e.g. after clearing the default center).
+     */
+    @tracked defaultCenterInputKey = 0;
+
     /**
      * Whether settings have been loaded from the server.
      *
@@ -74,6 +91,36 @@ export default class SettingsMapController extends Controller {
         return this.mapProvider === 'leaflet';
     }
 
+    /**
+     * The default center as a GeoJSON point for the coordinates input, or null.
+     *
+     * @memberof SettingsMapController
+     * @return {Object|null}
+     */
+    get defaultMapCenterPoint() {
+        // Not null: CoordinatesInput#isPoint reads `.type` on any object, and typeof null is "object".
+        if (!this.hasDefaultMapCenter) {
+            return undefined;
+        }
+
+        return { type: 'Point', coordinates: [this.defaultMapLongitude, this.defaultMapLatitude] };
+    }
+
+    get hasDefaultMapCenter() {
+        return isLatitude(this.defaultMapLatitude) && isLongitude(this.defaultMapLongitude);
+    }
+
+    /**
+     * The zoom to save: a whole number from 1 to 20, else null.
+     *
+     * @memberof SettingsMapController
+     * @return {Number|null}
+     */
+    get normalizedDefaultMapZoom() {
+        const zoom = toCoordinate(this.defaultMapZoom);
+        return isZoom(zoom) ? zoom : null;
+    }
+
     // ─── Actions ───────────────────────────────────────────────────────────────
 
     /**
@@ -86,6 +133,24 @@ export default class SettingsMapController extends Controller {
         this.mapProvider = option?.value ?? option ?? 'leaflet';
     }
 
+    /**
+     * Receives coordinates typed into, or picked on the map of, the default
+     * center input.
+     *
+     * @param {{latitude: *, longitude: *}} coordinates
+     * @memberof SettingsMapController
+     */
+    @action setDefaultMapCenter({ latitude, longitude } = {}) {
+        this.defaultMapLatitude = toCoordinate(latitude);
+        this.defaultMapLongitude = toCoordinate(longitude);
+    }
+
+    @action clearDefaultMapCenter() {
+        this.defaultMapLatitude = null;
+        this.defaultMapLongitude = null;
+        this.defaultCenterInputKey++;
+    }
+
     @task *saveSettings() {
         const settings = {
             mapProvider: this.mapProvider,
@@ -94,12 +159,19 @@ export default class SettingsMapController extends Controller {
             googleMapsMapType: this.googleMapsMapType,
             showGoogleMapsTrafficLayer: this.showGoogleMapsTrafficLayer,
             showGoogleMapsTransitLayer: this.showGoogleMapsTransitLayer,
+            defaultMapLatitude: this.hasDefaultMapCenter ? this.defaultMapLatitude : null,
+            defaultMapLongitude: this.hasDefaultMapCenter ? this.defaultMapLongitude : null,
+            defaultMapZoom: this.normalizedDefaultMapZoom,
+            fitMapToVehicles: this.fitMapToVehicles,
         };
 
         try {
             const response = yield this.fetch.post('fleet-ops/settings/map', { settings });
             this.mapSettings.applySettings(response);
 
+            // Re-resolve where maps open so an open live map moves to the new default.
+            this.location.relocate();
+
             if (this.mapManager && typeof this.mapManager.setActiveProvider === 'function') {
                 this.mapManager.setActiveProvider(this.mapProvider);
             }
@@ -124,6 +196,9 @@ export default class SettingsMapController extends Controller {
             this.googleMapsMapType = response?.googleMapsMapType ?? 'roadmap';
             this.showGoogleMapsTrafficLayer = Boolean(response?.showGoogleMapsTrafficLayer);
             this.showGoogleMapsTransitLayer = Boolean(response?.showGoogleMapsTransitLayer);
+            this.setDefaultMapCenter({ latitude: response?.defaultMapLatitude, longitude: response?.defaultMapLongitude });
+            this.defaultMapZoom = response?.defaultMapZoom ?? null;
+            this.fitMapToVehicles = Boolean(response?.fitMapToVehicles);
             this.settingsLoaded = true;
         } catch (error) {
             this.notifications.serverError(error);

package/addon/controllers/settings/orchestrator.js

@@ -17,7 +17,8 @@ export default class SettingsOrchestratorController extends Controller {
     @service intl;
     @service('orchestration-engine') engineRegistry;
 
-    @tracked allocationEngine = 'vroom';
+    @tracked allocationEngine = 'greedy';
+    @tracked serverEngines = null;
     @tracked autoAllocateOnCreate = false;
     @tracked autoReallocateOnComplete = false;
     @tracked maxTravelTimeSeconds = 3600;
@@ -26,18 +27,19 @@ export default class SettingsOrchestratorController extends Controller {
 
     /**
      * Engine options for the selector dropdown.
-     * Populated from the allocation-engine registry so new engines appear
-     * automatically without modifying this controller.
+     * Populated from the engines registered on the server (the ones a run can
+     * actually use), falling back to the frontend allocation-engine registry.
      */
     get engineOptions() {
-        return this.engineRegistry.availableEngines;
+        return this.serverEngines ?? this.engineRegistry.availableEngines;
     }
 
     @task *loadSettings() {
         this.isLoading = true;
         try {
-            const settings = yield this.fetch.get('fleet-ops/settings/orchestrator-settings');
-            this.allocationEngine = settings.allocation_engine ?? 'vroom';
+            const [settings, engines] = yield Promise.all([this.fetch.get('fleet-ops/settings/orchestrator-settings'), this.fetch.get('fleet-ops/orchestrator/engines').catch(() => null)]);
+            this.serverEngines = engines?.engines ?? null;
+            this.allocationEngine = settings.allocation_engine ?? 'greedy';
             this.autoAllocateOnCreate = settings.auto_allocate_on_create ?? false;
             this.autoReallocateOnComplete = settings.auto_reallocate_on_complete ?? false;
             this.maxTravelTimeSeconds = settings.max_travel_time_seconds ?? 3600;