@fleetbase/fleetops-engine 0.6.47 → 0.6.49

package/addon/extension.js

@@ -128,13 +128,182 @@ export default {
 
     registerWidgets(widgetService) {
         const widgets = [
+            // Legacy monolithic 13-tile widget — kept registered for one release as
+            // users have it pinned to existing dashboards. The new KPI tile widgets
+            // below supersede it. Scheduled for removal in the next major.
             new Widget({
                 id: 'fleet-ops-key-metrics-widget',
-                name: 'Fleet-Ops Metrics',
-                description: 'Key metrics from Fleet-Ops.',
+                name: 'Fleet-Ops Metrics (Legacy)',
+                description: 'DEPRECATED — replaced by individual KPI tile widgets. Will be removed in the next major release.',
                 icon: 'truck',
                 component: new ExtensionComponent('@fleetbase/fleetops-engine', 'widget/fleet-ops-key-metrics'),
-                grid_options: { w: 12, h: 12, minW: 8, minH: 12 },
+                grid_options: { w: 12, h: 8, minW: 8, minH: 6 },
+                category: 'Legacy',
+                default: false,
+            }),
+
+            // Small KPI tile widgets — S-tier, each wraps <Widget::KpiTile> with a
+            // fixed slug pointing at GET /fleet-ops/metrics/{slug}.
+            new Widget({
+                id: 'fleet-ops-kpi-earnings-widget',
+                name: 'Earnings (30d)',
+                description: 'Total earnings over the last 30 days with trend.',
+                icon: 'sack-dollar',
+                component: new ExtensionComponent('@fleetbase/fleetops-engine', 'widget/kpi-earnings'),
+                grid_options: { w: 3, h: 4, minW: 3, minH: 4 },
+                category: 'KPI Tiles',
+                default: true,
+            }),
+            new Widget({
+                id: 'fleet-ops-kpi-aov-widget',
+                name: 'Avg Order Value (30d)',
+                description: 'Average revenue per completed order with trend.',
+                icon: 'receipt',
+                component: new ExtensionComponent('@fleetbase/fleetops-engine', 'widget/kpi-aov'),
+                grid_options: { w: 3, h: 4, minW: 3, minH: 4 },
+                category: 'KPI Tiles',
+                default: true,
+            }),
+            new Widget({
+                id: 'fleet-ops-kpi-distance-widget',
+                name: 'Distance Travelled (30d)',
+                description: 'Total kilometres delivered over the last 30 days.',
+                icon: 'route',
+                component: new ExtensionComponent('@fleetbase/fleetops-engine', 'widget/kpi-distance'),
+                grid_options: { w: 3, h: 4, minW: 3, minH: 4 },
+                category: 'KPI Tiles',
+                default: false,
+            }),
+            new Widget({
+                id: 'fleet-ops-kpi-active-orders-widget',
+                name: 'Active Orders',
+                description: 'Live count of orders currently in flight.',
+                icon: 'bolt',
+                component: new ExtensionComponent('@fleetbase/fleetops-engine', 'widget/kpi-active-orders'),
+                grid_options: { w: 3, h: 4, minW: 3, minH: 4 },
+                category: 'KPI Tiles',
+                default: true,
+            }),
+            new Widget({
+                id: 'fleet-ops-kpi-drivers-online-widget',
+                name: 'Drivers Online',
+                description: 'Live count of drivers currently active on a job.',
+                icon: 'id-card',
+                component: new ExtensionComponent('@fleetbase/fleetops-engine', 'widget/kpi-drivers-online'),
+                grid_options: { w: 3, h: 4, minW: 3, minH: 4 },
+                category: 'KPI Tiles',
+                default: true,
+            }),
+            new Widget({
+                id: 'fleet-ops-kpi-open-issues-widget',
+                name: 'Open Issues',
+                description: 'Pending issues across the fleet (lower is better).',
+                icon: 'triangle-exclamation',
+                component: new ExtensionComponent('@fleetbase/fleetops-engine', 'widget/kpi-open-issues'),
+                grid_options: { w: 3, h: 4, minW: 3, minH: 4 },
+                category: 'KPI Tiles',
+                default: false,
+            }),
+
+            // Analytics widgets — composed visualizations powered by /fleet-ops/analytics/*.
+            new Widget({
+                id: 'fleet-ops-operations-pulse-widget',
+                name: 'Operations Pulse',
+                description: 'Live operational snapshot with day-over-day deltas.',
+                icon: 'wave-pulse',
+                component: new ExtensionComponent('@fleetbase/fleetops-engine', 'widget/operations-pulse'),
+                grid_options: { w: 6, h: 6, minW: 5, minH: 5 },
+                category: 'Analytics',
+                default: false,
+            }),
+            new Widget({
+                id: 'fleet-ops-revenue-trend-widget',
+                name: 'Revenue Trend',
+                description: 'Revenue over time with period comparison.',
+                icon: 'chart-line',
+                component: new ExtensionComponent('@fleetbase/fleetops-engine', 'widget/revenue-trend'),
+                grid_options: { w: 6, h: 6, minW: 5, minH: 5 },
+                category: 'Analytics',
+                default: true,
+            }),
+            new Widget({
+                id: 'fleet-ops-orders-by-status-widget',
+                name: 'Order Volume by Status',
+                description: 'Daily stacked bars of order counts by status.',
+                icon: 'chart-column',
+                component: new ExtensionComponent('@fleetbase/fleetops-engine', 'widget/orders-by-status'),
+                grid_options: { w: 6, h: 6, minW: 5, minH: 5 },
+                category: 'Analytics',
+                default: false,
+            }),
+            new Widget({
+                id: 'fleet-ops-on-time-delivery-widget',
+                name: 'On-Time Delivery',
+                description: 'Percentage of deliveries completed within the SLA window.',
+                icon: 'clock',
+                component: new ExtensionComponent('@fleetbase/fleetops-engine', 'widget/on-time-delivery'),
+                grid_options: { w: 3, h: 4, minW: 3, minH: 4 },
+                category: 'Analytics',
+                default: false,
+            }),
+            new Widget({
+                id: 'fleet-ops-top-drivers-widget',
+                name: 'Top Drivers',
+                description: 'Driver leaderboard sortable by orders, on-time %, or distance.',
+                icon: 'medal',
+                component: new ExtensionComponent('@fleetbase/fleetops-engine', 'widget/top-drivers'),
+                grid_options: { w: 6, h: 6, minW: 5, minH: 5 },
+                category: 'Analytics',
+                default: false,
+            }),
+            new Widget({
+                id: 'fleet-ops-fuel-efficiency-widget',
+                name: 'Fuel Cost & Efficiency',
+                description: 'Weekly fuel cost and cost-per-km trend.',
+                icon: 'gas-pump',
+                component: new ExtensionComponent('@fleetbase/fleetops-engine', 'widget/fuel-efficiency'),
+                grid_options: { w: 6, h: 6, minW: 5, minH: 5 },
+                category: 'Analytics',
+                default: false,
+            }),
+            new Widget({
+                id: 'fleet-ops-issues-insights-widget',
+                name: 'Issues Insights',
+                description: 'Open/resolved issues, category breakdown, and average resolution time.',
+                icon: 'triangle-exclamation',
+                component: new ExtensionComponent('@fleetbase/fleetops-engine', 'widget/issues-insights'),
+                grid_options: { w: 6, h: 6, minW: 5, minH: 5 },
+                category: 'Analytics',
+                default: false,
+            }),
+            new Widget({
+                id: 'fleet-ops-maintenance-overview-widget',
+                name: 'Maintenance Overview',
+                description: 'Overdue, scheduled, and YTD maintenance spend.',
+                icon: 'wrench',
+                component: new ExtensionComponent('@fleetbase/fleetops-engine', 'widget/maintenance-overview'),
+                grid_options: { w: 6, h: 6, minW: 5, minH: 5 },
+                category: 'Analytics',
+                default: true,
+            }),
+            new Widget({
+                id: 'fleet-ops-geofence-violations-widget',
+                name: 'Geofence Violations',
+                description: 'Dwell-time outliers and geofence event hotspots.',
+                icon: 'location-crosshairs',
+                component: new ExtensionComponent('@fleetbase/fleetops-engine', 'widget/geofence-violations'),
+                grid_options: { w: 6, h: 6, minW: 5, minH: 5 },
+                category: 'Analytics',
+                default: false,
+            }),
+            new Widget({
+                id: 'fleet-ops-live-fleet-widget',
+                name: 'Live Fleet Map',
+                description: 'Real-time driver positions and active routes.',
+                icon: 'map-location-dot',
+                component: new ExtensionComponent('@fleetbase/fleetops-engine', 'widget/live-fleet'),
+                grid_options: { w: 12, h: 10, minW: 8, minH: 8 },
+                category: 'Maps',
                 default: true,
             }),
         ];

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);
+});

package/addon/routes/application.js

@@ -29,6 +29,7 @@ export default class ApplicationRoute extends Route {
 
         await this.location.getUserLocation();
         await this.#loadRoutingSettings();
+        await this.#loadTrackingSettings();
         await this.#loadMapSettings();
     }
 
@@ -37,6 +38,11 @@ export default class ApplicationRoute extends Route {
         this.currentUser.setOption('routing', routingSetting);
     }
 
+    async #loadTrackingSettings() {
+        const trackingSettings = await this.fetch.get('fleet-ops/settings/tracking-settings');
+        this.currentUser.setOption('tracking', trackingSettings);
+    }
+
     async #loadMapSettings() {
         await this.mapSettings.load();
     }

package/addon/services/map-adapter/google.js

@@ -342,14 +342,19 @@ export default class GoogleMapsAdapter extends MapAdapterInterface {
             const img = document.createElement('img');
             img.src = options.iconUrl;
             const size = options.iconSize ?? [24, 24];
+            img.width = size[0];
+            img.height = size[1];
             img.style.width = `${size[0]}px`;
             img.style.height = `${size[1]}px`;
+            img.style.maxWidth = 'none';
+            img.style.maxHeight = 'none';
+            img.style.objectFit = 'contain';
             img.style.display = 'block';
             img.alt = options.alt ?? options.title ?? '';
             // Wrapper div allows rotation transforms without affecting the anchor
             const wrapper = document.createElement('div');
             wrapper.className = 'fleetops-map-marker';
-            wrapper.style.cssText = 'transform-origin: center center; display: block;';
+            wrapper.style.cssText = `width: ${size[0]}px; height: ${size[1]}px; max-width: ${size[0]}px; max-height: ${size[1]}px; line-height: 0; transform-origin: center center; display: block; overflow: visible;`;
             wrapper.appendChild(img);
             content = wrapper;
         }
@@ -1051,6 +1056,7 @@ export default class GoogleMapsAdapter extends MapAdapterInterface {
                         content: buildWaypointMarkerContent(customOptions.waypointLabel, customOptions.waypointColor ?? '#2563eb'),
                         iconSize: customOptions.iconSize ?? [32, 32],
                         iconAnchor: customOptions.iconAnchor ?? [16, 16],
+                        zIndexOffset: customOptions.zIndexOffset ?? 100000,
                     };
                 }
 
@@ -2079,7 +2085,7 @@ export default class GoogleMapsAdapter extends MapAdapterInterface {
             map: this._map,
             position,
             title: options.title ?? options.tooltip ?? '',
-            zIndex: options.zIndexOffset ?? 0,
+            zIndex: options.zIndexOffset ?? (options.waypointLabel ? 100000 : 0),
         };
 
         if (options.waypointLabel) {
@@ -2088,12 +2094,17 @@ export default class GoogleMapsAdapter extends MapAdapterInterface {
                 scaledSize: new google.maps.Size(34, 34),
                 anchor: new google.maps.Point(17, 17),
             };
+            markerOptions.optimized = false;
         } else if (options.iconUrl) {
             const size = options.iconSize ?? [24, 24];
             markerOptions.icon = {
                 url: options.iconUrl,
+                size: new google.maps.Size(size[0], size[1]),
                 scaledSize: new google.maps.Size(size[0], size[1]),
+                origin: new google.maps.Point(0, 0),
+                anchor: new google.maps.Point(size[0] / 2, size[1] / 2),
             };
+            markerOptions.optimized = false;
         }
 
         const marker = new google.maps.Marker(markerOptions);

package/addon/services/order-list-overlay.js

@@ -185,12 +185,12 @@ export default class OrderListOverlayService extends Service {
 
     #peekActiveOrders() {
         // Consider an order "active" if it has an assigned driver and is not terminal
-        const TERMINAL = ['created', 'completed', 'canceled', 'expired'];
+        const TERMINAL = ['created', 'completed', 'canceled', 'expired', 'order_canceled', 'pending'];
         return this.#peekOrders((order) => !!order.driver_assigned && !TERMINAL.includes(order.status));
     }
 
     #peekDriverActiveOrders(driver) {
-        const TERMINAL = ['created', 'completed', 'canceled', 'expired'];
+        const TERMINAL = ['created', 'completed', 'canceled', 'expired', 'order_canceled', 'pending'];
         return this.#peekOrders((order) => !!order.driver_assigned && order.driver_assigned?.id === driver.id && !TERMINAL.includes(order.status));
     }