@fleetbase/fleetops-engine 0.6.48 → 0.6.50

package/addon/components/customer/create-order-form.hbs

@@ -335,7 +335,7 @@
                                             {{#each serviceQuote.items as |item|}}
                                                 <tr>
                                                     <td>
-                                                        <span class="font-semibold">{{smart-humanize item.details}}</span>
+                                                        <span class="font-semibold">{{item.details}}</span>
                                                     </td>
                                                     <td>
                                                         <span>{{format-currency item.amount serviceQuote.currency}}</span>
@@ -449,4 +449,4 @@
 
         <Spacer @height="300px" />
     </Overlay::Body>
-</Overlay>
+</Overlay>

package/addon/components/customer/form.hbs

@@ -6,7 +6,7 @@
                     @modelName="user"
                     @selectedModel={{@resource.user}}
                     @placeholder={{t "customer.fields.select-user"}}
-                    @query={{hash doesnt_have_contact=true}}
+                    @query={{hash doesnt_have_contact=true is_customer=true}}
                     @triggerClass="form-select form-input"
                     @infiniteScroll={{false}}
                     @renderInPlace={{true}}
@@ -141,4 +141,4 @@
     <RegistryYield @registry="fleet-ops:component:customer:form" as |RegistryComponent|>
         <RegistryComponent @resource={{@resource}} @controller={{@controller}} @permission={{get-write-permission @resource}} />
     </RegistryYield>
-</div>
+</div>

package/addon/components/customer/order-form.hbs

@@ -351,7 +351,7 @@
                                             {{#each serviceQuote.items as |item|}}
                                                 <tr>
                                                     <td>
-                                                        <span class="font-semibold">{{smart-humanize item.details}}</span>
+                                                        <span class="font-semibold">{{item.details}}</span>
                                                     </td>
                                                     <td>
                                                         <span>{{format-currency item.amount serviceQuote.currency}}</span>
@@ -473,4 +473,4 @@
 
         <Spacer @height="300px" />
     </Overlay::Body>
-</Overlay>
+</Overlay>

package/addon/components/customer/orders.hbs

@@ -274,7 +274,7 @@
                                                                     {{#each order.purchase_rate.service_quote.items as |item|}}
                                                                         <tr>
                                                                             <td>
-                                                                                <span class="font-semibold">{{smart-humanize item.details}}</span>
+                                                                                <span class="font-semibold">{{item.details}}</span>
                                                                             </td>
                                                                             <td>
                                                                                 <div class="flex flex-row items-center justify-end">{{format-currency
@@ -320,4 +320,4 @@
         </div>
         <div id="customer-portal-content-wormhole"></div>
     {{/let}}
-</div>
+</div>

package/addon/components/display-place.hbs

@@ -31,7 +31,7 @@
                             <div class="next-dd-menu-seperator"></div>
                             {{#each-in @waypointActions as |actionId action|}}
                                 <div class="px-1">
-                                    <a href="javascript:;" class="next-dd-item" disabled={{cannot "fleet-ops view order"}} {{on "click" (dropdown-fn dd action.fn this.place)}}>
+                                    <a href="javascript:;" class="next-dd-item" disabled={{cannot "fleet-ops view order"}} {{on "click" (dropdown-fn dd action.fn (or @waypointActionContext this.place))}}>
                                         {{action.label}}
                                     </a>
                                 </div>
@@ -65,4 +65,4 @@
             {{/if}}
         </address>
     {{/if}}
-</div>
+</div>

package/addon/components/driver/details.hbs

@@ -30,6 +30,10 @@
                 <div class="field-name">{{t "driver.fields.driver-license"}}</div>
                 <div class="field-value">{{n-a @resource.drivers_license_number}}</div>
             </div>
+            <div class="field-info-container">
+                <div class="field-name">{{t "driver.fields.license-expiry"}}</div>
+                <div class="field-value">{{n-a @resource.license_expiry}}</div>
+            </div>
             <div class="field-info-container">
                 <div class="field-name">{{t "resource.vendor"}}</div>
                 <div class="field-value">{{n-a @resource.vendor_name}}</div>
@@ -92,4 +96,4 @@
     >
         <MetadataViewer @metadata={{@resource.meta}} />
     </ContentPanel>
-</div>
+</div>

package/addon/components/driver/form.hbs

@@ -93,6 +93,16 @@
                 />
             </InputGroup>
 
+            <InputGroup @name={{t "driver.fields.license-expiry"}}>
+                <DatePicker
+                    @value={{@resource.license_expiry}}
+                    @onChange={{fn (mut @resource.license_expiry)}}
+                    @placeholder={{t "driver.fields.license-expiry"}}
+                    @disabled={{cannot-write @resource}}
+                    class="w-full form-input"
+                />
+            </InputGroup>
+
             <InputGroup @name={{t "driver.fields.vendor"}}>
                 <ModelSelect
                     @modelName="vendor"
@@ -221,4 +231,4 @@
     <ContentPanel @title={{t "common.metadata"}} @open={{true}} @wrapperClass="bordered-top">
         <MetadataEditor @value={{@resource.meta}} @onChange={{fn (mut @resource.meta)}} />
     </ContentPanel>
-</div>
+</div>

package/addon/components/fleet-listing-panel.hbs

@@ -36,13 +36,13 @@
             @dropdownButtonIcon={{@itemDropdownButtonIcon}}
             @dropdownButtonIconPrefix={{@itemDropdownButtonIconPrefix}}
             @dropdownButtonText={{@itemDropdownButtonText}}
-            @dropdownButtonCalculatePosition={{@itemDropdownButtonCalculatePosition}}
+            @dropdownButtonCalculatePosition={{this.calculateDropdownItemPosition}}
             @dropdownButtonMenuLabel={{vehicle.displayName}}
             @dropdownButtonWrapperClass={{@itemDropdownButtonWrapperClass}}
             @dropdownButtonTriggerClass={{@itemDropdownButtonTriggerClass}}
             @registerDropdownButtonAPI={{@itemRegisterDropdownButtonAPI}}
-            @permission="fleet-ops view vehicle"
             @dropdownButtonRenderInPlace={{false}}
+            @permission="fleet-ops view vehicle"
         >{{vehicle.displayName}}</Layout::Sidebar::Item>
     {{/each}}
 </Layout::Sidebar::Panel>

package/addon/components/fleet-listing-panel.js

@@ -31,4 +31,14 @@ export default class FleetListingPanelComponent extends Component {
             this.args.onVehicleClicked(vehicle);
         }
     }
+
+    @action calculateDropdownItemPosition(trigger) {
+        let { top, left, width } = trigger.getBoundingClientRect();
+        let style = {
+            left: 11 + left + width,
+            top: top + 2,
+        };
+
+        return { style };
+    }
 }

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

@@ -6,73 +6,7 @@ import { action } from '@ember/object';
 import { isArray } from '@ember/array';
 import { debug } from '@ember/debug';
 import { guidFor } from '@ember/object/internals';
-
-function buildDriverInfoWindowContent(driver) {
-    return `
-        <div class="fleetops-google-popover fleetops-google-popover--compact">
-            <div class="fleetops-google-popover__row">
-                <img src="${driver.photoUrl ?? ''}" alt="${driver.name ?? ''}" class="fleetops-google-popover__avatar" />
-                <div class="fleetops-google-popover__body">
-                    <div class="fleetops-google-popover__title">${driver.name ?? '-'}</div>
-                    <div class="fleetops-google-popover__meta">Phone: ${driver.phone ?? '-'}</div>
-                    <div class="fleetops-google-popover__meta">Vehicle: ${driver.vehicle_name ?? '-'}</div>
-                    <div class="fleetops-google-popover__meta">Status:
-                        <span class="${driver.online ? 'text-green-500' : 'text-red-400'}">${driver.online ? 'Online' : 'Offline'}</span>
-                    </div>
-                </div>
-            </div>
-        </div>`;
-}
-
-function buildDriverTooltipContent(driver) {
-    return `
-        <div class="fleetops-google-hover-tooltip__title">${driver.name ?? '-'}</div>
-        <div class="fleetops-google-hover-tooltip__meta ${driver.online ? 'text-green-400' : 'text-red-400'}">${driver.online ? 'Online' : 'Offline'}</div>
-    `;
-}
-
-function buildVehicleInfoWindowContent(vehicle) {
-    return `
-        <div class="fleetops-google-popover">
-            <div class="fleetops-google-popover__row">
-                <img src="${vehicle.photo_url ?? ''}" alt="${vehicle.display_name ?? ''}" class="fleetops-google-popover__vehicle" />
-                <div class="fleetops-google-popover__body">
-                    <div class="fleetops-google-popover__title">${vehicle.displayName ?? '-'}</div>
-                    <div class="fleetops-google-popover__meta">ID: ${vehicle.public_id ?? '-'}</div>
-                    <div class="fleetops-google-popover__meta">Serial: ${vehicle.serial_number ?? vehicle.vin ?? '-'}</div>
-                    <div class="fleetops-google-popover__meta">Driver: ${vehicle.driver_name ?? '-'}</div>
-                    <div class="fleetops-google-popover__meta">Status:
-                        <span class="${vehicle.online ? 'text-green-500' : 'text-red-400'}">${vehicle.online ? 'Online' : 'Offline'}</span>
-                    </div>
-                </div>
-            </div>
-        </div>`;
-}
-
-function buildVehicleTooltipContent(vehicle) {
-    return `
-        <div class="fleetops-google-hover-tooltip__title">${vehicle.displayName ?? '-'}</div>
-        <div class="fleetops-google-hover-tooltip__meta">ID: ${vehicle.public_id ?? '-'}</div>
-        <div class="fleetops-google-hover-tooltip__meta ${vehicle.online ? 'text-green-400' : 'text-red-400'}">${vehicle.online ? 'Online' : 'Offline'}</div>
-    `;
-}
-
-function buildPlaceInfoWindowContent(place) {
-    return `
-        <div class="fleetops-google-popover fleetops-google-popover--compact">
-            <div class="fleetops-google-popover__body">
-                <div class="fleetops-google-popover__title">${place.name ?? place.address ?? '-'}</div>
-                <div class="fleetops-google-popover__meta">${place.address ?? ''}</div>
-            </div>
-        </div>`;
-}
-
-function buildPlaceTooltipContent(place) {
-    return `
-        <div class="fleetops-google-hover-tooltip__title">${place.name ?? place.address ?? '-'}</div>
-        <div class="fleetops-google-hover-tooltip__meta">${place.address ?? ''}</div>
-    `;
-}
+import { buildDriverLiveMapContent, buildPlaceInfoWindowContent, buildPlaceTooltipContent, buildVehicleLiveMapContent } from '../../utils/live-map-card-content';
 
 export default class MapGoogleLiveMapComponent extends Component {
     @service mapManager;
@@ -100,6 +34,7 @@ export default class MapGoogleLiveMapComponent extends Component {
 
         this.map = map;
         this.mapManager.on('moveend', () => this.args.onViewportChanged?.());
+        this.mapManager.on('click', () => this._closeAllInfoWindows());
         this.mapManager.on('rightclick', (event) => this._showMapContextMenu(event));
         this.args.onLoad?.({ target: map });
         this.syncResources();
@@ -125,12 +60,12 @@ export default class MapGoogleLiveMapComponent extends Component {
             if (!marker) {
                 const createdMarker = await this.mapManager.addMarker(driver.id, coords.lat, coords.lng, {
                     iconUrl: driver.vehicle_avatar ?? '/engines-dist/images/driver-marker.png',
-                    iconSize: [24, 24],
+                    iconSize: [20, 20],
                     title: driver.name,
-                    tooltip: buildDriverTooltipContent(driver),
+                    tooltip: buildDriverLiveMapContent(driver),
                     tooltipOptions: { html: true },
                     rotationAngle: driver.heading,
-                    onClick: () => this.#openInfoWindow(`driver:${driver.id}`, buildDriverInfoWindowContent(driver), driver.id, () => this.args.onDriverClicked?.(driver)),
+                    onClick: () => this.#openInfoWindow(`driver:${driver.id}`, buildDriverLiveMapContent(driver, true), driver.id, () => this.args.onDriverClicked?.(driver)),
                     onRightClick: (event) => this._showDriverContextMenu(driver, event),
                 });
 
@@ -155,12 +90,12 @@ export default class MapGoogleLiveMapComponent extends Component {
             if (!marker) {
                 const createdMarker = await this.mapManager.addMarker(vehicle.id, coords.lat, coords.lng, {
                     iconUrl: vehicle.avatar_url ?? '/engines-dist/images/vehicle-marker.png',
-                    iconSize: [24, 24],
+                    iconSize: [20, 20],
                     title: vehicle.displayName,
-                    tooltip: buildVehicleTooltipContent(vehicle),
+                    tooltip: buildVehicleLiveMapContent(vehicle),
                     tooltipOptions: { html: true },
                     rotationAngle: vehicle.heading,
-                    onClick: () => this.#openInfoWindow(`vehicle:${vehicle.id}`, buildVehicleInfoWindowContent(vehicle), vehicle.id, () => this.args.onVehicleClicked?.(vehicle)),
+                    onClick: () => this.#openInfoWindow(`vehicle:${vehicle.id}`, buildVehicleLiveMapContent(vehicle, true), vehicle.id, () => this.args.onVehicleClicked?.(vehicle)),
                     onRightClick: (event) => this._showVehicleContextMenu(vehicle, event),
                 });
 
@@ -308,6 +243,10 @@ export default class MapGoogleLiveMapComponent extends Component {
         if (!infoWindow) {
             infoWindow = new google.maps.InfoWindow({ content });
             this._infoWindows.set(infoId, infoWindow);
+
+            infoWindow.addListener('domready', () => {
+                document.querySelector('[data-fleetops-google-popover-close]')?.addEventListener('click', () => infoWindow.close(), { once: true });
+            });
         } else {
             infoWindow.setContent(content);
         }
@@ -337,15 +276,19 @@ export default class MapGoogleLiveMapComponent extends Component {
     }
 
     _showServiceAreaContextMenu(serviceArea, event) {
-        const items = this.mapManager.getComposedContextMenuItems(`service-area:${serviceArea.public_id}`);
+        const items = this.mapManager.getComposedContextMenuItems(this._resourceContextKey('service-area', serviceArea));
         this.mapManager.showContextMenu(event, items);
     }
 
     _showZoneContextMenu(zone, event) {
-        const items = this.mapManager.getComposedContextMenuItems(`zone:${zone.public_id}`);
+        const items = this.mapManager.getComposedContextMenuItems(this._resourceContextKey('zone', zone));
         this.mapManager.showContextMenu(event, items);
     }
 
+    _resourceContextKey(type, resource) {
+        return `${type}:${resource?.public_id ?? resource?.id}`;
+    }
+
     _closeAllInfoWindows() {
         this._infoWindows.forEach((iw) => iw.close());
         this.mapManager.closeContextMenu();

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

@@ -13,7 +13,7 @@
     through the provider-agnostic MapManagerService.
 }}
 
-<div class="live-map-component {{@wrapperClass}}">
+<div class="live-map-component {{@wrapperClass}}" {{did-update this.syncServiceAreaContextMenus this.serviceAreaActions.serviceAreas this.serviceAreaActions.serviceAreas.length}}>
 
     {{#if this.shouldUseGoogleMaps}}
         {{! ─── Google Maps branch ──────────────────────────────────────────── }}
@@ -83,27 +83,108 @@
                         as |marker|
                     >
                         <marker.popup @maxWidth="500" @minWidth="225">
-                            <div class="flex flex-row">
-                                <div class="w-14">
-                                    <img src={{driver.photoUrl}} alt={{driver.name}} class="rounded-md w-12 h-12 shadow-sm" />
+                            <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="flex-1">
-                                    <div class="text-xs font-semibold">{{driver.name}}</div>
-                                    <div class="text-xs">{{t "common.phone"}}: {{n-a driver.phone}}</div>
-                                    <div class="text-xs">{{t "resource.vehicle"}}: {{n-a driver.vehicle_name}}</div>
-                                    <div class="text-xs">{{t "common.status"}}:
-                                        <span class="{{if driver.online 'text-green-500' 'text-red-400'}}">{{if driver.online "Online" "Offline"}}</span></div>
-                                    <div class="text-xs truncate">{{t "common.pos"}}: {{point-coordinates driver.location}}</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>
                         </marker.popup>
                         <marker.tooltip @permanent={{false}} @sticky={{true}}>
-                            <div class="flex items-center space-x-1">
-                                <div class="text-xs font-semibold">{{driver.name}}</div>
-                                <div>•</div>
-                                <div class="text-xs {{if driver.online 'text-green-500' 'text-red-400'}}">{{if driver.online "Online" "Offline"}}</div>
+                            <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>
-                            <div class="text-xs truncate"><FaIcon @icon="location-dot" @size="xs" class="mr-0.5" />{{point-coordinates driver.location}}</div>
                         </marker.tooltip>
                     </layers.tracking-marker>
                 {{/each}}
@@ -121,29 +202,98 @@
                         as |marker|
                     >
                         <marker.popup @permanent={{false}} @sticky={{true}}>
-                            <div class="flex flex-row">
-                                <div class="w-14 mr-2">
-                                    <img src={{vehicle.photo_url}} alt={{vehicle.display_name}} class="rounded-md w-14 h-12 shadow-sm" />
+                            <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="flex-1">
-                                    <div class="text-xs font-semibold">{{vehicle.displayName}}</div>
-                                    <div class="text-xs">ID: {{n-a vehicle.public_id}}</div>
-                                    <div class="text-xs">Serial No: {{n-a vehicle.serial_number vehicle.vin vehicle.internal_id vehicle.id}}</div>
-                                    <div class="text-xs">Driver: {{n-a vehicle.driver_name}}</div>
-                                    <div class="text-xs">Status: <span class="{{if vehicle.online 'text-green-500' 'text-red-400'}}">{{if vehicle.online "Online" "Offline"}}</span></div>
-                                    <div class="text-xs truncate">Pos: {{point-coordinates vehicle.location}}</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">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>
                         </marker.popup>
                         <marker.tooltip @permanent={{false}} @sticky={{true}}>
-                            <div class="flex items-center space-x-1">
-                                <div class="text-xs font-semibold">{{vehicle.displayName}}</div>
-                                <div>•</div>
-                                <div class="text-xs {{if vehicle.online 'text-green-500' 'text-red-400'}}">{{if vehicle.online "Online" "Offline"}}</div>
+                            <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">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>
-                            <div class="text-xs">ID: {{n-a vehicle.public_id}}</div>
-                            <div class="text-xs">Serial No: {{or vehicle.serial_number vehicle.vin vehicle.internal_id vehicle.id "-"}}</div>
-                            <div class="text-xs truncate"><FaIcon @icon="location-dot" @size="xs" class="mr-0.5" />{{point-coordinates vehicle.location}}</div>
                         </marker.tooltip>
                     </layers.tracking-marker>
                 {{/each}}
@@ -175,8 +325,8 @@
                         @id={{serviceArea.id}}
                         @record={{serviceArea}}
                         @locations={{unwrap-coordinates serviceArea.leafletCoordinates}}
-                        @fillColor={{serviceArea.color}}
-                        @color={{serviceArea.stroke_color}}
+                        @fillColor={{or serviceArea.color "#3388ff"}}
+                        @color={{or serviceArea.stroke_color serviceArea.color "#3388ff"}}
                         @onAdd={{fn this.trigger "onServiceAreaLayerAdded" serviceArea}}
                         as |polygon|
                     >
@@ -188,8 +338,8 @@
                             @id={{zone.id}}
                             @record={{zone}}
                             @locations={{unwrap-coordinates zone.leafletCoordinates}}
-                            @fillColor={{zone.color}}
-                            @color={{zone.stroke_color}}
+                            @fillColor={{or zone.color "#3388ff"}}
+                            @color={{or zone.stroke_color zone.color "#3388ff"}}
                             @onAdd={{fn this.trigger "onZoneLayerAdd" zone}}
                             as |polygon|
                         >