@fleetbase/fleetops-engine 0.6.69 → 0.6.71

package/addon/components/map/leaflet-live-map.hbs

@@ -83,108 +83,10 @@
                         as |marker|
                     >
                         <marker.popup @maxWidth="500" @minWidth="225">
-                            <div class="w-[280px] max-w-[calc(100vw-2rem)] rounded-lg bg-gray-900 shadow-lg p-1.5 text-white">
-                                <div class="flex items-center gap-1.5 text-xs font-semibold mb-1.5">
-                                    <span class="inline-block w-2 h-2 rounded-full {{if driver.online 'bg-green-400' 'bg-red-500'}}"></span>
-                                    <span>{{driver.name}}</span>
-                                    <div
-                                        class="status-badge
-                                            {{if driver.status (dasherize driver.status) 'default'}}-status-badge status-badge-{{if driver.status (dasherize driver.status) 'default'}}
-                                            shadow-none ml-auto"
-                                    >
-                                        <span class="rounded-full text-[9px] px-1.5 py-0.5">{{n-a driver.meta.status_label (smart-humanize driver.status)}}</span>
-                                    </div>
-                                </div>
-                                <div class="grid grid-cols-2 gap-1">
-                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
-                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">ID</div>
-                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a driver.public_id driver.id}}</div>
-                                    </div>
-                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
-                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Phone</div>
-                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a driver.phone}}</div>
-                                    </div>
-                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
-                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Vehicle</div>
-                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a driver.vehicle_name}}</div>
-                                    </div>
-                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
-                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Email</div>
-                                        <div class="text-[11px] text-white leading-tight truncate min-w-0 w-full">{{n-a driver.email}}</div>
-                                    </div>
-                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
-                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Order</div>
-                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a driver.meta.current_order_reference}}</div>
-                                    </div>
-                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
-                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Speed</div>
-                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a driver.meta.speed_label}}</div>
-                                    </div>
-                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
-                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Heading</div>
-                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a driver.meta.heading_label}}</div>
-                                    </div>
-                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
-                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Location</div>
-                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a
-                                                driver.meta.location_coordinates
-                                                (point-coordinates driver.location)
-                                            }}</div>
-                                    </div>
-                                </div>
-                            </div>
+                            <Map::MarkerCard::Driver @driver={{driver}} />
                         </marker.popup>
                         <marker.tooltip @permanent={{false}} @sticky={{true}}>
-                            <div class="w-[280px] max-w-[calc(100vw-2rem)]">
-                                <div class="flex items-center gap-1.5 text-xs font-semibold mb-1.5">
-                                    <span class="inline-block w-2 h-2 rounded-full {{if driver.online 'bg-green-400' 'bg-red-500'}}"></span>
-                                    <span>{{driver.name}}</span>
-                                    <div
-                                        class="status-badge
-                                            {{if driver.status (dasherize driver.status) 'default'}}-status-badge status-badge-{{if driver.status (dasherize driver.status) 'default'}}
-                                            shadow-none ml-auto"
-                                    >
-                                        <span class="rounded-full text-[9px] px-1.5 py-0.5">{{n-a driver.meta.status_label (smart-humanize driver.status)}}</span>
-                                    </div>
-                                </div>
-                                <div class="grid grid-cols-2 gap-1">
-                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
-                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">ID</div>
-                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a driver.public_id driver.id}}</div>
-                                    </div>
-                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
-                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Phone</div>
-                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a driver.phone}}</div>
-                                    </div>
-                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
-                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Vehicle</div>
-                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a driver.vehicle_name}}</div>
-                                    </div>
-                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
-                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Email</div>
-                                        <div class="text-[11px] text-white leading-tight truncate min-w-0 w-full">{{n-a driver.email}}</div>
-                                    </div>
-                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
-                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Order</div>
-                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a driver.meta.current_order_reference}}</div>
-                                    </div>
-                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
-                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Speed</div>
-                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a driver.meta.speed_label}}</div>
-                                    </div>
-                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
-                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Heading</div>
-                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a driver.meta.heading_label}}</div>
-                                    </div>
-                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
-                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Location</div>
-                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a
-                                                driver.meta.location_coordinates
-                                                (point-coordinates driver.location)
-                                            }}</div>
-                                    </div>
-                                </div>
-                            </div>
+                            <Map::MarkerCard::Driver @driver={{driver}} @variant="tooltip" />
                         </marker.tooltip>
                     </layers.tracking-marker>
                 {{/each}}
@@ -202,150 +104,10 @@
                         as |marker|
                     >
                         <marker.popup @permanent={{false}} @sticky={{true}}>
-                            <div class="w-[280px] max-w-[calc(100vw-2rem)] rounded-lg bg-gray-900 shadow-lg p-1.5 text-white">
-                                <div class="flex items-center gap-1.5 text-xs font-semibold mb-1.5">
-                                    <span class="inline-block w-2 h-2 rounded-full {{if vehicle.online 'bg-green-400' 'bg-red-500'}}"></span>
-                                    <span>{{vehicle.displayName}}</span>
-                                    <div
-                                        class="status-badge
-                                            {{if vehicle.status (dasherize vehicle.status) 'default'}}-status-badge status-badge-{{if vehicle.status (dasherize vehicle.status) 'default'}}
-                                            shadow-none ml-auto"
-                                    >
-                                        <span class="rounded-full text-[9px] px-1.5 py-0.5">{{n-a vehicle.meta.status_label}}</span>
-                                    </div>
-                                </div>
-                                <div class="grid grid-cols-2 gap-1">
-                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
-                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Vehicle #</div>
-                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a
-                                                vehicle.internal_id
-                                                vehicle.public_id
-                                                vehicle.plate_number
-                                                vehicle.serial_number
-                                                vehicle.vin
-                                            }}</div>
-                                    </div>
-                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
-                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Driver</div>
-                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a vehicle.driver_name}}</div>
-                                    </div>
-                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
-                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">{{t "resource.trailers"}}</div>
-                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">
-                                            {{#each vehicle.trailers as |trailer|}}
-                                                <div class="flex items-center gap-1 min-w-0">
-                                                    <span class="inline-block w-1.5 h-1.5 rounded-full shrink-0 {{if trailer.online 'bg-green-400' 'bg-gray-500'}}"></span>
-                                                    <span class="truncate">{{or trailer.displayName trailer.display_name trailer.name trailer.public_id}}</span>
-                                                </div>
-                                            {{else}}
-                                                -
-                                            {{/each}}
-                                        </div>
-                                    </div>
-                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
-                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">{{t "resource.devices"}}</div>
-                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">
-                                            {{#each vehicle.devices as |device|}}
-                                                <div class="flex items-center gap-1 min-w-0">
-                                                    <span class="inline-block w-1.5 h-1.5 rounded-full shrink-0 {{if device.online 'bg-green-400' 'bg-gray-500'}}"></span>
-                                                    <span class="truncate">{{or device.displayName device.display_name device.name device.device_id device.public_id}}</span>
-                                                </div>
-                                            {{else}}
-                                                -
-                                            {{/each}}
-                                        </div>
-                                    </div>
-                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
-                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Order</div>
-                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a vehicle.meta.current_order_reference}}</div>
-                                    </div>
-                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
-                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Speed</div>
-                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a vehicle.meta.speed_label}}</div>
-                                    </div>
-                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
-                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Heading</div>
-                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a vehicle.meta.heading_label}}</div>
-                                    </div>
-                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
-                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Location</div>
-                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a vehicle.meta.location_coordinates}}</div>
-                                    </div>
-                                </div>
-                            </div>
+                            <Map::MarkerCard::Vehicle @vehicle={{vehicle}} />
                         </marker.popup>
                         <marker.tooltip @permanent={{false}} @sticky={{true}}>
-                            <div class="w-[280px] max-w-[calc(100vw-2rem)]">
-                                <div class="flex items-center gap-1.5 text-xs font-semibold mb-1.5">
-                                    <span class="inline-block w-2 h-2 rounded-full {{if vehicle.online 'bg-green-400' 'bg-red-500'}}"></span>
-                                    <span>{{vehicle.displayName}}</span>
-                                    <div
-                                        class="status-badge
-                                            {{if vehicle.status (dasherize vehicle.status) 'default'}}-status-badge status-badge-{{if vehicle.status (dasherize vehicle.status) 'default'}}
-                                            shadow-none ml-auto"
-                                    >
-                                        <span class="rounded-full text-[9px] px-1.5 py-0.5">{{n-a vehicle.meta.status_label}}</span>
-                                    </div>
-                                </div>
-                                <div class="grid grid-cols-2 gap-1">
-                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
-                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Vehicle #</div>
-                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a
-                                                vehicle.internal_id
-                                                vehicle.public_id
-                                                vehicle.plate_number
-                                                vehicle.serial_number
-                                                vehicle.vin
-                                            }}</div>
-                                    </div>
-                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
-                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Driver</div>
-                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a vehicle.driver_name}}</div>
-                                    </div>
-                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
-                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">{{t "resource.trailers"}}</div>
-                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">
-                                            {{#each vehicle.trailers as |trailer|}}
-                                                <div class="flex items-center gap-1 min-w-0">
-                                                    <span class="inline-block w-1.5 h-1.5 rounded-full shrink-0 {{if trailer.online 'bg-green-400' 'bg-gray-500'}}"></span>
-                                                    <span class="truncate">{{or trailer.displayName trailer.display_name trailer.name trailer.public_id}}</span>
-                                                </div>
-                                            {{else}}
-                                                -
-                                            {{/each}}
-                                        </div>
-                                    </div>
-                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
-                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">{{t "resource.devices"}}</div>
-                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">
-                                            {{#each vehicle.devices as |device|}}
-                                                <div class="flex items-center gap-1 min-w-0">
-                                                    <span class="inline-block w-1.5 h-1.5 rounded-full shrink-0 {{if device.online 'bg-green-400' 'bg-gray-500'}}"></span>
-                                                    <span class="truncate">{{or device.displayName device.display_name device.name device.device_id device.public_id}}</span>
-                                                </div>
-                                            {{else}}
-                                                -
-                                            {{/each}}
-                                        </div>
-                                    </div>
-                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
-                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Order</div>
-                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a vehicle.meta.current_order_reference}}</div>
-                                    </div>
-                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
-                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Speed</div>
-                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a vehicle.meta.speed_label}}</div>
-                                    </div>
-                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
-                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Heading</div>
-                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a vehicle.meta.heading_label}}</div>
-                                    </div>
-                                    <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
-                                        <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Location</div>
-                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a vehicle.meta.location_coordinates}}</div>
-                                    </div>
-                                </div>
-                            </div>
+                            <Map::MarkerCard::Vehicle @vehicle={{vehicle}} @variant="tooltip" />
                         </marker.tooltip>
                     </layers.tracking-marker>
                 {{/each}}

package/addon/components/map/leaflet-live-map.js

@@ -298,7 +298,8 @@ export default class MapLeafletLiveMapComponent extends Component {
     }
 
     @task *loadResource(path, options = {}) {
-        if (this.abilities.cannot(`fleet-ops list ${path}`)) return [];
+        // Permissions use the singular resource name (e.g. `fleet-ops list vehicle`), not the plural endpoint path.
+        if (this.abilities.cannot(`fleet-ops list ${singularize(path)}`)) return [];
 
         if (path === 'service-areas') {
             const serviceAreas = yield this.serviceAreaActions.loadAll.perform();

package/addon/components/map/marker-card/driver.hbs

@@ -0,0 +1,57 @@
+{{!
+    The driver card the fleet-ops live map shows in a marker's popup and hover tooltip.
+    Shared with the dashboard's Live Fleet widget so both look the same. @driver is a driver
+    model or its index resource payload (the same attributes, plain JSON).
+    @variant: "popup" (default, a dark panel) or "tooltip" (inherits the tooltip's panel).
+}}
+<div class="w-[280px] max-w-[calc(100vw-2rem)] {{unless (eq @variant 'tooltip') 'rounded-lg bg-gray-900 shadow-lg p-1.5 text-white'}}" ...attributes>
+    <div class="flex items-center gap-1.5 text-xs font-semibold mb-1.5">
+        <span class="inline-block w-2 h-2 rounded-full {{if @driver.online 'bg-green-400' 'bg-red-500'}}"></span>
+        <span>{{@driver.name}}</span>
+        <div
+            class="status-badge
+                {{if @driver.status (dasherize @driver.status) 'default'}}-status-badge status-badge-{{if @driver.status (dasherize @driver.status) 'default'}}
+                shadow-none ml-auto"
+        >
+            <span class="rounded-full text-[9px] px-1.5 py-0.5">{{n-a @driver.meta.status_label (smart-humanize @driver.status)}}</span>
+        </div>
+    </div>
+    <div class="grid grid-cols-2 gap-1">
+        <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
+            <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">ID</div>
+            <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a @driver.public_id @driver.id}}</div>
+        </div>
+        <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
+            <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Phone</div>
+            <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a @driver.phone}}</div>
+        </div>
+        <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
+            <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Vehicle</div>
+            <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a @driver.vehicle_name}}</div>
+        </div>
+        <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
+            <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Email</div>
+            <div class="text-[11px] text-white leading-tight truncate min-w-0 w-full">{{n-a @driver.email}}</div>
+        </div>
+        <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
+            <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Order</div>
+            <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a @driver.meta.current_order_reference}}</div>
+        </div>
+        <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
+            <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Speed</div>
+            <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a @driver.meta.speed_label}}</div>
+        </div>
+        <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
+            <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Heading</div>
+            <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a @driver.meta.heading_label}}</div>
+        </div>
+        <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
+            <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Location</div>
+            <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a
+                    @driver.meta.location_coordinates
+                    (point-coordinates @driver.location)
+                }}</div>
+        </div>
+    </div>
+</div>
+

package/addon/components/map/marker-card/driver.js

@@ -0,0 +1,3 @@
+import templateOnly from '@ember/component/template-only';
+
+export default templateOnly();

package/addon/components/map/marker-card/vehicle.hbs

@@ -0,0 +1,78 @@
+{{!
+    The vehicle card the fleet-ops live map shows in a marker's popup and hover tooltip.
+    Shared with the dashboard's Live Fleet widget so both look the same. @vehicle is a vehicle
+    model or its index resource payload (the same attributes, plain JSON).
+    @variant: "popup" (default, a dark panel) or "tooltip" (inherits the tooltip's panel).
+}}
+<div class="w-[280px] max-w-[calc(100vw-2rem)] {{unless (eq @variant 'tooltip') 'rounded-lg bg-gray-900 shadow-lg p-1.5 text-white'}}" ...attributes>
+    <div class="flex items-center gap-1.5 text-xs font-semibold mb-1.5">
+        <span class="inline-block w-2 h-2 rounded-full {{if @vehicle.online 'bg-green-400' 'bg-red-500'}}"></span>
+        <span>{{or @vehicle.displayName @vehicle.display_name @vehicle.name}}</span>
+        <div
+            class="status-badge
+                {{if @vehicle.status (dasherize @vehicle.status) 'default'}}-status-badge status-badge-{{if @vehicle.status (dasherize @vehicle.status) 'default'}}
+                shadow-none ml-auto"
+        >
+            <span class="rounded-full text-[9px] px-1.5 py-0.5">{{n-a @vehicle.meta.status_label}}</span>
+        </div>
+    </div>
+    <div class="grid grid-cols-2 gap-1">
+        <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
+            <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Vehicle #</div>
+            <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a
+                    @vehicle.internal_id
+                    @vehicle.public_id
+                    @vehicle.plate_number
+                    @vehicle.serial_number
+                    @vehicle.vin
+                }}</div>
+        </div>
+        <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
+            <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Driver</div>
+            <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a @vehicle.driver_name}}</div>
+        </div>
+        <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
+            <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">{{t "resource.trailers"}}</div>
+            <div class="text-[11px] text-white leading-tight whitespace-normal break-words">
+                {{#each @vehicle.trailers as |trailer|}}
+                    <div class="flex items-center gap-1 min-w-0">
+                        <span class="inline-block w-1.5 h-1.5 rounded-full shrink-0 {{if trailer.online 'bg-green-400' 'bg-gray-500'}}"></span>
+                        <span class="truncate">{{or trailer.displayName trailer.display_name trailer.name trailer.public_id}}</span>
+                    </div>
+                {{else}}
+                    -
+                {{/each}}
+            </div>
+        </div>
+        <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
+            <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">{{t "resource.devices"}}</div>
+            <div class="text-[11px] text-white leading-tight whitespace-normal break-words">
+                {{#each @vehicle.devices as |device|}}
+                    <div class="flex items-center gap-1 min-w-0">
+                        <span class="inline-block w-1.5 h-1.5 rounded-full shrink-0 {{if device.online 'bg-green-400' 'bg-gray-500'}}"></span>
+                        <span class="truncate">{{or device.displayName device.display_name device.name device.device_id device.public_id}}</span>
+                    </div>
+                {{else}}
+                    -
+                {{/each}}
+            </div>
+        </div>
+        <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
+            <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Order</div>
+            <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a @vehicle.meta.current_order_reference}}</div>
+        </div>
+        <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
+            <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Speed</div>
+            <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a @vehicle.meta.speed_label}}</div>
+        </div>
+        <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
+            <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Heading</div>
+            <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a @vehicle.meta.heading_label}}</div>
+        </div>
+        <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
+            <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Location</div>
+            <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a @vehicle.meta.location_coordinates}}</div>
+        </div>
+    </div>
+</div>
+

package/addon/components/map/marker-card/vehicle.js

@@ -0,0 +1,3 @@
+import templateOnly from '@ember/component/template-only';
+
+export default templateOnly();

package/addon/components/order/details/activity.hbs

@@ -5,9 +5,11 @@
     @isLoading={{or @isLoadingActivity this.loadActivity.isRunning @isLoading}}
     @wrapperClass="bordered-top"
 >
-    {{#if (eq this.layout "timeline")}}
-        <Order::ActivityTimeline @resource={{@resource}} @activity={{this.parentOrderActivity}} />
-    {{else}}
-        <Order::ActivityList @resource={{@resource}} @activity={{this.parentOrderActivity}} />
-    {{/if}}
-</ContentPanel>
+    <div {{did-update this.onStatusChanged @resource.status}}>
+        {{#if (eq this.layout "timeline")}}
+            <Order::ActivityTimeline @resource={{@resource}} @activity={{this.parentOrderActivity}} />
+        {{else}}
+            <Order::ActivityList @resource={{@resource}} @activity={{this.parentOrderActivity}} />
+        {{/if}}
+    </div>
+</ContentPanel>

package/addon/components/order/details/activity.js

@@ -1,6 +1,7 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
 import { task } from 'ember-concurrency';
 
 export default class OrderDetailsActivityComponent extends Component {
@@ -64,6 +65,14 @@ export default class OrderDetailsActivityComponent extends Component {
         ];
     }
 
+    /**
+     * A status change recorded outside this panel (a configured lifecycle advancing on save, an
+     * extension action, a realtime update) means new tracking statuses exist server-side.
+     */
+    @action onStatusChanged() {
+        this.loadActivity.perform();
+    }
+
     @task *loadActivity() {
         if (!this.args.resource) {
             return;

package/addon/components/order/details.hbs

@@ -44,6 +44,35 @@
                 )
             )
         }}
+    {{else if this.profile}}
+        {{#each this.profileSections key="key" as |section|}}
+            {{#if section.native}}
+                {{#let
+                    (component
+                        section.componentName
+                        resource=@resource
+                        onChange=section.onChange
+                        isLoading=@isLoading
+                        isLoadingActivity=@isLoadingActivity
+                        reloadToken=this.effectiveProofReloadToken
+                    )
+                    as |NativeSection|
+                }}
+                    <NativeSection />
+                {{/let}}
+            {{else}}
+                <LazyEngineComponent @component={{section.component}} as |ProfileSection|>
+                    <ProfileSection
+                        @resource={{@resource}}
+                        @controller={{@controller}}
+                        @permission={{get-write-permission @resource}}
+                        @isLoading={{@isLoading}}
+                        @profile={{this.profile}}
+                        @onChange={{@onDetailsChanged}}
+                    />
+                </LazyEngineComponent>
+            {{/if}}
+        {{/each}}
     {{else}}
         <RegistryYield @registry="fleet-ops:component:order:details:start" as |RegistryComponent|>
             <RegistryComponent @resource={{@resource}} @controller={{@controller}} @permission={{get-write-permission @resource}} @isLoading={{@isLoading}} />

package/addon/components/order/details.js

@@ -1,14 +1,40 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
 
 export default class OrderDetailsComponent extends Component {
+    @service orderPresentation;
     @tracked proofReloadToken = 0;
 
     get effectiveProofReloadToken() {
         return `${this.args.proofReloadToken ?? 0}:${this.proofReloadToken}`;
     }
 
+    /** The extension presentation profile applying to this order's config, if any. */
+    get profile() {
+        return this.orderPresentation.profileFor(this.args.resource);
+    }
+
+    /** Profile sections with the change handler each native section expects. */
+    get profileSections() {
+        const handlers = {
+            activity: this.handleActivityChanged,
+            detail: this.args.onDetailsChanged,
+            'custom-fields': this.args.onCustomFieldsChanged,
+            notes: this.args.onNotesChanged,
+            route: this.args.onRouteChanged,
+            payload: this.args.onPayloadChanged,
+            documents: this.args.onDocumentsChanged,
+            comments: this.args.onCommentsChanged,
+            metadata: this.args.onMetadataChanged,
+        };
+
+        return this.orderPresentation.renderableSectionsFor(this.profile, 'details').map((section) => {
+            return section.native ? { ...section, onChange: handlers[section.name] } : section;
+        });
+    }
+
     @action handleActivityChanged(optionsOrActivity) {
         if (typeof this.args.onActivityChanged === 'function') {
             this.args.onActivityChanged(optionsOrActivity?.activityCreated ?? optionsOrActivity);