@fleetbase/fleetops-engine 0.6.68 → 0.6.70

package/addon/components/driver/form.hbs

@@ -1,39 +1,4 @@
 <div class="form-wrapper" ...attributes>
-    <ContentPanel @title={{t "driver.fields.user-account"}} @open={{true}} @actionButtons={{this.userAccountActionButtons}} @wrapperClass="bordered-top">
-        <div class="space-y-2">
-            <InputGroup @name={{t "driver.fields.user-account"}} @helpText={{t "driver.fields.user-account-help-text"}}>
-                <ModelSelect
-                    @modelName="user"
-                    @selectedItemComponent={{component "select-option/user" compact=true}}
-                    @selectedModel={{@resource.user}}
-                    @placeholder={{t "driver.fields.select-user"}}
-                    @query={{hash doesnt_have_driver=true can_be_driver=true}}
-                    @triggerClass="form-select form-input"
-                    @infiniteScroll={{false}}
-                    @renderInPlace={{true}}
-                    @onChange={{fn (mut @resource.user)}}
-                    @permission="fleet-ops update-user-for driver"
-                    as |model|
-                >
-                    <SelectOption::User @option={{model}} />
-                </ModelSelect>
-            </InputGroup>
-            {{#if @resource.user}}
-                <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 no-input-group-padding">
-                    <InputGroup @name={{t "common.name"}} @wrapperClass="col-span-2 mb-0i">
-                        <Input @value={{@resource.user.name}} @type="text" class="w-full form-input" placeholder={{t "common.name"}} disabled={{true}} />
-                    </InputGroup>
-                    <InputGroup @name={{t "common.email"}} @wrapperClass="mb-0i">
-                        <Input @value={{@resource.user.email}} @type="text" class="w-full form-input" placeholder={{t "common.email"}} disabled={{true}} />
-                    </InputGroup>
-                    <InputGroup @name={{t "common.phone"}} @wrapperClass="mb-0i">
-                        <PhoneInput @value={{@resource.user.phone}} @onInput={{fn (mut @resource.phone)}} class="form-input w-full" disabled={{true}} />
-                    </InputGroup>
-                </div>
-            {{/if}}
-        </div>
-    </ContentPanel>
-
     <ContentPanel @title={{t "driver.fields.driver-details"}} @open={{true}} @wrapperClass="bordered-top">
         <div class="flex flex-row space-x-3 mb-3">
             <div class="flex items-center justify-start rounded-full">
@@ -65,6 +30,26 @@
             </div>
         </div>
         <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 text-xs no-input-group-padding">
+            <InputGroup @name={{t "common.name"}} @required={{true}}>
+                <Input @value={{@resource.name}} @type="text" class="w-full form-input" placeholder={{t "common.name"}} disabled={{cannot-write @resource}} />
+            </InputGroup>
+            <InputGroup @name={{t "common.email"}}>
+                <Input
+                    @value={{@resource.email}}
+                    @type="text"
+                    class="w-full form-input"
+                    placeholder={{t "common.email"}}
+                    disabled={{or (cannot-write @resource) @resource.is_staff_linked}}
+                />
+            </InputGroup>
+            <InputGroup @name={{t "common.phone"}}>
+                <PhoneInput @value={{@resource.phone}} @onInput={{fn (mut @resource.phone)}} class="form-input w-full" disabled={{or (cannot-write @resource) @resource.is_staff_linked}} />
+            </InputGroup>
+            {{#if @resource.is_staff_linked}}
+                <div class="lg:col-span-2 -mt-1 mb-2 text-xs text-gray-500 dark:text-gray-400" data-test-staff-linked-helper>{{t "profile-account.staff-linked-helper"}}</div>
+            {{else if @resource.isNew}}
+                <ProfileIdentityHint @email={{@resource.email}} @phone={{@resource.phone}} @type="driver" class="lg:col-span-2" />
+            {{/if}}
             <InputGroup @name={{t "common.internal-id"}}>
                 <Input @value={{@resource.internal_id}} @type="text" class="w-full form-input" placeholder={{t "common.internal-id"}} disabled={{cannot-write @resource}} />
             </InputGroup>

package/addon/components/driver/form.js

@@ -3,67 +3,9 @@ import { inject as service } from '@ember/service';
 import { task } from 'ember-concurrency';
 
 export default class DriverFormComponent extends Component {
-    @service store;
     @service fetch;
     @service currentUser;
     @service notifications;
-    @service modalsManager;
-    @service('universe/extension-manager') extensionManager;
-
-    get userAccountActionButtons() {
-        return [
-            {
-                icon: 'user-plus',
-                size: 'xs',
-                permission: 'iam create user',
-                onClick: async () => {
-                    // Load IAM engine for user-form modal component
-                    await this.extensionManager.ensureEngineLoaded('@fleetbase/iam-engine');
-
-                    const user = this.store.createRecord('user', {
-                        status: 'pending',
-                        type: 'user',
-                    });
-
-                    this.modalsManager.show('modals/user-form', {
-                        title: 'Create a new user',
-                        user,
-                        formPermission: 'iam create user',
-                        uploadNewPhoto: (file) => {
-                            this.fetch.uploadFile.perform(
-                                file,
-                                {
-                                    path: `uploads/${this.currentUser.companyId}/users/${user.slug}`,
-                                    subject_uui: user.id,
-                                    subject_type: 'user',
-                                    type: 'user_photo',
-                                },
-                                (uploadedFile) => {
-                                    user.setProperties({
-                                        avatar_uuid: uploadedFile.id,
-                                        avatar_url: uploadedFile.url,
-                                        avatar: uploadedFile,
-                                    });
-                                }
-                            );
-                        },
-                        confirm: async (modal) => {
-                            modal.startLoading();
-
-                            try {
-                                await user.save();
-                                this.notifications.success('New user created successfully!');
-                                modal.done();
-                            } catch (error) {
-                                this.notifications.serverError(error);
-                                modal.stopLoading();
-                            }
-                        },
-                    });
-                },
-            },
-        ];
-    }
 
     @task *handlePhotoUpload(file) {
         try {

package/addon/components/fuel-integration/hub.hbs

@@ -17,7 +17,7 @@
                 </div>
                 <div class="flex flex-shrink-0 items-center gap-2 whitespace-nowrap">
                     <Button @icon="refresh" @size="sm" @helpText={{t "common.reload"}} @onClick={{@onRefresh}} />
-                    <Button @icon="plus" @text="Connect Integration" @type="primary" @size="sm" @onClick={{this.createIntegration}} />
+                    <Button @icon="plus" @text="Connect Integration" @type="primary" @size="sm" @permission="fleet-ops create fuel-provider-connection" @onClick={{this.createIntegration}} />
                 </div>
             </div>
         </section>

package/addon/components/layout/fleet-ops-sidebar.js

@@ -151,14 +151,14 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
             this.createItem('menu.contacts', 'address-book', 'management.contacts', 'fleet-ops list contact', 'fleet-ops see contact'),
             this.createItem('menu.places', 'location-dot', 'management.places', 'fleet-ops list place', 'fleet-ops see place'),
             this.createItem('menu.fuel-reports', 'gas-pump', 'management.fuel-reports', 'fleet-ops list fuel-report', 'fleet-ops see fuel-report'),
-            this.createItem('menu.fuel-transactions', 'credit-card', 'management.fuel-transactions', 'fleet-ops list fuel-report', 'fleet-ops see fuel-report'),
+            this.createItem('menu.fuel-transactions', 'credit-card', 'management.fuel-transactions', 'fleet-ops list fuel-provider-transaction', 'fleet-ops see fuel-provider-transaction'),
             this.createItem('menu.issues', 'triangle-exclamation', 'management.issues', 'fleet-ops list issue', 'fleet-ops see issue'),
         ]);
     }
 
     get maintenanceItems() {
         return this.withRegistryItems('maintenance', [
-            this.createHubItem('Maintenance Hub', 'wrench', 'maintenance.index', 'fleet-ops list maintenance-schedule', 'fleet-ops see maintenance-schedule', [
+            this.createHubItem('Maintenance Hub', 'wrench', 'maintenance.index', 'fleet-ops list work-order', 'fleet-ops see work-order', [
                 'maintenance hub',
                 'service readiness',
                 'maintenance control panel',
@@ -182,7 +182,9 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
     get connectivityItems() {
         return this.withRegistryItems('connectivity', [
             this.createHubItem(this.intl.t('menu.telematics'), 'satellite-dish', 'connectivity.telematics', 'fleet-ops list telematic', 'fleet-ops see telematic', ['connectivity hub']),
-            this.createItem('menu.fuel-providers', 'gas-pump', 'connectivity.fuel-providers', 'fleet-ops list fuel-report', 'fleet-ops see fuel-report', ['fuel integrations']),
+            this.createItem('menu.fuel-providers', 'gas-pump', 'connectivity.fuel-providers', 'fleet-ops list fuel-provider-connection', 'fleet-ops see fuel-provider-connection', [
+                'fuel integrations',
+            ]),
             this.createItem('menu.devices', 'hard-drive', 'connectivity.devices', 'fleet-ops list device', 'fleet-ops see device'),
             this.createItem('menu.sensors', 'temperature-full', 'connectivity.sensors', 'fleet-ops list sensor', 'fleet-ops see sensor'),
             this.createItem('menu.events', 'stream', 'connectivity.events', 'fleet-ops list device-event', 'fleet-ops see device-event'),
@@ -191,18 +193,14 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
 
     get analyticsItems() {
         return this.withRegistryItems('analytics', [
-            this.createHubItem('Dashboard', 'chart-line', 'analytics.index', 'iam list report', 'fleet-ops see report', ['dashboard', 'fleetops dashboard', 'metrics']),
-            this.createItem('menu.reports', 'file-import', 'analytics.reports', 'iam list report', 'fleet-ops see report'),
+            this.createHubItem('Dashboard', 'chart-line', 'analytics.index', 'fleet-ops view analytics', 'fleet-ops see analytics', ['dashboard', 'fleetops dashboard', 'metrics']),
+            this.createItem('menu.reports', 'file-import', 'analytics.reports', 'iam list report', 'iam see report'),
         ]);
     }
 
     get settingsItems() {
         return this.withRegistryItems('settings', [
-            this.createHubItem('Settings Hub', 'sliders', 'settings.index', 'fleet-ops view navigator-settings', 'fleet-ops see navigator-settings', [
-                'settings hub',
-                'configuration dashboard',
-                'setup focus',
-            ]),
+            this.createHubItem('Settings Hub', 'sliders', 'settings.index', null, null, ['settings hub', 'configuration dashboard', 'setup focus']),
             this.createItem('menu.navigator-app', 'location-arrow', 'settings.navigator-app', 'fleet-ops view navigator-settings', 'fleet-ops see navigator-settings'),
             this.createItem('menu.map', 'map', 'settings.map', 'fleet-ops view map-settings', 'fleet-ops see map-settings'),
             this.createItem('menu.payments', 'cash-register', 'settings.payments', 'fleet-ops view payments', 'fleet-ops see payments'),
@@ -210,8 +208,9 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
             this.createItem('menu.routing', 'route', 'settings.routing', 'fleet-ops view routing-settings', 'fleet-ops see routing-settings'),
             this.createItem('menu.orchestrator', 'circle-nodes', 'settings.orchestrator', 'fleet-ops view routing-settings', 'fleet-ops see routing-settings'),
             this.createItem('menu.scheduling', 'calendar-days', 'settings.scheduling', 'fleet-ops view scheduling-settings', 'fleet-ops see scheduling-settings'),
-            this.createItem('menu.custom-fields', 'pen-to-square', 'settings.custom-fields', 'fleet-ops view custom-field', 'fleet-ops see custom-field'),
-            this.createItem('menu.avatars', 'icons', 'settings.avatars', 'fleet-ops view avatar', 'fleet-ops see avatar'),
+            this.createItem('menu.telematics-settings', 'satellite-dish', 'settings.telematics', 'fleet-ops view telematics-settings', 'fleet-ops see telematics-settings'),
+            this.createItem('menu.custom-fields', 'pen-to-square', 'settings.custom-fields', 'fleet-ops list custom-field', 'fleet-ops see custom-field'),
+            this.createItem('menu.avatars', 'icons', 'settings.avatars', 'fleet-ops list avatar', 'fleet-ops see avatar'),
         ]);
     }
 
@@ -265,18 +264,36 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
     }
 
     createBranch({ id, label, icon, route, defaultRoute, requiresVisibleChildren = false, children, keywords = [] }) {
+        const visibleChildren = children.filter((item) => item.visible !== false);
+
         return {
             id,
             label,
             icon,
             route: this.fullRoute(route),
-            defaultRoute: this.fullRoute(defaultRoute),
+            defaultRoute: this.resolveDefaultRoute(this.fullRoute(defaultRoute), visibleChildren),
             requiresVisibleChildren,
-            children: children.filter((item) => item.visible !== false),
+            children: visibleChildren,
             keywords,
         };
     }
 
+    /**
+     * Keep the branch's default route when the user may open it; otherwise fall back to the
+     * first child route they are permitted to open, so clicking the branch does not land on a
+     * route guard that bounces them back out.
+     */
+    resolveDefaultRoute(defaultRoute, children = []) {
+        const permitted = (item) => [item.visiblePermission, item.permission].every((permission) => !permission || this.abilities.can(permission));
+        const defaultChild = children.find((item) => item.route === defaultRoute);
+
+        if (!defaultChild || permitted(defaultChild)) {
+            return defaultRoute;
+        }
+
+        return children.find((item) => item.route && permitted(item))?.route ?? defaultRoute;
+    }
+
     createItem(intl, icon, route, permission, ability, keywords = []) {
         return {
             priority: this.defaultPriorityForRoute(route),
@@ -290,7 +307,7 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
         };
     }
 
-    createHubItem(label, icon, route, _permission, _ability, keywords = []) {
+    createHubItem(label, icon, route, permission, ability, keywords = []) {
         return {
             pinnedFirst: true,
             priority: this.defaultPriorityForRoute(route),
@@ -298,6 +315,8 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
             description: label,
             icon,
             route: this.fullRoute(route),
+            permission,
+            visiblePermission: ability,
             isNavigationHub: true,
             keywords: [label, route, ...keywords].filter(Boolean),
         };
@@ -387,8 +406,9 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
             'settings.routing': 5,
             'settings.orchestrator': 6,
             'settings.scheduling': 7,
-            'settings.custom-fields': 8,
-            'settings.avatars': 9,
+            'settings.telematics': 8,
+            'settings.custom-fields': 9,
+            'settings.avatars': 10,
         };
 
         return priorities[route] ?? 0;

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();