@fleetbase/fleetops-engine 0.6.70 → 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/analytics/reports/index.js

@@ -8,7 +8,7 @@ export default class AnalyticsReportsIndexController extends Controller {
     @service intl;
 
     /** query params */
-    @tracked queryParams = ['page', 'limit', 'sort', 'query', 'public_id', 'name', 'created_at'];
+    @tracked queryParams = this.reportActions.queryParamsFor(['page', 'limit', 'sort', 'query', 'public_id', 'name', 'created_at']);
     @tracked page = 1;
     @tracked limit;
     @tracked sort = '-created_at';
@@ -20,11 +20,13 @@ export default class AnalyticsReportsIndexController extends Controller {
     get actionButtons() {
         return [
             {
+                id: 'refresh',
                 icon: 'refresh',
                 onClick: this.reportActions.refresh,
                 helpText: this.intl.t('common.refresh'),
             },
             {
+                id: 'create',
                 text: this.intl.t('common.new'),
                 type: 'primary',
                 icon: 'plus',
@@ -37,6 +39,7 @@ export default class AnalyticsReportsIndexController extends Controller {
     get bulkActions() {
         return [
             {
+                id: 'bulk-delete',
                 label: 'Delete selected...',
                 class: 'text-red-500',
                 fn: this.reportActions.bulkDelete,
@@ -48,6 +51,7 @@ export default class AnalyticsReportsIndexController extends Controller {
     get columns() {
         return [
             {
+                id: 'title',
                 sticky: true,
                 label: 'Title',
                 valuePath: 'title',
@@ -59,6 +63,7 @@ export default class AnalyticsReportsIndexController extends Controller {
                 filterComponent: 'filter/string',
             },
             {
+                id: 'public-id',
                 label: 'ID',
                 valuePath: 'public_id',
                 cellComponent: 'click-to-copy',
@@ -69,6 +74,7 @@ export default class AnalyticsReportsIndexController extends Controller {
                 filterComponent: 'filter/string',
             },
             {
+                id: 'row-actions',
                 label: '',
                 cellComponent: 'table/cell/dropdown',
                 ddButtonText: false,
@@ -81,11 +87,13 @@ export default class AnalyticsReportsIndexController extends Controller {
                 width: 60,
                 actions: [
                     {
+                        id: 'view',
                         label: 'View report...',
                         fn: this.reportActions.transition.view,
                         permission: 'iam view report',
                     },
                     {
+                        id: 'edit',
                         label: 'Edit report...',
                         fn: this.reportActions.transition.edit,
                         permission: 'iam update report',
@@ -94,6 +102,7 @@ export default class AnalyticsReportsIndexController extends Controller {
                         separator: true,
                     },
                     {
+                        id: 'delete',
                         label: 'Delete report...',
                         fn: this.reportActions.delete,
                         permission: 'iam delete report',

package/addon/controllers/connectivity/devices/index/details.js

@@ -39,6 +39,7 @@ export default class ConnectivityDevicesIndexDetailsController extends Controlle
                 permission: 'fleet-ops update device',
             },
             {
+                id: 'more',
                 icon: 'ellipsis-h',
                 iconPrefix: 'fas',
                 renderInPlace: true,

package/addon/controllers/connectivity/devices/index.js

@@ -17,7 +17,7 @@ export default class ConnectivityDevicesIndexController extends Controller {
     @service trailerActions;
 
     /** query params */
-    @tracked queryParams = [
+    @tracked queryParams = this.deviceActions.queryParamsFor([
         'name',
         'status',
         'attachment_state',
@@ -36,7 +36,7 @@ export default class ConnectivityDevicesIndexController extends Controller {
         'public_id',
         'created_at',
         'updated_at',
-    ];
+    ]);
     @tracked page = 1;
     @tracked limit;
     @tracked sort = '-created_at';
@@ -56,11 +56,13 @@ export default class ConnectivityDevicesIndexController extends Controller {
     /** action buttons */
     @tracked actionButtons = [
         {
+            id: 'refresh',
             icon: 'refresh',
             onClick: this.deviceActions.refresh,
             helpText: this.intl.t('common.refresh'),
         },
         {
+            id: 'create',
             text: this.intl.t('common.new'),
             type: 'primary',
             icon: 'plus',
@@ -68,6 +70,7 @@ export default class ConnectivityDevicesIndexController extends Controller {
             permission: 'fleet-ops create device',
         },
         {
+            id: 'import',
             text: this.intl.t('common.import'),
             type: 'magic',
             icon: 'upload',
@@ -75,6 +78,7 @@ export default class ConnectivityDevicesIndexController extends Controller {
             permission: 'fleet-ops import device',
         },
         {
+            id: 'export',
             text: this.intl.t('common.export'),
             icon: 'long-arrow-up',
             iconClass: 'rotate-icon-45',
@@ -87,6 +91,7 @@ export default class ConnectivityDevicesIndexController extends Controller {
     /** bulk action buttons */
     @tracked bulkActions = [
         {
+            id: 'bulk-delete',
             label: 'Delete selected...',
             class: 'text-red-500',
             fn: this.deviceActions.bulkDelete,
@@ -111,6 +116,7 @@ export default class ConnectivityDevicesIndexController extends Controller {
                 separator: true,
             },
             {
+                id: 'delete',
                 label: this.intl.t('common.delete-resource', { resource: this.intl.t('resource.device') }),
                 fn: this.deviceActions.delete,
                 permission: 'fleet-ops delete device',

package/addon/controllers/connectivity/events/index.js

@@ -78,7 +78,20 @@ export default class ConnectivityEventsIndexController extends Controller {
     @service telematicActions;
 
     /** query params */
-    @tracked queryParams = ['page', 'limit', 'sort', 'query', 'telematic', 'device', 'event_type', 'severity', 'processed', 'occurred_at', 'created_at', 'updated_at'];
+    @tracked queryParams = this.deviceEventActions.queryParamsFor([
+        'page',
+        'limit',
+        'sort',
+        'query',
+        'telematic',
+        'device',
+        'event_type',
+        'severity',
+        'processed',
+        'occurred_at',
+        'created_at',
+        'updated_at',
+    ]);
     @tracked page = 1;
     @tracked limit;
     @tracked sort = '-created_at';
@@ -95,6 +108,7 @@ export default class ConnectivityEventsIndexController extends Controller {
     /** action buttons */
     @tracked actionButtons = [
         {
+            id: 'refresh',
             icon: 'refresh',
             onClick: this.deviceEventActions.refresh,
             helpText: this.intl.t('common.refresh'),
@@ -107,6 +121,7 @@ export default class ConnectivityEventsIndexController extends Controller {
     /** columns */
     @tracked columns = [
         {
+            id: 'event-type',
             sticky: true,
             label: 'Event',
             valuePath: 'event_type',
@@ -121,6 +136,7 @@ export default class ConnectivityEventsIndexController extends Controller {
             filterComponent: 'filter/string',
         },
         {
+            id: 'device-display-name',
             label: 'Device',
             valuePath: 'device.displayName',
             cellComponent: 'cell/device-identity',
@@ -137,6 +153,7 @@ export default class ConnectivityEventsIndexController extends Controller {
             modelNamePath: 'displayName',
         },
         {
+            id: 'provider',
             label: 'Provider',
             valuePath: 'provider',
             cellComponent: 'cell/telematic-identity',
@@ -152,6 +169,7 @@ export default class ConnectivityEventsIndexController extends Controller {
             model: 'telematic',
         },
         {
+            id: 'severity',
             label: 'Severity',
             valuePath: 'severity',
             cellComponent: 'table/cell/status',
@@ -165,12 +183,14 @@ export default class ConnectivityEventsIndexController extends Controller {
             filterOptionValue: 'value',
         },
         {
+            id: 'message',
             label: 'Message',
             valuePath: 'message',
             resizable: true,
             sortable: false,
         },
         {
+            id: 'code',
             label: 'Code',
             valuePath: 'code',
             resizable: true,
@@ -180,6 +200,7 @@ export default class ConnectivityEventsIndexController extends Controller {
             filterComponent: 'filter/string',
         },
         {
+            id: 'ident',
             label: 'IDENT',
             valuePath: 'ident',
             hidden: true,
@@ -187,6 +208,7 @@ export default class ConnectivityEventsIndexController extends Controller {
             sortable: true,
         },
         {
+            id: 'protocol',
             label: 'Protocol',
             valuePath: 'protocol',
             hidden: true,
@@ -194,6 +216,7 @@ export default class ConnectivityEventsIndexController extends Controller {
             sortable: true,
         },
         {
+            id: 'state',
             label: 'State',
             valuePath: 'state',
             hidden: true,
@@ -201,6 +224,7 @@ export default class ConnectivityEventsIndexController extends Controller {
             sortable: true,
         },
         {
+            id: 'processed-at',
             label: 'Processed',
             valuePath: 'processedAt',
             sortParam: 'processed_at',
@@ -214,6 +238,7 @@ export default class ConnectivityEventsIndexController extends Controller {
             filterOptionValue: 'value',
         },
         {
+            id: 'occurred-at',
             label: 'Occurred',
             valuePath: 'occurredAt',
             sortParam: 'occurred_at',
@@ -224,6 +249,7 @@ export default class ConnectivityEventsIndexController extends Controller {
             filterComponent: 'filter/date',
         },
         {
+            id: 'created-at',
             label: this.intl.t('column.created-at'),
             valuePath: 'createdAt',
             sortParam: 'created_at',
@@ -234,6 +260,7 @@ export default class ConnectivityEventsIndexController extends Controller {
             filterComponent: 'filter/date',
         },
         {
+            id: 'updated-at',
             label: this.intl.t('column.updated-at'),
             valuePath: 'updatedAt',
             sortParam: 'updated_at',
@@ -245,6 +272,7 @@ export default class ConnectivityEventsIndexController extends Controller {
             hidden: true,
         },
         {
+            id: 'row-actions',
             label: '',
             cellComponent: 'table/cell/dropdown',
             ddButtonText: false,
@@ -257,11 +285,13 @@ export default class ConnectivityEventsIndexController extends Controller {
             width: 60,
             actions: [
                 {
+                    id: 'view',
                     label: this.intl.t('common.view-resource', { resource: this.intl.t('resource.device-event') }),
                     fn: this.deviceEventActions.transition.view,
                     permission: 'fleet-ops view device-event',
                 },
                 {
+                    id: 'mark-processed',
                     label: 'Mark processed',
                     fn: this.markProcessed,
                     permission: 'fleet-ops update device-event',

package/addon/controllers/connectivity/sensors/index/details.js

@@ -7,7 +7,7 @@ export default class ConnectivitySensorsIndexDetailsController extends Controlle
     @service hostRouter;
 
     get tabs() {
-        const registeredTabs = this.menuService.getMenuItems('fleet-ops:component:place:details');
+        const registeredTabs = this.menuService.getMenuItems('fleet-ops:component:sensor:details');
         return [
             {
                 route: 'connectivity.sensors.index.details.index',