@fleetbase/fleetops-engine 0.6.51 → 0.6.53

package/addon/components/fuel-integration/matching-priority.js

@@ -0,0 +1,145 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+const MATCHING_FIELDS = [
+    {
+        key: 'plate_number',
+        label: 'Plate number',
+        source: 'Provider plate number',
+        target: 'Vehicle plate number',
+        description: 'Best default for fuel card imports. Matches license plates with normalized spacing and casing.',
+    },
+    {
+        key: 'internal_id',
+        label: 'Internal ID',
+        source: 'Provider internal fleet number',
+        target: 'Vehicle internal ID',
+        description: 'Use when the provider fleet number is the same identifier operators maintain on the vehicle.',
+    },
+    {
+        key: 'vin',
+        label: 'VIN',
+        source: 'Provider VIN',
+        target: 'Vehicle VIN',
+        description: 'Matches the vehicle identification number when the provider sends it with the transaction.',
+    },
+    {
+        key: 'serial_number',
+        label: 'Serial number',
+        source: 'Provider serial number',
+        target: 'Vehicle serial number',
+        description: 'Matches manufacturer or fleet serial numbers recorded on the vehicle.',
+    },
+    {
+        key: 'call_sign',
+        label: 'Call sign',
+        source: 'Provider call sign',
+        target: 'Vehicle call sign',
+        description: 'Matches operational call signs when those are shared with the fuel provider.',
+    },
+    {
+        key: 'fuel_card_number',
+        label: 'Fuel card number',
+        source: 'Provider fuel card number',
+        target: 'Vehicle fuel card number',
+        description: 'Use when each vehicle has a dedicated fuel card number saved on the vehicle record.',
+    },
+    {
+        key: 'trip_number',
+        label: 'Trip number / order reference',
+        source: 'Provider trip/order reference',
+        target: 'Order public ID, internal ID, or tracking number',
+        description: 'Links the transaction to an order when the provider sends a trip or order reference. It does not identify the vehicle by itself.',
+    },
+    {
+        key: 'provider_vehicle_id',
+        label: 'Provider vehicle ID',
+        source: 'Provider-specific vehicle ID',
+        target: 'Vehicle provider metadata',
+        description: 'Advanced fallback only. Use it when provider vehicle IDs have been intentionally stored on vehicle metadata.',
+    },
+];
+
+const DEFAULT_MATCHING_ORDER = ['plate_number', 'internal_id', 'vin', 'serial_number', 'call_sign', 'fuel_card_number', 'trip_number'];
+const LEGACY_DEFAULT_MATCHING_ORDER = ['provider_vehicle_id', 'internal_number', 'structure_number', 'plate_number', 'vehicle_card_id', 'trip_number'];
+const LEGACY_FIELD_ALIASES = {
+    internal_number: 'internal_id',
+    vehicle_card_id: 'fuel_card_number',
+};
+
+export default class FuelIntegrationMatchingPriorityComponent extends Component {
+    fields = MATCHING_FIELDS;
+
+    get order() {
+        if (Array.isArray(this.args.order)) {
+            if (this.args.order.join('|') === LEGACY_DEFAULT_MATCHING_ORDER.join('|')) {
+                return DEFAULT_MATCHING_ORDER;
+            }
+
+            return Array.from(this.args.order)
+                .map((key) => LEGACY_FIELD_ALIASES[key] ?? key)
+                .filter((key, index, order) => key && order.indexOf(key) === index);
+        }
+
+        return DEFAULT_MATCHING_ORDER;
+    }
+
+    get selectedFields() {
+        const lastIndex = this.order.length - 1;
+
+        return this.order
+            .map((key, index) => {
+                const field = this.fields.find((option) => option.key === key);
+                if (!field) {
+                    return null;
+                }
+
+                return {
+                    ...field,
+                    index,
+                    priority: index + 1,
+                    canMoveUp: index > 0,
+                    canMoveDown: index < lastIndex,
+                };
+            })
+            .filter(Boolean);
+    }
+
+    get availableFields() {
+        const selected = new Set(this.order);
+        return this.fields.filter((field) => !selected.has(field.key));
+    }
+
+    get hasSelectedFields() {
+        return this.selectedFields.length > 0;
+    }
+
+    updateOrder(order) {
+        this.args.onChange?.(order);
+    }
+
+    @action addField(field) {
+        if (this.order.includes(field.key)) {
+            return;
+        }
+
+        this.updateOrder([...this.order, field.key]);
+    }
+
+    @action removeField(field) {
+        this.updateOrder(this.order.filter((key) => key !== field.key));
+    }
+
+    @action moveField(field, direction) {
+        const currentIndex = this.order.indexOf(field.key);
+        const nextIndex = currentIndex + direction;
+
+        if (currentIndex < 0 || nextIndex < 0 || nextIndex >= this.order.length) {
+            return;
+        }
+
+        const nextOrder = [...this.order];
+        [nextOrder[currentIndex], nextOrder[nextIndex]] = [nextOrder[nextIndex], nextOrder[currentIndex]];
+        this.updateOrder(nextOrder);
+    }
+}

package/addon/components/fuel-report/details.hbs

@@ -9,6 +9,18 @@
                 <div class="field-name">{{t "common.status"}}</div>
                 <div class="field-value"><Badge @status={{@resource.status}} /></div>
             </div>
+            {{#if @resource.source}}
+                <div class="field-info-container">
+                    <div class="field-name">Source</div>
+                    <div class="field-value"><Badge @status={{@resource.source}} /></div>
+                </div>
+            {{/if}}
+            {{#if @resource.provider}}
+                <div class="field-info-container">
+                    <div class="field-name">Provider</div>
+                    <div class="field-value uppercase">{{@resource.provider}}</div>
+                </div>
+            {{/if}}
             <div class="field-info-container">
                 <div class="field-name">{{t "fuel-report.fields.reporter"}}</div>
                 <div class="field-value">{{n-a @resource.reporter_name}}</div>
@@ -45,4 +57,4 @@
     </ContentPanel>
 
     <CustomField::Yield @subject={{@resource}} @viewMode={{true}} @wrapperClass="bordered-top" />
-</div>
+</div>

package/addon/components/issue/details.hbs

@@ -139,67 +139,13 @@
             </section>
 
             <section class="issue-detail-side-card">
-                <div class="issue-detail-section-title">Linked Order</div>
+                <div class="issue-detail-section-title">{{t "order.card.linked-order"}}</div>
                 {{#if this.order}}
-                    <button type="button" class="issue-detail-order-card" {{on "click" this.viewOrder}}>
-                        <div class="issue-detail-order-topline">
-                            <div class="issue-detail-order-title-block">
-                                <div class="issue-detail-order-title">{{this.orderLabel}}</div>
-                                <div class="issue-detail-order-subtitle">{{n-a (smart-humanize this.order.type)}}</div>
-                            </div>
-                            <Badge @status={{this.order.status}} />
-                        </div>
-                        <div class="issue-detail-order-progress {{this.orderProgressClass}}">
-                            <span></span>
-                        </div>
-                        {{#if this.hasOrderStops}}
-                            <div class="issue-detail-order-route">
-                                <div class="issue-detail-order-stop">
-                                    <div class="issue-detail-order-stop-marker pickup">1</div>
-                                    <div class="min-w-0">
-                                        <div class="issue-detail-order-stop-label">Pickup</div>
-                                        <div class="issue-detail-order-stop-address">{{n-a this.orderOriginAddress "No pickup address"}}</div>
-                                    </div>
-                                </div>
-                                {{#if this.isMultiStopOrder}}
-                                    <div class="issue-detail-order-stop compact">
-                                        <div class="issue-detail-order-stop-marker middle">+</div>
-                                        <div class="min-w-0">
-                                            <div class="issue-detail-order-stop-label">Waypoints</div>
-                                            <div class="issue-detail-order-stop-address">{{this.middleStopCount}} additional {{if (eq this.middleStopCount 1) "stop" "stops"}}</div>
-                                        </div>
-                                    </div>
-                                {{/if}}
-                                <div class="issue-detail-order-stop">
-                                    <div class="issue-detail-order-stop-marker dropoff">{{this.orderStopCount}}</div>
-                                    <div class="min-w-0">
-                                        <div class="issue-detail-order-stop-label">{{if (eq this.orderDestination.type "return") "Return" "Dropoff"}}</div>
-                                        <div class="issue-detail-order-stop-address">{{n-a this.orderDestinationAddress "No dropoff address"}}</div>
-                                    </div>
-                                </div>
-                            </div>
-                        {{else}}
-                            <div class="issue-detail-empty issue-detail-empty-compact">
-                                <FaIcon @icon="route" />
-                                <span>No route details available.</span>
-                            </div>
-                        {{/if}}
-                        <div class="issue-detail-order-meta">
-                            {{#if this.orderScheduledAt}}
-                                <span><FaIcon @icon="calendar" /> {{format-date-fns this.orderScheduledAt "MMM d, HH:mm"}}</span>
-                            {{/if}}
-                            {{#if this.orderDriverLabel}}
-                                <span><FaIcon @icon="id-card" /> {{this.orderDriverLabel}}</span>
-                            {{/if}}
-                            {{#if this.orderVehicleLabel}}
-                                <span><FaIcon @icon="truck" /> {{this.orderVehicleLabel}}</span>
-                            {{/if}}
-                        </div>
-                    </button>
+                    <Order::Card @order={{this.order}} @variant="default" @interactive={{true}} @onClick={{this.viewOrder}} />
                 {{else}}
                     <div class="issue-detail-empty">
                         <FaIcon @icon="route" />
-                        <span>No order is linked to this issue.</span>
+                        <span>{{t "order.card.no-order-linked"}}</span>
                     </div>
                 {{/if}}
             </section>

package/addon/components/issue/details.js

@@ -3,9 +3,6 @@ import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
 import { formatDistanceStrict, isValid } from 'date-fns';
 
-const COMPLETE_ORDER_STATUSES = ['completed', 'delivered'];
-const ACTIVE_ORDER_STATUSES = ['dispatched', 'started', 'in_progress', 'driver_enroute', 'driver_nearby'];
-
 export default class IssueDetailsComponent extends Component {
     @service hostRouter;
     @service issueActions;
@@ -121,104 +118,11 @@ export default class IssueDetailsComponent extends Component {
         return formatDistanceStrict(createdAt, resolvedAt);
     }
 
-    get orderLabel() {
-        return this.order?.tracking_number?.tracking_number || this.order?.tracking_number || this.order?.tracking || this.order?.public_id || this.order?.id;
-    }
-
-    get orderStops() {
-        const payload = this.order?.payload ?? {};
-        const stops = [];
-
-        if (payload.pickup) {
-            stops.push({ type: 'pickup', place: payload.pickup });
-        }
-
-        (payload.waypoints ?? []).forEach((waypoint, index) => {
-            stops.push({
-                type: waypoint.type ?? 'waypoint',
-                place: waypoint.place ?? waypoint,
-                index: index + 1,
-            });
-        });
-
-        if (payload.dropoff) {
-            stops.push({ type: 'dropoff', place: payload.dropoff });
-        }
-
-        if (payload.return) {
-            stops.push({ type: 'return', place: payload.return });
-        }
-
-        return stops.filter((stop) => this.addressForPlace(stop.place));
-    }
-
-    get orderOrigin() {
-        return this.orderStops[0];
-    }
-
-    get orderDestination() {
-        return this.orderStops[this.orderStops.length - 1];
-    }
-
-    get orderOriginAddress() {
-        return this.addressForPlace(this.orderOrigin?.place);
-    }
-
-    get orderDestinationAddress() {
-        return this.addressForPlace(this.orderDestination?.place);
-    }
-
-    get orderStopCount() {
-        return this.orderStops.length;
-    }
-
-    get middleStopCount() {
-        return Math.max(this.orderStopCount - 2, 0);
-    }
-
-    get isMultiStopOrder() {
-        return this.orderStopCount > 2;
-    }
-
-    get hasOrderStops() {
-        return this.orderStopCount > 0;
-    }
-
-    get orderProgressClass() {
-        const status = this.order?.status;
-
-        if (COMPLETE_ORDER_STATUSES.includes(status)) {
-            return 'is-complete';
-        }
-
-        if (ACTIVE_ORDER_STATUSES.includes(status)) {
-            return 'is-active';
-        }
-
-        return 'is-pending';
-    }
-
-    get orderScheduledAt() {
-        return this.order?.scheduled_at || this.order?.created_at || this.order?.createdAt;
-    }
-
-    get orderDriverLabel() {
-        return this.order?.driver_assigned?.name || this.order?.driver_name || this.order?.driver?.name;
-    }
-
-    get orderVehicleLabel() {
-        return this.order?.vehicle_assigned?.displayName || this.order?.vehicle_assigned?.display_name || this.order?.vehicle_name || this.order?.vehicle?.displayName;
-    }
-
     get hasLocation() {
         const location = this.resource?.location;
         return Boolean(location?.latitude || location?.longitude || location?.coordinates);
     }
 
-    addressForPlace(place) {
-        return place?.address ?? place?.address_html ?? place?.street1 ?? place?.name;
-    }
-
     dateFromValue(value) {
         if (!value) {
             return null;

package/addon/components/layout/fleet-ops-sidebar/operations-monitor.hbs

@@ -0,0 +1,201 @@
+<div class="fleet-ops-operations-monitor" {{did-insert this.registerMonitor}}>
+    <div class="fleet-ops-operations-monitor-divider"></div>
+
+    <div class="mb-2 flex items-center justify-between px-1">
+        <div class="min-w-0">
+            <div class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Live Operations</div>
+            <div class="mt-1 flex flex-col gap-0.5 text-xs text-gray-500 dark:text-gray-400">
+                <span class="flex items-center gap-1"><span class="h-1.5 w-1.5 rounded-full bg-green-500"></span>{{this.driverOnlineSummary}}</span>
+                <span class="flex items-center gap-1"><span class="h-1.5 w-1.5 rounded-full bg-blue-500"></span>{{this.vehicleOnlineSummary}}</span>
+            </div>
+        </div>
+    </div>
+
+    <div class="mb-2 grid grid-cols-3 gap-1 rounded-md bg-gray-100 p-1 dark:bg-gray-800">
+        {{#each this.tabs as |tab|}}
+            <button
+                type="button"
+                class="rounded px-1.5 py-1 text-xs font-medium {{if (eq this.activeTab tab.id) 'bg-white text-gray-900 shadow-sm dark:bg-gray-700 dark:text-white' 'text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white'}}"
+                data-test-operations-monitor-tab={{tab.id}}
+                {{on "click" (fn this.setActiveTab tab.id)}}
+            >
+                <span>{{tab.label}}</span>
+            </button>
+        {{/each}}
+    </div>
+
+    <div class="mb-2 flex items-center gap-1.5 rounded-md bg-gray-50 px-2 py-1 text-gray-400 dark:bg-gray-800">
+        <FaIcon @icon="magnifying-glass" @size="xs" />
+        <input
+            type="search"
+            value={{this.query}}
+            placeholder="Filter resources..."
+            class="min-w-0 flex-1 appearance-none border-0 bg-transparent p-0 text-xs leading-5 text-gray-700 outline-none shadow-none ring-0 focus:border-transparent focus:outline-none focus:ring-0 dark:text-gray-100"
+            data-test-operations-monitor-filter
+            {{on "input" this.updateQuery}}
+        />
+    </div>
+
+    <div class="fleet-ops-operations-monitor-list space-y-1" data-test-operations-monitor-list {{did-insert this.registerList}}>
+        {{#if (eq this.activeTab "drivers")}}
+            {{#each this.drivers as |driver|}}
+                <div class="fleet-ops-operations-monitor-row group flex items-start gap-2 rounded-md px-2 py-1.5 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-800" data-test-operations-monitor-row>
+                    <button type="button" class="flex min-w-0 flex-1 items-center gap-2 text-left" {{on "click" (fn this.locateDriver driver)}}>
+                        <span class="h-2 w-2 shrink-0 rounded-full {{if driver.online 'bg-green-500' 'bg-yellow-300'}}"></span>
+                        <span class="min-w-0 flex-1">
+                            <span class="block truncate leading-5">{{or driver.displayName driver.display_name driver.name driver.public_id}}</span>
+                            <span class="block truncate text-xs leading-4 text-gray-400">{{if driver.online "Online" "Offline"}} - {{or driver.vehicle_name driver.public_id driver.status}}</span>
+                        </span>
+                    </button>
+                    <div class="fleet-ops-operations-monitor-row-actions">
+                        <DropdownButton
+                            @icon="ellipsis-h"
+                            @iconPrefix="fas"
+                            @size="xs"
+                            @buttonClass="fleetops-btn-xxs"
+                            @contentClass="dropdown-menu fleet-ops-operations-monitor-dropdown"
+                            @horizontalPosition="right"
+                            @calculatePosition={{this.calculateDropdownPosition}}
+                            as |dd|
+                        >
+                            <div class="next-dd-menu mx-0 mt-1" role="menu">
+                                <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.viewDriver driver)}}>View details</a>
+                                <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.editDriver driver)}}>Edit details</a>
+                                <div class="next-dd-menu-seperator"></div>
+                                <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.assignOrderToDriver driver)}}>Assign order</a>
+                                <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.assignVehicleToDriver driver)}}>Assign vehicle</a>
+                                <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.locateDriver driver)}}>Locate on map</a>
+                                <div class="next-dd-menu-seperator"></div>
+                                <a href="javascript:;" class="next-dd-item text-danger" {{on "click" (dropdown-fn dd this.deleteDriver driver)}}>Delete driver</a>
+                            </div>
+                        </DropdownButton>
+                    </div>
+                </div>
+            {{else}}
+                {{#let this.emptyState as |emptyState|}}
+                    <div class="fleet-ops-operations-monitor-empty" data-test-operations-monitor-empty-state>
+                        <span class="fleet-ops-operations-monitor-empty-icon"><FaIcon @icon={{emptyState.icon}} @size="xs" /></span>
+                        <span class="fleet-ops-operations-monitor-empty-title">{{emptyState.title}}</span>
+                        <span class="fleet-ops-operations-monitor-empty-description">{{emptyState.description}}</span>
+                        <button type="button" class="fleet-ops-operations-monitor-empty-action" {{on "click" this.performEmptyStateAction}}>{{emptyState.action}}</button>
+                    </div>
+                {{/let}}
+            {{/each}}
+        {{else if (eq this.activeTab "vehicles")}}
+            {{#each this.vehicles as |vehicle|}}
+                <div class="fleet-ops-operations-monitor-row group flex items-start gap-2 rounded-md px-2 py-1.5 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-800" data-test-operations-monitor-row>
+                    <button type="button" class="flex min-w-0 flex-1 items-center gap-2 text-left" {{on "click" (fn this.locateVehicle vehicle)}}>
+                        <span class="h-2 w-2 shrink-0 rounded-full {{if vehicle.online 'bg-green-500' 'bg-yellow-300'}}"></span>
+                        <span class="min-w-0 flex-1">
+                            <span class="block truncate leading-5">{{or vehicle.displayName vehicle.display_name vehicle.name vehicle.public_id}}</span>
+                            <span class="block truncate text-xs leading-4 text-gray-400">{{if vehicle.online "Online" "Offline"}} - {{or vehicle.driver_name vehicle.public_id vehicle.status}}</span>
+                        </span>
+                    </button>
+                    <div class="fleet-ops-operations-monitor-row-actions">
+                        <DropdownButton
+                            @icon="ellipsis-h"
+                            @iconPrefix="fas"
+                            @size="xs"
+                            @buttonClass="fleetops-btn-xxs"
+                            @contentClass="dropdown-menu fleet-ops-operations-monitor-dropdown"
+                            @horizontalPosition="right"
+                            @calculatePosition={{this.calculateDropdownPosition}}
+                            as |dd|
+                        >
+                            <div class="next-dd-menu mx-0 mt-1" role="menu">
+                                <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.viewVehicle vehicle)}}>View details</a>
+                                <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.editVehicle vehicle)}}>Edit details</a>
+                                <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.locateVehicle vehicle)}}>Locate on map</a>
+                                <div class="next-dd-menu-seperator"></div>
+                                <a href="javascript:;" class="next-dd-item text-danger" {{on "click" (dropdown-fn dd this.deleteVehicle vehicle)}}>Delete vehicle</a>
+                            </div>
+                        </DropdownButton>
+                    </div>
+                </div>
+            {{else}}
+                {{#let this.emptyState as |emptyState|}}
+                    <div class="fleet-ops-operations-monitor-empty" data-test-operations-monitor-empty-state>
+                        <span class="fleet-ops-operations-monitor-empty-icon"><FaIcon @icon={{emptyState.icon}} @size="xs" /></span>
+                        <span class="fleet-ops-operations-monitor-empty-title">{{emptyState.title}}</span>
+                        <span class="fleet-ops-operations-monitor-empty-description">{{emptyState.description}}</span>
+                        <button type="button" class="fleet-ops-operations-monitor-empty-action" {{on "click" this.performEmptyStateAction}}>{{emptyState.action}}</button>
+                    </div>
+                {{/let}}
+            {{/each}}
+        {{else}}
+            {{#each this.fleetRows as |row|}}
+                {{#if (eq row.type "fleet")}}
+                    <div class="fleet-ops-operations-monitor-row fleet-ops-operations-monitor-row-depth-{{row.depth}} group flex items-start gap-2 rounded-md px-2 py-1.5 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-800" data-test-operations-monitor-row>
+                        <button type="button" class="flex min-w-0 flex-1 items-start gap-2 text-left" {{on "click" (fn this.toggleFleet row.fleet)}}>
+                            <span class="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded bg-gray-100 text-gray-400 dark:bg-gray-800">
+                                {{#if (this.fleetHasChildren row.fleet)}}
+                                    <FaIcon @icon={{if (this.isFleetExpanded row.fleet) "chevron-down" "chevron-right"}} @size="xs" />
+                                {{else}}
+                                    <FaIcon @icon="user-group" @size="xs" />
+                                {{/if}}
+                            </span>
+                            <span class="min-w-0 flex-1">
+                                <span class="block truncate leading-5">{{or row.fleet.displayName row.fleet.display_name row.fleet.name row.fleet.public_id}}</span>
+                                <span class="block truncate text-xs leading-4 text-gray-400">{{this.fleetSubtitle row.fleet}}</span>
+                            </span>
+                        </button>
+                        <div class="fleet-ops-operations-monitor-row-actions">
+                            <DropdownButton
+                                @icon="ellipsis-h"
+                                @iconPrefix="fas"
+                                @size="xs"
+                                @buttonClass="fleetops-btn-xxs"
+                                @contentClass="dropdown-menu fleet-ops-operations-monitor-dropdown"
+                                @horizontalPosition="right"
+                                @calculatePosition={{this.calculateDropdownPosition}}
+                                as |dd|
+                            >
+                                <div class="next-dd-menu mx-0 mt-1" role="menu">
+                                    <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.viewFleet row.fleet)}}>View details</a>
+                                    <div class="next-dd-menu-seperator"></div>
+                                    <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.assignDriverToFleet row.fleet)}}>Assign driver</a>
+                                    <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.assignVehicleToFleet row.fleet)}}>Assign vehicle</a>
+                                </div>
+                            </DropdownButton>
+                        </div>
+                    </div>
+                {{else if (eq row.type "driver")}}
+                    <button
+                        type="button"
+                        class="fleet-ops-operations-monitor-child-row fleet-ops-operations-monitor-row-depth-{{row.depth}} flex w-full min-w-0 items-start gap-2 rounded-md px-2 py-1 text-left text-xs text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800"
+                        data-test-operations-monitor-row
+                        {{on "click" (fn this.locateDriver row.driver)}}
+                    >
+                        <span class="mt-1 h-1.5 w-1.5 shrink-0 rounded-full {{if row.driver.online 'bg-green-500' 'bg-yellow-300'}}"></span>
+                        <span class="min-w-0 flex-1">
+                            <span class="block truncate leading-4">{{or row.driver.displayName row.driver.display_name row.driver.name row.driver.public_id}}</span>
+                            <span class="block truncate text-xs leading-4 text-gray-400">Driver - {{if row.driver.online "Online" "Offline"}}</span>
+                        </span>
+                    </button>
+                {{else}}
+                    <button
+                        type="button"
+                        class="fleet-ops-operations-monitor-child-row fleet-ops-operations-monitor-row-depth-{{row.depth}} flex w-full min-w-0 items-start gap-2 rounded-md px-2 py-1 text-left text-xs text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800"
+                        data-test-operations-monitor-row
+                        {{on "click" (fn this.locateVehicle row.vehicle)}}
+                    >
+                        <span class="mt-1 h-1.5 w-1.5 shrink-0 rounded-full {{if row.vehicle.online 'bg-green-500' 'bg-yellow-300'}}"></span>
+                        <span class="min-w-0 flex-1">
+                            <span class="block truncate leading-4">{{or row.vehicle.displayName row.vehicle.display_name row.vehicle.name row.vehicle.public_id}}</span>
+                            <span class="block truncate text-xs leading-4 text-gray-400">Vehicle - {{if row.vehicle.online "Online" "Offline"}}</span>
+                        </span>
+                    </button>
+                {{/if}}
+            {{else}}
+                {{#let this.emptyState as |emptyState|}}
+                    <div class="fleet-ops-operations-monitor-empty" data-test-operations-monitor-empty-state>
+                        <span class="fleet-ops-operations-monitor-empty-icon"><FaIcon @icon={{emptyState.icon}} @size="xs" /></span>
+                        <span class="fleet-ops-operations-monitor-empty-title">{{emptyState.title}}</span>
+                        <span class="fleet-ops-operations-monitor-empty-description">{{emptyState.description}}</span>
+                        <button type="button" class="fleet-ops-operations-monitor-empty-action" {{on "click" this.performEmptyStateAction}}>{{emptyState.action}}</button>
+                    </div>
+                {{/let}}
+            {{/each}}
+        {{/if}}
+    </div>
+</div>