@fleetbase/fleetops-engine 0.6.69 → 0.6.70

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/telematic/hub.hbs

@@ -15,7 +15,7 @@
                 </div>
                 <div class="flex flex-shrink-0 items-center gap-2 whitespace-nowrap">
                     <Button @icon="refresh" @size="sm" @helpText={{t "common.reload"}} @onClick={{this.refresh}} />
-                    <Button @icon="plus" @text="Connect Provider" @type="primary" @size="sm" @onClick={{this.telematicActions.transition.create}} />
+                    <Button @icon="plus" @text="Connect Provider" @type="primary" @size="sm" @permission="fleet-ops create telematic" @onClick={{this.telematicActions.transition.create}} />
                 </div>
             </div>
         </section>

package/addon/components/widget/live-fleet.hbs

@@ -28,7 +28,8 @@
 
                 {{#if this.load.isIdle}}
                     {{! Drivers — fleetops' rotating tracking-marker matches the operational
-                         live-map's look and animates on heading changes. }}
+                         live-map's look and animates on heading changes. The popup and tooltip
+                         are the live map's own cards, fed from each marker's index-resource card. }}
                     {{#each this.drivers as |driver|}}
                         <layers.tracking-marker
                             @id={{driver.uuid}}
@@ -39,28 +40,11 @@
                             @draggable={{false}}
                             as |marker|
                         >
-                            <marker.popup @maxWidth="240" @minWidth="180">
-                                <div class="flex flex-row gap-2">
-                                    <div class="w-9 h-9 flex-shrink-0">
-                                        <img src={{or driver.avatar_url driver.vehicle_avatar}} alt={{driver.name}} class="rounded-md w-9 h-9 object-cover shadow-sm" />
-                                    </div>
-                                    <div class="flex-1 min-w-0">
-                                        <div class="text-xs font-semibold truncate">{{or driver.name "Driver"}}</div>
-                                        <div class="text-[11px]">
-                                            {{#if driver.current_order_uuid}}
-                                                <span class="text-blue-500"><FaIcon @icon="bolt" class="mr-1" />On order</span>
-                                            {{else if driver.online}}
-                                                <span class="text-green-500"><FaIcon @icon="circle" @size="2xs" class="mr-1" />Online</span>
-                                            {{else}}
-                                                <span class="text-gray-400"><FaIcon @icon="circle" @size="2xs" class="mr-1" />Offline</span>
-                                            {{/if}}
-                                        </div>
-                                        <div class="text-[10px] text-gray-400 mt-0.5 truncate">{{driver.lat}}, {{driver.lng}}</div>
-                                    </div>
-                                </div>
+                            <marker.popup @maxWidth="500" @minWidth="225">
+                                <Map::MarkerCard::Driver @driver={{or driver.card driver}} />
                             </marker.popup>
                             <marker.tooltip @permanent={{false}} @sticky={{true}} @direction="top">
-                                <div class="text-[11px] font-semibold">{{or driver.name "Driver"}}</div>
+                                <Map::MarkerCard::Driver @driver={{or driver.card driver}} @variant="tooltip" />
                             </marker.tooltip>
                         </layers.tracking-marker>
                     {{/each}}
@@ -77,27 +61,11 @@
                             @draggable={{false}}
                             as |marker|
                         >
-                            <marker.popup @maxWidth="240" @minWidth="180">
-                                <div class="flex flex-row gap-2">
-                                    <div class="w-9 h-9 flex-shrink-0">
-                                        <img src={{or vehicle.photo_url vehicle.avatar_url}} alt={{vehicle.name}} class="rounded-md w-9 h-9 object-cover shadow-sm" />
-                                    </div>
-                                    <div class="flex-1 min-w-0">
-                                        <div class="text-xs font-semibold truncate">{{or vehicle.name "Vehicle"}}</div>
-                                        {{#if vehicle.plate_number}}
-                                            <div class="text-[10px] text-gray-500 truncate">{{vehicle.plate_number}}</div>
-                                        {{/if}}
-                                        {{#if vehicle.driver_name}}
-                                            <div class="text-[11px] text-gray-600 dark:text-gray-300 truncate">
-                                                <FaIcon @icon="id-card" class="mr-1 text-gray-400" />{{vehicle.driver_name}}
-                                            </div>
-                                        {{/if}}
-                                        <div class="text-[10px] text-gray-400 mt-0.5 truncate">{{vehicle.lat}}, {{vehicle.lng}}</div>
-                                    </div>
-                                </div>
+                            <marker.popup @maxWidth="500" @minWidth="225">
+                                <Map::MarkerCard::Vehicle @vehicle={{or vehicle.card vehicle}} />
                             </marker.popup>
                             <marker.tooltip @permanent={{false}} @sticky={{true}} @direction="top">
-                                <div class="text-[11px] font-semibold">{{or vehicle.name "Vehicle"}}</div>
+                                <Map::MarkerCard::Vehicle @vehicle={{or vehicle.card vehicle}} @variant="tooltip" />
                             </marker.tooltip>
                         </layers.tracking-marker>
                     {{/each}}

package/addon/controllers/analytics/reports/index.js

@@ -29,6 +29,7 @@ export default class AnalyticsReportsIndexController extends Controller {
                 type: 'primary',
                 icon: 'plus',
                 onClick: this.reportActions.transition.create,
+                permission: 'iam create report',
             },
         ];
     }
@@ -39,6 +40,7 @@ export default class AnalyticsReportsIndexController extends Controller {
                 label: 'Delete selected...',
                 class: 'text-red-500',
                 fn: this.reportActions.bulkDelete,
+                permission: 'iam delete report',
             },
         ];
     }
@@ -81,10 +83,12 @@ export default class AnalyticsReportsIndexController extends Controller {
                     {
                         label: 'View report...',
                         fn: this.reportActions.transition.view,
+                        permission: 'iam view report',
                     },
                     {
                         label: 'Edit report...',
                         fn: this.reportActions.transition.edit,
+                        permission: 'iam update report',
                     },
                     {
                         separator: true,
@@ -92,6 +96,7 @@ export default class AnalyticsReportsIndexController extends Controller {
                     {
                         label: 'Delete report...',
                         fn: this.reportActions.delete,
+                        permission: 'iam delete report',
                     },
                 ],
                 sortable: false,

package/addon/controllers/connectivity/devices/index.js

@@ -65,12 +65,14 @@ export default class ConnectivityDevicesIndexController extends Controller {
             type: 'primary',
             icon: 'plus',
             onClick: this.deviceActions.transition.create,
+            permission: 'fleet-ops create device',
         },
         {
             text: this.intl.t('common.import'),
             type: 'magic',
             icon: 'upload',
             onClick: this.deviceActions.import,
+            permission: 'fleet-ops import device',
         },
         {
             text: this.intl.t('common.export'),
@@ -78,6 +80,7 @@ export default class ConnectivityDevicesIndexController extends Controller {
             iconClass: 'rotate-icon-45',
             wrapperClass: 'hidden md:flex',
             onClick: this.deviceActions.export,
+            permission: 'fleet-ops export device',
         },
     ];
 
@@ -87,6 +90,7 @@ export default class ConnectivityDevicesIndexController extends Controller {
             label: 'Delete selected...',
             class: 'text-red-500',
             fn: this.deviceActions.bulkDelete,
+            permission: 'fleet-ops delete device',
         },
     ];
 

package/addon/controllers/connectivity/fuel-providers/index.js

@@ -40,6 +40,7 @@ export default class ConnectivityFuelProvidersIndexController extends Controller
                 text: 'Connect Integration',
                 type: 'primary',
                 onClick: () => this.fuelIntegrationActions.transition.create(),
+                permission: 'fleet-ops create fuel-provider-connection',
             },
         ];
     }
@@ -51,6 +52,7 @@ export default class ConnectivityFuelProvidersIndexController extends Controller
             {
                 label: `Sync ${selected.length} selected`,
                 fn: () => selected.forEach((connection) => this.syncConnection(connection)),
+                permission: 'fleet-ops sync fuel-provider-connection',
             },
         ];
     }
@@ -125,11 +127,11 @@ export default class ConnectivityFuelProvidersIndexController extends Controller
                 sticky: 'right',
                 width: 60,
                 actions: [
-                    { label: 'Open Integration', fn: this.openConnection },
-                    { label: 'Edit Settings', fn: this.editConnection },
+                    { label: 'Open Integration', fn: this.openConnection, permission: 'fleet-ops view fuel-provider-connection' },
+                    { label: 'Edit Settings', fn: this.editConnection, permission: 'fleet-ops update fuel-provider-connection' },
                     { separator: true },
-                    { label: 'Test Connection', fn: this.testConnection },
-                    { label: 'Sync Transactions', fn: this.syncConnection },
+                    { label: 'Test Connection', fn: this.testConnection, permission: 'fleet-ops update fuel-provider-connection' },
+                    { label: 'Sync Transactions', fn: this.syncConnection, permission: 'fleet-ops sync fuel-provider-connection' },
                 ],
                 sortable: false,
                 filterable: false,