@fleetbase/fleetops-engine 0.6.55 → 0.6.57

package/addon/components/device-event/details.hbs

@@ -0,0 +1,192 @@
+<div class="flex flex-col gap-3 p-3" ...attributes>
+    <section class="overflow-hidden rounded-md border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800">
+        <div class="flex flex-col gap-3 p-3 lg:flex-row lg:items-start lg:justify-between">
+            <div class="min-w-0">
+                <div class="flex flex-wrap items-center gap-2">
+                    <h2 class="truncate text-base font-bold text-gray-900 dark:text-gray-100">{{smart-humanize this.eventType}}</h2>
+                    <Badge @status={{this.severity}} @hideStatusDot={{true}}>{{smart-humanize this.severity}}</Badge>
+                    <Badge @status={{this.processedStatus}} @hideStatusDot={{true}}>{{this.processedLabel}}</Badge>
+                </div>
+
+                <p class="mt-2 max-w-4xl text-sm leading-5 text-gray-700 dark:text-gray-200">{{n-a this.message}}</p>
+
+                <div class="mt-2 flex flex-wrap gap-2 text-xs text-gray-500 dark:text-gray-300">
+                    <span>Occurred: {{n-a (format-date-fns this.occurredAt "dd MMM yyyy, HH:mm")}}</span>
+                    <span>Processed: {{n-a (format-date-fns this.processedAt "dd MMM yyyy, HH:mm")}}</span>
+                    <span>Public ID: {{n-a @resource.public_id}}</span>
+                    <span>UUID: {{n-a @resource.id}}</span>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-4">
+        {{#each this.metrics as |metric|}}
+            <div class="fleet-ops-widget fleet-ops-kpi-tile fleetops-connectivity-kpi-tile {{metric.accentClass}} relative min-h-[82px] overflow-hidden rounded-md border bg-white shadow-sm dark:bg-gray-800">
+                <div class="flex h-full items-start justify-between gap-2 p-3">
+                    <div class="min-w-0">
+                        <div class="truncate text-[10px] font-bold uppercase text-gray-500 dark:text-gray-400">{{metric.label}}</div>
+                        <div class="mt-1 truncate text-lg font-extrabold leading-none text-gray-900 dark:text-gray-50">{{n-a metric.value}}</div>
+                        {{#if metric.meta}}
+                            <div class="mt-1 truncate text-xs text-gray-500 dark:text-gray-300">{{metric.meta}}</div>
+                        {{/if}}
+                    </div>
+                    <div class="fleetops-connectivity-kpi-icon flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md text-[13px]">
+                        <FaIcon @icon={{metric.icon}} />
+                    </div>
+                </div>
+            </div>
+        {{/each}}
+    </section>
+
+    <section class="grid grid-cols-1 gap-3 xl:grid-cols-2">
+        <div class="overflow-hidden rounded-md border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800">
+            <div class="border-b border-gray-200 px-3 py-2 dark:border-gray-700">
+                <h3 class="text-sm font-bold text-gray-900 dark:text-gray-100">Event Details</h3>
+            </div>
+            <div class="grid grid-cols-1 gap-2 p-3 sm:grid-cols-2 lg:grid-cols-3">
+                <div class="field-info-container">
+                    <div class="field-name">Event Type</div>
+                    <div class="field-value">{{n-a (smart-humanize this.eventType)}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Severity</div>
+                    <div class="field-value"><Badge @status={{this.severity}}>{{smart-humanize this.severity}}</Badge></div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">State</div>
+                    <div class="field-value">{{n-a (smart-humanize @resource.state)}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Code</div>
+                    <div class="field-value">{{n-a @resource.code}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Reason</div>
+                    <div class="field-value">{{n-a @resource.reason}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Mileage</div>
+                    <div class="field-value">{{n-a @resource.mileage}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Age</div>
+                    <div class="field-value">{{#if this.ageMinutes}}{{this.ageMinutes}} minutes{{else}}{{n-a null}}{{/if}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Processing Delay</div>
+                    <div class="field-value">{{#if this.processingDelay}}{{this.processingDelay}} minutes{{else}}{{n-a null}}{{/if}}</div>
+                </div>
+                <div class="field-info-container sm:col-span-2 lg:col-span-3">
+                    <div class="field-name">Comment</div>
+                    <div class="field-value whitespace-pre-line">{{n-a @resource.comment}}</div>
+                </div>
+            </div>
+        </div>
+
+        <div class="overflow-hidden rounded-md border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800">
+            <div class="border-b border-gray-200 px-3 py-2 dark:border-gray-700">
+                <h3 class="text-sm font-bold text-gray-900 dark:text-gray-100">Device & Provider</h3>
+            </div>
+            <div class="grid grid-cols-1 gap-2 p-3 sm:grid-cols-2 lg:grid-cols-3">
+                <div class="field-info-container">
+                    <div class="field-name">Device</div>
+                    <div class="field-value">
+                        {{#if this.deviceRouteModel}}
+                            <button
+                                type="button"
+                                class="text-blue-600 hover:text-blue-700 hover:underline dark:text-blue-300 dark:hover:text-blue-200"
+                                data-test-device-event-device-link
+                                {{on "click" this.openDevice}}
+                            >
+                                {{n-a this.deviceName}}
+                            </button>
+                        {{else}}
+                            {{n-a this.deviceName}}
+                        {{/if}}
+                    </div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Device UUID</div>
+                    <div class="field-value">{{n-a @resource.device_uuid}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Device ID</div>
+                    <div class="field-value">{{n-a @resource.device_id}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">IMEI</div>
+                    <div class="field-value">{{n-a @resource.device_imei}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Serial Number</div>
+                    <div class="field-value">{{n-a @resource.device_serial_number}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">IDENT</div>
+                    <div class="field-value">{{n-a @resource.ident}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Provider</div>
+                    <div class="field-value">
+                        {{#if this.telematicRouteModel}}
+                            <button
+                                type="button"
+                                class="text-blue-600 hover:text-blue-700 hover:underline dark:text-blue-300 dark:hover:text-blue-200"
+                                data-test-device-event-telematic-link
+                                {{on "click" this.openTelematic}}
+                            >
+                                {{n-a this.providerLabel}}
+                            </button>
+                        {{else}}
+                            {{n-a this.providerLabel}}
+                        {{/if}}
+                    </div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Protocol</div>
+                    <div class="field-value">{{n-a @resource.protocol}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Telematic UUID</div>
+                    <div class="field-value">{{n-a @resource.telematic_uuid}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Device Status</div>
+                    <div class="field-value" data-test-device-event-device-status>
+                        {{#if this.deviceStatus}}
+                            <Badge @status={{this.deviceStatus}}>{{smart-humanize this.deviceStatus}}</Badge>
+                        {{else}}
+                            {{n-a null}}
+                        {{/if}}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="grid grid-cols-1 gap-3 xl:grid-cols-3">
+        <div class="overflow-hidden rounded-md border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800">
+            <div class="border-b border-gray-200 px-3 py-2 dark:border-gray-700">
+                <h3 class="text-sm font-bold text-gray-900 dark:text-gray-100">Payload</h3>
+            </div>
+            <pre class="max-h-80 overflow-auto bg-gray-900 p-3 text-[11px] leading-5 text-gray-100">{{n-a this.payloadJson}}</pre>
+        </div>
+
+        <div class="overflow-hidden rounded-md border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800">
+            <div class="border-b border-gray-200 px-3 py-2 dark:border-gray-700">
+                <h3 class="text-sm font-bold text-gray-900 dark:text-gray-100">Data</h3>
+            </div>
+            <pre class="max-h-80 overflow-auto bg-gray-900 p-3 text-[11px] leading-5 text-gray-100">{{n-a this.dataJson}}</pre>
+        </div>
+
+        <div class="overflow-hidden rounded-md border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800">
+            <div class="border-b border-gray-200 px-3 py-2 dark:border-gray-700">
+                <h3 class="text-sm font-bold text-gray-900 dark:text-gray-100">Meta</h3>
+            </div>
+            <pre class="max-h-80 overflow-auto bg-gray-900 p-3 text-[11px] leading-5 text-gray-100">{{n-a this.metaJson}}</pre>
+        </div>
+    </section>
+
+    <CustomField::Yield @subject={{@resource}} @viewMode={{true}} @wrapperClass="bordered-top" />
+</div>

package/addon/components/device-event/details.js

@@ -0,0 +1,151 @@
+import Component from '@glimmer/component';
+import { action, get } from '@ember/object';
+import { inject as service } from '@ember/service';
+
+const warningSeverities = ['warning', 'error', 'critical', 'high'];
+
+function firstPresent(...values) {
+    return values.find((value) => value !== undefined && value !== null && value !== '');
+}
+
+function prettyJson(value) {
+    if (!value) {
+        return null;
+    }
+
+    if (typeof value === 'string') {
+        try {
+            return JSON.stringify(JSON.parse(value), null, 2);
+        } catch {
+            return value;
+        }
+    }
+
+    return JSON.stringify(value, null, 2);
+}
+
+export default class DeviceEventDetailsComponent extends Component {
+    @service hostRouter;
+
+    get resource() {
+        return this.args.resource ?? {};
+    }
+
+    get eventType() {
+        return firstPresent(get(this.resource, 'event_type'), get(this.resource, 'eventType'), get(this.resource, 'type'));
+    }
+
+    get severity() {
+        return firstPresent(get(this.resource, 'severity'), 'info');
+    }
+
+    get isProcessed() {
+        return Boolean(firstPresent(get(this.resource, 'processed_at'), get(this.resource, 'processedAt')));
+    }
+
+    get processedStatus() {
+        return this.isProcessed ? 'success' : 'warning';
+    }
+
+    get processedLabel() {
+        return this.isProcessed ? 'Processed' : 'Unprocessed';
+    }
+
+    get severityAccentClass() {
+        return warningSeverities.includes(String(this.severity ?? '').toLowerCase()) ? 'fleetops-connectivity-kpi-accent-amber' : 'fleetops-connectivity-kpi-accent-green';
+    }
+
+    get message() {
+        return get(this.resource, 'message');
+    }
+
+    get occurredAt() {
+        return firstPresent(get(this.resource, 'occurred_at'), get(this.resource, 'occurredAt'), get(this.resource, 'created_at'), get(this.resource, 'createdAt'));
+    }
+
+    get processedAt() {
+        return firstPresent(get(this.resource, 'processed_at'), get(this.resource, 'processedAt'));
+    }
+
+    get processingDelay() {
+        return firstPresent(get(this.resource, 'processing_delay_minutes'), get(this.resource, 'processingDelayMinutes'));
+    }
+
+    get ageMinutes() {
+        return firstPresent(get(this.resource, 'age_minutes'), get(this.resource, 'ageMinutes'));
+    }
+
+    get deviceName() {
+        return firstPresent(
+            get(this.resource, 'device.displayName'),
+            get(this.resource, 'device.display_name'),
+            get(this.resource, 'device.name'),
+            get(this.resource, 'device_name'),
+            get(this.resource, 'device_id')
+        );
+    }
+
+    get deviceIdentifier() {
+        return firstPresent(
+            get(this.resource, 'device_id'),
+            get(this.resource, 'device.device_id'),
+            get(this.resource, 'device_imei'),
+            get(this.resource, 'device_serial_number'),
+            get(this.resource, 'ident')
+        );
+    }
+
+    get deviceRouteModel() {
+        return firstPresent(get(this.resource, 'device.id'), get(this.resource, 'device.public_id'), get(this.resource, 'device_uuid'));
+    }
+
+    get providerLabel() {
+        return firstPresent(get(this.resource, 'provider_descriptor.label'), get(this.resource, 'telematic.name'), get(this.resource, 'telematic_name'), get(this.resource, 'provider'));
+    }
+
+    get telematicRouteModel() {
+        return firstPresent(get(this.resource, 'telematic.id'), get(this.resource, 'telematic.public_id'), get(this.resource, 'telematic_uuid'));
+    }
+
+    get deviceStatus() {
+        return firstPresent(get(this.resource, 'device.status'), get(this.resource, 'device_status'), get(this.resource, 'device_connection_status'));
+    }
+
+    get metrics() {
+        return [
+            { label: 'Severity', value: this.severity, icon: 'triangle-exclamation', accentClass: this.severityAccentClass },
+            {
+                label: 'Processing',
+                value: this.processedLabel,
+                icon: this.isProcessed ? 'check' : 'clock',
+                accentClass: this.isProcessed ? 'fleetops-connectivity-kpi-accent-green' : 'fleetops-connectivity-kpi-accent-rose',
+            },
+            { label: 'Device', value: this.deviceName, meta: this.deviceIdentifier, icon: 'microchip', accentClass: 'fleetops-connectivity-kpi-accent-blue' },
+            { label: 'Provider', value: this.providerLabel, icon: 'satellite-dish', accentClass: 'fleetops-connectivity-kpi-accent-green' },
+        ];
+    }
+
+    get payloadJson() {
+        return prettyJson(get(this.resource, 'payload'));
+    }
+
+    get dataJson() {
+        return prettyJson(get(this.resource, 'data'));
+    }
+
+    get metaJson() {
+        return prettyJson(get(this.resource, 'meta'));
+    }
+
+    @action openDevice() {
+        if (this.deviceRouteModel) {
+            return this.hostRouter.transitionTo('console.fleet-ops.connectivity.devices.index.details', this.deviceRouteModel);
+        }
+    }
+
+    @action openTelematic() {
+        if (this.telematicRouteModel) {
+            return this.hostRouter.transitionTo('console.fleet-ops.connectivity.telematics.details', this.telematicRouteModel);
+        }
+    }
+}

package/addon/components/driver/schedule.js

@@ -219,7 +219,7 @@ export default class DriverScheduleComponent extends Component {
     }
 
     /**
-     * Load HOS (Hours of Service) status from the FleetOps driver endpoint.
+     * Load HOS (Hours of Service) status from the Fleet-Ops driver endpoint.
      * Best-effort — if the endpoint is not yet implemented hosStatus stays null.
      */
     @task *loadHOSStatus() {

package/addon/components/fleet/details.hbs

@@ -3,30 +3,43 @@
         <div class="grid grid-cols-2 gap-2 text-xs dark:text-gray-100">
             <div class="field-info-container">
                 <div class="field-name">{{t "common.name"}}</div>
-                <div class="field-value">{{n-a @resource.name}}</div>
+                <div class="field-value">{{n-a this.resource.name}}</div>
             </div>
             <div class="field-info-container">
                 <div class="field-name">{{t "resource.service-area"}}</div>
-                <div class="field-value">{{n-a @resource.service_area.name}}</div>
+                <div class="field-value">{{n-a this.resource.service_area.name}}</div>
             </div>
             <div class="field-info-container">
                 <div class="field-name">{{t "resource.zone"}}</div>
-                <div class="field-value">{{n-a @resource.zone.name}}</div>
+                <div class="field-value">{{n-a this.resource.zone.name}}</div>
             </div>
             <div class="field-info-container">
                 <div class="field-name">{{t "fleet.fields.task"}}</div>
-                <div class="field-value">{{n-a @resource.task}}</div>
+                <div class="field-value">{{n-a this.resource.task}}</div>
             </div>
             <div class="field-info-container">
                 <div class="field-name">{{t "fleet.fields.active-manpower"}}</div>
-                <div class="field-value">{{@resource.drivers_online_count}} of {{@resource.drivers_count}} Online</div>
+                <div class="field-value">{{this.driversOnlineCount}} of {{this.driversCount}} Online</div>
             </div>
             <div class="field-info-container">
                 <div class="field-name">{{t "common.date-created"}}</div>
-                <div class="field-value">{{@resource.createdAtShort}}</div>
+                <div class="field-value">{{this.resource.createdAtShort}}</div>
             </div>
         </div>
     </ContentPanel>
 
-    <CustomField::Yield @subject={{@resource}} @viewMode={{true}} @wrapperClass="bordered-top" />
-</div>
+    <ContentPanel @title="Hierarchy" @open={{true}} @wrapperClass="bordered-top" @panelBodyWrapperClass="p-0i">
+        <Fleet::HierarchyTree
+            @fleet={{this.resource}}
+            @onViewFleet={{this.viewFleet}}
+            @onViewDriver={{this.viewDriver}}
+            @onViewVehicle={{this.viewVehicle}}
+            @onAssignDriver={{this.assignDriver}}
+            @onAssignVehicle={{this.assignVehicle}}
+        />
+    </ContentPanel>
+
+    <CustomField::Yield @subject={{this.resource}} @viewMode={{true}} @wrapperClass="bordered-top" />
+
+    <Spacer @height="200px" />
+</div>

package/addon/components/fleet/details.js

@@ -1,3 +1,57 @@
 import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
 
-export default class FleetDetailsComponent extends Component {}
+export default class FleetDetailsComponent extends Component {
+    @service fleetActions;
+    @service driverActions;
+    @service vehicleActions;
+
+    get resource() {
+        return this.args.resource ?? this.args.fleet;
+    }
+
+    get drivers() {
+        return this.resourceArray(this.resource?.drivers);
+    }
+
+    get driversCount() {
+        return Number(this.resource?.drivers_count ?? this.drivers.length ?? 0);
+    }
+
+    get driversOnlineCount() {
+        return Number(this.resource?.drivers_online_count ?? this.drivers.filter((driver) => driver?.online).length ?? 0);
+    }
+
+    resourceArray(resources) {
+        if (!resources) {
+            return [];
+        }
+
+        if (typeof resources.toArray === 'function') {
+            return resources.toArray();
+        }
+
+        return Array.isArray(resources) ? resources : [];
+    }
+
+    @action viewFleet(fleet) {
+        return this.fleetActions.panel.view(fleet);
+    }
+
+    @action viewDriver(driver) {
+        return this.driverActions.panel.view(driver);
+    }
+
+    @action viewVehicle(vehicle) {
+        return this.vehicleActions.panel.view(vehicle);
+    }
+
+    @action assignDriver(fleet) {
+        return this.fleetActions.assignDriver(fleet);
+    }
+
+    @action assignVehicle(fleet) {
+        return this.fleetActions.assignVehicle(fleet);
+    }
+}

package/addon/components/fleet/hierarchy-tree.hbs

@@ -0,0 +1,137 @@
+<div class="fleet-hierarchy-tree" data-test-fleet-hierarchy-tree {{did-insert this.loadVisibleFleetResources}} ...attributes>
+    <div class="flex flex-col gap-2 border-b border-gray-200 bg-gray-50 px-2.5 pb-2 dark:border-gray-700 dark:bg-gray-800">
+        <div class="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
+            <div class="flex min-w-0 flex-1 items-center gap-1.5 rounded border border-gray-200 bg-white px-2 py-1 text-gray-400 dark:border-gray-700 dark:bg-gray-900">
+                <FaIcon @icon="magnifying-glass" @size="xs" />
+                <input
+                    type="search"
+                    value={{this.query}}
+                    placeholder="Search hierarchy..."
+                    class="min-w-0 flex-1 appearance-none rounded-md 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-fleet-hierarchy-search
+                    {{on "input" this.updateQuery}}
+                />
+            </div>
+            <div class="flex shrink-0 items-center gap-1 rounded bg-gray-100 p-1 dark:bg-gray-900" data-test-fleet-hierarchy-filters>
+                {{#each this.filters as |filter|}}
+                    <button
+                        type="button"
+                        class="rounded px-2 py-1 text-xs font-medium {{if (eq this.activeFilter filter.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-fleet-hierarchy-filter={{filter.id}}
+                        {{on "click" (fn this.setFilter filter.id)}}
+                    >
+                        {{filter.label}}
+                    </button>
+                {{/each}}
+            </div>
+            <div class="flex shrink-0 items-center gap-1">
+                <Button
+                    @type="default"
+                    @size="xs"
+                    @icon={{this.expandCollapseIcon}}
+                    @helpText={{this.expandCollapseHelpText}}
+                    @onClick={{this.toggleExpandCollapseAll}}
+                    data-test-fleet-hierarchy-expand-toggle
+                />
+            </div>
+        </div>
+    </div>
+
+    <div class="fleet-hierarchy-tree-list bg-white dark:bg-gray-900" aria-label="Fleet hierarchy">
+        {{#if this.visibleRows.length}}
+            {{#each this.visibleRows as |row|}}
+                {{#if (eq row.type "fleet")}}
+                    <div
+                        class="fleet-hierarchy-tree-row {{row.depthClass}} group flex min-w-0 items-start gap-2 border-b border-gray-100 px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 dark:border-gray-800 dark:text-gray-200 dark:hover:bg-gray-800"
+                        data-test-fleet-hierarchy-row="fleet"
+                    >
+                        <button
+                            type="button"
+                            class="flex min-w-0 flex-1 items-start gap-2 text-left"
+                            aria-expanded={{if (this.fleetHasChildren row.fleet) (if (this.isFleetExpanded row.fleet) "true" "false")}}
+                            {{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" aria-hidden="true">
+                                {{#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 font-semibold leading-5" title={{this.displayName row.fleet}}>{{this.displayName row.fleet}}</span>
+                                <span class="block truncate text-xs leading-4 text-gray-400">{{this.fleetSubtitle row.fleet}}</span>
+                            </span>
+                        </button>
+                        <div class="flex shrink-0 items-center gap-1">
+                            <span class="hidden rounded bg-gray-100 px-1.5 py-0.5 text-xs text-gray-500 dark:bg-gray-800 dark:text-gray-400 md:inline-flex">
+                                {{this.fleetSubfleetCount row.fleet}} subfleets
+                            </span>
+                            <DropdownButton
+                                @icon="ellipsis-h"
+                                @iconPrefix="fas"
+                                @size="xs"
+                                @buttonClass="fleetops-btn-xxs"
+                                @contentClass="dropdown-menu"
+                                @horizontalPosition="left"
+                                @calculatePosition={{this.calculateDropdownLeftPosition}}
+                                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.assignDriver row.fleet)}}>Assign driver</a>
+                                    <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.assignVehicle row.fleet)}}>Assign vehicle</a>
+                                </div>
+                            </DropdownButton>
+                        </div>
+                    </div>
+                {{else if (eq row.type "driver")}}
+                    <button
+                        type="button"
+                        class="fleet-hierarchy-tree-row {{row.depthClass}} flex w-full min-w-0 items-start gap-2 border-b border-gray-100 px-3 py-1.5 text-left text-xs text-gray-600 hover:bg-gray-50 dark:border-gray-800 dark:text-gray-300 dark:hover:bg-gray-800"
+                        data-test-fleet-hierarchy-row="driver"
+                        {{on "click" (fn this.viewDriver 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'}}" aria-hidden="true"></span>
+                        <span class="min-w-0 flex-1">
+                            <span class="block truncate font-medium leading-4" title={{this.displayName row.driver}}>{{this.displayName row.driver}}</span>
+                            <span class="block truncate text-xs leading-4 text-gray-400">Driver - {{this.driverSubtitle row.driver}}</span>
+                        </span>
+                    </button>
+                {{else}}
+                    <button
+                        type="button"
+                        class="fleet-hierarchy-tree-row {{row.depthClass}} flex w-full min-w-0 items-start gap-2 border-b border-gray-100 px-3 py-1.5 text-left text-xs text-gray-600 hover:bg-gray-50 dark:border-gray-800 dark:text-gray-300 dark:hover:bg-gray-800"
+                        data-test-fleet-hierarchy-row="vehicle"
+                        {{on "click" (fn this.viewVehicle 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'}}" aria-hidden="true"></span>
+                        <span class="min-w-0 flex-1">
+                            <span class="block truncate font-medium leading-4" title={{this.displayName row.vehicle}}>{{this.displayName row.vehicle}}</span>
+                            <span class="block truncate text-xs leading-4 text-gray-400">Vehicle - {{this.vehicleSubtitle row.vehicle}}</span>
+                        </span>
+                    </button>
+                {{/if}}
+            {{/each}}
+        {{else}}
+            <div class="flex flex-col items-center justify-center gap-2 p-6 text-center" data-test-fleet-hierarchy-empty>
+                <span class="flex h-8 w-8 items-center justify-center rounded bg-gray-100 text-gray-400 dark:bg-gray-800">
+                    <FaIcon @icon={{if this.hasControlsApplied "magnifying-glass" "diagram-project"}} @size="sm" />
+                </span>
+                <div>
+                    <div class="text-sm font-semibold text-gray-900 dark:text-gray-100">{{this.emptyTitle}}</div>
+                    <div class="mt-1 text-xs leading-5 text-gray-500 dark:text-gray-400">{{this.emptyDescription}}</div>
+                </div>
+                {{#if this.hasControlsApplied}}
+                    <Button @type="default" @size="xs" @icon="times" @text="Clear filters" @onClick={{this.clearFilters}} data-test-fleet-hierarchy-clear-filters />
+                {{else}}
+                    <div class="flex items-center gap-1">
+                        <Button @type="default" @size="xs" @icon="user-plus" @text="Assign driver" @onClick={{fn this.assignDriver this.rootFleet}} />
+                        <Button @type="default" @size="xs" @icon="car" @text="Assign vehicle" @onClick={{fn this.assignVehicle this.rootFleet}} />
+                    </div>
+                {{/if}}
+            </div>
+        {{/if}}
+    </div>
+</div>