@fleetbase/fleetops-engine 0.6.53 → 0.6.55

package/addon/components/device/panel-tabs/vehicle.hbs

@@ -0,0 +1,68 @@
+<div class="flex flex-col gap-3 p-3" ...attributes>
+    <div class="flex items-start justify-between gap-3">
+        <div class="min-w-0">
+            <h2 class="text-base font-bold text-gray-900 dark:text-gray-100">Vehicle Attachment</h2>
+            <p class="mt-0.5 text-xs text-gray-500 dark:text-gray-300">Fleet context for telemetry from this device.</p>
+        </div>
+        <div class="flex flex-wrap items-center justify-end gap-2">
+            {{#if this.hasVehicle}}
+                {{#if this.canOpenVehicle}}
+                    <Button @icon="eye" @text="Open Vehicle" @size="xs" @onClick={{this.openVehicle}} />
+                {{/if}}
+                {{#if this.canLocateVehicle}}
+                    <Button @icon="location-dot" @text="Locate" @size="xs" @onClick={{this.locateVehicle}} />
+                {{/if}}
+                <Button @icon="shuffle" @text="Change Vehicle" @size="xs" @onClick={{this.attachToVehicle}} />
+                <Button @icon="unlink" @text="Detach" @size="xs" @type="danger" @onClick={{this.detachFromVehicle}} />
+            {{else}}
+                <Button @icon="link" @text="Attach Vehicle" @size="xs" @onClick={{this.attachToVehicle}} />
+            {{/if}}
+        </div>
+    </div>
+
+    {{#if this.hasVehicle}}
+        <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 gap-3 p-3">
+                <Image
+                    src={{this.vehiclePhotoUrl}}
+                    @fallbackSrc={{config "defaultValues.vehicleAvatar"}}
+                    alt={{this.vehicleName}}
+                    class="h-16 w-16 flex-shrink-0 rounded-md object-cover shadow-sm"
+                />
+                <div class="min-w-0 flex-1">
+                    <div class="flex flex-wrap items-center gap-2">
+                        <h3 class="truncate text-base font-bold text-gray-900 dark:text-gray-100">{{this.vehicleName}}</h3>
+                        {{#if this.vehicleStatus}}
+                            <Badge @status={{this.vehicleStatus}} @size="xs">{{smart-humanize this.vehicleStatus}}</Badge>
+                        {{/if}}
+                    </div>
+                    <div class="mt-1 text-xs text-gray-500 dark:text-gray-300">{{n-a this.vehicleSubtitle}}</div>
+                    <div class="mt-3 grid grid-cols-1 gap-2 text-xs sm:grid-cols-3">
+                        <div>
+                            <div class="font-semibold uppercase text-gray-400 dark:text-gray-500">Driver</div>
+                            <div class="truncate text-gray-800 dark:text-gray-100">{{n-a this.vehicleDriverName}}</div>
+                        </div>
+                        <div>
+                            <div class="font-semibold uppercase text-gray-400 dark:text-gray-500">Attached Device</div>
+                            <div class="truncate text-gray-800 dark:text-gray-100">{{n-a this.device.displayName this.device.name}}</div>
+                        </div>
+                        <div>
+                            <div class="font-semibold uppercase text-gray-400 dark:text-gray-500">Device Last Seen</div>
+                            <div class="truncate text-gray-800 dark:text-gray-100">{{n-a (format-date-fns this.device.last_online_at "dd MMM yyyy, HH:mm")}}</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    {{else}}
+        <Telematic::TabEmptyState
+            @tone="warning"
+            @icon="link-slash"
+            @title="No vehicle attached"
+            @message="Attach this device to a vehicle so telemetry has fleet context."
+            @primaryText="Attach Vehicle"
+            @primaryIcon="link"
+            @primaryAction={{this.attachToVehicle}}
+        />
+    {{/if}}
+</div>

package/addon/components/device/panel-tabs/vehicle.js

@@ -0,0 +1,90 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+
+export default class DevicePanelTabsVehicleComponent extends Component {
+    @service deviceActions;
+    @service hostRouter;
+    @service mapManager;
+    @service vehicleActions;
+
+    get device() {
+        return this.args.resource ?? this.args.model;
+    }
+
+    get vehicle() {
+        return this.device?.attachable;
+    }
+
+    get vehicleName() {
+        return this.device?.attached_to_name ?? this.vehicle?.displayName ?? this.vehicle?.display_name ?? this.vehicle?.name;
+    }
+
+    get vehicleSubtitle() {
+        return this.vehicle?.plate_number ?? this.vehicle?.call_sign ?? this.vehicle?.vin ?? this.vehicle?.public_id ?? this.device?.attachable_uuid;
+    }
+
+    get vehiclePhotoUrl() {
+        return this.vehicle?.photo_url ?? this.vehicle?.avatar_url;
+    }
+
+    get vehicleStatus() {
+        return this.vehicle?.status ?? (this.vehicle?.online ? 'online' : null);
+    }
+
+    get vehicleDriverName() {
+        return this.vehicle?.driver?.displayName ?? this.vehicle?.driver?.display_name ?? this.vehicle?.driver?.name ?? this.vehicle?.driver_name;
+    }
+
+    get hasVehicle() {
+        return Boolean(this.vehicleName || this.device?.attachable_uuid);
+    }
+
+    get canOpenVehicle() {
+        return Boolean(this.vehicle?.id);
+    }
+
+    get canLocateVehicle() {
+        return Boolean(this.vehicle?.id && (this.vehicle?.location || this.vehicle?.last_position));
+    }
+
+    @action attachToVehicle() {
+        return this.deviceActions.attachToVehicle(this.device, { callback: () => this.device?.reload?.() });
+    }
+
+    @action detachFromVehicle() {
+        return this.deviceActions.detachFromVehicle(this.device, { callback: () => this.device?.reload?.() });
+    }
+
+    @action openVehicle() {
+        if (this.vehicle?.id) {
+            return this.vehicleActions.panel?.view
+                ? this.vehicleActions.panel.view(this.vehicle)
+                : this.hostRouter.transitionTo('console.fleet-ops.management.vehicles.index.details', this.vehicle);
+        }
+    }
+
+    @action async locateVehicle() {
+        if (!this.vehicle?.id) {
+            return;
+        }
+
+        await this.transitionToLiveMap();
+        await this.mapManager.waitForMap({ timeoutMs: 8000 });
+
+        this.mapManager.focusResource(this.vehicle, 16, {
+            paddingBottomRight: [300, 200],
+            moveend: () => {
+                this.vehicleActions.panel?.view?.(this.vehicle, { closeOnTransition: true });
+            },
+        });
+    }
+
+    async transitionToLiveMap() {
+        try {
+            await this.hostRouter.transitionTo('console.fleet-ops.operations.orders.index', { queryParams: { layout: 'map' } });
+        } catch (_) {
+            // Keep locate usable if another transition is already active.
+        }
+    }
+}

package/addon/components/equipment/form.js

@@ -11,9 +11,16 @@ import { task } from 'ember-concurrency';
 const TYPE_TO_MODEL = {
     'fleet-ops:vehicle': 'vehicle',
     'fleet-ops:driver': 'driver',
+    'Fleetbase\\FleetOps\\Models\\Vehicle': 'vehicle',
+    'Fleetbase\\FleetOps\\Models\\Driver': 'driver',
     'fleet-ops:equipment': 'equipment',
 };
 
+const TYPE_TO_OPTION_VALUE = {
+    'Fleetbase\\FleetOps\\Models\\Vehicle': 'fleet-ops:vehicle',
+    'Fleetbase\\FleetOps\\Models\\Driver': 'fleet-ops:driver',
+};
+
 export default class EquipmentFormComponent extends Component {
     @service fetch;
     @service currentUser;
@@ -45,7 +52,7 @@ export default class EquipmentFormComponent extends Component {
         const { resource } = args;
         if (resource?.equipable_type) {
             this.equipableModelName = TYPE_TO_MODEL[resource.equipable_type] ?? null;
-            this.selectedEquipableType = this.equipableTypeOptions.find((o) => o.value === resource.equipable_type) ?? null;
+            this.selectedEquipableType = this.equipableTypeOptions.find((o) => o.value === (TYPE_TO_OPTION_VALUE[resource.equipable_type] ?? resource.equipable_type)) ?? null;
         }
     }
 

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

@@ -7,6 +7,7 @@ import { task } from 'ember-concurrency';
 
 export default class LayoutFleetOpsSidebarOperationsMonitorComponent extends Component {
     @service store;
+    @service fetch;
     @service universe;
     @service hostRouter;
     @service mapManager;
@@ -203,11 +204,11 @@ export default class LayoutFleetOpsSidebarOperationsMonitorComponent extends Com
     }
 
     fleetDrivers(fleet) {
-        return this.resourceArray(fleet?.drivers);
+        return this.resolveFleetResources(fleet, 'driver');
     }
 
     fleetVehicles(fleet) {
-        return this.resourceArray(fleet?.vehicles);
+        return this.resolveFleetResources(fleet, 'vehicle');
     }
 
     fleetSubfleets(fleet) {
@@ -339,6 +340,53 @@ export default class LayoutFleetOpsSidebarOperationsMonitorComponent extends Com
         });
     }
 
+    get driverById() {
+        return this.resourcesById(this.fallbackDrivers);
+    }
+
+    get vehicleById() {
+        return this.resourcesById(this.fallbackVehicles);
+    }
+
+    resourcesById(resources = []) {
+        return this.resourceArray(resources).reduce((map, resource) => {
+            this.resourceIdentifiers(resource).forEach((id) => map.set(id, resource));
+
+            return map;
+        }, new Map());
+    }
+
+    resourceIdentifiers(resource) {
+        return [resource?.id, resource?.uuid, resource?.public_id].filter(Boolean).map((id) => String(id));
+    }
+
+    resolveFleetResources(fleet, type) {
+        const embeddedResources = this.resourceArray(fleet?.[`${type}s`]);
+
+        if (embeddedResources.length) {
+            return embeddedResources;
+        }
+
+        const ids = this.resourceArray(fleet?.[`${type}_ids`]);
+        const resources = type === 'driver' ? this.driverById : this.vehicleById;
+
+        return ids.map((id) => resources.get(String(id))).filter(Boolean);
+    }
+
+    normalizeMonitorResource(type, resource) {
+        if (!resource) {
+            return resource;
+        }
+
+        try {
+            this.store.pushPayload?.(type, { [type]: resource });
+        } catch (_) {
+            // Keep the monitor usable in tests and older hosts without pushPayload support.
+        }
+
+        return this.store.peekRecord?.(type, resource.id) ?? this.store.peekRecord?.(type, resource.public_id) ?? resource;
+    }
+
     listenForChanges() {
         this.universe.on('fleet-ops.driver.saved', () => this.loadFallbackResources.perform());
         this.universe.on('fleet-ops.vehicle.saved', () => this.loadFallbackResources.perform());
@@ -572,18 +620,35 @@ export default class LayoutFleetOpsSidebarOperationsMonitorComponent extends Com
 
     @task *loadFallbackResources() {
         try {
-            const [drivers, vehicles, fleets] = yield Promise.all([
-                this.store.query('driver', { limit: 20, without: ['vendor'] }),
-                this.store.query('vehicle', { limit: 20 }),
-                this.store.query('fleet', { limit: 20, with: ['vehicles', 'drivers', 'subfleets'], parents_only: true }),
-            ]);
-
-            this.fallbackDrivers = drivers.toArray?.() ?? drivers;
-            this.fallbackVehicles = vehicles.toArray?.() ?? vehicles;
-            this.fallbackFleets = fleets.toArray?.() ?? fleets;
+            const response = yield this.fetch.get('fleet-ops/live/operations-monitor', {}, { namespace: 'int/v1' });
+            const drivers = this.resourceArray(response?.drivers).map((driver) => this.normalizeMonitorResource('driver', driver));
+            const vehicles = this.resourceArray(response?.vehicles).map((vehicle) => this.normalizeMonitorResource('vehicle', vehicle));
+            const fleets = this.resourceArray(response?.fleets).map((fleet) => this.normalizeMonitorFleet(fleet));
+
+            this.fallbackDrivers = drivers;
+            this.fallbackVehicles = vehicles;
+            this.fallbackFleets = fleets;
             this.expandedFleetIds = new Set(this.collectFleetKeys(this.fallbackFleets));
         } catch (error) {
             this.notifications.serverError(error);
         }
     }
+
+    normalizeMonitorFleet(fleet) {
+        const normalizedFleet = this.normalizeMonitorResource('fleet', fleet);
+        const subfleets = this.resourceArray(fleet?.subfleets).map((subfleet) => this.normalizeMonitorFleet(subfleet));
+
+        if (normalizedFleet?.set) {
+            normalizedFleet.set('driver_ids', this.resourceArray(fleet?.driver_ids));
+            normalizedFleet.set('vehicle_ids', this.resourceArray(fleet?.vehicle_ids));
+            normalizedFleet.set('subfleets', subfleets);
+
+            return normalizedFleet;
+        }
+
+        return {
+            ...fleet,
+            subfleets,
+        };
+    }
 }

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

@@ -3,7 +3,7 @@
     @primaryAction={{this.createOrderAction}}
     @searchPlaceholder="Search Fleet-Ops..."
     @searchProvider={{this.searchNavigation}}
-    @initialActiveParentSync={{false}}
+    @shouldSyncInitialActiveParent={{this.shouldSyncInitialActiveParent}}
     class="fleet-ops-sidebar-navigator"
 >
     <:footer as |state|>

package/addon/components/layout/fleet-ops-sidebar.js

@@ -2,6 +2,7 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
+import isMenuItemActive from '@fleetbase/ember-ui/utils/is-menu-item-active';
 
 const SECTION_REGISTRY_KEYS = {
     operations: 'universeOperationsMenuItems',
@@ -198,23 +199,26 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
     }
 
     get registryRootItems() {
-        return this.universeMenuItems.filter((item) => !item.renderComponentInPlace).map((item) => this.registryItem(item));
+        return this.sortByPriority(this.universeMenuItems.filter((item) => !item.renderComponentInPlace).map((item) => this.registryItem(item)));
     }
 
     get registryPanelItems() {
-        return this.universeMenuPanels.map((panel) => {
-            const children = (panel.items ?? []).filter((item) => !item.renderComponentInPlace).map((item) => this.registryItem(item));
-
-            return {
-                id: panel.id ?? panel.slug ?? panel.title,
-                label: panel.intl ? this.intl.t(panel.intl) : panel.title,
-                icon: panel.icon,
-                visible: panel.visible,
-                permission: panel.permission,
-                keywords: [panel.slug, panel.title, panel.intl].filter(Boolean),
-                children,
-            };
-        });
+        return this.sortByPriority(
+            this.universeMenuPanels.map((panel) => {
+                const children = this.sortByPriority((panel.items ?? []).filter((item) => !item.renderComponentInPlace).map((item) => this.registryItem(item)));
+
+                return {
+                    id: panel.id ?? panel.slug ?? panel.title,
+                    label: panel.intl ? this.intl.t(panel.intl) : panel.title,
+                    icon: panel.icon,
+                    visible: panel.visible,
+                    permission: panel.permission,
+                    priority: panel.priority,
+                    keywords: [panel.slug, panel.title, panel.intl].filter(Boolean),
+                    children,
+                };
+            })
+        );
     }
 
     get footerRegistryComponents() {
@@ -257,6 +261,7 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
 
     createItem(intl, icon, route, permission, ability, keywords = []) {
         return {
+            priority: this.defaultPriorityForRoute(route),
             label: this.intl.t(intl),
             description: this.intl.t(intl),
             icon,
@@ -269,6 +274,8 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
 
     createHubItem(label, icon, route, permission, ability, keywords = []) {
         return {
+            pinnedFirst: true,
+            priority: this.defaultPriorityForRoute(route),
             label,
             description: label,
             icon,
@@ -280,8 +287,9 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
     }
 
     registryItem(menuItem) {
-        return {
+        const registryMenuItem = {
             ...menuItem,
+            _virtual: true,
             label: menuItem.intl ? this.intl.t(menuItem.intl) : (menuItem.title ?? menuItem.label),
             description: menuItem.description,
             icon: menuItem.icon,
@@ -289,15 +297,83 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
             permission: menuItem.permission,
             visible: menuItem.visible,
             keywords: [menuItem.slug, menuItem.view, menuItem.section, menuItem.title, menuItem.label, menuItem.intl, ...(menuItem.keywords ?? [])].filter(Boolean),
-            onClick: () => this.universe.transitionMenuItem(`${this.routePrefix}virtual`, menuItem),
+            activeWhen: () => isMenuItemActive(menuItem.section, menuItem.slug, menuItem.view),
         };
+
+        registryMenuItem.onClick = () => this.universe.transitionMenuItem(`${this.routePrefix}virtual`, registryMenuItem);
+
+        return registryMenuItem;
     }
 
     withRegistryItems(section, items) {
         const registryProperty = SECTION_REGISTRY_KEYS[section];
         const registryItems = (this[registryProperty] ?? []).filter((item) => !item.renderComponentInPlace).map((item) => this.registryItem(item));
 
-        return [...items, ...registryItems];
+        return this.sortByPriority([...items, ...registryItems]);
+    }
+
+    sortByPriority(items = []) {
+        return [...items]
+            .map((item, index) => ({ item, index }))
+            .sort((a, b) => {
+                if (a.item.pinnedFirst !== b.item.pinnedFirst) {
+                    return a.item.pinnedFirst ? -1 : 1;
+                }
+
+                const priorityOrder = (a.item.priority ?? 0) - (b.item.priority ?? 0);
+
+                if (priorityOrder !== 0) {
+                    return priorityOrder;
+                }
+
+                return a.index - b.index;
+            })
+            .map(({ item }) => item);
+    }
+
+    defaultPriorityForRoute(route) {
+        const priorities = {
+            'operations.orders': 0,
+            'operations.orchestrator': 1,
+            'operations.scheduler': 2,
+            'operations.order-config': 3,
+            'operations.service-rates': 4,
+            'management.index': 0,
+            'management.drivers': 1,
+            'management.vehicles': 2,
+            'management.fleets': 3,
+            'management.vendors': 4,
+            'management.contacts': 5,
+            'management.places': 6,
+            'management.fuel-reports': 7,
+            'management.fuel-transactions': 8,
+            'management.issues': 9,
+            'maintenance.index': 0,
+            'maintenance.schedules': 1,
+            'maintenance.work-orders': 2,
+            'maintenance.maintenances': 3,
+            'maintenance.equipment': 4,
+            'maintenance.parts': 5,
+            'connectivity.telematics': 0,
+            'connectivity.fuel-providers': 1,
+            'connectivity.devices': 2,
+            'connectivity.sensors': 3,
+            'connectivity.events': 4,
+            'analytics.index': 0,
+            'analytics.reports': 1,
+            'settings.index': 0,
+            'settings.navigator-app': 1,
+            'settings.map': 2,
+            'settings.payments': 3,
+            'settings.notifications': 4,
+            'settings.routing': 5,
+            'settings.orchestrator': 6,
+            'settings.scheduling': 7,
+            'settings.custom-fields': 8,
+            'settings.avatars': 9,
+        };
+
+        return priorities[route] ?? 0;
     }
 
     fullRoute(route) {
@@ -314,6 +390,14 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
         }
     }
 
+    @action shouldSyncInitialActiveParent({ activePath = [], routeName }) {
+        const [parent, child] = activePath;
+        const defaultOrdersRoutes = [this.fullRoute('operations.orders'), this.fullRoute('operations.orders.index')];
+        const isDefaultOrdersLanding = parent?.id === 'operations' && child?.route === this.fullRoute('operations.orders') && defaultOrdersRoutes.includes(routeName);
+
+        return !isDefaultOrdersLanding;
+    }
+
     @action
     async searchNavigation({ query, limit = 12 }) {
         const trimmedQuery = query?.trim();

package/addon/components/map/drawer/device-event-listing.js

@@ -5,6 +5,7 @@ import { action } from '@ember/object';
 import { task } from 'ember-concurrency';
 import { isArray } from '@ember/array';
 import { startOfWeek, endOfWeek, format } from 'date-fns';
+import calculateMapDrawerDropdownPosition from '../../../utils/map-drawer-dropdown-position';
 
 export default class MapDrawerDeviceEventListingComponent extends Component {
     @service store;
@@ -115,6 +116,7 @@ export default class MapDrawerDeviceEventListingComponent extends Component {
                 ddMenuLabel: this.intl.t('common.resource-actions', { resource: this.intl.t('resource.device-event') }),
                 cellClassNames: 'overflow-visible',
                 wrapperClass: 'flex items-center justify-end mx-2',
+                calculatePosition: calculateMapDrawerDropdownPosition,
                 width: '10%',
                 actions: [
                     {

package/addon/components/map/drawer/driver-listing.js

@@ -2,6 +2,7 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
+import calculateMapDrawerDropdownPosition from '../../../utils/map-drawer-dropdown-position';
 
 export default class MapDrawerDriverListingComponent extends Component {
     @service driverActions;
@@ -71,6 +72,7 @@ export default class MapDrawerDriverListingComponent extends Component {
                 ddMenuLabel: this.intl.t('common.resource-actions', { resource: this.intl.t('resource.driver') }),
                 cellClassNames: 'overflow-visible',
                 wrapperClass: 'flex items-center justify-end mx-2',
+                calculatePosition: calculateMapDrawerDropdownPosition,
                 width: '90px',
                 actions: [
                     {

package/addon/components/map/drawer/place-listing.js

@@ -2,6 +2,7 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
+import calculateMapDrawerDropdownPosition from '../../../utils/map-drawer-dropdown-position';
 
 export default class MapDrawerPlaceListingComponent extends Component {
     @service placeActions;
@@ -53,6 +54,7 @@ export default class MapDrawerPlaceListingComponent extends Component {
                 ddMenuLabel: this.intl.t('common.resource-actions', { resource: this.intl.t('resource.place') }),
                 cellClassNames: 'overflow-visible',
                 wrapperClass: 'flex items-center justify-end mx-2',
+                calculatePosition: calculateMapDrawerDropdownPosition,
                 width: '90px',
                 actions: [
                     {

package/addon/components/map/drawer/position-listing.hbs

@@ -4,23 +4,28 @@
             <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                 <PowerSelect
                     @options={{this.trackables}}
-                    @selected={{this.resource}}
+                    @selected={{this.selectedTrackable}}
                     @onChange={{this.onResourceSelected}}
+                    @searchEnabled={{true}}
+                    @searchField="trackableSearchText"
                     @placeholder={{t "common.select-field" field="trackable"}}
                     @triggerClass="form-select form-input form-input-sm w-48"
                     as |option|
                 >
                     <div class="flex flex-row items-start space-x-2">
                         <div class="inline-block">
-                            {{#if (eq (get-model-name option) "driver")}}
-                                <Image src={{option.photo_url}} @fallbackSrc={{config "defaultValues.driverAvatar"}} class="w-4 h-4" />
+                            {{#if (eq option.modelName "driver")}}
+                                <Image src={{option.resource.photo_url}} @fallbackSrc={{config "defaultValues.driverAvatar"}} class="w-4 h-4" />
                             {{else}}
-                                <Image src={{option.avatar_url}} @fallbackSrc={{config "defaultValues.vehicleAvatar"}} class="w-4 h-4" />
+                                <Image src={{option.resource.avatar_url}} @fallbackSrc={{config "defaultValues.vehicleAvatar"}} class="w-4 h-4" />
                             {{/if}}
                         </div>
                         <div class="inline-block text-sm truncate">
-                            <div class="font-semibold text-sm normalize-in-trigger">{{or option.name option.displayName option.public_id}}</div>
-                            <div class="hide-from-trigger text-xs">{{or option.email option.serial_number option.plate_number option.internal_id}}</div>
+                            <div class="font-semibold text-sm normalize-in-trigger">{{option.primaryLabel}}</div>
+                            <div class="hide-from-trigger text-xs">{{option.secondaryLabel}}</div>
+                            {{#if option.deviceLabel}}
+                                <div class="hide-from-trigger text-xs text-gray-500 dark:text-gray-400 truncate">{{option.deviceLabel}}</div>
+                            {{/if}}
                         </div>
                     </div>
                 </PowerSelect>

package/addon/components/map/drawer/position-listing.js

@@ -8,6 +8,7 @@ import { htmlSafe } from '@ember/template';
 import { startOfWeek, endOfWeek, format } from 'date-fns';
 import getModelName from '@fleetbase/ember-core/utils/get-model-name';
 import ensureLeafletDrawEditNamespace from '../../../utils/leaflet-draw-namespace-guard';
+import { buildTrackableOption } from '../../../utils/trackable-option';
 
 const L = window.leaflet || window.L;
 
@@ -29,6 +30,7 @@ export default class MapDrawerPositionListingComponent extends Component {
     @tracked replaySpeed = '1';
     @tracked positionsLayer = null;
     @tracked positionOverlayIds = [];
+    @tracked selectedTrackableModelName = null;
 
     /** Computed properties - read state from service */
     get isReplaying() {
@@ -47,7 +49,17 @@ export default class MapDrawerPositionListingComponent extends Component {
         const vehicles = this.mapManager.livemap?.vehicles ?? [];
         const drivers = this.mapManager.livemap?.drivers ?? [];
 
-        return [...vehicles, ...drivers];
+        return [...vehicles.map((vehicle) => buildTrackableOption(vehicle, 'vehicle')), ...drivers.map((driver) => buildTrackableOption(driver, 'driver'))];
+    }
+
+    get selectedTrackable() {
+        if (!this.resource) {
+            return null;
+        }
+
+        const resourceType = this.resourceType;
+
+        return this.trackables.find((trackable) => trackable.resource?.id === this.resource?.id && trackable.modelName === resourceType) ?? null;
     }
 
     get replayProgressWidth() {
@@ -72,7 +84,7 @@ export default class MapDrawerPositionListingComponent extends Component {
         if (!this.resource) {
             return 'resource';
         }
-        return getModelName(this.resource) || 'resource';
+        return this.selectedTrackableModelName || getModelName(this.resource) || 'resource';
     }
 
     get hasPositions() {
@@ -179,8 +191,9 @@ export default class MapDrawerPositionListingComponent extends Component {
         this.positionOverlayIds = [];
     }
 
-    @action onResourceSelected(resource) {
-        this.resource = resource;
+    @action onResourceSelected(trackable) {
+        this.resource = trackable?.resource ?? null;
+        this.selectedTrackableModelName = trackable?.modelName ?? null;
         this.loadPositions.perform();
     }
 

package/addon/components/map/drawer/vehicle-listing.js

@@ -2,6 +2,7 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
+import calculateMapDrawerDropdownPosition from '../../../utils/map-drawer-dropdown-position';
 
 export default class MapDrawerVehicleListingComponent extends Component {
     @service vehicleActions;
@@ -65,6 +66,7 @@ export default class MapDrawerVehicleListingComponent extends Component {
                 ddMenuLabel: this.intl.t('common.resource-actions', { resource: this.intl.t('resource.vehicle') }),
                 cellClassNames: 'overflow-visible',
                 wrapperClass: 'flex items-center justify-end mx-2',
+                calculatePosition: calculateMapDrawerDropdownPosition,
                 width: '90px',
                 actions: [
                     {