@fleetbase/fleetops-engine 0.6.53 → 0.6.55

package/addon/components/cell/telematic-provider.hbs

@@ -1,16 +1,33 @@
-<div ...attributes>
-    <button
-        type="button"
-        disabled={{and @column.permission (cannot @column.permission)}}
-        {{on "click" this.onClick}}
-        class="flex min-w-0 max-w-md items-start gap-2 py-1 text-left"
-    >
-        <div class="pt-0.5">
-            <Image src={{this.icon}} class="mr-3 h-8 w-8 flex-shrink-0 rounded-md" />
-        </div>
-        <div class="min-w-0 text-left">
-            <div class="truncate text-sm font-semibold text-gray-900 hover:text-blue-600 dark:text-gray-100 dark:hover:text-blue-300">{{n-a this.name}}</div>
-            <div class="mt-0.5 line-clamp-2 whitespace-normal text-left text-xs leading-4 text-gray-500 dark:text-gray-400">{{n-a this.description}}</div>
-        </div>
-    </button>
-</div>
+{{#if this.telematic}}
+    {{#if this.compact}}
+        <button
+            type="button"
+            disabled={{and @column.permission (cannot @column.permission)}}
+            {{on "click" this.onClick}}
+            class="group flex w-full min-w-0 cursor-pointer items-center gap-2 py-0.5 text-left"
+            data-test-telematic-provider-compact
+            ...attributes
+        >
+            <Image src={{this.icon}} @fallbackSrc="/engines-dist/images/telematics/providers/default.webp" class="h-5 w-5 flex-shrink-0 rounded-md border border-gray-200 object-cover shadow-sm dark:border-gray-700" />
+            <div class="min-w-0 truncate text-sm leading-4 text-gray-900 group-hover:text-blue-600 dark:text-gray-200 dark:group-hover:text-blue-300">{{n-a this.name}}</div>
+        </button>
+    {{else}}
+        <button
+            type="button"
+            disabled={{and @column.permission (cannot @column.permission)}}
+            {{on "click" this.onClick}}
+            class="group flex w-full min-w-0 max-w-md cursor-pointer items-start gap-2 py-1 text-left"
+            ...attributes
+        >
+            <div class="pt-0.5">
+                <Image src={{this.icon}} @fallbackSrc="/engines-dist/images/telematics/providers/default.webp" class="mr-0.5 h-8 w-8 flex-shrink-0 rounded-md border border-gray-200 object-cover shadow-sm dark:border-gray-700" />
+            </div>
+            <div class="min-w-0 text-left">
+                <div class="truncate text-sm text-gray-900 group-hover:text-blue-600 dark:text-gray-100 dark:group-hover:text-blue-300">{{n-a this.name}}</div>
+                <div class="mt-0.5 max-w-[225px] truncate whitespace-nowrap text-left text-xs leading-4 text-gray-500 dark:text-gray-400">{{n-a this.description}}</div>
+            </div>
+        </button>
+    {{/if}}
+{{else}}
+    <div class="py-1 text-xs text-gray-400 dark:text-gray-500" data-test-telematic-provider-empty-text ...attributes>{{this.emptyText}}</div>
+{{/if}}

package/addon/components/cell/telematic-provider.js

@@ -1,36 +1,78 @@
 import Component from '@glimmer/component';
-import { action } from '@ember/object';
+import { action, get } from '@ember/object';
+
+const DEFAULT_PROVIDER_ICON = '/engines-dist/images/telematics/providers/default.webp';
 
 export default class CellTelematicProviderComponent extends Component {
+    get telematic() {
+        const resourcePath = this.args.column?.resourcePath;
+
+        if (typeof resourcePath === 'function') {
+            const resource = resourcePath(this.args.row, this.args.value, this.args.column);
+
+            return resource ?? null;
+        }
+
+        if (typeof resourcePath === 'string') {
+            const resource = get(this.args.row, resourcePath);
+
+            return resource ?? null;
+        }
+
+        if (this.args.row?.telematic) {
+            return this.args.row.telematic;
+        }
+
+        if (this.args.row?.telematic_uuid || this.args.row?.telematic_name) {
+            return {
+                id: this.args.row.telematic_uuid,
+                name: this.args.row.telematic_name,
+                provider: this.args.row.provider,
+                provider_descriptor: this.args.row.provider_descriptor,
+            };
+        }
+
+        return this.args.row;
+    }
+
+    get emptyText() {
+        return this.args.column?.emptyText ?? '-';
+    }
+
+    get compact() {
+        return this.args.column?.compact ?? false;
+    }
+
     get descriptor() {
-        return this.args.row?.provider_descriptor ?? {};
+        return this.telematic?.provider_descriptor ?? this.args.row?.provider_descriptor ?? {};
     }
 
     get name() {
-        return this.args.row?.name ?? this.descriptor.label ?? this.args.row?.provider;
+        return this.telematic?.name ?? this.descriptor.label ?? this.telematic?.provider ?? this.args.row?.provider ?? this.args.row?.telematic_name;
     }
 
     get description() {
-        return this.descriptor.description ?? this.args.row?.provider;
+        return this.descriptor.description ?? this.telematic?.provider ?? this.args.row?.provider;
     }
 
     get icon() {
-        return this.descriptor.icon;
+        return this.descriptor.icon ?? DEFAULT_PROVIDER_ICON;
     }
 
     @action onClick(event) {
         const { row, column, onClick } = this.args;
+        const resource = this.telematic ?? row;
 
         if (typeof onClick === 'function') {
-            onClick(row, event);
+            onClick(resource, event);
         }
 
         if (typeof column?.action === 'function') {
-            column.action(row, event);
+            column.action(resource, event);
         }
 
         if (typeof column?.onClick === 'function') {
-            column.onClick(row, event);
+            column.onClick(resource, event);
         }
     }
 }

package/addon/components/cell/vehicle-identity.hbs

@@ -0,0 +1,33 @@
+{{#if this.resource}}
+    {{#if this.compact}}
+        <button
+            type="button"
+            disabled={{and @column.permission (cannot @column.permission)}}
+            {{on "click" this.onClick}}
+            class="group flex w-full min-w-0 cursor-pointer items-center gap-2 py-0.5 text-left"
+            data-test-vehicle-identity-compact
+            ...attributes
+        >
+            <div class="relative flex h-5 w-5 flex-shrink-0 items-center justify-center">
+                <Image src={{this.mediaUrl}} @fallbackSrc={{this.fallbackImage}} class="h-5 w-5 rounded-md border border-gray-200 object-cover shadow-sm dark:border-gray-700" />
+                {{#if this.hasCompactStatusDot}}
+                    <FaIcon @icon="circle" @size="2xs" class="absolute left-0 top-0 -ml-1 -mt-1 {{this.compactStatusDotClass}}" data-test-resource-identity-status-dot />
+                {{/if}}
+            </div>
+            <div class="min-w-0 truncate text-sm leading-4 text-gray-900 group-hover:text-blue-600 dark:text-gray-200 dark:group-hover:text-blue-300">{{n-a this.label}}</div>
+            {{#if this.assignedDriverLabel}}
+                <span
+                    data-test-resource-identity-meta-badge
+                    class="inline-flex min-w-0 max-w-[12rem] flex-shrink items-center rounded-lg bg-gray-200 px-1 py-0 text-[10px] leading-4 text-gray-700 shadow-sm dark:bg-gray-800 dark:text-gray-300"
+                >
+                    <FaIcon @icon="user" @prefix="fas" @size="xs" class="mr-1 flex-shrink-0" />
+                    <span class="truncate">{{n-a this.assignedDriverLabel}}</span>
+                </span>
+            {{/if}}
+        </button>
+    {{else}}
+        <Table::Cell::ResourceIdentity @row={{this.resource}} @value={{@value}} @column={{this.column}} @onClick={{@onClick}} ...attributes />
+    {{/if}}
+{{else}}
+    <div class="py-1 text-xs text-gray-400 dark:text-gray-500" data-test-identity-empty-text ...attributes>{{this.emptyText}}</div>
+{{/if}}

package/addon/components/cell/vehicle-identity.js

@@ -0,0 +1,138 @@
+import Component from '@glimmer/component';
+import { action, get } from '@ember/object';
+import config from 'ember-get-config';
+import { resolveIdentityCellResource } from '../../utils/identity-cell-resource';
+
+const DEFAULT_STATUS_TONES = {
+    available: 'text-green-500',
+    active: 'text-green-500',
+    in_service: 'text-green-500',
+    maintenance: 'text-yellow-500',
+    unavailable: 'text-gray-400',
+    inactive: 'text-gray-400',
+    out_of_service: 'text-red-500',
+};
+
+export default class CellVehicleIdentityComponent extends Component {
+    get resource() {
+        return resolveIdentityCellResource(this.args);
+    }
+
+    get emptyText() {
+        return this.args.column?.emptyText ?? '-';
+    }
+
+    get compact() {
+        return this.args.column?.compact ?? false;
+    }
+
+    get showStatus() {
+        return this.args.column?.showStatus ?? true;
+    }
+
+    get label() {
+        const vehicle = this.resource;
+
+        return get(vehicle, 'displayName') ?? get(vehicle, 'display_name') ?? get(vehicle, 'name');
+    }
+
+    get mediaUrl() {
+        return get(this.resource, 'photo_url');
+    }
+
+    get fallbackImage() {
+        return config?.defaultValues?.vehicleAvatar;
+    }
+
+    get hasCompactStatusDot() {
+        return this.args.column?.showStatusDot ?? this.args.column?.showOnlineIndicator ?? true;
+    }
+
+    get compactStatusValue() {
+        const vehicle = this.resource;
+
+        return get(vehicle, 'online') ?? get(vehicle, 'status');
+    }
+
+    get compactStatusToneClass() {
+        const value = this.compactStatusValue;
+        const statusToneMap = {
+            ...DEFAULT_STATUS_TONES,
+            ...(this.args.column?.statusToneMap ?? {}),
+        };
+
+        if (typeof this.args.column?.statusToneClass === 'function') {
+            return this.args.column.statusToneClass(value, this.resource, this.args.column);
+        }
+
+        if (typeof value === 'boolean') {
+            return value ? 'text-green-500' : 'text-yellow-200';
+        }
+
+        return statusToneMap[value] ?? statusToneMap[String(value ?? '').toLowerCase()] ?? 'text-gray-400';
+    }
+
+    get compactStatusDotClass() {
+        return this.compactStatusToneClass;
+    }
+
+    get assignedDriverLabel() {
+        const vehicle = this.resource;
+
+        return get(vehicle, 'driver.displayName') ?? get(vehicle, 'driver.display_name') ?? get(vehicle, 'driver.name') ?? get(vehicle, 'driver_name');
+    }
+
+    get column() {
+        return {
+            ...(this.args.column ?? {}),
+            labelPath: (vehicle) => get(vehicle, 'displayName') ?? get(vehicle, 'display_name') ?? get(vehicle, 'name'),
+            mediaPath: 'photo_url',
+            fallbackImage: config?.defaultValues?.vehicleAvatar,
+            statusPath: this.showStatus ? 'status' : undefined,
+            onlinePath: 'online',
+            showStatusBadge: this.showStatus ? (this.args.column?.showStatusBadge ?? true) : false,
+            statusBadgeSize: this.args.column?.statusBadgeSize ?? 'xxs',
+            statusBadgeWrapperClass: this.args.column?.statusBadgeWrapperClass ?? 'resource-identity-status-badge vehicle-identity-status-badge',
+            metaPaths: [
+                {
+                    value: (vehicle) => get(vehicle, 'plate_number') ?? get(vehicle, 'call_sign') ?? get(vehicle, 'vehicle_number') ?? get(vehicle, 'public_id'),
+                    icon: 'id-card',
+                    style: 'badge',
+                    class: 'max-w-[12rem]',
+                },
+                {
+                    value: (vehicle) => get(vehicle, 'driver.displayName') ?? get(vehicle, 'driver.display_name') ?? get(vehicle, 'driver.name') ?? get(vehicle, 'driver_name'),
+                    icon: 'user',
+                    style: 'badge',
+                    class: 'max-w-[12rem]',
+                },
+            ],
+            statusToneMap: {
+                available: 'text-green-500',
+                active: 'text-green-500',
+                in_service: 'text-green-500',
+                maintenance: 'text-yellow-500',
+                unavailable: 'text-gray-400',
+                inactive: 'text-gray-400',
+                out_of_service: 'text-red-500',
+            },
+        };
+    }
+
+    @action onClick(event) {
+        const { column, onClick } = this.args;
+        const resource = this.resource;
+
+        if (typeof onClick === 'function') {
+            onClick(resource, event);
+        }
+
+        if (typeof column?.onClick === 'function') {
+            column.onClick(resource, event);
+        }
+
+        if (typeof column?.action === 'function') {
+            column.action(resource, event);
+        }
+    }
+}

package/addon/components/device/details.hbs

@@ -1,154 +1,125 @@
-<div class="details-wrapper" ...attributes>
-    <ContentPanel @title="Integration" @open={{true}} @wrapperClass="bordered-top">
-        <div class="grid grid-cols-1 lg:grid-cols-3 gap-2">
-            <div class="field-info-container lg:col-span-3">
-                <div class="field-name">{{t "device.fields.telematic"}}</div>
-                <div class="field-value">
-                    {{#if @resource.telematic}}
-                        <div class="flex flex-row space-x-2 text-sm">
-                            <div class="pt-1.5">
-                                <Image src={{@resource.telematic.provider_descriptor.icon}} class="w-5 h-5" />
-                            </div>
-                            <div>
-                                <div class="font-semibold">{{@resource.telematic.provider_descriptor.label}}</div>
-                                <div class="text-xs text-gray-400 dark:text-gray-500">
-                                    {{n-a @resource.telematic.provider_descriptor.description}}
-                                </div>
-                            </div>
-                        </div>
-                    {{else}}
-                        {{n-a null}}
-                    {{/if}}
+<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">{{this.displayName}}</h2>
+                    <Badge @status={{this.connectionTone}}>{{smart-humanize this.connectionLabel}}</Badge>
+                    <Badge @status={{this.attachmentTone}}>{{this.attachmentLabel}}</Badge>
+                </div>
+                <div class="mt-2 flex flex-wrap gap-2 text-xs text-gray-500 dark:text-gray-300">
+                    <span>Last seen: {{n-a (format-date-fns this.lastSeenLabel "dd MMM yyyy, HH:mm")}}</span>
+                    <span>Provider: {{n-a (titleize this.providerLabel)}}</span>
+                    <span>Signal: {{n-a this.signalLabel}}</span>
+                    <span>Device ID: {{n-a @resource.device_id}}</span>
                 </div>
             </div>
 
-            <div class="field-info-container">
-                <div class="field-name">{{t "device.fields.data-frequency"}}</div>
-                <div class="field-value">{{n-a @resource.data_frequency}}</div>
-            </div>
-        </div>
-    </ContentPanel>
-
-    <ContentPanel @title="Identity" @open={{true}} @wrapperClass="bordered-top">
-        <div class="grid grid-cols-1 lg:grid-cols-3 gap-2">
-            <div class="field-info-container">
-                <div class="field-name">{{t "device.fields.device-name"}}</div>
-                <div class="field-value">{{n-a @resource.name}}</div>
-            </div>
-
-            <div class="field-info-container">
-                <div class="field-name">{{t "device.fields.device-type"}}</div>
-                <div class="field-value">{{n-a (get-fleet-ops-option-label "deviceTypes" @resource.type)}}</div>
-            </div>
-
-            <div class="field-info-container">
-                <div class="field-name">{{t "device.fields.device-id"}}</div>
-                <div class="field-value">{{n-a @resource.device_id}}</div>
-            </div>
-
-            <div class="field-info-container">
-                <div class="field-name">Internal ID</div>
-                <div class="field-value">{{n-a @resource.internal_id}}</div>
-            </div>
+            {{#if this.providerIcon}}
+                <div class="flex flex-shrink-0 items-center gap-2 rounded-md border border-gray-100 bg-gray-50 px-3 py-2 dark:border-gray-700 dark:bg-gray-800/70">
+                    <Image src={{this.providerIcon}} class="h-6 w-6 rounded" />
+                    <span class="text-xs font-semibold text-gray-700 dark:text-gray-200">{{n-a this.providerLabel}}</span>
+                </div>
+            {{/if}}
         </div>
-    </ContentPanel>
-
-    <ContentPanel @title="Hardware" @open={{true}} @wrapperClass="bordered-top">
-        <div class="grid grid-cols-1 lg:grid-cols-3 gap-2">
-            <div class="field-info-container">
-                <div class="field-name">{{t "device.fields.device-provider"}}</div>
-                <div class="field-value">{{n-a (titleize @resource.provider)}}</div>
-            </div>
-
-            <div class="field-info-container">
-                <div class="field-name">{{t "device.fields.device-model"}}</div>
-                <div class="field-value">{{n-a @resource.model}}</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">{{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>
 
-            <div class="field-info-container">
-                <div class="field-name">{{t "device.fields.manufacturer"}}</div>
-                <div class="field-value">{{n-a @resource.manufacturer}}</div>
+    <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">Operational Snapshot</h3>
             </div>
-
-            <div class="field-info-container lg:col-span-3">
-                <div class="field-name">{{t "device.fields.serial-number"}}</div>
-                <div class="field-value">{{n-a @resource.serial_number}}</div>
+            <div class="grid grid-cols-1 gap-2 p-3 sm:grid-cols-2">
+                <div class="field-info-container">
+                    <div class="field-name">Location</div>
+                    <div class="field-value">{{n-a (or @resource.location this.lastPositionLabel)}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">{{t "device.fields.data-frequency"}}</div>
+                    <div class="field-value">{{n-a @resource.data_frequency}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Firmware</div>
+                    <div class="field-value">{{n-a this.firmwareLabel}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">{{t "device.fields.installation-date"}}</div>
+                    <div class="field-value">{{n-a (format-date @resource.installation_date)}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">{{t "device.fields.last-maintenance-date"}}</div>
+                    <div class="field-value">{{n-a (format-date @resource.last_maintenance_date)}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">{{t "device.fields.status"}}</div>
+                    <div class="field-value"><Badge @status={{@resource.status}}>{{smart-humanize @resource.status}}</Badge></div>
+                </div>
             </div>
         </div>
-    </ContentPanel>
 
-    <ContentPanel @title="Installation & Maintenance" @open={{true}} @wrapperClass="bordered-top">
-        <div class="grid grid-cols-1 lg:grid-cols-3 gap-2">
-            <div class="field-info-container lg:col-span-2">
-                <div class="field-name">{{t "device.fields.device-location"}}</div>
-                <div class="field-value">{{n-a @resource.location}}</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">Critical Details</h3>
             </div>
-
-            <div class="field-info-container">
-                <div class="field-name">{{t "device.fields.installation-date"}}</div>
-                <div class="field-value">{{or (format-date @resource.installation_date) "-"}}</div>
-            </div>
-
-            <div class="field-info-container">
-                <div class="field-name">{{t "device.fields.last-maintenance-date"}}</div>
-                <div class="field-value">{{or (format-date @resource.last_maintenance_date) "-"}}</div>
-            </div>
-        </div>
-    </ContentPanel>
-
-    <ContentPanel @title="Connectivity" @open={{true}} @wrapperClass="bordered-top">
-        <div class="grid grid-cols-1 lg:grid-cols-3 gap-2">
-            <div class="field-info-container">
-                <div class="field-name">{{t "common.online"}}</div>
-                <div class="field-value">
-                    {{#if @resource.is_online}}
-                        <Badge @status="online">{{t "common.online"}}</Badge>
-                    {{else}}
-                        <Badge @status="offline">{{t "common.offline"}}</Badge>
-                    {{/if}}
+            <div class="grid grid-cols-1 gap-2 p-3 sm:grid-cols-2">
+                <div class="field-info-container">
+                    <div class="field-name">{{t "device.fields.device-type"}}</div>
+                    <div class="field-value">{{n-a (get-fleet-ops-option-label "deviceTypes" @resource.type)}}</div>
                 </div>
-            </div>
-
-            <div class="field-info-container">
-                <div class="field-name">{{t "common.last-seen-at"}}</div>
-                <div class="field-value">{{or (format-date @resource.last_online_at) "-"}}</div>
-            </div>
-
-            {{#if @resource.signal_strength}}
                 <div class="field-info-container">
-                    <div class="field-name">{{t "device.fields.signal-strength"}}</div>
-                    <div class="field-value">{{n-a @resource.signal_strength}}</div>
+                    <div class="field-name">{{t "device.fields.device-model"}}</div>
+                    <div class="field-value">{{n-a @resource.model}}</div>
                 </div>
-            {{/if}}
-        </div>
-    </ContentPanel>
-
-    <ContentPanel @title="Warranty & Status" @open={{true}} @wrapperClass="bordered-top">
-        <div class="grid grid-cols-1 lg:grid-cols-3 gap-2">
-            <div class="field-info-container">
-                <div class="field-name">{{t "device.fields.status"}}</div>
-                <div class="field-value">
-                    <Badge @status={{@resource.status}}>
-                        {{smart-humanize @resource.status}}
-                    </Badge>
+                <div class="field-info-container">
+                    <div class="field-name">{{t "device.fields.manufacturer"}}</div>
+                    <div class="field-value">{{n-a @resource.manufacturer}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">{{t "device.fields.serial-number"}}</div>
+                    <div class="field-value">{{n-a @resource.serial_number}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">IMEI</div>
+                    <div class="field-value">{{n-a @resource.imei}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">IMSI</div>
+                    <div class="field-value">{{n-a @resource.imsi}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Internal ID</div>
+                    <div class="field-value">{{n-a @resource.internal_id}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">{{t "device.fields.warranty"}}</div>
+                    <div class="field-value">{{n-a (or @resource.warranty.name @resource.warranty_name)}}</div>
+                </div>
+                <div class="field-info-container sm:col-span-2">
+                    <div class="field-name">{{t "device.fields.notes"}}</div>
+                    <div class="field-value whitespace-pre-line">{{n-a @resource.notes}}</div>
                 </div>
-            </div>
-
-            <div class="field-info-container lg:col-span-2">
-                <div class="field-name">{{t "device.fields.warranty"}}</div>
-                <div class="field-value">{{n-a @resource.warranty.name}}</div>
-            </div>
-        </div>
-    </ContentPanel>
-
-    <ContentPanel @title="Notes" @open={{true}} @wrapperClass="bordered-top">
-        <div class="grid grid-cols-1 lg:grid-cols-1 gap-2">
-            <div class="field-info-container">
-                <div class="field-name">{{t "device.fields.notes"}}</div>
-                <div class="field-value">{{n-a @resource.notes}}</div>
             </div>
         </div>
-    </ContentPanel>
+    </section>
 
     <CustomField::Yield @subject={{@resource}} @viewMode={{true}} @wrapperClass="bordered-top" />
-</div>
+</div>