@fleetbase/fleetops-engine 0.6.47 → 0.6.49

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/components/widget/fleet-ops-key-metrics.hbs

@@ -1,19 +1,21 @@
-<div class="fleet-ops-key-metrics" ...attributes>
-    <div class="flex flex-col">
-        <div class="flex flex-row items-center justify-between px-4 py-2 border dark:border-gray-700 border-gray-200 dark:bg-gray-800 bg-gray-50 rounded-lg shadow-sm">
-            <span class="text-base font-bold text-black dark:text-gray-100">{{t "widget.key-metrics.title"}}</span>
-        </div>
+<div class="fleet-ops-key-metrics flex flex-col h-full" ...attributes>
+    <div class="flex flex-row 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.key-metrics.title"}}</span>
+        <span class="text-[9px] uppercase tracking-wide text-amber-500 font-bold">Legacy</span>
+    </div>
 
-        <div class="mt-4">
-            {{#if this.getDashboardMetrics.isRunning}}
-                <Spinner />
-            {{else}}
-                <div class="grid grid-cols-2 lg:grid-cols-12 gap-4">
-                    {{#each-in this.metrics as |title options|}}
-                        <Widget::Count @title={{smart-humanize title}} @options={{options}} class="lg:col-span-2 h-full" />
-                    {{/each-in}}
-                </div>
-            {{/if}}
-        </div>
+    <div class="flex-1 p-2.5 border border-t-0 dark:border-gray-700 border-gray-200 rounded-b-md bg-white dark:bg-gray-900 min-h-0">
+        {{#if this.getDashboardMetrics.isRunning}}
+            <div class="flex items-center justify-center h-full"><Spinner /></div>
+        {{else}}
+            <div class="grid grid-cols-2 lg:grid-cols-3 gap-1.5">
+                {{#each this.topMetrics as |entry|}}
+                    <div class="rounded-md border dark:border-gray-700 border-gray-200 dark:bg-gray-800 bg-gray-50 p-2 flex flex-col">
+                        <span class="text-[9px] uppercase tracking-wide text-gray-500 dark:text-gray-400 font-semibold truncate">{{smart-humanize entry.key}}</span>
+                        <span class="text-base font-bold text-black dark:text-gray-100 leading-tight mt-0.5 truncate">{{entry.formattedValue}}</span>
+                    </div>
+                {{/each}}
+            </div>
+        {{/if}}
     </div>
-</div>
+</div>

package/addon/components/widget/fleet-ops-key-metrics.js

@@ -2,6 +2,18 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { task } from 'ember-concurrency';
+import formatCurrency from '@fleetbase/ember-ui/utils/format-currency';
+import formatMeters from '@fleetbase/ember-ui/utils/format-meters';
+
+/** Subset shown in the compact legacy widget. Full 13 metrics still come back from
+ *  the API; users who want the rest should adopt the per-tile KPI widgets. */
+const TOP_KEYS = ['earnings', 'orders_completed', 'orders_in_progress', 'drivers_online', 'fuel_costs', 'total_distance_traveled'];
+
+const FORMATTERS = {
+    money: (v, currency) => formatCurrency(v ?? 0, currency || 'USD'),
+    meters: (v) => formatMeters(v ?? 0),
+    count: (v) => v ?? 0,
+};
 
 export default class WidgetFleetOpsKeyMetricsComponent extends Component {
     /**
@@ -89,4 +101,18 @@ export default class WidgetFleetOpsKeyMetricsComponent extends Component {
 
         return options;
     }
+
+    /**
+     * Pre-formatted top-N entries the compact template renders. Surfaces a fixed
+     * priority order rather than dumping every available metric — the per-tile
+     * KPI widgets cover the long tail for users who want everything.
+     */
+    get topMetrics() {
+        if (!this.metrics) return [];
+        return TOP_KEYS.filter((key) => this.metrics[key] !== undefined).map((key) => {
+            const { value, format } = this.metrics[key];
+            const formatter = FORMATTERS[format] ?? FORMATTERS.count;
+            return { key, formattedValue: formatter(value) };
+        });
+    }
 }

package/addon/components/widget/fuel-efficiency.hbs

@@ -0,0 +1,26 @@
+<div class="fleet-ops-widget fleet-ops-fuel-efficiency flex flex-col h-full {{@class}}" ...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.fuel-efficiency.title"}}</span>
+        <FaIcon @icon="gas-pump" class="text-gray-400" />
+    </div>
+
+    <div class="flex-1 flex flex-col p-2.5 border border-t-0 dark:border-gray-700 border-gray-200 rounded-b-md bg-white dark:bg-gray-900 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.data}}
+            <div class="flex items-baseline justify-between mb-1.5">
+                <span class="text-sm font-bold text-black dark:text-gray-100">
+                    {{format-currency this.data.summary.total_cost this.data.summary.currency}}
+                </span>
+                <span class="text-[10px] text-gray-500 dark:text-gray-400">
+                    {{format-currency this.data.summary.avg_cost_per_km this.data.summary.currency}}/km avg
+                </span>
+            </div>
+            <div class="flex-1 min-h-0">
+                <Chart @type="bar" @labels={{this.data.labels}} @datasets={{this.data.datasets}} @options={{this.chartOptions}} />
+            </div>
+        {{/if}}
+    </div>
+</div>

package/addon/components/widget/fuel-efficiency.js

@@ -0,0 +1,43 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { task } from 'ember-concurrency';
+
+export default class WidgetFuelEfficiencyComponent extends Component {
+    static widgetId = 'fleet-ops-fuel-efficiency-widget';
+
+    @service fetch;
+
+    @tracked data = null;
+    @tracked error = null;
+
+    constructor() {
+        super(...arguments);
+        this.load.perform();
+    }
+
+    get chartOptions() {
+        return {
+            responsive: true,
+            maintainAspectRatio: false,
+            interaction: { mode: 'index', intersect: false },
+            plugins: {
+                legend: { position: 'bottom', labels: { boxWidth: 12, padding: 8 } },
+            },
+            scales: {
+                x: { grid: { display: false } },
+                y1: { position: 'left', beginAtZero: true, title: { display: false } },
+                y2: { position: 'right', beginAtZero: true, grid: { drawOnChartArea: false } },
+            },
+        };
+    }
+
+    @task *load() {
+        try {
+            this.data = yield this.fetch.get('fleet-ops/analytics/fuel-efficiency', { period: '90d' });
+            this.error = null;
+        } catch (e) {
+            this.error = e?.message ?? 'Failed to load fuel data';
+        }
+    }
+}

package/addon/components/widget/geofence-violations.hbs

@@ -0,0 +1,44 @@
+<div class="fleet-ops-widget fleet-ops-geofence-violations flex flex-col h-full {{@class}}" ...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.geofence-violations.title"}}</span>
+        <FaIcon @icon="location-crosshairs" class="text-gray-400" />
+    </div>
+
+    <div class="flex-1 flex flex-col p-2.5 border border-t-0 dark:border-gray-700 border-gray-200 rounded-b-md bg-white dark:bg-gray-900 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.data}}
+            <div class="grid grid-cols-2 gap-1.5 mb-2">
+                <div class="rounded-md border dark:border-gray-700 border-gray-200 p-1.5 text-center">
+                    <div class="text-[9px] uppercase text-gray-500 dark:text-gray-400 leading-none">Today</div>
+                    <div class="text-lg font-bold leading-tight mt-0.5 {{if this.data.violations_today 'text-amber-500' 'text-gray-400'}}">{{this.data.violations_today}}</div>
+                </div>
+                <div class="rounded-md border dark:border-gray-700 border-gray-200 p-1.5 text-center">
+                    <div class="text-[9px] uppercase text-gray-500 dark:text-gray-400 leading-none">Last 7d</div>
+                    <div class="text-lg font-bold text-black dark:text-gray-100 leading-tight mt-0.5">{{this.data.violations_period}}</div>
+                </div>
+            </div>
+            <div class="grid grid-cols-2 gap-2 flex-1 min-h-0">
+                <div class="min-h-0">
+                    {{#if this.zoneDatasets}}
+                        <Chart @type="bar" @labels={{this.zoneLabels}} @datasets={{this.zoneDatasets}} @options={{this.zoneOptions}} />
+                    {{else}}
+                        <div class="flex items-center justify-center h-full text-[10px] text-gray-500">No zone activity.</div>
+                    {{/if}}
+                </div>
+                <div class="min-h-0 overflow-auto divide-y dark:divide-gray-700">
+                    {{#each this.data.top_dwells as |dwell|}}
+                        <div class="py-1">
+                            <div class="text-[11px] font-medium text-black dark:text-gray-100 truncate">{{or dwell.driver_name "Driver"}}</div>
+                            <div class="text-[10px] text-gray-500 dark:text-gray-400 truncate">{{or dwell.zone_name "Zone"}} &middot; {{dwell.duration_minutes}}m</div>
+                        </div>
+                    {{else}}
+                        <div class="text-center text-[10px] text-gray-500 py-3">No dwell outliers.</div>
+                    {{/each}}
+                </div>
+            </div>
+        {{/if}}
+    </div>
+</div>

package/addon/components/widget/geofence-violations.js

@@ -0,0 +1,55 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { task } from 'ember-concurrency';
+
+export default class WidgetGeofenceViolationsComponent extends Component {
+    static widgetId = 'fleet-ops-geofence-violations-widget';
+
+    @service fetch;
+
+    @tracked data = null;
+    @tracked error = null;
+
+    constructor() {
+        super(...arguments);
+        this.load.perform();
+    }
+
+    get zoneDatasets() {
+        if (!this.data?.by_zone?.data?.length) return null;
+        return [
+            {
+                label: 'Events',
+                data: this.data.by_zone.data,
+                backgroundColor: '#f59e0b',
+            },
+        ];
+    }
+
+    get zoneLabels() {
+        return this.data?.by_zone?.labels ?? [];
+    }
+
+    get zoneOptions() {
+        return {
+            responsive: true,
+            maintainAspectRatio: false,
+            indexAxis: 'y',
+            plugins: { legend: { display: false } },
+            scales: {
+                x: { beginAtZero: true, ticks: { precision: 0 } },
+                y: { grid: { display: false } },
+            },
+        };
+    }
+
+    @task *load() {
+        try {
+            this.data = yield this.fetch.get('fleet-ops/analytics/geofence-violations', { period: '7d' });
+            this.error = null;
+        } catch (e) {
+            this.error = e?.message ?? 'Failed to load geofence data';
+        }
+    }
+}

package/addon/components/widget/issues-insights.hbs

@@ -0,0 +1,43 @@
+<div class="fleet-ops-widget fleet-ops-issues-insights flex flex-col h-full {{@class}}" ...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.issues-insights.title"}}</span>
+        <FaIcon @icon="triangle-exclamation" class="text-gray-400" />
+    </div>
+
+    <div class="flex-1 p-2.5 border border-t-0 dark:border-gray-700 border-gray-200 rounded-b-md bg-white dark:bg-gray-900 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.data}}
+            <div class="grid grid-cols-2 gap-2 h-full">
+                <div class="min-h-0">
+                    {{#if this.categoryDatasets}}
+                        <Chart @type="doughnut" @labels={{this.categoryLabels}} @datasets={{this.categoryDatasets}} @options={{this.categoryOptions}} />
+                    {{else}}
+                        <div class="flex items-center justify-center h-full text-[10px] text-gray-500">No issues yet.</div>
+                    {{/if}}
+                </div>
+                <div class="flex flex-col justify-around gap-1.5">
+                    <div>
+                        <div class="text-[9px] uppercase text-gray-500 dark:text-gray-400 leading-none">Open</div>
+                        <div class="text-lg font-bold text-amber-500 leading-tight">{{this.data.open}}</div>
+                    </div>
+                    <div>
+                        <div class="text-[9px] uppercase text-gray-500 dark:text-gray-400 leading-none">Resolved (30d)</div>
+                        <div class="text-lg font-bold text-green-500 leading-tight">{{this.data.resolved_this_period}}</div>
+                    </div>
+                    <div>
+                        <div class="text-[9px] uppercase text-gray-500 dark:text-gray-400 leading-none">Avg Resolve</div>
+                        <div class="text-sm font-bold text-black dark:text-gray-100 leading-tight">{{this.resolutionDisplay}}</div>
+                    </div>
+                    <div class="flex flex-wrap gap-1">
+                        <Badge @status="danger" @text={{concat "H " this.data.by_priority.high}} @hideIcon={{true}} @disableHumanize={{true}} @wrapperClass="text-[9px] px-1 py-0" />
+                        <Badge @status="warning" @text={{concat "M " this.data.by_priority.medium}} @hideIcon={{true}} @disableHumanize={{true}} @wrapperClass="text-[9px] px-1 py-0" />
+                        <Badge @status="info" @text={{concat "L " this.data.by_priority.low}} @hideIcon={{true}} @disableHumanize={{true}} @wrapperClass="text-[9px] px-1 py-0" />
+                    </div>
+                </div>
+            </div>
+        {{/if}}
+    </div>
+</div>