@fleetbase/fleetops-engine 0.6.54 → 0.6.55

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

@@ -0,0 +1,93 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { task } from 'ember-concurrency';
+
+function toRecentList(records) {
+    const list = Array.from(records ?? []);
+
+    list.meta = {
+        current_page: 1,
+        last_page: 1,
+        per_page: list.length,
+        total: list.length,
+        from: list.length > 0 ? 1 : 0,
+        to: list.length,
+    };
+
+    return list;
+}
+
+export default class DevicePanelTabsSensorsComponent extends Component {
+    @service sensorActions;
+    @service store;
+
+    @tracked sensors = toRecentList();
+
+    constructor() {
+        super(...arguments);
+        this.loadSensors.perform();
+    }
+
+    get device() {
+        return this.args.resource ?? this.args.model;
+    }
+
+    get columns() {
+        return [
+            {
+                sticky: true,
+                label: 'Sensor',
+                valuePath: 'name',
+                cellComponent: 'table/cell/anchor',
+                action: this.sensorActions.panel?.view ?? this.sensorActions.transition.view,
+                permission: 'fleet-ops view sensor',
+                resizable: true,
+            },
+            {
+                label: 'Type',
+                valuePath: 'type',
+                cellComponent: 'table/cell/base',
+                humanize: true,
+                resizable: true,
+            },
+            {
+                label: 'Value',
+                valuePath: 'last_value',
+                resizable: true,
+            },
+            {
+                label: 'Unit',
+                valuePath: 'unit',
+                resizable: true,
+            },
+            {
+                label: 'Status',
+                valuePath: 'status',
+                cellComponent: 'table/cell/status',
+                resizable: true,
+            },
+            {
+                label: 'Last Reading',
+                valuePath: 'lastReadingAt',
+                sortParam: 'last_reading_at',
+                resizable: true,
+            },
+        ];
+    }
+
+    @action refreshSensors() {
+        return this.loadSensors.perform();
+    }
+
+    @task *loadSensors() {
+        if (!this.device?.id) {
+            this.sensors = toRecentList();
+            return;
+        }
+
+        const sensors = yield this.store.query('sensor', { device_uuid: this.device.id, limit: 10, sort: '-updated_at' });
+        this.sensors = toRecentList(sensors);
+    }
+}

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.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

@@ -390,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: [
                     {

package/addon/components/sensor/panel-header.hbs

@@ -1,29 +1,61 @@
-<div class="px-4 py-2">
-    <div class="flex flex-1 flex-row items-start justify-between">
-        <div class="flex flex-row space-x-3">
-            <div class="flex items-start justify-start rounded-full">
+<div class="px-4 py-3" ...attributes>
+    <div class="flex flex-1 flex-row items-start justify-between gap-4">
+        <div class="flex min-w-0 flex-row items-start gap-3">
+            <div class="relative flex flex-shrink-0 items-start justify-start">
                 <Image
                     src={{@resource.photo_url}}
                     @fallbackSrc={{config "defaultValues.placeholderImage"}}
-                    alt={{@resource.displayName}}
+                    alt={{this.name}}
                     height="48"
                     width="48"
-                    class="h-14 w-14 rounded-full shadow-sm"
+                    class="h-14 w-14 rounded-md border border-gray-200 object-cover shadow-sm dark:border-gray-700"
                 />
                 <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
-                    <InputInfo @text={{@resource.displayName}} />
+                    <InputInfo @text={{this.name}} />
                 </Attach::Tooltip>
             </div>
-            <div class="flex flex-col">
-                <h1 class="text-gray-900 dark:text-white font-semibold text-lg">{{@resource.displayName}}</h1>
-                <div>
-                    <div class="text-xs text-gray-400 dark:text-gray-500">{{n-a (get-fleet-ops-option-label "sensorTypes" @resource.type)}}</div>
-                    <div class="text-xs text-gray-400 dark:text-gray-500">{{n-a @resource.serial_number}}</div>
+            <div class="flex min-w-0 flex-col">
+                <div class="flex min-w-0 flex-wrap items-center gap-2">
+                    <h1 class="truncate text-base font-semibold leading-5 text-gray-900 dark:text-gray-100">{{this.name}}</h1>
+                    <Badge @status={{this.status}} @size="xs">{{smart-humanize this.status}}</Badge>
+                    {{#if this.thresholdStatus}}
+                        <Badge @status={{if (eq this.thresholdStatus "normal") "success" "warning"}} @size="xs">{{smart-humanize this.thresholdStatus}}</Badge>
+                    {{/if}}
+                </div>
+
+                <div class="mt-1 flex max-w-2xl flex-wrap items-center gap-1.5">
+                    {{#if this.type}}
+                        <span class="inline-flex max-w-[10rem] items-center gap-1 truncate rounded-md bg-gray-100 px-1.5 py-0.5 text-[11px] font-medium leading-4 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
+                            <FaIcon @icon="gauge-high" class="text-gray-400 dark:text-gray-300" />
+                            <span class="truncate">{{n-a (get-fleet-ops-option-label "sensorTypes" this.type)}}</span>
+                        </span>
+                    {{/if}}
+                    {{#if this.identifier}}
+                        <span class="inline-flex max-w-[12rem] items-center gap-1 truncate rounded-md bg-gray-100 px-1.5 py-0.5 text-[11px] font-medium leading-4 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
+                            <FaIcon @icon="id-card" class="text-gray-400 dark:text-gray-300" />
+                            <span class="truncate">{{this.identifier}}</span>
+                        </span>
+                    {{/if}}
+                    {{#if this.reading}}
+                        <span class="inline-flex max-w-[10rem] items-center gap-1 truncate rounded-md bg-gray-100 px-1.5 py-0.5 text-[11px] font-medium leading-4 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
+                            <FaIcon @icon="chart-line" class="text-gray-400 dark:text-gray-300" />
+                            <span class="truncate">{{this.reading}}</span>
+                        </span>
+                    {{/if}}
+                    {{#if this.deviceName}}
+                        <span class="inline-flex max-w-[12rem] items-center gap-1 truncate rounded-md bg-gray-100 px-1.5 py-0.5 text-[11px] font-medium leading-4 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
+                            <FaIcon @icon="microchip" class="text-gray-400 dark:text-gray-300" />
+                            <span class="truncate">{{this.deviceName}}</span>
+                        </span>
+                    {{/if}}
+                    <span class="inline-flex max-w-[13rem] items-center gap-1 truncate rounded-md bg-gray-100 px-1.5 py-0.5 text-[11px] font-medium leading-4 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
+                        <FaIcon @icon="clock" class="text-gray-400 dark:text-gray-300" />
+                        <span class="truncate">{{#if this.lastReadingAt}}{{format-date-fns this.lastReadingAt "dd MMM yyyy, HH:mm"}}{{else}}No reading yet{{/if}}</span>
+                    </span>
                 </div>
-                <Badge @status={{if @resource.online "online" "offline"}}>{{if @resource.online (t "common.online") (t "common.offline")}}</Badge>
             </div>
         </div>
-        <div class="next-view-header-right">
+        <div class="next-view-header-right flex-shrink-0">
             <Layout::Resource::Panel::HeaderActions
                 @resource={{@resource}}
                 @saveTask={{@saveTask}}
@@ -36,4 +68,4 @@
             />
         </div>
     </div>
-</div>
+</div>

package/addon/components/sensor/panel-header.js

@@ -1,3 +1,61 @@
 import Component from '@glimmer/component';
+import { get } from '@ember/object';
 
-export default class SensorPanelHeaderComponent extends Component {}
+export default class SensorPanelHeaderComponent extends Component {
+    get resource() {
+        return this.args.resource;
+    }
+
+    get name() {
+        return (
+            get(this.resource, 'displayName') ??
+            get(this.resource, 'display_name') ??
+            get(this.resource, 'name') ??
+            get(this.resource, 'serial_number') ??
+            get(this.resource, 'imei') ??
+            get(this.resource, 'public_id') ??
+            '-'
+        );
+    }
+
+    get status() {
+        return get(this.resource, 'status') ?? (get(this.resource, 'is_active') ? 'active' : 'inactive');
+    }
+
+    get thresholdStatus() {
+        return get(this.resource, 'threshold_status');
+    }
+
+    get type() {
+        return get(this.resource, 'type');
+    }
+
+    get identifier() {
+        return get(this.resource, 'serial_number') ?? get(this.resource, 'imei') ?? get(this.resource, 'internal_id') ?? get(this.resource, 'public_id');
+    }
+
+    get reading() {
+        const value = get(this.resource, 'last_value');
+        const unit = get(this.resource, 'unit');
+
+        if (value === null || value === undefined || value === '') {
+            return null;
+        }
+
+        return unit ? `${value} ${unit}` : String(value);
+    }
+
+    get deviceName() {
+        return (
+            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_uuid')
+        );
+    }
+
+    get lastReadingAt() {
+        return get(this.resource, 'last_reading_at') ?? get(this.resource, 'lastReadingAt');
+    }
+}

package/addon/components/table/cell/dropdown/action-item.hbs

@@ -0,0 +1,31 @@
+{{#if this.visible}}
+    {{#if @columnAction.separator}}
+        <div class="next-dd-menu-seperator"></div>
+    {{else}}
+        <div role="group" class="px-1">
+            <a
+                href="javascript:;"
+                role="menuitem"
+                class="next-dd-item {{@columnAction.class}} {{if this.disabled 'disabled'}}"
+                disabled={{this.disabled}}
+                {{on "click" (fn this.onClick @columnAction @row @dd)}}
+            >
+                {{#if @columnAction.icon}}
+                    <div class="w-6">
+                        <FaIcon class={{@columnAction.iconClass}} @icon={{@columnAction.icon}} @prefix={{@columnAction.iconPrefix}} />
+                    </div>
+                {{/if}}
+                {{@columnAction.label}}
+                {{#if this.doesntHavePermissions}}
+                    <Attach::Tooltip @class="clean" @animation="scale" @placement={{or @columnAction.tooltipPlacement "right"}}>
+                        <InputInfo @text={{t "common.unauthorized"}} />
+                    </Attach::Tooltip>
+                {{else if @columnAction.helpText}}
+                    <Attach::Tooltip @class="clean" @animation="scale" @placement={{or @columnAction.tooltipPlacement "right"}}>
+                        <InputInfo @text={{@columnAction.helpText}} @exampleText={{@columnAction.exampleText}} />
+                    </Attach::Tooltip>
+                {{/if}}
+            </a>
+        </div>
+    {{/if}}
+{{/if}}